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!