'unable to generate .mov video thumbnail javascript

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

},
javascripthtmlnode.jsvue.jswebc++gccclangpartial-specialization


Solution 1:[1]

I don't think Chrome is able to play mov files. You can check this in the console, by writing something like:

const video = document.createElement('video')
console.log(video.canPlayType('video/mp4'))       //expect 'maybe'
console.log(video.canPlayType('video/ogg'))       //expect 'maybe'
console.log(video.canPlayType('video/quicktime')) //expect ''

Firefox on the other hand seems to be able to play them, you might try your app there.

Solution 2:[2]

This seems to be a problem only when the keyword auto is used as the return type of the function in your above code.

For example, if you don't use auto as the return type of the function a_method and instead use any other type as the return type then the program will compile.

This seems to be a bug in Clang.

Another thing i have noticed is that if you first provide an explicit specialization for the class template, then the code will compile with auto .

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Roman
Solution 2

Related Questions