在 HTML 网页中使用网络摄像头录制视频和音频

Question

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

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

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

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

现在我正在使用navigator.getUserMedia

我在某处读到不能使用 getUserMedia 同时录制视频和音频，这是真的吗？

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

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

先感谢您。

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

Answer 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 具有一些优势：