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.

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()

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

BCD tables only load in the browser

Véase también