MediaDevices
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since setembro de 2017.
* Some parts of this feature may have varying levels of support.
Experimental: Esta é uma tecnologia experimental
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-
O manipulador de evento para o evento
devicechange. Esse evento é entregue ao objetoMediaDevicesquando 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()-
Obtém um array de informações sobre a entrada de midia e dispositivos de saída disponíveis no sistema.
MediaDevices.getSupportedConstraints()-
Retorna um objeto consoante com
MediaTrackSupportedConstraintsindicando quais propriedades restritivas são suportadas na interfaceMediaStreamTrack. Veja Capacidades e restrições para aprender mais sobre restrições e como usá-las. MediaDevices.getUserMedia()-
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
MediaStreamcontendo uma faixa de vídeo e/ou áudio com a entrada. EventTarget.removeEventListener()-
Remove um escutador de evento.
Exemplo
"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
Veja também
- Media Capture and Streams API: A API desta interface faz parte..
- WebRTC API
Navigator.mediaDevices: Retorna uma referência para um objetoMediaDevicesque pode ser usado para acessar dispositivos.- CameraCaptureJS: Captura de vídeo e playback em HTML5 usando MediaDevices e a MediaStream Recording API (código no GitHub)
- OpenLang: Aplicação web de laboratório de linguagem de vídeo HTML5 usando MediaDevices e MediaStream Recording API para gravação de video (código no GitHub)