canvas

2024年02月19日
柏拉文
越努力，越幸运
一、认识

二、实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>OpenCV.js</title>
  </head>
  <body>
    <div class="open-cv-container">
      <video controls src="./video001.mp4" muted></video>

      <h3>Canvas 截取视频帧</h3>

      <canvas id="canvasOutput"></canvas>
    </div>

    <script>
      let src;
      let dst;
      let cap;
      const videoWidth = 600;
      const videoHeight = 600;
      const video = document.querySelector('video');
      const outputCanvas = document.getElementById('canvasOutput');
      const outputCanvasContext = outputCanvas.getContext('2d');

      function initDom() {
        video.width = videoWidth;
        video.height = videoHeight;
        outputCanvas.width = videoWidth;
        outputCanvas.height = videoHeight;
      }

      function captureFrame() {
        try {
          if (video.paused || video.ended) {
            return;
          }
          
          outputCanvasContext.drawImage(video, 0, 0, outputCanvas.width, outputCanvas.height);
          requestAnimationFrame(captureFrame);
        } catch (err) {
          console.log('Error processing video frame:', err);
        }
      }

      function startCaptureFrame() {
        requestAnimationFrame(captureFrame);
      }

      initDom();
      video.addEventListener('play', startCaptureFrame);
    </script>
  </body>
</html>
一、认识​

二、实现​

一、认识

二、实现
