openCV

2024年02月26日

柏拉文

越努力，越幸运

一、认识

---

二、实现

---

<div class="open-cv-container">
    <video controls src="./video001.mp4" muted></video>

    <h3>OpenCV 截取视频帧</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');

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

    function captureFrame() {
        try {
            if (video.paused || video.ended) {
                return;
            }
            cap.read(src);
            cv.imshow(outputCanvas, src);
            requestAnimationFrame(captureFrame);
        } catch (err) {
            console.log('Error processing video frame:', err);
        }
    }

    function startCaptureFrame() {
        cap = new cv.VideoCapture(video);
        src = new cv.Mat(video.height, video.width, cv.CV_8UC4);
        
        requestAnimationFrame(captureFrame);
    }

    function onOpenCvReady() {
        cv['onRuntimeInitialized'] = () => {
            initDom();
            video.addEventListener('play', startCaptureFrame);
        };
    }
</script>
<script
    async
    src="https://docs.opencv.org/4.5.0/opencv.js"
    onload="onOpenCvReady();"
    type="text/javascript"
></script>