如何录制远程webRTC MediaStream？

Question

我正在尝试记录远程用户的媒体流。从远程用户传递的媒体流对象似乎与从getUserMedia生成的本地媒体流对象非常相似，但是将其传递到媒体流可视化器时没有输出任何输出(如果我传递本地媒体流，则可视化程序具有输出)。我可以听到远程用户的媒体流，所以我知道有东西正在传递。

远程媒体流看起来类似于

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