MediaStream 录像机演示 - 录制并下载 WebM/MP4

主流浏览器通过 MediaRecorder API 原生支持 WebM 格式（VP8/VP9 编码）。Chrome、Edge、Firefox 均支持 WebM 录制。Safari 在较新版本中可能支持 MP4。本工具会自动检测浏览器支持的 MIME 类型，优先提供最佳可用格式。

如果您的浏览器不支持 MP4 直接录制，可以先录制为 WebM，再使用 FFmpeg 或在线转换工具转为 MP4。

画中画模式同时捕获屏幕画面和摄像头画面，通过 HTML Canvas 进行实时合成：屏幕画面作为背景全幅展示，摄像头画面缩放到约 22% 大小并放置在右下角，带有圆角和阴影效果。

合成后的画面通过 canvas.captureStream(30) 生成统一的视频流，再交由 MediaRecorder 录制。此方式确保两个画面在同一视频文件中完美同步。

常见原因：

• 屏幕共享时未勾选"分享音频"：在 Chrome 的屏幕选择对话框中，需要手动勾选"分享音频"复选框才能捕获系统声音。
• 麦克风权限未授予：摄像头录制需要允许浏览器访问麦克风。
• 音频开关未开启：检查控制面板中的"录制音频"开关是否已启用。
• 系统音频不可用：macOS 上捕获系统音频可能需要安装虚拟音频设备（如 BlackHole）。

文件大小取决于比特率、分辨率和录制时长。以中等质量（2.5 Mbps）为例：

• 1 分钟 ≈ 18-20 MB
• 5 分钟 ≈ 90-100 MB
• 10 分钟 ≈ 180-200 MB

录制过程中界面会实时显示预估文件大小。降低质量或分辨率可显著减小文件体积。

MediaRecorder API 在现代浏览器中得到广泛支持：

• Chrome 49+：完整支持 WebM 录制
• Edge 79+：与 Chrome 相同的内核，完整支持
• Firefox 25+：支持 WebM 录制
• Safari 14.1+：支持 MP4 录制，部分版本支持 WebM
• 移动端：Android Chrome 支持良好，iOS Safari 14.1+ 支持

屏幕共享（getDisplayMedia）在移动端的支持较为有限，桌面端体验最佳。

提升画质的技巧：

• 选择"高"或"超清"质量预设，获得更高的视频比特率
• 确保屏幕分辨率足够高（1080p 或以上）
• 使用 VP9 编码（WebM 格式）获得更好的压缩效率
• 保持充足的环境光线（摄像头录制时）
• 关闭不必要的后台应用，减少系统负载

所有录制操作完全在您的浏览器本地进行，视频数据不会上传到任何服务器。录制完成后，视频以 Blob 形式保存在浏览器内存中，您可以通过下载按钮保存到本地磁盘。

关闭页面或重新录制后，之前录制的数据将被清除。整个过程安全、私密，无需网络连接即可使用。

可以！本工具支持暂停/恢复功能。点击暂停按钮后，MediaRecorder 会暂停数据收集，但保持流连接。恢复后继续录制到同一个视频文件中，中间不会有断开或跳帧。这在需要临时中断录制的场景中非常实用。