HTML5：从网络浏览器捕获音频和视频组合

Posted 2023-05-08

【中文标题】HTML5：从网络浏览器捕获音频和视频组合

【英文标题】：HTML5: capture audio AND video combined from web browser

【发布时间】：2013-06-06 03:11:12

【问题描述】：

我看过很多教程和演示，展示了如何使用简单的网页捕获和录制音频和视频。

迄今为止最好的演示：

音频：http://webaudiodemos.appspot.com/AudioRecorder/index.html 视频：http://html5-demos.appspot.com/static/getusermedia/record-user-webm.html

我正在寻找同时捕获和录制两个流。即使它仅适用于特定平台上的特定浏览器，我也很感兴趣。

我认为这是不可能的，但不确定。是否有人发现了一种技巧，可以通过网页同时捕获音频和视频？

【问题讨论】：

您是否设法为此找到了一个好的解决方案？

【参考方案1】：

你也可以尝试做同样的事情，你应该看看

[http://jsfiddle.net/james2doyle/URyLt/]

如果你愿意，请告诉我，谢谢

$("button").click(do_it);

function do_it() 
    var obj = , txt="";
    if (this.id == "video") 
        obj = 
            video: true,
            audio: true
        ;
        txt = "<video>";
     else 
        obj = 
            video: false,
            audio: true
        ;
        txt = "<audio>";
    
    navigator.webkitGetUserMedia(obj, function(stream) 
        $("#result").empty();
        var output = $(txt).appendTo("#result")[0],
            source = window.webkitURL.createObjectURL(stream);
        output.autoplay = true;
        output.src = source;
        console.log(stream);
        window.a = stream; //debug
        $("span#name").html("Camera name: <b>" + stream.videoTracks[0].label + "</b><br>" + "Mic name: <b>" + stream.audioTracks[0].label + "</b>");
    , function(err) 
        console.log(err);
        err.code == 1 && (alert("You can click the button again anytime to enable."))
    );

【参考方案2】：

这个实验怎么样。它每晚在 Chrome 和 FF 中运行。查看回购：https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC

您可以在这里试用现场演示：https://www.webrtc-experiment.com/RecordRTC/php/