连接多个远程对等点后如何关闭媒体流？

Question

我正在创建多个 webrtc 对等连接并使用

创建单个媒体流

if (mediaStream == undefined) {
            navigator.mediaDevices.getUserMedia({
                audio: true,
                video: true
            }).then(function (stream) {
                mediaStream = stream;
                mediaStream.getTracks().forEach(function (track) {
                    rtcPeerConns[userName].addTrack(track, mediaStream);
                });
            }).catch(function (err) {
                console.log("get user media " + err.name + ": " + err.message);
            });
        } else {
            console.log("using the existing local stream");
            mediaStream.getTracks().forEach(function (track) {
                rtcPeerConns[userName].addTrack(track, mediaStream);
            });
        }

在最后一个对等连接关闭之前一切正常，我想关闭媒体流。

if (mediaStream != undefined) {
        if (mediaStream.active) {
            mediaStream.getTracks().forEach(function (track) {
                track.stop();
            });
            mediaStream = null;
        }
    }

如果只使用了 1 个对等连接，那么一切都会按计划关闭。如果超过 1 个对等连接使用了 MediaStream，则 MediaStream 变为 null ，但浏览器上的摄像头指示灯和摄像头灯都亮着。

我错过了什么？

Answer 1

这有点猜测，但似乎是最可能的原因，所以虽然有更多代码会有所帮助...

如果你确实输入了第一个代码块

if (mediaStream == undefined) {
    navigator.mediaDevices.getUserMedia({
      ...

再次在getUserMedia 返回的第一个 Promise 得到解决之前，您实际上将有多个不同的 MediaStreams 来自您的设备。

全局变量 mediaStream 将仅表示从 getUserMedia 获得的最后一个 MediaStream，而之前的所有变量虽然无法通过您的代码访问，但仍会锁定您的设备。

Here is an MCVE

换句话说，您需要重构您的代码。

您需要更好地跟踪何时发出获取 MediaStream 的请求，因此为了减少对代码的更改，我建议您实际存储由 getUserMedia 返回的 Promise [而不是/ 连同] 存储 MediaStream。

这样，下一次调用只需then() 这个 Promise，就可以访问同一个 MediaStream。

// outer scope
var stream_request = null;
// [...]
function requestStream() {
  if(!stream_request) {
    stream_request =  navigator.mediaDevices.getUserMedia(options);
  }
  return stream_request
       .then(doSomethingWithTheMediaStream);
}

// and to kill it
function kill_stream() {
  return stream_request.then(stream => {
    stream.getTracks().forEach(t => t.stop());
  }
}

live example