▷Ejemplo de Dom MediaDevices.getUserMedia ✔️ Foro Ayuda 【 2024 】

Hola, hallamos la solución a lo que andabas buscando, continúa leyendo y la verás más abajo.

los MediaDevices.getUserMedia() El método solicita al usuario permiso para usar una entrada de medios que produce un MediaStream con pistas que contienen los tipos de medios solicitados. Esa transmisión puede incluir, por ejemplo, una pista de video (producida por un hardware o una fuente de video virtual, como una cámara, un dispositivo de grabación de video, un servicio para compartir pantalla, etc.), una pista de audio (de manera similar, producida por un dispositivo físico o fuente de audio virtual como un micrófono, convertidor A / D o similar) y posiblemente otros tipos de pistas.

Devuelve un Promise que se resuelve en un MediaStream objeto. Si el usuario deniega el permiso o no hay medios coincidentes disponibles, la promesa se rechaza con NotAllowedError o NotFoundError respectivamente.

Nota: Es posible que la promesa devuelta ninguno resolver ni rechazar, ya que el usuario no está obligado a hacer una elección en absoluto y puede ignorar la solicitud.

Generalmente, accederá al MediaDevices objeto singleton usando navigator.mediaDevices, como esto:

asyncfunctiongetMedia(constraints)let stream =null;try
    stream =await navigator.mediaDevices.getUserMedia(constraints);/* use the stream */catch(err)/* handle the error */

De manera similar, al usar las promesas sin procesar directamente, el código se ve así:

navigator.mediaDevices.getUserMedia(constraints).then(function(stream)/* use the stream */).catch(function(err)/* handle the error */);

Nota: Si el documento actual no se carga de forma segura, navigator.mediaDevices estarán undefined, y no puedes usar getUserMedia(). Consulte Seguridad para obtener más información sobre este y otros problemas de seguridad relacionados con el uso getUserMedia().

Sintaxis

var promise = navigator.mediaDevices.getUserMedia(constraints);

Parámetros

constraints

A MediaStreamConstraints objeto que especifica los tipos de medios a solicitar, junto con los requisitos para cada tipo.

los constraints el parámetro es un MediaStreamConstraints objeto con dos miembros: video y audio, describiendo los tipos de medios solicitados. Se debe especificar uno o ambos. Si el navegador no puede encontrar todas las pistas de medios con los tipos especificados que cumplen con las restricciones dadas, la promesa devuelta se rechaza con NotFoundError.

Lo siguiente solicita tanto audio como video sin ningún requisito específico:

 audio:true, video:true

Si true se especifica para un tipo de medio, el flujo resultante es requerido tener ese tipo de pista en ella. Si uno no puede ser incluido por alguna razón, la llamada a getUserMedia() resultará en un error.

Si bien la información sobre las cámaras y los micrófonos de un usuario es inaccesible por razones de privacidad, una aplicación puede solicitar las capacidades de la cámara y el micrófono que necesita y desea, utilizando restricciones adicionales. A continuación se expresa una preferencia por la resolución de la cámara de 1280×720:


  audio:true,
  video: width:1280, height:720

El navegador intentará respetar esto, pero puede devolver otras resoluciones si no hay una coincidencia exacta disponible o el usuario la anula.

Para exigir una capacidad, use las palabras clave min, max, o exact (también conocido como min == max). Lo siguiente exige una resolución mínima de 1280×720:


  audio:true,
  video:
    width: min:1280,
    height: min:720

Si no existe una cámara con esta resolución o superior, la promesa devuelta será rechazada con OverconstrainedErrory no se le pedirá al usuario.

La razón de la diferencia de comportamiento es que las palabras clave min, max, y exact son inherentemente obligatorias. Mientras que los valores simples y una palabra clave llamada ideal no son. Aquí tienes un ejemplo completo:


  audio:true,
  video:
    width: min:1024, ideal:1280, max:1920,
    height: min:576, ideal:720, max:1080

Un ideal El valor, cuando se usa, tiene gravedad, lo que significa que el navegador intentará encontrar la configuración (y la cámara, si tiene más de una), con la más pequeña distancia de fitness de los valores ideales dados.

Los valores simples son inherentemente ideales, lo que significa que el primero de nuestros ejemplos de resolución anteriores podría haberse escrito así:


  audio:true,
  video:
    width: ideal:1280,
    height: ideal:720

No todas las restricciones son números. Por ejemplo, en dispositivos móviles, los siguientes preferirán la cámara frontal (si hay una disponible) a la trasera:

 audio:true, video: facingMode:"user"

Para exigir la cámara trasera, utilice:

 audio:true, video: facingMode: exact:"environment"

Otra restricción no numérica es la deviceId restricción. Si tienes un deviceId de mediaDevices.enumerateDevices(), puedes usarlo para solicitar un dispositivo específico:

 video: deviceId: myPreferredCameraDeviceId

Lo anterior devolverá la cámara que solicitó, o una cámara diferente si esa cámara específica ya no está disponible. De nuevo, para exigir la cámara específica, usarías:

 video: deviceId: exact: myExactCameraOrBustDeviceId

Valor devuelto

A Promise cuyo controlador de cumplimiento recibe un MediaStream objeto cuando el medio solicitado se haya obtenido con éxito.

Excepciones

Los rechazos de la promesa devuelta se realizan pasando un DOMException objeto de error al manejador de fallas de la promesa. Los posibles errores son:

AbortError: Aunque el usuario y el sistema operativo otorgaron acceso al dispositivo de hardware, y no se produjeron problemas de hardware que pudieran causar una NotReadableError, se produjo algún problema que impidió el uso del dispositivo.
NotAllowedError: Uno o más de los dispositivos de origen solicitados no se pueden utilizar en este momento. Esto sucederá si el contexto de navegación es inseguro (es decir, la página se cargó usando HTTP en lugar de HTTPS). También ocurre si el usuario ha especificado que la instancia de navegación actual no tiene permitido el acceso al dispositivo, el usuario ha denegado el acceso para la sesión actual o el usuario ha denegado todo el acceso a los dispositivos multimedia del usuario a nivel mundial. En navegadores que admiten la gestión de permisos multimedia con Política de funciones, este error se devuelve si la Política de funciones no está configurada para permitir el acceso a las fuentes de entrada. Versiones anteriores de la especificación utilizadas SecurityError por esto en su lugar; SecurityError ha adquirido un nuevo significado.
NotFoundError: No se encontraron pistas de medios del tipo especificado que satisfagan las restricciones dadas.
NotReadableError: Aunque el usuario otorgó permiso para usar los dispositivos coincidentes, se produjo un error de hardware en el sistema operativo, el navegador o la página web que impidió el acceso al dispositivo.
OverconstrainedError: Las restricciones especificadas dieron como resultado ningún dispositivo candidato que cumpliera con los criterios solicitados. El error es un objeto de tipo OverconstrainedErrory tiene un constraint propiedad cuyo valor de cadena es el nombre de una restricción que era imposible de cumplir, y una message propiedad que contiene una cadena legible por humanos que explica el problema. Debido a que este error puede ocurrir incluso cuando el usuario aún no ha otorgado permiso para usar el dispositivo subyacente, se puede usar potencialmente como una superficie de huellas digitales.
SecurityError: El soporte de medios de usuario está deshabilitado en el Document en la que getUserMedia() fue llamado. El mecanismo por el cual se habilita y deshabilita el soporte de medios de usuario se deja en manos del agente de usuario individual.
TypeError: La lista de restricciones especificadas está vacía o tiene todas las restricciones establecidas en false. Esto también puede suceder si intenta llamar getUserMedia() en un contexto inseguro, ya que navigator.mediaDevices es undefined en un contexto inseguro.

Privacidad y seguridad

Como API que puede implicar importantes problemas de privacidad, getUserMedia()La especificación establece una amplia gama de requisitos de privacidad y seguridad que los navegadores están obligados a cumplir.

getUserMedia() es una característica poderosa que solo se puede utilizar en contextos seguros; en contextos inseguros, navigator.mediaDevices es undefined, impidiendo el acceso a getUserMedia(). Un contexto seguro es, en resumen, una página cargada usando HTTPS o el file:/// Esquema de URL o una página cargada desde localhost.