即使录制停止后，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();

但是，即使我停止录制后，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

Answer 1

这是因为这个录音图标是

getUserMedia

流媒体的图标，而不是

MediaRecorder

的图标。
当您

stop

MediaRecorder 时，流仍处于活动状态。

要停止此 gUM 流（或任何其他 MediaStream），您可以调用

MediaStreamTrack.stop()

。

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

Fiddle，因为 stacksnippets 不允许使用 gUM，即使使用 https...

还有一个另一个小提琴，通过

MediaRecorder.stream

访问流。

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

Answer 2

Firefox 检测事件并停止，但在 Chrome 上需要这样做：

 // activeStream?: MediaStream;

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

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);
 });