2

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>
2
  • as medidas estão trocadas, é 472x354 Commented 10/04/2018 às 18:33
  • @darkangel, estariam trocadas se eu quiser landscape, mas eu quero portrait
    – Groot
    Commented 10/04/2018 às 18:42

1 Resposta 1

1

a webcam só suporta landscape por isso é preciso fazer um crop

<video id="video" width="630" 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() {
    var x = (630 - 354) / 2;
    context.drawImage(video, x, 0, 354, 472, 0, 0, 354, 472);
});
</script>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .