如何录制远程 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

如何录制远程 webRTC MediaStream？

How to record a remote webRTC MediaStream?

html

audio

audio-streaming

html5-audio

webrtc