在 HTML 网页中使用网络摄像头录制带音频的视频答案

【问题标题】：Record Video with Audio using Webcam in HTML Webpage在 HTML 网页中使用网络摄像头录制带音频的视频
【发布时间】：2014-07-02 18:22:39
【问题描述】：

我想知道如何从同时录制音频的网络摄像头录制视频，目前像 getUserMedia 这样的解决方案只录制视频或音频，一次一个，它不录制视频里面有音频。

我需要创建一个网站，允许用户录制实时视频并将其保存在网站中。我尝试使用一些现有的插件，如 navigator.getUserMedia 来录制视频，但录制的视频没有任何音频。

所以我只想知道我需要对 getUserMedia 进行哪些更改，以便它在录制视频的同时也录制音频。

我以前从未这样做过，所以对于某些人来说，这听起来像是一个愚蠢的问题，但我真的需要了解如何使用网络摄像头录制 LIVE VIDEO。

目前我正在使用 navigator.getUserMedia

我在某处看到您无法使用 getUserMedia 同时录制 VIDEO 和 AUDIO，这是真的吗？

我不知道是否还有其他免费的插件可以帮助我录制正确的 LIVE VIDEO。我愿意使用任何其他插件，可能是 jQuery 或 Flash，我只需要知道如何录制正确的 VIDEO。

当我说正确的视频时，我的意思是该视频也应该有音频。

提前谢谢你。

PS:- 我正在使用 PHP、Apache Webserver 进行后端处理。

【问题讨论】：

【解决方案1】：

MediaDevices.getUserMedia() 现在是访问网络摄像头和麦克风的首选方式。 Navigator.getUserMedia() 现在被视为已弃用。

但无论您如何访问网络摄像头，都有 2 种 (HTML) 解决方案可用于记录来自网络摄像头的音频/视频数据：

1) 媒体记录器 API

Chrome (49+) 和 Firefox (30+) 已经支持它一段时间了。音频/视频数据被记录并存储在 Blob JS 对象中。您可以将其作为.webm 下载到您的硬盘或将其发布到网络服务器进行存储。

Media Recorder API 易于实现，但根据浏览器的不同，您最终会在 .webm 容器中使用不同的音频和视频编解码器。 Chrome 支持 VP8,VP9, H.264 + Opus 音频，而 Firefox 支持 VP8 和 Vorbis。

如果您计划跨浏览器/设备支持，您可能需要将视频转换为更广泛支持的.mp4 和AAC 音频和H.264 视频。

这涉及打开与Kurento 或Janus 等媒体服务器的WebRTC 连接并记录流服务器端。

尽管实现起来更加困难（您必须托管、配置和维护媒体服务器）并且存在相同的编解码器/容器问题，但它与 Media Recorder API 相比具有一些优势：

【讨论】：

【解决方案2】：

看看 MediaRecorder API。它使您可以非常轻松地录制视频和音频。请注意，这是非常实验性的。

【讨论】：

MediaRecorder API 现在是 avb。在 Firefox 和 Chrome 中，但它们使用不同的声音编解码器录制 addpipe.com/media-recorder-api-demo