即使在录制停止后，Chrome 录制图标也会一直亮着答案

【问题标题】：Chrome recording icon stays on even after recording has stopped即使在录制停止后，Chrome 录制图标也会一直亮着
【发布时间】：2022-01-02 03:30:00
【问题描述】：

我正在使用 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();

但是，即使在我停止录制后，chrome 录制图标也不会消失，如下所示：

// 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，因此是 stream.current

【问题讨论】：

你确定你只调用一次 getUserMedia 吗？
是的，我搜索了整个代码库以确保这是我唯一一次调用 getUserMedia。
而且您还确保这个 sn-p 所在的任何函数都只被调用一次？（您可以在其中添加一个 console.log 并检查有多少消息）
是的，它只被调用一次，只有一条 console.log 消息

标签： reactjs webrtc getusermedia video-recording web-mediarecorder

【解决方案1】：

我认为您只需释放媒体流上的所有引用即可丢失网站上的媒体指示器（因此它被垃圾收集）。 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);
 });

【讨论】：

这在 Chrome 中是否有效（与 Firefox 不同）不会垃圾收集 MediaStreamTracks？
是的。这就是我在电话网络应用程序中的做法。我测试了一点，如果您直接在 chrome 上的开发控制台中测试上述代码，似乎行为会发生变化，如果触发了权限弹出窗口，则指示器未释放，如果授予是自动的，则它可以工作，这是一个奇怪的情况。使用 html 脚本标签中的普通脚本，它似乎在任何情况下都可以工作。我会检查垃圾和媒体流，不知道。
我试过这个：stream.current = null window.stream = null mediaRecorder.current = undefined 但它仍然不会消失
您是否也清理了 mediaRecorder？我更新我的答案

【解决方案2】：

peerConnection.close()，调用该方法会终止RTCPeerConnection的ICE代理，结束所有正在进行的ICE处理和所有活动流。

【讨论】：

但是我从来没有初始化过任何 peerConnection 对象，我可以知道我应该在哪个对象上使用这个 close() 方法吗？