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 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()
(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 interfaceMediaStreamTrack
. 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
Especificação | Status | Comentário |
---|---|---|
Media Capture and Streams The definition of 'MediaDevices' in that specification. |
Candidata a Recomendação | Definição inicial |
Compatibilidade
BCD tables only load in the browser
Veja também
- Media Capture and Streams API (en-US): A API desta interface faz parte..
- WebRTC API
Navigator.mediaDevices
(en-US): 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)