Chrome录制图标即使在录制停止后仍保持打开状态

Question

我正在使用getUserMedia使用用户浏览器进行录制：

stream.current = await navigator.mediaDevices.getUserMedia({
audio: {
echoCancellation: {exact: true}
},
video: {
width: { ideal: 240 }, height: { ideal: 160 }
}
});
window.stream = stream.current;
let options = {mimeType: 'video/webm;codecs=vp9,opus'};
try {
mediaRecorder.current = new MediaRecorder(window.stream, options);
} catch (e) {
console.error('Exception while creating MediaRecorder:', e);

return;
}
mediaRecorder.current.ondataavailable = (event:BlobEvent) => {
recordedBlobs.current.push(event.data);
uploadRecordedAnswer(recordedBlobs, mutationAddAttemptAnswer)
}
mediaRecorder.current.start();

然而，即使在我停止录制后，铬录制图标也不会消失，如下所示：

// All these does not get rid of the red icon
stream.current!.getTracks().forEach((track:MediaStreamTrack) => track.stop());
console.log(window.stream,window.stream.getTracks())
mediaRecorder.current!.stop()
window.stream.getTracks().forEach((track:MediaStreamTrack) => track.stop());

根据其他帖子，红色图标应该在stream.getTracks((.forEach((track:MediaStreamTrack(=>track.stop(((但它仍然存在。我知道录制已经停止，因为当我检查录制的视频时，它在我点击停止录制后停止，但红色图标仍然没有消失

仅供参考，我正在使用react useRef，因此流。当前

Answer 1

Firefox检测到带有停止的事件，但在Chrome上需要这样：

// activeStream?: MediaStream;
this.activeStream!.getAudioTracks().forEach((track: MediaStreamTrack) => {
track.stop();
this.activeStream!.removeTrack(track);
});

Answer 2

这是因为此录制图标是getUserMedia流的图标，而不是MediaRecorder的图标
stopMediaRecorder时，流仍处于活动状态。

若要停止此gUM流(或任何其他MediaStream(，请调用MediaStreamTrack.stop()。

stream.getTracks() // get all tracks from the MediaStream
.forEach( track => track.stop() ); // stop each of them

Fiddle因为stacksnippets即使使用https也不允许gUM。。。

以及通过MediaRecorder.stream访问流的另一个fiddle。

此线程的答案副本：stackoverflow.com/a/4274928/10676154

Answer 3

peerConnection.close((，调用此方法将终止RTCPeerConnection的ICE代理，从而结束任何正在进行的ICE处理和任何活动流。

Answer 4

我认为你只需要释放媒体流上的所有引用就可以丢失网站上的媒体指示符(所以它是垃圾收集的(。MediaRecorder上还有一个引用。所以windows.stream = undefined应该完成这项工作，记录器也是如此。指示器将在一段时间后消失。例如：

var medias = null;
var rc = null;
navigator.mediaDevices.getUserMedia({audio: true}).then((res)=> {
medias = res
rc = new MediaRecorder(res, {mimeType: 'video/webm;codecs=vp9,opus'});
rc.start();
setTimeout(() => {
console.log("end");
medias = null; // the indicator will disapear.
rc.stop();
rc = null;
}, 5000);
});