I'm trying to generate a thumbnail from a video(.mov) but it's showing this error

Error: Error 4; details: DEMUXER_ERROR_NO_SUPPORTED_STREAMS: FFmpegDemuxer: no supported streams

.mp4 and other formats are working well.

chrome version: Version 101.0.4951.67 (Official Build) (64-bit)

Code:

async generateVideoThumbnail(file) {
  console.log('generating thumbnail')
  const binaryData = []
  binaryData.push(file)
  const canvas = document.createElement('canvas')
  const context = canvas.getContext('2d')
  const video = document.createElement('video')
  video.setAttribute('src', URL.createObjectURL(new Blob(binaryData)))
  video.onloadeddata = () => {
    console.log('Yay! The readyState just increased to  ' +
        'HAVE_CURRENT_DATA or greater for the first time.');
  };
  video.loadstart = () => {
    console.error(`load start`);
  }
  video.onwaiting = () => {
    console.log('Video is waiting for more data.');
  };
  video.onprogress = () => {
    console.log("Downloading video");
  };
  video.onerror = () => {
    console.log('video error')
    console.log("Error " + video.error.code + "; details: " + video.error.message);
  }

  console.log(video)
  console.log('video load')
  video.load()
  let thumbnail = await new Promise((resolve) => {
    video.onloadedmetadata = async () => {
      console.log('on load')
      canvas.width = video.videoWidth
      canvas.height = video.videoHeight
      video.currentTime = video.duration / 2
      await video.play()
      context.drawImage(video, 0, 0)
      video.pause()
      const blob = await new Promise((resolve) => {
        return canvas.toBlob(function (blob) {
          resolve(blob)
        })
      })

     resolve(blob)
    }
})

return thumbnail

},