Segue um código simples para capturar imagem através de WebRTC. O WebRTC (Real Time Comunications) é um protocolo que pode ser utilizado em vários navegadores com exceção do Safari. Também é Web Responsivo para ser utilizado para capturar a imagem da câmera dos celulares e também de notebooks (desktop) além da RaspberiPI. O código roda em HTML5 com Javascript e possui restrições para IOs. A documentação possui uma parte do código mas o código não está completo. Segue o código corrigido e também as referencias da documentação:
Crie um arquivo html com o conteudo abaixo:
<div id="screenshot" style="text-align:center;">
<video class="videostream" autoplay></video>
<img id="screenshot-img">
<p><button class="capture-button">Capture video</button>
<p><button id="screenshot-button" disabled>Take screenshot</button></p>
</div>
<script>
const constraints = {
video: true
};
const captureVideoButton =
document.querySelector('#screenshot .capture-button');
const screenshotButton = document.querySelector('#screenshot-button');
const img = document.querySelector('#screenshot img');
const video = document.querySelector('#screenshot video');
const canvas = document.createElement('canvas');
captureVideoButton.onclick = function() {
navigator.mediaDevices.getUserMedia(constraints).
then(handleSuccess).catch(handleError);
};
screenshotButton.onclick = video.onclick = function() {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext('2d').drawImage(video, 0, 0);
// Other browsers will fall back to image/png
img.src = canvas.toDataURL('image/jpeg');
};
function handleSuccess(stream) {
screenshotButton.disabled = false;
video.srcObject = stream;
}
</script>
Referencias:
Documentação da Google https://developers.google.com/web/fundamentals/media/capturing-images?hl=pt-br
HTML5 Rocks https://www.html5rocks.com/en/tutorials/getusermedia/intro/
Compatibilidade http://iswebrtcreadyyet.com/
