JavaScriptでHTML5のvideoタグをキャプチャして表示する方法

本記事では、HTML5のvideoタグで埋め込んだ動画をJavaScriptでキャプチャして、ついでにPOSTできる形式にデータ化する方法を紹介します。

JavaScriptでHTML5のvideoタグをキャプチャして表示する方法

HTML

HTMLは以下です。

<video id="mov" src="./video.mp4" controls="controls" width="300" height="150"></video>
<button id="capture">キャプチャ</button>
<canvas id="draw"></canvas>

JavaScript

JavaScriptは以下です。

var video = document.getElementById('mov');
var capture = document.getElementById('capture');
var canvas = document.getElementById('draw');

video.onloadedmetadata = function(){ //動画が読み込まれてから処理を開始
    let canvasSizeX = 300; //canvasの幅
    let canvasSizeY = (canvasSizeX*video.videoHeight)/video.videoWidth; //canvasの高さ

    //capture
    capture.addEventListener('click',function(){
        console.log('pushed capture');
        canvas.getContext('2d').drawImage(video, 0, 0, canvasSizeX, canvasSizeY); //videoタグの「今」の状態をcanvasに描写
        console.log(canvas.toDataURL());   //base64でデータ化
    });
}

canvasSizeY・・・実際の動画のアスペクト比を維持したまま、幅を300にした場合の高さを計算

画像が描写されたcanvasは、toDataURL()を使うとbase64のデータを取得できます。