Búsqueda de sitios web

javascript - La transmisión de la cámara no se carga en todos los dispositivos con requisitos de calidad máxima (HTML/Angular)

Estoy desarrollando una aplicación en Angular para capturar una foto con la máxima calidad posible dependiendo de la cámara del dispositivo.

Actualmente, tengo este código:

HTML :

<video #video id="video" autoplay muted playsinline></video>

Angular TS:

_requestCameraStream(width: number, height: number, secondTry: boolean) {
    if (navigator.mediaDevices.getUserMedia)
    {
      navigator.mediaDevices
        .getUserMedia({
          video: {
            facingMode: 'environment',
            width: { ideal: width },
            height: { ideal: height },
            frameRate: { ideal: 30 },
          },
        })
        .then(stream => {
          console.log('_getUserMedia -> stream loaded');
          this.loadStream(stream);
        })
        .catch(err => {
          console.log(err);

          if (!secondTry)
          {
            console.log('Started second try');
            this._requestCameraStream(2560, 1440, true);
          }
          else
          {
            this.router.navigateByUrl('id-document/camera-error');
          }
        });
    }
  }

  private loadStream(stream: MediaStream) {
    const videoDevices = stream.getVideoTracks();
            
    this.lastStream = stream;
    this.video!.nativeElement.srcObject = stream;
    this.video!.nativeElement.play();
    this.ref.detectChanges();
  }

Básicamente, verifico si el dispositivo tiene una cámara disponible y trato de cargarla con los valores de ancho y alto que recibe la función. En el primer intento, llamo a la función de la siguiente manera:

this._requestCameraStream(4096, 2160, false);

Si la transmisión no se carga (probablemente porque la cámara no admite calidad 4k), entonces intenta de nuevo con los valores this._requestCameraStream(2560, 1440, true);

Esto en realidad funciona bastante bien en la mayoría de los dispositivos, pero en un Galaxy Note 10 Plus, la transmisión no se carga, aunque si hago clic en el botón para tomar la foto, la cámara captura la imagen en calidad 4k.

Sospecho que la cámara tiene una resolución más alta que la pantalla, así que la cámara puede capturar una imagen en 4k, pero la pantalla no puede cargar un video en 4k como vista previa. El problema es: el sistema no genera ninguna advertencia o error que pueda capturar. Es como si la vista previa se cargara correctamente.

¿Cómo puedo detectar y tratar este error? O tal vez, ¿hay alguna otra forma en que pueda solicitar que la cámara capture una imagen de máxima calidad con la vista previa cargando correctamente?

Respuesta #1

Puedes intentar definir un rango de resoluciones en lugar de intentar solo dos

async _requestCameraStream() {
    if (!navigator.mediaDevices.getUserMedia) return;
    try {
        const stream = await navigator.mediaDevices
            .getUserMedia({
                              video: {
                                  facingMode: {
                                     exact: "environment"
                                  },
                                  width: { min: 2288, ideal: 4096, max: 4096 },
                                  height: { min: 1080, ideal: 2160, max: 2160 },
                                  frameRate: { ideal: 30 },
                              },
                          });
        if(stream) {
            console.log('_getUserMedia -> stream loaded');
            this.loadStream(stream);
        }
    }catch (err) {
        console.log(err);
        this.router.navigateByUrl('id-document/camera-error');
    }
}

Respuesta #2

Creo que tu enfoque actual es correcto para capturar la imagen de máxima calidad. He utilizado un enfoque similar en uno de mis proyectos. Creo que el problema está en la reproducción del video. Hay una política de reproducción automática en el navegador que se comporta de manera diferente en distintos navegadores. Esta política del navegador no permite reproducir contenido de video sin ninguna intervención del usuario. Revisa esta URL, https://developer.chrome.com/blog/autoplay/

Creo que deberías agregar un atributo muted en el elemento de video y sería mejor si le pides al usuario que haga clic antes de capturar la transmisión de la cámara. Tal vez esto no resuelva el problema que estás enfrentando, pero este problema estará presente en algunos navegadores como el iPhone. Los dispositivos Apple no permiten ningún contenido de video sin la intervención del usuario.

Saludos, omi

Artículos relacionados