stopRecording doesn't clear the recording icon in the tab

[avastamin]

I used stopRecording to stop 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: https://i.stack.imgur.com/a0kZn.png

[itsjuanmatus]

Setting stopStreamsOnStop: true should work fine

[mathewcst]

Even using stopStreamsOnStop: true isn't working for me. My settings:

const { startRecording, stopRecording } = useReactMediaRecorder({
    audio: true,
    video: false,
    askPermissionOnMount: true,
    stopStreamsOnStop: true,
    blobPropertyBag: {
      type: 'audio/webm',
    },
    onStop: (blobUrl, blob) => {
      updateBlob(blob);
    },
  });

[itsjuanmatus]

This is my code and it works fine:

const { startRecording, stopRecording, mediaBlobUrl, clearBlobUrl, status } =
    useReactMediaRecorder({
      mediaRecorderOptions: {
        mimeType: 'audio/wav', 
      },
      stopStreamsOnStop: true,
    });

[itsjuanmatus]

@mathewcst I did not use the onStop function, and instead used a useEffect and the mediaBlobUrl to update the blob.

useEffect(() => {
    if (mediaBlobUrl) { ... } 
}, [mediaBlobUrl])

[mathewcst]

Fixed. Removing askPermissionOnMount: true gets rid of the icon.

[jgthms]

The icon disappears on Google Chrome, but it doesn't disappear on iOS Safari.

It seems to fully remove the icon on Safari, you need to call:

stream.getAudioTracks()[0].stop();

You can test it out here: https://codepen.io/jgthms/pen/vYrYzJE

What is weird is that it seems that this library is exactly doing this: https://github.com/0x006F/react-media-recorder/blob/c6c8a3522a6c15bb30fdd23f7016171cb5e787db/src/index.ts#L276

But somehow, the recording icon remains visible even after calling stopRecording():

Any ideas?

[jgthms]

Ok I found a workaround: use a custom MediaStream and use it to stop all audio tracks yourself.

// Need to use a ref to keep a reference between re-renders
const myCustomStream = useRef(null);

// When using the react-media-recorder hook, pass the customMediaStream
const {
  status,
  error,
  startRecording,
  stopRecording,
  // etc.
} = useReactMediaRecorder({
  audio: true,
  video: false,
  customMediaStream: myCustomStream.current,
 // etc.
});

// When asking for permission, store the stream that is returned
const handleAskForMicPermissions = useCallback(async () => {
  if (typeof window === "undefined") {
    return;
  }

  myCustomStream.current = navigator.mediaDevices.getUserMedia({
    audio: true,
    video: false,
  });

  // etc.
}, []);

// When stopping the recording, stop all audio tracks
const handleStop = useCallback(async () => {
  stopRecording();
  const stream = await myCustomStream.current;
  stream.getAudioTracks()[0].stop();
}, [stopRecording, myCustomStream]);

Hope this helps!

[jasondainter]

I'm having the above issue on mobile only. @jgthms do you know if the above fix worked on mobile (eg IOS on chrome or safari?)

[amrmagdygamal]

Hi there can any one tell me what to do in the end cauz I'm confused.

[jgthms]

I'm having the above issue on mobile only. @jgthms do you know if the above fix worked on mobile (eg IOS on chrome or safari?)

Sorry, I don't remember, but I think it did.