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

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