Pesquisa de site

javascript - Fluxo da câmera não está carregando em todos os dispositivos com requisitos de qualidade máxima (HTML/Angular)

Estou desenvolvendo um aplicativo em Angular para capturar uma foto com a máxima qualidade possível, dependendo da câmera do dispositivo.

Atualmente, eu tenho 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();
  }

Basicamente eu verifico se o dispositivo tem uma câmera disponível e tento carregá-la com os valores de largura e altura que a função recebe. Na primeira tentativa, eu chamo a função da seguinte forma:

this._requestCameraStream(4096, 2160, false);

Se o stream falhar ao carregar (provavelmente porque a câmera não suporta qualidade 4k), ele tenta novamente com os valores this._requestCameraStream(2560, 1440, true);

Isso na verdade está funcionando muito bem na maioria dos dispositivos, mas em um Galaxy Note 10 Plus, o stream não carrega, mas se eu clicar no botão para tirar a foto, a câmera captura a imagem em qualidade 4k.

Suspeito que a câmera tenha uma resolução maior do que a tela, então a câmera pode capturar uma imagem em 4k, mas a tela não consegue carregar um vídeo em 4k como pré-visualização. O problema é: o sistema não dispara nenhum aviso ou erro que eu pudesse capturar. É como se a pré-visualização tivesse carregado com sucesso.

Como posso detectar e tratar esse erro? Ou talvez, existe alguma outra maneira de eu solicitar à câmera que capture uma imagem de qualidade máxima com o preview carregando corretamente?

Resposta #1

Você pode tentar definir uma faixa de resoluções em vez de tentar apenas duas

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');
    }
}

Resposta #2

Acho que sua abordagem atual está correta para capturar a imagem com a máxima qualidade. Eu usei uma abordagem semelhante em um dos meus projetos. Acho que o problema está na reprodução de vídeo. Existe uma política de reprodução automática no navegador que se comporta de maneira diferente em cada navegador. Essa política do navegador não permite reproduzir conteúdo de vídeo sem qualquer intervenção do usuário. Verifique este URL, https://developer.chrome.com/blog/autoplay/

Acho que você deveria adicionar um atributo muted no elemento de vídeo e seria melhor se você pedisse ao usuário para clicar antes de capturar o stream da câmera. Pode ser que isso não resolva o problema que você está enfrentando, mas esse problema estará presente em alguns navegadores, como no iPhone. Dispositivos Apple não permitem qualquer conteúdo de vídeo sem intervenção do usuário.

Atenciosamente, omi

Artigos relacionados