Table of Contents

Guia do desenvolvedor Web de image cloud recognition

O processo principal para implementar image cloud recognition na Web inclui várias etapas centrais: primeiro chamar a câmera pelo navegador para capturar imagens em tempo real, depois enviar os dados de imagem coletados para o servidor cloud para processamento de recognition e, por fim, receber e analisar o resultado retornado pela cloud para concluir todo o ciclo de image recognition.

Etapas de desenvolvimento

A implementação do processamento de câmera varia entre navegadores. O código de exemplo deste artigo não cobre todos os problemas de compatibilidade de navegadores; recomenda-se ajustá-lo conforme o ambiente real.

O fluxo é o seguinte:

flowchart LR

A((Inicializar câmera)) --> B[Capturar imagem da câmera] --> C{Chamar cloud recognition API}
C ----> |Target não reconhecido| B
C ----> |Target reconhecido| D((Processamento da lógica de negócio))

Configuração prévia

Adicione os seguintes elementos à página html:

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

Adicione o conteúdo a seguir ao código js 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; vincule o stream de vídeo da câmera ao video para preview em tempo real
  • canvasEl é o elemento canvas
  • canvasCtx é o objeto context 2d do canvas

Inicializar 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('打开摄像头错误');
});
  • Configuração dos parâmetros da câmera
    • constraints.video é true, selecionando a câmera automaticamente
    • constraints.video é {facingMode: {exact: 'user'}}, usando a câmera frontal
    • constraints.video é {facingMode: {exact: 'environment'}}, usando 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 cloud recognition API

// Client-end URL da biblioteca de imagens em nuvem
const clientendUrl = '您云图库的 Client-end URL';
// Cloud Token da biblioteca de imagens em nuvem
const token = '这里是云图库的 Cloud Token';
// CRS AppId da biblioteca de imagens em nuvem
const appId = '这里是云图库的 CRS AppId';
// image e 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: processamento do resultado de reconhecimento
});
Dica

Para enviar requisições de rede, você pode usar fetch, XMLHttpRequest, a biblioteca axois etc.

Processamento do resultado recognition

Depois que a cloud recognition service API recebe a requisição, se o target for reconhecido com sucesso, ela retorna o resultado recognition; se o target não for reconhecido, retorna o status code de não reconhecido; para outros erros, retorna o error code correspondente e a mensagem.

Target não reconhecido

Se o target não for reconhecido, statusCode será 17, e o resultado retornado será:

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

Target reconhecido

Se o target for reconhecido, statusCode será 0, e o resultado retornado será:

{
  "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
}

Descrição dos principais fields:

  • targetId: id do target
  • meta: informações adicionais codificadas em base64, como conteúdo 3D ou URL de vídeo adicionados ao enviar a imagem de recognition
  • name: nome do target
  • active: "1" indica estado habilitado, "0" indica estado desabilitado
Dica

Para informações completas dos fields, consulte API reference

Processamento da lógica de negócio

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

Tópicos relacionados