Luego de mucho luchar hemos encontrado la contestación de esta inconveniente que tantos usuarios de nuestro espacio tienen. Si tienes algo más que aportar no dudes en compartir tu información.
los MediaDevices
La interfaz proporciona acceso a dispositivos de entrada de medios conectados, como cámaras y micrófonos, así como para compartir la pantalla. En esencia, le permite obtener acceso a cualquier fuente de hardware de datos multimedia.
Propiedades
Hereda propiedades de su interfaz principal, EventTarget
.
Eventos
devicechange
- Se activa cuando un dispositivo de entrada o salida de medios está conectado o retirado de la computadora del usuario.
También disponible a través deondevicechange
propiedad.
Métodos
Hereda métodos de su interfaz principal, EventTarget
.
enumerateDevices()
- Obtiene un array de información sobre los dispositivos de entrada y salida de medios disponibles en el sistema.
getSupportedConstraints()
- Devuelve un objeto conforme a
MediaTrackSupportedConstraints
que indica qué propiedades restringibles se admiten en elMediaStreamTrack
interfaz. Consulte Capacidades y restricciones en Media Capture y Streams API (Media Stream) para obtener más información sobre las restricciones y cómo usarlas. getDisplayMedia()
- Solicita al usuario que seleccione una pantalla o parte de una pantalla (como una ventana) para capturar como
MediaStream
para compartir o grabar. Devuelve una promesa que se resuelve en unMediaStream
. getUserMedia()
- Con el permiso del usuario a través de un mensaje, enciende una cámara y / o un micrófono en el sistema y proporciona un
MediaStream
que contiene una pista de vídeo y / o una pista de audio con la entrada.
Ejemplo
'use strict';// Put variables in global scope to make them available to the browser console.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;// make variable available to browser console video.srcObject = stream;).catch(function(error)if(error.name ==='ConstraintNotSatisfiedError')errorMsg('The resolution '+ constraints.video.width.exact +'x'+ constraints.video.height.exact +' px is not supported by your device.');elseif(error.name ==='PermissionDeniedError')errorMsg('Permissions have not been granted to use your camera and '+'microphone, you need to allow the page access to your devices in '+'order for the demo to work.');errorMsg('getUserMedia error: '+ error.name, error););functionerrorMsg(msg, error) errorElement.innerHTML +=''
+ msg +'';if(typeof error !=='undefined') console.error(error);
Especificaciones
Especificación | Estado | Comentario |
---|---|---|
Captura de medios y transmisiones La definición de ‘MediaDevices’ en esa especificación. |
Recomendación candidata | Definición inicial |
Compatibilidad del navegador
Escritorio | Móvil | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Cromo | Borde | Firefox | explorador de Internet | Ópera | Safari | WebView Android | Chrome Android | Firefox para Android | Opera Android | Safari en IOS | Internet de Samsung | |
MediaDevices |
47 | 12 | 33 | No | 30 | 11 | 47 | 47 | 36 | 30 | 11 | 5,0 |
devicechange_event |
57 | 12 | 52 | No | 34 | 11 | No | No | ? | 43 | 11 | No |
enumerateDevices |
47 | 12 | 3963 Antes de Firefox 63, enumerateDevices() solo devolvió los dispositivos de entrada. A partir de Firefox 63, los dispositivos de salida también se incluyen si el media.setsinkid.enabled la preferencia está habilitada. |
No | 34 | 11 | 47 | 47 | 3963 Antes de Firefox 63, enumerateDevices() solo devolvió los dispositivos de entrada. A partir de Firefox 63, los dispositivos de salida también se incluyen si el media.setsinkid.enabled la preferencia está habilitada. |
34 | 11 | 5,0 |
getDisplayMedia |
72 | 7917 Disponible como miembro de Navigator en lugar de MediaDevices . |
6633-66 Desde Firefox 33 puede capturar datos de la pantalla usando getUserMedia() , con un video restricción llamada mediaSource . Antes de 52 se basaba en una lista de sitios permitidos configurable por el cliente. |
No | 60 | 13 | NoAPI está disponible, pero siempre fallará con NotAllowedError . |
No | NoAPI está disponible, pero siempre fallará con NotAllowedError . |
No | No | No |
getSupportedConstraints |
53 | 12 | 44 | No | 40 | 11 | 53 | 52 | 50 | 41 | 11 | 6.0 |
getUserMedia |
53 Si necesita esta capacidad antes de la versión 53, consulte navigator.webkitGetUserMedia , una forma prefijada de la obsoleta navigator.getUserMedia API. |
12 | 36[“If you need this capability before version 36, refer to navigator.mozGetUserMedia , a prefixed form of the deprecated navigator.getUserMedia API.”, “Before Firefox 55, getUserMedia() incorrectly returns NotSupportedError when the list of constraints specified is empty, or has all constraints set to false . Starting in Firefox 55, this situation now correctly calls the failure handler with a TypeError .”, “When using the Firefox-specific video constraint called mediaSource to request display capture, Firefox 66 and later consider values of screen and window to both cause a list of screens and windows to be shown.”, “Starting in Firefox 66, getUserMedia() can no longer be used in sandboxed s or data URLs entered in the address bar by the user.”] |
No | 40 Si necesita esta capacidad antes de la versión 40, consulte navigator.webkitGetUserMedia , una forma prefijada de la obsoleta navigator.getUserMedia API. |
11 | 53 | 53 Si necesita esta capacidad antes de la versión 53, consulte navigator.webkitGetUserMedia , una forma prefijada de la obsoleta navigator.getUserMedia API. |
36[“If you need this capability before version 36, refer to navigator.mozGetUserMedia , a prefixed form of the deprecated navigator.getUserMedia API.”, “Before Firefox 55, getUserMedia() incorrectly returns NotSupportedError when the list of constraints specified is empty, or has all constraints set to false . Starting in Firefox 55, this situation now correctly calls the failure handler with a TypeError .”, “When using the Firefox-specific video constraint called mediaSource to request display capture, Firefox 66 and later consider values of screen and window to both cause a list of screens and windows to be shown.”, “Starting in Firefox 66, getUserMedia() can no longer be used in sandboxed s or data URLs entered in the address bar by the user.”] |
41 Si necesita esta capacidad antes de la versión 41, consulte navigator.webkitGetUserMedia , una forma prefijada de la obsoleta navigator.getUserMedia API. |
11 | 6.0 |
ondevicechange |
57 | 12 | 52 | No | 34 | 11 | No | No | sí | 34 | 11 | No |
stereo_audio_capture |
? | ? | 55 | No | ? | No | ? | ? | No | ? | No | ? |
Ver también
- Media Capture and Streams API: la API de la que forma parte esta interfaz.
- API de captura de pantalla: la API que define
getDisplayMedia()
método. - API de WebRTC
Navigator.mediaDevices
: Devuelve una referencia a unMediaDevices
objeto que se puede utilizar para acceder a los dispositivos.- CameraCaptureJS: Captura y reproducción de video HTML5 usando
MediaDevices
y la API de grabación MediaStream (fuente en GitHub) - OpenLang: Aplicación web de laboratorio de lenguaje de video HTML5 usando
MediaDevices
y la API de grabación MediaStream para grabación de video (fuente en GitHub)
Calificaciones y reseñas
Puedes sustentar nuestra misión escribiendo un comentario y valorándolo te estamos agradecidos.
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)