MediaDevices
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2017.
io error: No such file or directory (os error 2) (/home/runner/work/yari/yari/mdn/translated-content/files/pt-br/web/api/media_capture_and_streams_api/index.md)
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
unsupported templ: event. Esse evento é entregue ao objetoMediaDevices
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()
-
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
MediaTrackSupportedConstraints
indicando 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
MediaStream
contendo 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
BCD tables only load in the browser
Veja também
- Media Capture and Streams API: A API desta interface faz parte..
- WebRTC API
Navigator.mediaDevices
: Retorna uma referência para um objetoMediaDevices
que 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)