MediaRecorder.stop() 不会清除选项卡中的录制图标

Question

我启动和停止 MediaRecorder 流。红色“录制”图标会在启动时出现在 Chrome 选项卡中，但在停止时不会消失。

图标如下所示：

我的代码如下所示：

const mediaRecorder = new MediaRecorder(stream);
...
// Recording icon in the tab becomes visible.
mediaRecorder.start();
...
// Recording icon is still visible.
mediaRecorder.stop();

我还定义了一个

mediaRecorder.onstop

处理程序。它不会返回任何内容或干扰事件对象。

启动和停止 MediaRecorder 实例后清除选项卡“录制”指示器的正确方法是什么？

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

访问流。

Answer 2

停止曲目对我来说不起作用（闪烁的图标仍然在选项卡上），但这确实有效：

media_stream.getTracks().forEach(track => {
  track.stop()
  track.enabled = false
})
  const audioContext = new AudioContext()
  audioContext.close
  const microphone = audioContext.createMediaStreamSource(media_stream)
  microphone.disconnect

Answer 3

这是对在实现上述答案时仍然遇到问题的人们的答案：您需要使用用于创建录制的相同流来停止它。