N_OR’s diary

無職が何か言ってる

videoタグの動画をキャプチャする

ブラウザでvideoタグを利用して再生されている動画のキャプチャをとる。

事前にvideoタグを使って動画が出力される仕掛けを作っているイメージ。

例)

※laravelのbladeを利用しているためtemplateタグから開始。

<template>
<!-- ボタン -->
<input type="button" class="btn-check" id="camera-image-save" autocomplete="off">
<label class="btn btn-outline-primary" for="camera-image-save">撮影</label>

<!-- 映像 -->
<div>
    <video id="my-video" width="400px" height="300px" autoplay muted playsinline></video>
</div>
</template>

<script>

document.getElementById('camera-image-save').onclick = () => {

    // 映像を停止
    const videoElm = document.getElementById('my-video');
    videoElm.pause();

    // canvasを作って画像を貼り付ける
    const canvas = document.createElement('canvas');
    canvas.width = videoElm.width;
    canvas.height = videoElm.height;
    canvas.getContext("2d").drawImage(videoElm, 0, 0, videoElm.width, videoElm.height);

    // 保存
    {
        const a = document.createElement('a');
        //canvasをJPEG変換し、そのBase64文字列をhrefへセット
        //品質は適当
        a.href = canvas.toDataURL('image/jpeg', 0.85);
        //ダウンロード時のファイル名を指定
        a.download = 'download.jpg';
        //クリックイベントを発生させる
        a.click();
    }

    // 再開
    videoElm.play();
};

</script>

余談。 とりあえず画像データの取り回しはBase64にしておけば良い気もしている。 そうするとjson形式で扱えるので扱いが楽。今回はあんまり意味ないけど。