HTML5:捕获从Web浏览器组合的音频和视频

时间:2013-06-10 12:50:10

标签: html5 html5-video html5-audio asp.net-web-api

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

目前为止的演示:

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

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

我认为这是不可能的,但不确定。有人找到了一个技巧来同时捕获网页上的音频和视频同时吗?

2 个答案:

答案 0 :(得分:0)

你想尝试做同样的事情,你应该看看

[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."))
    });
}

答案 1 :(得分:0)

这个实验怎么样?它适用于每晚Chrome和FF。看看回购:https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC

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