OpenCV.jsを使って、ブラウザに表示されている動画をコマ送りします。

OpenCV.jsのインストール

次のコマンドを使用して、OpenCV.jsのバージョン4.3.0をインストールします。OpenCV.jsの使い方については「Getting Started with Videos」を参照します。

C:\Users\ｘｘ>curl https://docs.opencv.org/4.3.0/opencv.js -o opencv.js
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 7890k  100 7890k    0     0  9630k      0 --:--:-- --:--:-- --:--:-- 9633k

コマ送り動画アプリの作成

OpenCVを使って動画をコマ送りするコマ送り動画アプリ「video.html」を作成します。

  • 11行目で動画ファイル「TOPSECRET.mp4」を設定します。
  • 35行目のstartメソッドで、動画ファイル「TOPSECRET.mp4」の再生を開始します。
  • 51行目の一定時間ごとに呼び出されるprocessVideoメソッドで、動画フレームごとの処理を行います。

video.html

<!doctype html>
<html>

<head>
    <title>OpenCV Video Examples - Video</title>
    <link href="app.css" rel="stylesheet">
</head>

<body>
    <h1>OpenCV Video</h1>
    <video id="video" src="TOPSECRET.mp4" muted width="320" height="240"></video>
    <canvas id="canvasOutput" width="320" height="240"></canvas>
    <script async src="opencv.js" type="text/javascript" onload="onCvLoaded();"></script>
    <script>
        function onCvLoaded() {
            console.log('cv', cv);
            cv.onRuntimeInitialized = onReady;
        }
        const video = document.getElementById('video');
        const actionBtn = document.getElementById('actionBtn');
        const FPS = 30;
        let stream;
        let streaming = false;
        function onReady() {
            console.log('ready');
            let src;
            let dst;
            let cap;

            video.controls = true;
            video.addEventListener('play', start);
            video.addEventListener('pause', stop);
            video.addEventListener('ended', stop);

            function start() {
                console.log('playing...');
                streaming = true;
                const width = video.width;
                const height = video.height;
                src = new cv.Mat(height, width, cv.CV_8UC4);
                dst = new cv.Mat(height, width, cv.CV_8UC1);
                cap = new cv.VideoCapture(video);
                setTimeout(processVideo, 0);
            }

            function stop() {
                console.log('paused or ended');
                streaming = false;
            }

            function processVideo() {
                if (!streaming) {
                    src.delete();
                    dst.delete();
                    return;
                }
                const begin = Date.now();
                cap.read(src)
                cv.cvtColor(src, dst, cv.COLOR_RGBA2GRAY);
                cv.imshow('canvasOutput', dst);
                //const delay = 1000 / (FPS * 1) - (Date.now() - begin);
                const delay = 1000 / (1) - (Date.now() - begin);
                setTimeout(processVideo, delay);
            }
        }

    </script>
</body>

</html>

コマ送り動画アプリの実行

「http://localhost//opencvvideo/video.html」をアクセスして、プレーヤーの再生ボタンをクリックします。プレーヤーの横にコマ送りの動画が再生されます。