navigator.getUserMedia

Pede a permissão do usuário para utilizar um dispositivo multimídia, como uma câmera ou um microfone. Se o usuário der permissão, a callbackSucesso é chamada na aplicação que originou o pedido, recebendo um objeto LocalMediaStream como argumento.

Sintaxe

navigator.getUserMedia ( permissoes, callbackSucesso, callbackErro );

Exemplo

Este é um exemplo de uso da função getUserMedia() com prefixos específicos dos navegadores.

navigator.getMedia = ( navigator.getUserMedia ||
                       navigator.webkitGetUserMedia ||
                       navigator.mozGetUserMedia ||
                       navigator.msGetUserMedia);

navigator.getMedia (

   // permissoes
   {
      video: true,
      audio: true
   },

   // callbackSucesso
   function(localMediaStream) {
      var video = document.querySelector('video');
      video.src = window.URL.createObjectURL(localMediaStream);
      video.onloadedmetadata = function(e) {
         // Faz algo com o vídeo aqui.
      };
   },

   // callbackErro
   function(err) {
    console.log("O seguinte erro ocorreu: " + err);
   }

);

Parâmetros

permissoes

O parâmetro permissoes é um objeto MediaStreamConstraints com dois membros do tipo Boolean: video e audio. Estes membros descrevem os tipos de mídia habilitados no objeto LocalMediaStream. Pelo menos um destes membros deve ser especificado para que o argumento seja validado. Se um membro especificado não for suportado pelo navegador, a função getUserMedia invocará a callbackErro com o erro NOT_SUPPORTED_ERROR. Se o navegador não puder encontrar nenhuma fonte de mídia com o tipo especificado, a função getUserMedia invocará a callbackErro com o erro MANDATORY_UNSATISFIED_ERR.

Se o valor de um membro não estiver especificado no objeto, o valor padrão deste membro será falso. Veja como configurar o objeto permissoes para obter tanto áudio como vídeo:

{ video: true, audio: true }

callbackSucesso

A função getUserMedia invocará a função especificada em callbackSucesso com o objeto LocalMediaStream que contém a fonte de mídia. Você pode associar este objeto com o elemento apropriado e trabalhar com ele, como mostrado no exemplo a seguir:

function(localMediaStream) {
   var video = document.querySelector('video');
   video.src = window.URL.createObjectURL(localMediaStream);
   video.onloadedmetadata = function(e) {
      // Faz algo com o vídeo aqui.
   };
},

callbackErro

A função getUserMedia invocará a função especificada em callbackErro com um argumento code. Os códigos de erro são descritos abaixo:

Compatibilidade de navegadores

Atualmente, usar o WebRTC para acessar a câmera de vídeo é suportado nos navegadores Chrome, Opera e Firefox 20.

Veja também

• WebRTC - a página introdutória a API
• MediaStream API - a API para objetos de fonte de mídia
• Taking webcam photos - um tutorial sobre como usar a getUserMedia()