MediaRecorder.stop() doesn't clear the recording icon in the tab

Question

I start and stop a MediaRecorder stream. The red "recording" icon appears in the Chrome tab on start, but doesn't go away on stop.

The icon looks like this:

My code looks like this:

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

I also have a mediaRecorder.onstop handler defined. It doesn't return anything or interfere with the event object.

What's the proper way to clear the "recording" indicator for a tab after starting and stopping a MediaRecorder instance?

Answer 1

This is because this recording icon is the one of getUserMedia streaming, not the one of MediaRecorder.
When you stop the MediaRecorder, the stream is still active.

To stop this gUM stream (or any other MediaStream), you'd call MediaStreamTrack.stop().

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

Fiddle since stacksnippets doesn't allow gUM even with https...

And an other fiddle where the stream is accessed through MediaRecorder.stream.

Answer 2

Stopping the tracks didn't work for me (the blinking icon was still on the tab) but this does:

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

This is an answer to the people still having problems implementing the answers above: you need to use the same stream you used to create the recording to stop it.