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);
