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要素を画像として保存」参照