Código WebRTC para Captura de Imagem via WebCam

 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/