Table of Contents

Guia do desenvolvedor web para reconhecimento de imagem na nuvem

A implementação do reconhecimento de imagem na nuvem no lado web envolve os seguintes passos principais: capturar imagens em tempo real através da câmera do navegador, enviar os dados de imagem para o servidor em nuvem para processamento e, finalmente, receber e analisar os resultados retornados pela nuvem para completar o ciclo de reconhecimento de imagem.

Etapas de desenvolvimento

Diferentes navegadores têm implementações distintas para o processamento da câmera. O código de exemplo deste artigo não cobre todos os problemas de compatibilidade entre navegadores. Recomenda-se ajustes de acordo com o ambiente real.

O fluxo é o seguinte:

flowchart LR

A((Inicializar câmera)) --> B[Capturar imagem da câmera] --> C{Chamar API de reconhecimento em nuvem}
C ----> |Nenhum alvo detectado| B
C ----> |Alvo detectado| D((Processar lógica de negócios))

Configuração prévia

Adicione os seguintes elementos na página HTML:

<video id="video"></video>
<canvas id="canvas"></canvas>

Adicione o seguinte no código JavaScript para obter os objetos necessários:

const videoEl = document.querySelector('#video');
const canvasEl = document.querySelector('#canvas');
const canvasCtx = canvasEl.getContext('2d');
  • videoEl é o elemento <video>, que exibe a pré-visualização em tempo real do fluxo da câmera
  • canvasEl é o elemento <canvas>
  • canvasCtx é o objeto de contexto 2d do canvas

Inicializar a câmera

const constraints = {
    audio: false,
    video: true,
};
navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
    videoEl.srcObject = stream;
    videoEl.play();
}).catch((err) => {
    console.error(err);
    alert('Erro ao abrir a câmera');
});
  • Configurações da câmera:
    • constraints.video como true seleciona automaticamente a câmera
    • constraints.video como {facingMode: {exact: 'user'}} usa a câmera frontal
    • constraints.video como {facingMode: {exact: 'environment'}} usa a câmera traseira
Dica

Para mais parâmetros de câmera, consulte Parâmetros de configuração da câmera.

Capturar imagem da câmera

canvasCtx.drawImage(videoEl, 0, 0, videoEl.offsetWidth, videoEl.offsetWidth);
const image = canvasElement.toDataURL('image/jpeg', 0.8).split('base64,').pop();

Chamar API de reconhecimento em nuvem

// URL do client-end da biblioteca em nuvem
const clientendUrl = 'URL do client-end da sua biblioteca em nuvem';
// Token de nuvem da biblioteca em nuvem
const token = 'Aqui está o token de nuvem da biblioteca em nuvem';
// AppId CRS da biblioteca em nuvem
const appId = 'Aqui está o AppId CRS da biblioteca em nuvem';
// image é a imagem capturada na etapa anterior
const image = '/9j/4AAQSkZJRgABAQ......';

fetch(`${clientendUrl}/search`, {
    method: 'POST',
    body: `{ "image": "${image}", "appId": "${appId}", "notracking": true }`,
    headers: {
        'Content-Type': 'application/json;Charset=UTF-8',
        'Authorization': token
    }
}).then(res => res.json()).then(data => {
    console.info(data);
    // TODO: Processar resultado do reconhecimento
});
Dica

Para enviar solicitações de rede, você pode usar fetch, XMLHttpRequest ou bibliotecas como axios.

Processar resultado do reconhecimento

Quando a API de serviço de reconhecimento em nuvem recebe a solicitação, retorna o resultado do reconhecimento se um alvo for detectado com sucesso. Se nenhum alvo for detectado, retorna o código de status correspondente. Para outros erros, retorna o código de erro e a mensagem de aviso correspondentes.

Nenhum alvo detectado

Se nenhum alvo for detectado, statusCode é 17 e o resultado retornado é:

{
  "statusCode" : 17,
  "result" : {
    "message" : "No result: there is no matching."
  },
  "date" : "2026-01-05T05:49:02.651Z",
  "timestamp" : 1767592142651
}

Alvo detectado

Se um alvo for detectado, statusCode é 0 e o resultado retornado é:

{
  "statusCode" : 0,
  "result" : {
    "target" : {
      "targetId" : "375a4c2e********915ebc93c400",
      "allowSimilar" : "0",
      "detectableDistinctiveness" : 1,
      "detectableFeatureCount" : 3,
      "type" : "ImageTarget",
      "trackableDistinctiveness" : 0,
      "detectableFeatureDistribution" : 1,
      "trackableFeatureCount" : 3,
      "detectableRate" : 2,
      "trackableFeatureDistribution" : 1,
      "size" : "1",
      "trackablePatchContrast" : 0,
      "meta" : "eyJ2aWRlb1VybCI6Im********pL0Vhc3lBUi1NZWdhLm1wNCJ9",
      "grade" : "2",
      "trackablePatchAmbiguity" : 3,
      "name" : "Mega video",
      "appKey" : "f7ff497********f8068c",
      "trackableRate" : 2,
      "active" : "1",
      "date" : "1746609056804",
      "modified" : 1746609056804
    }
  },
  "date" : "2026-01-05T05:50:36.484Z",
  "timestamp" : 1767592236484
}

Principais campos explicados:

  • targetId: ID do alvo
  • meta: informações adicionais codificadas em base64, como conteúdo 3D ou URL de vídeo adicionados durante o upload da imagem de reconhecimento
  • name: nome do alvo
  • active: "1" indica estado ativado, "0" indica estado desativado
Dica

Consulte Referência da API para informações completas sobre os campos

Processar lógica de negócios

Você pode usar as informações em meta para processar a lógica de negócios subsequente, como reproduzir vídeos, renderizar modelos 3D, etc.

Tópicos relacionados