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.

* Some parts of this feature may have varying levels of support.

La interfaz MediaDevices brinda acceso a dispositivos de entrada de medios conectados, como cámaras y micrófonos, así como a compartir pantalla. En esencia, le permite obtener acceso a cualquier fuente de hardware de datos multimedia.

EventTarget MediaDevices

Propiedades de instancia

Hereda las propiedades de su interfaz padre, EventTarget.

Métodos de instancia

Hereda métodos de su interfaz padre, EventTarget.

enumerateDevices()

Obtiene una matriz 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 la interfaz MediaStreamTrack. Consulte la API de transmisión de medios 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 un MediaStream.

getUserMedia()

Con el permiso del usuario a través de un aviso, enciende una cámara y/o un micrófono en el sistema y proporciona un MediaStream que contiene una pista de video y/o una pista de audio con la entrada.

selectAudioOutput() Experimental

Pide al usuario que seleccione un dispositivo de salida de audio específico.

Eventos

devicechange

Se activa cuando un dispositivo de entrada o salida de medios se conecta o retira de la computadora del usuario.

Ejemplo

js
// Coloque las variables en el ámbito global para que estén disponibles
// en la consola del navegador.
const video = document.querySelector("video");
const constraints = {
  audio: false,
  video: true,
};

navigator.mediaDevices
  .getUserMedia(constraints)
  .then((stream) => {
    const videoTracks = stream.getVideoTracks();
    console.log("Tengo transmisión con las restricciones:", constraints);
    console.log(`Usando el dispositivo de vídeo: ${videoTracks[0].label}`);
    stream.onremovetrack = () => {
      console.log("Transmisión finalizada");
    };
    video.srcObject = stream;
  })
  .catch((error) => {
    if (error.name === "OverconstrainedError") {
      console.error(
        `La resolución ${constraints.video.width.exact}x${constraints.video.height.exact} px no es compatible con su dispositivo.`,
      );
    } else if (error.name === "NotAllowedError") {
      console.error(
        "Debe otorgar permiso a esta página para acceder a su cámara y micrófono.",
      );
    } else {
      console.error(`getUserMedia error: ${error.name}`, error);
    }
  });

Especificaciones

Specification
Media Capture and Streams
# mediadevices

Compatibilidad con navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
MediaDevices
devicechange event
enumerateDevices
getDisplayMedia()
Audio capture support
controller option
Experimental
monitorTypeSurfaces option
Experimental
preferCurrentTab option
ExperimentalNon-standard
selfBrowserSurface option
Experimental
surfaceSwitching option
Experimental
systemAudio option
Experimental
getSupportedConstraints
getUserMedia
Secure context required
selectAudioOutput
Experimental
setCaptureHandleConfig
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
See implementation notes.
Has more compatibility info.

Véase también