首页 文章

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

提问于
浏览
1

我想知道如何录制来自网络摄像头的视频,该视频也记录音频,目前那里的解决方案就像 getUserMedia 只记录视频或音频,一次一个,它不记录其中有音频的视频 .

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

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

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

现在我正在使用 navigator.getUserMedia

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

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

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

先感谢您 .

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

2 回答

  • 2

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

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

  • 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 .

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

    规格: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

    • 您可以录制长视频而无需担心RAM使用情况

    • 流式传输数据意味着在崩溃的情况下数据不会丢失

相关问题