JavaScript カメラでの撮影結果の取得

html

<video id="player" class="camera" muted playsinline loop autoplay></video>

<button id="capture" class='btn btn-primary camera dontsubmit'>撮影</button>

<canvas id="snapshot" width=200 height=200></canvas>

<img id="myimage" src="">

JavaScript

var player = document.getElementById('player');
var snapshotCanvas = document.getElementById('snapshot');
var captureButton = document.getElementById('capture');

カメラの撮影中動画をplayerに表示
var handleSuccess = function (stream) {
 player.srcObject = stream;
};

captureButton.addEventListener('click', function () {
 
 キャンバス要素へ描画
 var context = snapshot.getContext('2d');
 context.drawImage(player, 0, 0, snapshotCanvas.width,snapshotCanvas.height);

 img要素へ描画
 var base64 = snapshotCanvas.toDataURL('ima

ge/png');
 $('#myimage').attr('src', base64);
});

カメラの撮影結果をhandleSuccess()に渡す
navigator.mediaDevices
 .getUserMedia({video: true})
 .then(handleSuccess);

撮影結果の保存

「JavaScript canvas要素を画像として保存」参照

Follow me!