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形式で扱えるので扱いが楽。今回はあんまり意味ないけど。