CODEWITHSUNDEEP
javascriptgoogle-chromeweb-audio-apiweb-mediarecorder
Rick Viscomi
Rick Viscomi

Reputation: 8862

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

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:

enter image description here

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?

Upvotes: 48

Views: 19694

Answers (3)

qoobes
qoobes

Reputation: 68

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.

Upvotes: 0

eleove
eleove

Reputation: 55

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

Upvotes: 0

Kaiido
Kaiido

Reputation: 137084

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.

Upvotes: 96

Related Questions