Como digitalizar códigos QR em navegadores da Web com Web World e JSQR

Blog

Os códigos QR tornaram-se muito mais populares nos últimos anos. Eles são amplamente utilizados para fornecer informações e facilitar registros. Embora seja mais comumente encontrado como parte de aplicativos móveis nativos, você também pode incorporar verificações de QR em seus sites.

Veja como usar a popular biblioteca jsQR em conjunto com Web Workers para oferecer uma experiência de digitalização QR de alto desempenho na web. Digamos que você já esteja familiarizado com o básico do JavaScript e tenha um site funcional ao qual esteja pronto para adicionar seu código.

índice

  1. 1. Começando
  2. 2. Tire uma foto da câmera
  3. 3. Criando uma tela
  4. 4. Adicione jsQR
  5. 5. Fiação de tudo
  6. 6. Dados do resultado jsQR
  7. 7. Conclusão

1. Começando

Comece baixando a biblioteca jsQR em um formato distribuível pré-compilado. Certifique-se de que esteja acessível publicamente em seu servidor web; Para este artigo, vamos supor que a URL seja /jsQR.js . jsQR também está disponível como um pacote npm se você configurou uma rotina de compilação.

Este pacote fornece detecção em tempo real de códigos QR visíveis em um fluxo de vídeo. Ele recupera os dados dentro do código e os entrega ao seu aplicativo.

2. Tire uma foto da câmera

A próxima etapa é adquirir um MediaStream do navegador. Use a API mediaDevices para obter um novo stream da câmera do usuário:

 const getCamera = async() => { if (! navigator. mediaDevices) { throw new Error("mediaDevices API unavailable."); } dispositivos const = aguarda navegador. dispositivos de mídia. enumerateDevices(); const câmeras = dispositivos. filtro ( d => ( d.kind === "videoinput" ) ); câmeras de retorno [ 0 ] ; };

Estamos selecionando a primeira câmera encontrada. Lógica adicional pode ser adicionada para permitir a seleção de uma câmera específica indicada pelo usuário. Em um aplicativo real, você também deve melhorar o tratamento de erros quando a API mediaDevices não estiver disponível. Isso pode ser devido ao fato de o usuário estar em um navegador da Web antigo ou ter bloqueado permanentemente a permissão de acesso à câmera.

Use a função getCamera() para capturar o fluxo de vídeo. Anexe o stream a um elemento <video> para que ele possa ser reproduzido e exibido ao usuário:

 <video autoplay="true" id="video" muted="true" />
 const stream = await getCamera(); const vídeo = documento. getElementById("vídeo"); vídeo. srcObject = fluxo; aguardo vídeo. Toque();

3. Criando uma tela

A próxima etapa é criar um elemento de canvas . Os dados de vídeo serão transmitidos da câmera para a canvas onde os pixels da imagem serão extraídos e enviados para jsQR. A tela deve ser dimensionada para corresponder ao tamanho do fluxo de vídeo.

 const videoTracks = aguardar fluxo. getVideoTracks(); const videoTrackSettings = videoTracks[ 0 ] . getConfigurações(); const tela = documento. createElement("canvas"); tela. altura = videoTrackSettings. altura ; tela. largura = videoTrackSettings. largura ; const canvasContext = canvas. getContext("2d");

O contexto da tela será usado na próxima etapa para desenhar cada quadro do fluxo de vídeo na tela.

4. Adicione jsQR

Em seguida, adicione jsQR ao seu código. A execução do jsQR em um web worker permite que o navegador o delegue a um processo em segundo plano, melhorando o desempenho. jsQR precisa escanear cada quadro de vídeo, portanto, executá-lo no thread principal do JavaScript pode causar sérias lentidão em dispositivos de baixo custo.

O thread principal e seu web worker podem se comunicar usando mensagens. Seu thread principal enviará uma mensagem ao trabalhador jsQR toda vez que um novo quadro de vídeo estiver disponível. O trabalhador inspecionará esse quadro em busca de códigos QR em seu encadeamento em segundo plano e, em seguida, enviará uma mensagem ao encadeamento principal quando o quadro for processado.

Carregue seu trabalhador em seu código JavaScript principal e adicione um ouvinte de mensagem:

 const qrWorker = new Worker("/qr-worker.js"); qrWorker. addEventListener ( "message", ( { data } ) => { if ( data ) { // Dados do código QR disponíveis // // Faça uma verificação bem-sucedida aqui. } else { // Nenhum código QR detectado neste quadro // // Alimenta o próximo quadro para o QR worker // now (este código é apresentado abaixo).tick(); } });

Poste adicionando qr-worker.js ao seu projeto. Isso deve ser acessível publicamente na URL fornecida ao construtor Worker . Os navegadores baixarão o web worker quando necessário.

 importScripts("jsQR.js"); auto. addEventListener("message", e => {const {dados, largura, altura} = e.dados; const qrData = jsQR(dados, largura, altura); self.postMessage(qrData);});

A função importScripts() baixa a biblioteca jsQR. Essa chamada é equivalente a aa <script> em seu HTML, mas torna o conteúdo do script disponível para seu web worker.

Um ouvinte de mensagem é adicionado para receber eventos do encadeamento JavaScript principal. Cada evento deve incluir os dados, largura e altura de um quadro de vídeo transmitido da câmera. Esses valores são enviados para o jsQR, que tentará detectar um código QR dentro do quadro. O resultado é postado de volta no tópico principal.

5. Fiação de tudo

A última etapa é criar um loop de atualização que forneça periodicamente quadros de vídeo ao trabalhador jsQR.

 const updateJsQr = ( ) => { canvasContext. drawImage( video , 0 , 0 , canvas. width , canvas. height ); const imageData = canvasContext. getImageData( 0 , 0 , canvas. width , canvas. height ); qrWorker. postMessage({data: imageData, height: canvas. height, width: canvas. width}); } const tick = ( ) => requestAnimationFrame( updateJsQr ); Carraça();

A função tick() requer que o navegador gaste tempo chamando updateJsQr() antes da próxima repintura. Essa função obtém o quadro de vídeo atual, desenha-o na tela e extrai os dados da imagem resultante prontos para serem passados ​​para jsQR. O método postMessage() da instância do job realmente envia os dados.

O trabalhador então agirá sobre os dados conforme indicado no código acima. O resultado da detecção é comunicado ao thread principal que o processa conforme mostrado na etapa 4. Quando um código QR é detectado, o aplicativo deve usar os dados recuperados para avançar em seu fluxo. Quando nenhum código é detectado, tick() é chamado novamente para passar o próximo quadro para o operador QR, pronto para avaliação.

Esse mecanismo garante que você não sobrecarregue o navegador executando várias detecções de quadros ao mesmo tempo. Cada chamada para jsQR() é potencialmente cara, então você deve esperar até que o resultado seja conhecido antes de programar outra. O loop só continua até que um resultado positivo seja retornado, com jsQR manipulando um quadro por vez. A interface do usuário do site e a visualização da câmera ao vivo permanecerão responsivas o tempo todo enquanto o trabalhador é executado de forma independente em segundo plano.

6. Dados do resultado jsQR

Cada chamada bem-sucedida para jsQR() retorna um objeto de resultado com as seguintes propriedades:

  • data – Cadeia de dados extraída do código QR (esta é a única propriedade usada no exemplo acima).
  • binaryData – Um Uint8ClampedArray contendo os bytes brutos lidos pelo código QR.
  • version – versão do código QR detectada.
  • location – Um objeto que descreve a posição do código QR detectado dentro do quadro de vídeo, incluindo os pontos para cada canto.

Nenhum dado está disponível quando o jsQR não detecta um código na imagem fornecida.

7. Conclusão

A combinação de jsQR com Web Workers permite que você implemente a digitalização de código QR de alto desempenho em seu aplicativo da web. Os códigos QR são um mecanismo de troca de dados fácil e conveniente com o qual a maioria dos usuários de dispositivos móveis já está familiarizada.

Embora você possa usar jsQR como parte de seu loop principal, você precisa implementar uma limitação agressiva para manter sua interface do usuário responsiva. Isso resultaria em um atraso maior antes de uma descoberta bem-sucedida. Os Web Workers são compatíveis com todos os navegadores modernos e fornecem um aumento substancial de desempenho para esta solução, permitindo varreduras em frações de segundo em condições ideais de iluminação.

  • Novo no Fedora 35
  • Canonical lança Ubuntu 21.10 para desktops e servidores

descubra mais conteúdo

O que é um amplificador integrado?

Google Pixel Watch também tem detecção de queda, mas não até o próximo ano

As melhores xícaras de café aquecidas de 2022

Como automatizar seu iPhone com base na hora, atividade ou localização

"Isso deve ter sido antes do meu tempo"

Por que a NASA enviou Snoopy para a Lua? – Revisão Geek

Deixe uma resposta Cancelar resposta

Como criar um QR para um site?

Usaremos o GOQR.me.

  1. Selecione o tipo de conteúdo que deseja que o código QR envie ao consumidor; para este exemplo, escolheremos um URL.
  2. Insira o conteúdo (neste caso, um URL).
  3. Revise a visualização, personalize o layout e baixe ou incorpore o código quando necessário. É muito simples.

Como ler um código QR online?

No seu telefone ou tablet Android compatível, abra o aplicativo de câmera integrado. Aponte a câmera para o código QR . Toque no banner que aparece no seu telefone ou tablet Android. Siga as instruções na tela para concluir o processo de login.

Como abrir QR no Google?

0:09 1:16 Dica de vídeo · 57 segundos

Como ler um código QR no celular MUITO FÁCIL – YouTube YouTube Início do vídeo sugerido Fim do vídeo sugerido

Como ver um código QR gratuito?

Digitalize códigos QR no Android

Abra o aplicativo da câmera em seu dispositivo móvel ou tablet Android. Aponte a câmera para o QR Code , foque bem nele e espere que ele o reconheça. Clique na janela pop-up que aparecerá para acessar o conteúdo do código QR .

Ir arriba