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>
TS angulares:
_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 compruebo si el dispositivo tiene una cámara disponible e intento 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 es compatible con la calidad 4k), vuelve a intentarlo con los valores this._requestCameraStream(2560, 1440, true);
En realidad, esto funciona bastante bien en la mayoría de los dispositivos, pero en un Galaxy Note 10 Plus, la transmisión no se carga, pero 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, por lo que la cámara puede capturar una imagen de 4k, pero la pantalla no puede cargar un video de 4k como vista previa. El problema es que el sistema no activa ninguna advertencia o error que pueda capturar. Es como si la vista previa se hubiera cargado correctamente.
¿Cómo puedo detectar y tratar este error? O tal vez, ¿hay alguna otra forma en que pueda solicitar a la cámara que capture una imagen de máxima calidad con la vista previa cargando correctamente?
Puede 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'); } }Creo que su 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 es con la reproducción de video. Hay una política de reproducción automática en el navegador que se comporta de manera diferente en un navegador diferente. Esta política del navegador no permite reproducir contenido de video sin la intervención del usuario. Consulte esta URL, https://developer.chrome.com/blog/autoplay/
Creo que debería agregar un atributo silenciado en el elemento de video y sería mejor si le pide al usuario que haga clic antes de capturar la transmisión de la cámara. Puede ser que esto no resuelva el problema al que se enfrenta, 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