Chrome recording icon stays on even after recording has stopped

Question

I am using getUserMedia to record using the user's browser:

stream.current = await navigator.mediaDevices.getUserMedia({
    audio: {
        echoCancellation: {exact: true}
    },
    video: {
        width: { ideal: 240 }, height: { ideal: 160 }
    }
});

window.stream = stream.current;

let options = {mimeType: 'video/webm;codecs=vp9,opus'};
try {
    mediaRecorder.current = new MediaRecorder(window.stream, options);
} catch (e) {
    console.error('Exception while creating MediaRecorder:', e);
    
    return;
}

mediaRecorder.current.ondataavailable = (event:BlobEvent) => {
    recordedBlobs.current.push(event.data);
    uploadRecordedAnswer(recordedBlobs, mutationAddAttemptAnswer)
}

mediaRecorder.current.start();

However, the chrome recording icon does not go away even after I have stopped the recording, like this:

// All these does not get rid of the red icon
stream.current!.getTracks().forEach((track:MediaStreamTrack) => track.stop());
console.log(window.stream,window.stream.getTracks())
mediaRecorder.current!.stop()

window.stream.getTracks().forEach((track:MediaStreamTrack) => track.stop());

According to other posts the red icon should disappear after stream.getTracks().forEach((track:MediaStreamTrack) => track.stop()); but it still stays there for me. I know that the recording has already stopped because when I check the recorded video it stops after I click stop-recording, but the red icon still does not disappear

FYI I am using react useRef hence the stream.current

Yes I searched the entire code base to make sure that was the only time I called getUserMedia. — Ming Kang Siow, Nov 25 '21 at 14:33
And you also made sure that whatever function this snippet is in, only gets called once? (You could add a console.log in there and check how many messages there are) — Kaiido, Nov 25 '21 at 15:44
Yep it is only called once, there is only one console.log message — Ming Kang Siow, Nov 28 '21 at 03:10

score 1 · Answer 1 · answered Aug 29 '23 at 09:04

1

Firefox detect event with stop but on Chrome required this :

 // activeStream?: MediaStream;

 this.activeStream!.getAudioTracks().forEach((track: MediaStreamTrack) => {
        track.stop();
        this.activeStream!.removeTrack(track);
      });

answered Aug 29 '23 at 09:04

Yoann ROCHE

63
6

score 0 · Answer 2 · answered Jul 31 '23 at 01:06

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.

Copy of this answer for this thread: stackoverflow.com/a/44274928/10676154

score -1 · Answer 3 · answered Nov 26 '21 at 09:25

-1

peerConnection.close(),Calling this method terminates the RTCPeerConnection's ICE agent, ending any ongoing ICE processing and any active streams.

answered Nov 26 '21 at 09:25

周琪侠

9
2

But I have never initialised any peerConnection object though, may I know which objectis it thhat I should use this close() method on? – Ming Kang Siow Nov 28 '21 at 03:14

Pierre Noyelle · Answer 4 · 2021-12-03T11:02:24.223

-1

I thinks you just have to release all the reference on the media stream to lose the media indicator on a website, (so it is garbage collected). The MediaRecorder also hold a reference on it. So a windows.stream = undefined should do the work, same for the Recorder. The indicator will disapear some time after. Ex:


var medias = null;
var rc = null;
navigator.mediaDevices.getUserMedia({audio: true}).then((res)=> {
  medias = res
  rc = new MediaRecorder(res, {mimeType: 'video/webm;codecs=vp9,opus'});
  rc.start();
  setTimeout(() => {
        console.log("end");
        medias = null; // the indicator will disapear.
        rc.stop();
        rc = null;
      }, 5000);
 });

edited Dec 03 '21 at 11:02

answered Nov 29 '21 at 17:58

Pierre Noyelle

478
3
8

Does that work in Chrome which (unlike Firefox) won't garbage-collect MediaStreamTracks? – Philipp Hancke Nov 29 '21 at 21:01
1

it work yes. That's how i do in my telephony webapp. I tested a little more , it seems that the behaviour change if you test the above code directly in the dev console on chrome, if the permissions popup was triggered the indicator is not released , if the grant is automatic it work , a strange case. With a normal script in a html script tag it seems to work in any case. I will check about garbage and media stream , was not aware of that. – Pierre Noyelle Nov 30 '21 at 11:01
I tried this: stream.current = null window.stream = null mediaRecorder.current = undefined but it still won't go away though – Ming Kang Siow Dec 02 '21 at 03:50
did you also clean the mediaRecorder? I update my answer – Pierre Noyelle Dec 03 '21 at 11:01
1

This didn't work. The right answer is here: https://stackoverflow.com/a/44274928/10676154 – yiddishe-kop Aug 15 '22 at 09:42

Chrome recording icon stays on even after recording has stopped

4 Answers4