html - 如何录制远程webRTC MediaStream？

Question

我正在尝试记录远程用户的媒体流。从远程用户传递的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

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

Answer 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