Usando o código abaixo, consigo captar uma imagem da câmera através do browser, mas tendo em conta que pretendo um formato portrait de 4x3 (354x472px). Da forma como as medidas estão indicadas, na captura sai em landscape e no snapshot sai distorcida.
O código:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
</head>
<body>
<video id="video" width="354" height="472" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="354" height="472"></canvas>
<script>
// elementos, configurações, etc...
var video = document.getElementById('video');
// acesso à camera
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
video.src = window.URL.createObjectURL(stream);
video.play();
});
}
// snapshot
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('video');
// trigger
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 354, 472);
});
</script>
</body>
</html>