捕获WebRTC视频流的方法（客户端）

Question

我目前正在寻找一种最佳方法来存储即时通讯的视频流。我使用webrtc（通过chrome）参加视频通话，并希望记录每个参与者的每个传入视频流到浏览器中。我正在研究的解决方案有：

• 拦截网络数据包，例如使用Whireshark，然后进行解码。遵循这篇文章：https://webrtchacks.com/video_replay/

• 修改浏览器以将录制存储为文件，例如通过修改Chromium本身

由于资源限制，任何屏幕录制或使用xvfb和ffmpeg等解决方案都不可行。是否有其他方法可以让我捕获数据包或将编码视频作为文件？该解决方案必须在Linux上运行。

- Mr White

Answer 1

如果您想要媒体流，一种方法是覆盖浏览器的PeerConnection。以下是一个示例：

在扩展清单中添加以下内容脚本：

content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["payload/inject.js"],
      "all_frames": true,
      "match_about_blank": true,
      "run_at": "document_start"
    }
]

inject.js

var inject = '('+function() { 
    //overide the browser's default RTCPeerConnection. 
    var origPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
    //make sure it is supported
    if (origPeerConnection) {

        //our own RTCPeerConnection
        var newPeerConnection = function(config, constraints) {
            console.log('PeerConnection created with config', config);
            //proxy the orginal peer connection
            var pc = new origPeerConnection(config, constraints);
            //store the old addStream
            var oldAddStream = pc.addStream;

            //addStream is called when a local stream is added. 
            //arguments[0] is a local media stream
            pc.addStream = function() {
                console.log("our add stream called!")
                //our mediaStream object
                console.dir(arguments[0])
                return oldAddStream.apply(this, arguments);
            }

            //ontrack is called when a remote track is added.
            //the media stream(s) are located in event.streams
            pc.ontrack = function(event) {
                console.log("ontrack got a track")
                console.dir(event);
            }

            window.ourPC = pc;

            return pc; 
        };

    ['RTCPeerConnection', 'webkitRTCPeerConnection', 'mozRTCPeerConnection'].forEach(function(obj) {
        // Override objects if they exist in the window object
        if (window.hasOwnProperty(obj)) {
            window[obj] = newPeerConnection;
            // Copy the static methods
            Object.keys(origPeerConnection).forEach(function(x){
                window[obj][x] = origPeerConnection[x];
            })
            window[obj].prototype = origPeerConnection.prototype;
        }
    });
  }

}+')();';
var script = document.createElement('script');
script.textContent = inject;
(document.head||document.documentElement).appendChild(script);
script.parentNode.removeChild(script);

我在谷歌Hangouts上进行语音通话测试，发现通过pc.addStream添加了两个媒体流，通过pc.ontrack添加了一个轨道。addStream似乎是本地媒体流，ontrack中的事件对象是RTCTrackEvent，其中包含一个streams对象。我认为这就是您要寻找的内容。

要从扩展程序的内容脚本中访问这些流，您需要创建音频元素并将“srcObject”属性设置为媒体流：例如：

pc.ontrack = function(event) {

    //check if our element exists
    var elm = document.getElementById("remoteStream");
    if(elm == null) {
        //create an audio element
        elm = document.createElement("audio");
        elm.id = "remoteStream";

    }

    //set the srcObject to our stream. not sure if you need to clone it
    elm.srcObject = event.streams[0].clone();
    //write the elment to the body
    document.body.appendChild(elm);

    //fire a custom event so our content script knows the stream is available.
    // you could pass the id in the "detail" object. for example:
    //CustomEvent("remoteStreamAdded", {"detail":{"id":"audio_element_id"}})
    //then access if via e.detail.id in your event listener.
    var e = CustomEvent("remoteStreamAdded");
    window.dispatchEvent(e);

}

然后在您的内容脚本中，您可以这样监听该事件/访问mediastream：

window.addEventListener("remoteStreamAdded", function(e) {
    elm = document.getElementById("remoteStream");
    var stream = elm.captureStream();
})

通过可用的捕获流，您的内容脚本可以对其进行几乎任何操作。例如，MediaRecorder非常适合记录流，或者您可以使用peer.js或binary.js之类的工具将其流式传输到另一个源。

我没有测试过，但也应该可以覆盖本地流。例如，在inject.js中，您可以建立一些空白mediastream，覆盖navigator.mediaDevices.getUserMedia，并返回自己的mediastream而不是本地的mediastream。

这种方法在Firefox和其他一些浏览器中应该也能够工作，假设您使用扩展程序/应用程序在文档开头加载inject.js脚本。它被加载在目标库之前是使此方法生效的关键。

编辑以获取更多详细信息

编辑以获取更多更详细的信息

- NomadCrypto

---

这个答案仍然相关吗？我在Google Meet中尝试了你的inject.js方法，但newPeerConnection函数没有被调用。 - Aurasphere

@nomadcrypto 非常感谢您的回答。如果您在Github或其他地方有更多的代码，能否分享一下？ - Just Shadow

@nomadcrypt，你能提供一下更新吗？现在大多数使用的方法都已经过时了。 - iwaduarte

Answer 2

捕获数据包只会给你网络数据包，然后你需要将其转换为帧并放入容器中。像Janus这样的服务器可以记录视频。

运行无头 Chrome 并使用 JavaScript MediaRecorder API 是另一种选择，但对资源的要求更高。

- Philipp Hancke

---

据我所了解，Janus的功能需要对webrtc服务器进行控制。我想作为外部视频通话的参与者记录通话，而不需要对服务器进行任何控制。是否有一种方法可以将我的本地流量代理到我的浏览器实例中的Janus？ - Mr White

如果您有一个浏览器实例，请使用MediaRecorder API。有关示例，请参见此处。您需要使用Chrome的tabcapture来捕获标签，并为本地和远程参与者添加音频。 - Philipp Hancke