获取视频内画面

16 阅读1分钟
<html>
  <head></head>
  <body>
    <input type='file' />
    <script src='./index.js' type='module'></script>
  </body>
</html>

const input = document.querySelector('input[type=file]');

input.onchange = async(e) =>{
  const file = e.target.files[0];
  const result = await getCaptureFrame(file,8);
  console.log(' %c👧👧param:"result"; lines:"7"::', 'color:#97c262;', result)
}
const getCaptureFrame = (file,time) =>{
  return new Promise((resolve, reject) => {
    const video = document.createElement('video');
    video.currentTime = time;
    video.muted = true;
    video.autoplay = true;  
    video.src = URL.createObjectURL(file);
    video.oncanplay = () => {
      const canvas = document.createElement('canvas');
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      const cts = canvas.getContext('2d')
      cts.drawImage(video, 0, 0, canvas.width, canvas.height);
      canvas.toBlob((blob) => {
        const url = URL.createObjectURL(blob);
        resolve({
          url,
          blob
        });
      });
    }
  
  })
}