Duration is Infinity

[Gorasumen]

Hello,

I'm using this great project for creating resources. And I met a little problem, when i try to get the duration of the resource with ref.current.getDuration(), I get "Infinity", only when the video is not played.

So I can fix the problem if I put autoPlay on the component, but that's not the behavior I want. I saw this issue, that explain to do a timer myself, but is there not another way, or maybe I'm just missing something.

An other thing that i'm trying to fix, is the timeline of the video, when video is loading/buffering, timeline is at maximum, like 1sec/1sec even though, the video is 30 sec long. The timeline is good only when video is fully load, maybe I should wait the loading with a function. I did a record of the timeline to show the problem :

https://user-images.githubusercontent.com/10496310/157260238-feaee594-5d80-4c27-9010-ce7dcfd0c720.mp4

.

[tirenucci]

Up ?

[no-1ne]

If the video is webm this can help https://github.com/yusitnikov/fix-webm-duration, since you are using mp4 may be something similar may exist

[hxc-gxc]

Up ?

[Colhodm]

Up

[tap2k]

You can get the duration of the mp4 using the methods above but how do you set the blob metadata correctly?

[AbdallahAmmar96]

You can solve this issue by recording audio with type audio ( wav ) and get the duration

when you use the hook useReactMediaRecorder there is an option called mediaRecorderOptions and add the mimeType "audio/wav"

const {
    status,
    startRecording,
    stopRecording,
    mediaBlobUrl,
    pauseRecording,
    resumeRecording,
    clearBlobUrl,
    previewAudioStream,
  } = useReactMediaRecorder({
    video: false,
    audio: true,
    mediaRecorderOptions: { mimeType: "audio/wav" },
  });

Then if you get the duration it will be correct

For example

if (mediaBlobUrl) {
      fetch(mediaBlobUrl)
        .then((res) => res.blob())
        .then((blob) => {
          const file = new File([blob], `test.wav`, {
            type: "audio/wav",
            lastModified: Date.now(),
          });

          const audio = new Audio();
          audio.src = URL.createObjectURL(file);

          audio.addEventListener("loadedmetadata", function () {
            console.log(audio.duration);
          });

          clearBlobUrl();
        
        });
    }
}