无需登录 数据私有 本地保存

MediaRecorder API 多媒体录制 - 摄像头+音频捕获

多媒体 开发工具 MediaRecorder 录制 演示
8
0
0
0
点击下方按钮开启摄像头预览
准备就绪 - 请先开启预览
快捷键：Space 开始/停止  P 暂停/恢复
常见问题与知识点

桌面端：Chrome 49+、Firefox 25+、Edge 79+、Opera 36+ 均完全支持。
移动端：Android Chrome 49+、Android Firefox 25+、iOS Safari 14.5+（需注意iOS上部分功能受限）。
注意：Safari 桌面版从14.1版本开始支持，但早期版本可能存在兼容性问题。推荐使用最新版浏览器以获得最佳体验。

getUserMedia API 被浏览器标记为安全上下文（Secure Context）API，必须在 HTTPS 或 localhost 环境下才能调用。这是为了防止恶意网站未经授权访问您的摄像头和麦克风。如果您在本地开发，使用 http://localhost 即可正常使用。

MediaRecorder 默认输出 WebM 格式（Chrome/Edge/Firefox），Safari 则输出 MP4 格式。WebM 使用 VP8/VP9 视频编码和 Opus 音频编码，具有开源、高压缩率的优势。您可以通过质量选项调整比特率来控制文件大小和画质平衡。如需转换为其他格式（如MP4），可使用 FFmpeg 或在线转换工具。

文件大小取决于比特率 × 时长。以本工具的设置为例：
• 低质量（约500kbps）：1分钟 ≈ 3.75 MB
• 中等质量（约1.5Mbps）：1分钟 ≈ 11.25 MB
• 高质量（约4Mbps）：1分钟 ≈ 30 MB
实际大小还受视频内容复杂度影响（动态场景需要更多数据）。录制过程中可实时看到文件大小增长。

• iOS Safari 14.5+ 才支持 MediaRecorder，且部分旧设备可能性能不足。
• 录制高分辨率视频时手机会发热，建议使用中等质量。
• 前置摄像头默认开启镜像模式，更符合自拍习惯。
• 长时间录制建议连接电源，避免电量消耗过快。
• Android 设备请在系统设置中授予浏览器摄像头和麦克风权限。

请检查以下事项：
1. 确认设备已正确连接（USB摄像头/耳机麦克风等）。
2. 操作系统隐私设置中是否允许浏览器访问摄像头和麦克风。
3. 点击"刷新设备列表"按钮重新检测。
4. 尝试关闭其他占用摄像头/麦克风的应用程序（如视频会议软件）。
5. 如果仍无法检测，可尝试重启浏览器。

预览仅在本地显示摄像头画面，不保存任何数据。
录制将音视频数据实时编码并保存到内存中，停止后可下载。
暂停功能允许您临时停止数据采集（摄像头画面仍在预览），点击恢复后继续录制到同一个文件中。这在需要分段录制但希望输出单个文件时非常有用。注意：暂停期间计时器也会暂停。

MediaRecorder 是浏览器原生API，无需安装任何插件或软件，直接在网页中实现录制功能。它的优势在于便捷、跨平台、隐私安全（数据在本地处理）。但缺点是格式支持有限（主要为WebM），且无法录制系统音频或浏览器外的内容。对于专业级录制需求，OBS Studio 等桌面软件功能更强大。
🔧 相关工具