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

时间:2014-07-02 18:22:40

标签: jquery html5 flash video-capture getusermedia

我想知道如何录制来自网络摄像头的视频,该视频也会录制音频,目前解决方案就像 getUserMedia 仅录制视频或音频,一次一个,它不录制视频有声音。

我需要创建一个网站,允许用户通过RECORD LIVE VIDEO将其保存在网站上。我尝试使用一些现有的插件,如 navigator.getUserMedia 来录制视频,但录制的视频没有任何音频。

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

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

目前我正在使用 navigator.getUserMedia

我在某处读到你无法录制VIDEO& AUDIO同时使用getUserMedia,这是真的吗?

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

当我说出合适的视频时,我的意思是该视频也应该有音频。

提前谢谢。

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

2 个答案:

答案 0 :(得分:2)

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

https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder

答案 1 :(得分:1)

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

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

1)Media Recorder API

目前,Chrome(49+)和Firefox(30+)都支持它。音频/视频数据被记录并存储在Blob JS对象中。您可以将其作为.webm下载到硬盘或将其发布到Web服务器进行存储。

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

如果您计划跨浏览器/设备支持,则可能必须将视频转换为支持范围更广的.mp4 AAC音频和H.264视频。

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

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

2)记录WebRTC流

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

尽管实施起来比较困难(你必须托管,配置和维护媒体服务器)并且具有相同的编解码器/容器问题,但它比Media Recorder API有一些优势:

  • WebRTC支持将来到Edge和even Safari
  • 您可以录制长视频而无需担心内存使用情况
  • 流式传输数据意味着在崩溃的情况下数据不会丢失