多个远程对等连接后如何关闭mediastream

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个以上的对等连接使用了MediaStream，则MediaStream将变为空，但浏览器上的摄像头指示灯和摄像头指示灯均保持亮起。

我错过了什么？

Answer 1

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

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

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

同样，在getUserMedia返回的第一个Promise得到解析之前，您的设备实际上会有多个不同的MediaStreams。

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

这是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());
}
}

实例