40

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?

Rick Viscomi
  • 8,180
  • 4
  • 35
  • 50

2 Answers2

80

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.

Kaiido
  • 123,334
  • 13
  • 219
  • 285
  • 4
    I tried this code but red icon still visible. Any idea? – Harsh Patel Jan 22 '19 at 07:40
  • @HarshPatel you may have to wait a few seconds for the icon to disappear. If it is still there, it means that you have an other MediaStream still running. – Kaiido Jan 22 '19 at 07:42
  • in any case if some other MediaStream running then Is there anyway to stop all the MediaStream? Yes I wait for some times but function gets executed and still red icon appears as it is – Harsh Patel Jan 22 '19 at 07:45
  • @HarshPatel I extanded my comment on [your question](https://stackoverflow.com/questions/54303029/remove-audio-recording-icon-from-tab). – Kaiido Jan 22 '19 at 07:48
  • I still didn't get the way to remove that icon. Can you help me in this? I am using this [Library](https://github.com/TalAter/annyang) , I guess it is using web speech API – Harsh Patel Jan 22 '19 at 09:38
  • Have you succeed to remove the icon? – Webwoman Feb 06 '19 at 18:53
  • This answer _should_ be correct, however, I'm fairly confident there is a bug in Chrome where the icon does get stuck after all recording indeed stops (although I couldn't find anything that would verify this). It seems the recording icon gets stuck if the input MediaStream is left running for longer than some arbitrary random duration. If I stop the MediaStream no longer than a few seconds after starting it, the icon almost always disappears, and it has an increasingly higher chance of getting stuck the longer the MediaStream is left running. – John Weisz Dec 08 '19 at 22:41
  • I wonder if it's a security feature because in my usage I notice that If I keep the recording on for few minutes and then stop, the icon goes away immediately. However, if I record for only a few seconds and then stop, the icon lingers for a bit. Maybe this is a security feature to prevent websites from trying to be sneaky with short camera captures – Dave Patrick Feb 08 '20 at 00:53
  • This fixed the issue for me, on the latest Chromium and Firefox. – Will59 Oct 09 '20 at 16:39
  • This solution worked for me, but somehow the success callback of `getUserMedia` is called twice and therefore two instances of `MediaRecorder` were created in my case out of the stream. So I had to push them into an array and when stopping the current one in use, then iterating over the array and stop the tracks of both streams with the help of the answer. After that the icon was cleared. Hope this saves someone some hours of time – ronatory Mar 27 '21 at 19:58
  • @ronatory if I may, you should probably rather find why you have two calls being made. Requesting two mediastreams simultaneously is calling for issues later (e.g if you want to apply different constraints after the request), and starting two MediaRecorders recording the same thing is just wasting CPU and memory. – Kaiido Mar 28 '21 at 01:41
  • @Kaiido Thank you so much for pointing out looking again why two calls were being made. I had indeed issues because of implementing features like resume/pause, so I looked again at my code. In the end when I started recording I called [getUserMedia()](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) two times. Once in an if statement and second when I wanted to access the stream via the success callback. See next comment. – ronatory Apr 01 '21 at 10:26
  • `if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { navigator.mediaDevices.getUserMedia({audio: true}).then(function (stream) { // do whatever you want with the stream })}` I removed the call in the if statement and now only one call is being made which makes totally sense. – ronatory Apr 01 '21 at 10:27
0

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
eleove
  • 43
  • 6