Open avastamin opened 2 years ago
Setting stopStreamsOnStop: true
should work fine
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);
},
});
This is my code and it works fine:
const { startRecording, stopRecording, mediaBlobUrl, clearBlobUrl, status } =
useReactMediaRecorder({
mediaRecorderOptions: {
mimeType: 'audio/wav',
},
stopStreamsOnStop: true,
});
@mathewcst I did not use the onStop
function, and instead used a useEffect
and the mediaBlobUrl
to update the blob.
useEffect(() => {
if (mediaBlobUrl) { ... }
}, [mediaBlobUrl])
Fixed. Removing askPermissionOnMount: true
gets rid of the icon.
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?
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!
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?)
Hi there can any one tell me what to do in the end cauz I'm confused.
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.
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