jquery - 在 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 下载到硬盘或将其 POST 到 Web 服务器进行存储。

Media Recorder API 实现起来很简单，但根据浏览器的不同，您最终会在 .webm 容器中得到不同的音频和视频编解码器。 Chrome 支持 VP8、VP9、H.264 + Opus 音频，而 Firefox 支持 VP8和Vorbis。

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

规范:https://w3c.github.io/mediacapture-record/MediaRecorder.html

演示+编解码器:https://addpipe.com/media-recorder-api-demo/

2) 录制WebRTC流

这涉及打开与媒体服务器的 WebRTC 连接，例如 Kurento或Janus并录制流服务器端。

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

• Edge 和 even Safari 将支持 WebRTC
• 您可以录制长视频，而无需担心 RAM 使用情况
• 流式传输数据意味着即使发生崩溃，数据也不会丢失