MediaDevices

Experimental: Esta é uma tecnologia experimental (en-US)
Verifique a tabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.

As interfaces MediaDevices proporcionam accesso aos dispositivos de entrada de midia conectados, como câmeras e microfones, bem como compartilhamento de tela. Essencialmente, isso te permite obter acesso a qualquer mídia gerada pelo hardware.

Propriedades

As mesmas propriedades de EventTarget.

Manipuladores de Evento

MediaDevices.ondevicechange (en-US)

O manipulador de evento para o evento devicechange. Esse evento é entregue ao objeto MediaDevices quando uma entrada de mídia ou dispositivo de saída é conectado ou removido do computador do usuário.

Métodos

Mesmos métodos de EventTarget.

EventTarget.addEventListener()

Registra um manipulador de eventos para um tipo específico de evento.

MediaDevices.enumerateDevices() (en-US)

Obtém um array de informações sobre a entrada de midia e dispositivos de saída disponíveis no sistema.

MediaDevices.getSupportedConstraints() (en-US)

Retorna um objeto consoante com MediaTrackSupportedConstraints (en-US) indicando quais propriedades restritivas são suportadas na interface MediaStreamTrack (en-US). Veja Capacidades e restrições (en-US) para aprender mais sobre restrições e como usá-las.

MediaDevices.getUserMedia() (en-US)

Após a permissão do usuário (pedida através de um prompt), liga a câmera, microfone e/ou a tramissão de tela no sistema e fornece uma MediaStream (en-US) contendo uma faixa de vídeo e/ou áudio com a entrada.

EventTarget.removeEventListener()

Remove um escutador de evento.

Exemplo

js
"use strict";

// Coloca as variáveis no escopo global para torná-las disponível para o Console do navegador.
var video = document.querySelector("video");
var constraints = (window.constraints = {
  audio: false,
  video: true,
});
var errorElement = document.querySelector("#errorMsg");

navigator.mediaDevices
  .getUserMedia(constraints)
  .then(function (stream) {
    var videoTracks = stream.getVideoTracks();
    console.log("Got stream with constraints:", constraints);
    console.log("Using video device: " + videoTracks[0].label);
    stream.onremovetrack = function () {
      console.log("Stream ended");
    };
    window.stream = stream; // torna as variáveis disponíveis para o Console do navegador
    video.srcObject = stream;
  })
  .catch(function (error) {
    if (error.name === "ConstraintNotSatisfiedError") {
      errorMsg(
        "A resolução " +
          constraints.video.width.exact +
          "x" +
          constraints.video.width.exact +
          " px não é suportada pelo seu dispositivo.",
      );
    } else if (error.name === "PermissionDeniedError") {
      errorMsg(
        "As permissões para usar sua câmera e microfone não foram fornecidas. " +
          "Você precisa permitir o acesso da página aos seus dispositivos para " +
          "que a demo funcione.",
      );
    }
    errorMsg("getUserMedia error: " + error.name, error);
  });

function errorMsg(msg, error) {
  errorElement.innerHTML += "<p>" + msg + "</p>";
  if (typeof error !== "undefined") {
    console.error(error);
  }
}

Especificações

Specification
Media Capture and Streams
# mediadevices

Compatibilidade com navegadores

BCD tables only load in the browser

Veja também