First blob comes as text / html. Expected audio/webm

I’m recording and generating the blobUrl, to store I’m turning it into a file, but halfway through I realized that the blob is coming as text / html.

This is my handle code:

 const handleBlob = async () => { 
    let blob = await fetch(mediaBlobUrl).then(r => r.blob());
    console.log("[REC BLOB URL]", blob)

    let fileBlob = new File([blob], new Date().toISOString()+"_recording.webm" ,{ type: "audio/webm" })
    
    return fileBlob
}

The first thing that the “REC BLOB URL” return is this:

And render this:

If i take that file link, for some reason what comes is a video.

Also, when I try to record another audio, the result is an audio / webm, however with the content of the previous audio.

That is, if I record a 10s audio for the first time (when a text / html is returned), when I record again what comes is this 10s audio (regardless of how long I recorded). And it remains. Audios always come late, always with the content of the previously recorded.

Why does it happen? OBS: Im using redux and socket to send this to a chat.

[oberdan-dev]

Hello, use onStop callback as below:

  const blobToFile = (theBlob: Blob, fileName: string): File => {
    return new File([theBlob as Blob], fileName, {
      lastModified: new Date().getTime(),
      type: theBlob.type,
    });
  };

  const { status, startRecording, stopRecording, clearBlobUrl } =
    useReactMediaRecorder({
      audio: true,
      stopStreamsOnStop: true,
      blobPropertyBag: {
        type: "audio/webm",
      },
      onStop: async (blobUrl, blob) => {
        const file = blobToFile(blob, "audio.webm");
        console.log(file);
        clearBlobUrl();
      },
 });

[Guuri11]

Finally I could fix it! onStop callback worked for me. My guess for the blob coming as text/html is because doing the fetch when the blob is not created yet, check the value of blobUrl before the fetch.