WebSketch | Aceder à Câmara do Utilizador

Para poder aceder à câmara (microfone, e/ou ecrã) do utilizador usa-se a navigator.getUserMedia API. Note-se que por questões de segurança, esta API só funciona através do protocolo HTTPS, e se o utilizador der autorização para captar imagem (para poder testar localmente ler este artigo).

Aceder à Câmara do Utilizador

<script>
  var ctx, canvas, video;

  function setup() {
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    video = document.getElementById("video");

    var errBack = function(error) {
      console.log("Video capture error: ", error.code); 
    };

    navigator.getUserMedia = navigator.getUserMedia ||
                             navigator.webkitGetUserMedia ||
                             navigator.mozGetUserMedia ||
                             navigator.msGetUserMedia;


    if (navigator.getUserMedia) {
      navigator.getUserMedia({ "video": true }, function(stream) {
      	video.src = window.URL.createObjectURL(stream);
      }, errBack);
    } 
  }

  function snap(){
  	ctx.drawImage(video, 0, 0, 640, 480);
  }
</script>
...
<body onload="setup()">
	<video id="video" width="640" height="480" autoplay></video>
	<button id="snapBtn" onclick="snap()">Snap Photo</button>
	<canvas id="canvas" width="640" height="480"></canvas>
</body>

No início, colocaram-se as definições do costume, em que se acrescentou a do video, que corresponde ao elemento video em que aparecerá o que se vê através da câmara do utilizador. Também definiu-se a função errBack para lidar com erros que apareçam ao aceder à câmara do utilizador, ou caso o utilizador rejeite a ligação.

Conforme o browser, a função getUserMedia pode não estar disponível (nos browsers mais antigos) ou ter nome diferente, para resolver esse problema:

navigator.getUserMedia = navigator.getUserMedia ||
	          navigator.webkitGetUserMedia ||
	          navigator.mozGetUserMedia ||
	          navigator.msGetUserMedia;

if (navigator.getUserMedia) {
	// Pode-se avançar
} else {
	alert('getUserMedia() is not supported in your browser');
}

Se se poder avançar, indica-se a componente a aceder, neste caso só ao à câmara, i.e. ao video: { "video": true }, e ligamos a stream da câmara do utilizador como fonte (source) do elemento video anterior:

navigator.getUserMedia({ "video": true }, function(stream) {
				video.src = window.URL.createObjectURL(stream);
			}, errBack);

Note-se que na definição do elemento video, colocou-se como pré-definição “autoplay”, para começar assim que tenha imagem.

Tirar uma Fotografia

Para tirar uma fotografia, criou-se um botão para disparar cujo handler utiliza a funcção drawImage() para exibir um _frame_ do video` para o canvas:

function snap(){
	ctx.drawImage(video, 0, 0, 640, 480);
}

<button id="snapBtn" onclick="snap()">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>