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.