JavaScript カメラからの動画から静止画をキャプチャする
JavaScript デバイスのカメラから動画を撮影するでパソコンのカメラから撮影した動画をhtmlページに表示する方法を紹介しました、
今回は、カメラからの動画から静止画をキャプチャする方法を紹介します。
動画はJavaScript デバイスのカメラから動画を撮影するの手順で撮影しているものとします。
まずはキャプチャした画像を表示するコントロールを追加します。
<video id="video" width="640" height="480" autoplay></video>
<canvas id="canvas" width="640" height="480"></canvas>キャプチャの処理を実装します。canvasのdrawImageでvideoコントロールをそのまま引数に指定すれば、この処理を実行した瞬間の画像がcanvasに表示されます。
const videoElement = document.getElementById('video');
document.getElementById('canvas')
.getContext('2d')
.drawImage(videoElement, 0, 0, videoElement.width, videoElement.height);