Table of Contents

Exemplo Web de reconhecimento em nuvem de imagens

Este artigo conduz você por uma análise aprofundada do código de exemplo, ajudando a entendê-lo e a desenvolver seus próprios exemplos com base nele.

Para instruções de download e configuração do sample, consulte Início rápido.

Configuração do alvo de reconhecimento

No gerenciamento de reconhecimento em nuvem, envie uma imagem de reconhecimento.

  • Nome da imagem de reconhecimento: dê um nome ao alvo de reconhecimento, como demo.
  • Enviar imagem de reconhecimento: selecione e envie uma imagem. A imagem usada neste sample é: https://www.easyar.cn/assets/images/webar/xiaoxiongmao.png.
  • Largura: largura da imagem de reconhecimento (cm). A altura da imagem de reconhecimento será calculada automaticamente pelo sistema conforme a imagem enviada. O tamanho da imagem de reconhecimento corresponde ao tamanho do conteúdo virtual, e não é usado neste sample.
  • Meta: informações adicionais, geralmente usadas para armazenar informações de conteúdo AR. O conteúdo usado neste sample é: {"modelUrl": "asset/model/trex_v3.fbx", "scale": 0.02}.

crs sample

Obter alvo de reconhecimento

Após chamar a API de reconhecimento em nuvem e reconhecer um alvo, as informações do alvo são retornadas com a seguinte estrutura:

{
  "statusCode" : 0,
  "result" : {
    "target" : {
      "targetId" : "375a4c2e********915ebc93c400",
      "meta" : "eyJtb2RlbFVybCI6ICJhc3NldC9tb2RlbC90cmV4X3YzLmZieCIsICJzY2FsZSI6IDAuMDJ9",
      "name" : "demo",
      "modified" : 1746609056804
    }
  },
  "date" : "2026-01-05T05:50:36.484Z",
  "timestamp" : 1767592236484
}
Dica

Para informações completas dos campos, consulte Referência de API

Decodifique meta com base64 para obter as informações meta originais.

// data sao os dados retornados
const meta = data.result.target.meta;
const modelInfo = JSON.parse(atob(meta));

Descrição do código principal

  • src/webar.js

    Encapsula várias operações básicas, como inicialização da câmera, captura de imagem e chamadas de reconhecimento em nuvem.

  • src/app.js

    Encapsula operações básicas da interface, como troca de câmera, interação da interface e inicialização do WebAR.

  • TokenVideoExample/asset/js/app.js e TokenThreeJsExample/asset/js/app.js

    Configuração do reconhecimento em nuvem e processamento de negócio após reconhecimento bem-sucedido.

Efeito esperado

  • Interface após inicialização da câmera

Efeito esperado

  • Efeito de reprodução de vídeo

Efeito esperado

  • Efeito de renderização de modelo

Efeito esperado

Compreensão aprofundada do código

Se você deseja aprender o desenvolvimento de reconhecimento em nuvem com mais profundidade, é altamente recomendado ler o código-fonte do sample. Com base nisso, você pode tentar modificar e estender o código-fonte.

Dica

A explicação a seguir parte do pressuposto de que você já possui certo nível de capacidade de desenvolvimento em HTML e JavaScript. Se ainda não domina essas habilidades básicas, recomenda-se estudar primeiro os conhecimentos relacionados de forma sistemática para entender melhor o conteúdo seguinte.

Usaremos TokenThreeJsExample (renderização de modelos 3D) como exemplo para apresentar a descrição do código-fonte principal no sample.

Processamento de negocio

The main methods in TokenThreeJsExample/asset/js/app.js are described below.

  • Inicializar o objeto App
// inicializa o objeto App com o Client-end URL de reconhecimento em nuvem
const app = new App('https://af0c1ca3b........0601c74.cn1.crs.easyar.com:8443');
  • Definir informacoes de cloud recognition
// configura o AppId e o token da biblioteca de reconhecimento em nuvem; somente uma destas opcoes ou app.useEasyAr() pode ser usada
app.setToken({
    'crsAppId': 'f7ff4977......9984ef8068c', // CRS AppId da biblioteca de reconhecimento em nuvem
    'token': 'pQWnZo1Qt4drnc........QXUQambomdPWEj9So' // Token gerado a partir de APIKey + APISecret
});

// se estiver usando o ambiente integrado fornecido pela EasyAR
// app.useEasyAr();
  • Processar logica de negocio
app.callback = (msg) => {
    // msg contem as informacoes do target reconhecido
    // analisa o campo meta e processa a logica de negocio
};

UI e inicialização do Cloud Recognition

Descrição dos principais métodos do arquivo html/src/app.js.

  • Inicializar a seleção da câmera
constructor(url = '') {
}
  • Configurar o Cloud Recognition com um Token personalizado
setToken(token) {
}
  • Configurar o Cloud Recognition com o ambiente integrado EasyAR
useEasyAr() {
}

Processamento de Cloud Recognition

Descrição dos principais métodos do arquivo html/src/webar.js.

  • Screenshot da câmera e configuração de Cloud Recognition
constructor(interval, recognizeUrl, token, container) {
}
  • Abrir a câmera e detectar a configuração de preview do video stream em paisagem/retrato
openCamera(constraints) {
}
  • Iniciar recognition
startRecognize(callback) {
}
  • Screenshot
captureVideo() {
}
  • Enviar o screenshot ao serviço Cloud Recognition para recognition
httpPost(data) {
}

Tópicos relacionados