如何录制远程webRTC MediaStream?

时间:2016-03-29 10:59:20

标签: html5 audio webrtc html5-audio audio-streaming

我正在尝试录制远程用户的媒体流。从远程用户传递的Media Stream对象看起来与从getUserMedia生成的本地Media Stream对象非常相似,但是在将其传递到Media Stream可视化器时,没有输出任何内容(如果我传递本地Media Stream,则可视化器具有输出)。我可以听到远程用户的媒体流,所以我知道有些东西正在通过。

远程媒体流看起来像

active: true
id: "Q7aYJkeOt5xhHJ53c3JVhr41scl6QQEib5lt"
onactive: null
onaddtrack: null
onended: ()
oninactive: null
onremovetrack: null
__proto__: MediaStream

并有一个音轨

enabled: true
id: "021f5032-a524-42ae-ad40-bf0798df89cd"
kind: "audio"
label: "021f5032-a524-42ae-ad40-bf0798df89cd"
muted: false
onended: null
onmute: null
onunmute: null
readyState: "live"
remote: true
__proto__: MediaStreamTrack

本地媒体流看起来像

active: true
id: "fP3smf9D78yl9YXV8jZwGPkMNL2UkwrXc2sl"
onactive: null
onaddtrack: null
onended: ()
oninactive: null
onremovetrack: null
__proto__: MediaStream

带有音轨

enabled: true
id: "32da421e-0a35-4fe4-b553-8a3206d244ec"
kind: "audio"
label: "Default"
muted: false
onended: null
onmute: null
onunmute: null
readyState: "live"
remote: false
__proto__: MediaStreamTrack

我能看到的唯一真正的区别是音轨中的遥控标志。

1 个答案:

答案 0 :(得分:1)

自Chrome 48以来支持以下代码:

peer.onaddstream = function(event) {
    var stream = event.stream;

    window.recorder = new MediaRecorder(stream, {
        type: 'video/webm'
    });

    recorder.start(99999999999999999);
};

btnStopRecording.onclick = function() {
    if (!window.recorder) return;
    recorder.ondataavailable = function(event) {
        var blob = event.data;
        console.log(blob.size, blob);
    };
    recorder.stop();
};

跨浏览器实施:https://github.com/streamproc/MediaStreamRecorder