The onStop callback is never called, so there is no way to get the last audio chunk and it's unfortunately lost.
This is because the event listener for handleStop() is removed in stopRecording(), preventing it to be called by the media recorder.

[line 254] mediaRecorder.current.removeEventListener('stop', handleStop);

[verified on Chrome 116 and FF 116]

Would be great to change status when I call pauseRecording(), for example to paused :) I just need it :P

I think move setStatus('stopped'); to line 204, before call onStop(blob);

Citing MDN:

Errors that can be detected immediately are thrown as DOM exceptions. All other errors are reported through error events sent to the MediaRecorder object. You can implement the onerror event handler to respond to these errors.

The former (thrown DOM exceptions) are not currently caught here:

Something like this should fix it:

      mediaRecorder.current.addEventListener('stop', handleStop);
      mediaRecorder.current.addEventListener('error', handleError);
-     mediaRecorder.current.start(timeSlice);
-     setStatus('recording');
-     onStart();
+     try {
+       mediaRecorder.current.start(timeSlice);
+       setStatus('recording');
+       onStart();
+     } catch (error) {
+       handleError({ error });
+     }

In stopRecording all tracks are removed from the stream that is being recorded.
However in case of a custom stream this is not desirable behaviour, because when we want to record that same stream again it fails (on Safari it records but only silence, on Chrome an error is thrown when calling start() on the mediarecorder.current).

I'm not sure how to fix is, I think not taking out the tracks in stopRecording should be enough, when we work on a customStream ?

With the native MediaRecorder api, you can specify a codec for the mimetype with the following syntax: 'audio/mp4; codecs=mp4a.40.2'. This doesn't seem possible in the blobOptions object based on my tests. In Safari, I get the word 'Error' in the UI of the simple html audio element when trying to playback the blob.

Add warning/throw error if custom media stream is invalid?
Current behavior: fails silently and falls back on internal media stream

Thank you for sharing your work, would you consider recording from a custom stream like this DeltaCircuit/react-media-recorder#24

I am creating audio blob using this code

const {
    error,
    status,
    mediaBlob,
    stopRecording,
    getMediaStream,
    startRecording,
    pauseRecording,
    resumeRecording,
  } = useMediaRecorder({
    recordScreen: false,
    blobOptions: { type: 'audio/wav' },
    mediaStreamConstraints: { audio: true },
  });

But when I download the blob after calling method onStop, it downloads a corrupted file.
Although it is audible but it does not contain proper formatting

Anyone plz guide me related to this issue
Thanks

When I set
mediaStreamConstraints: { audio: false, video: true } below listener (inside your hook) is not called and doesn't return blob me
mediaRecorder.current.addEventListener('stop', handleStop);
@wmik Do you know what can cause this?

If I call stopRecording() immediately after the recording starts (more specifically when status === "recording"), I get the following error: TypeError: undefined is not an object (evaluating 'sampleChunk.type')

If I wait maybe 1 or 2 seconds after the recording starts and call stopRecording(), everything works as intended. It seems like there should be another 'status' between 'ready' and 'recording' that could help us identify when it is safe to call stopRecording().

As a workaround, I've created my own isInitializing state which turns true when status === "ready", and then using a setTimeout, turns back to false 2000ms after status === "recording". Then I simply show a loading spinner instead of the stop button when isInitializing === true. I imagine you could just include a property like this (just not using setTimeout) into the actual status property itself.

I am using the 1.5.0-beta.0 version

Tutorial maybe?

Disable recording and cleanup when a component is no longer mounted.

• Implementation
• Testing
• Documentation

Update
How to replicate:

1. Render multiple recording apps on separate routes
2. Visit one app/route
3. Begin recording
4. Navigate to the previous route (<- Back)

Expected behavior: recording should stop
Current behavior: recording continues/media recorder is not reset

Example sandbox

Affected code:

When mediaChunks.current is an empty array, sampleChunk will be undefined and so accessing sampleChunk.type throws an error.

Hi, I made a fix in clearMediaStream. But I don't have permission to send pull request. Can you review @wmik ?

function clearMediaStream() {
    if (mediaStream.current) {
      mediaStream.current.getTracks().forEach((track) => track.stop());
      mediaStream.current = null;
      setStatus("idle"); // clear the status if it is in ready state
    }
  }

Hello! Thanks for your great job!
I'd like to get frequency for each chunk to show visualization of sound from microphone each 2-3 seconds.
I try to do:

let { status, mediaBlob, stopRecording, startRecording } = useMediaRecorder({
    onDataAvailable: async (blob) => {
      const context = new AudioContext();
      const arrayBuffer = await blob.arrayBuffer();
      const audioBuffer = await context.decodeAudioData(arrayBuffer);
      console.log("audioBuffer", audioBuffer);
      await context.close();
    },
    mediaStreamConstraints: { audio: true },
  });

But I get errors:

index.js:1 Uncaught Error: The error you provided does not contain a stack trace.
App.tsx:18 Uncaught (in promise) DOMException: Unable to decode audio data

Best regards!