Table of Contents

Exemplo web de reconhecimento de imagem na nuvem

Este artigo irá guiá-lo através de uma análise detalhada do código de exemplo, ajudando-o a compreendê-lo e a desenvolver sua própria instância com base nisso.

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

Definição de objetivo de reconhecimento

No gerenciamento de reconhecimento na nuvem, faça upload de uma imagem de reconhecimento.

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

crs sample

Obtenção de objetivo de reconhecimento

Ao chamar a API de reconhecimento na nuvem, após 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 campos completos, consulte Referência da API

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

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

Explicação do código principal

  • src/webar.js

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

  • src/app.js

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

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

    Configuração de reconhecimento na nuvem e processamento de negócios após o 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 profunda do código

Se você deseja aprender mais profundamente sobre o desenvolvimento de reconhecimento na nuvem, é altamente recomendável ler o código-fonte do sample. Com base nisso, você pode tentar modificar e expandir o código-fonte.

Dica

O conteúdo a seguir pressupõe que você já tenha alguma habilidade de desenvolvimento em HTML e JavaScript. Se você ainda não domina essas habilidades básicas, sugere-se primeiro aprender sistematicamente conhecimentos relacionados para entender melhor o conteúdo subsequente.

Tomaremos TokenThreeJsExample (renderizando modelo 3D) como exemplo para introduzir as principais explicações do código-fonte no sample.

Processamento de negócios

Arquivo TokenThreeJsExample/asset/js/app.js principais métodos explicados.

  • Inicializar objeto App
// Usar URL de Client-end de reconhecimento em nuvem para inicializar objeto App
const app = new App('https://af0c1ca3b........0601c74.cn1.crs.easyar.com:8443');
  • Configurar informações de reconhecimento em nuvem
// Definir AppId e token da biblioteca de reconhecimento em nuvem, pode escolher apenas um entre este e app.useEasyAr()
app.setToken({
    'crsAppId': 'f7ff4977......9984ef8068c', // CRS AppId da biblioteca de reconhecimento
    'token': 'pQWnZo1Qt4drnc........QXUQambomdPWEj9So' // Token gerado por APIKey + APISecret
});

// Se usar ambiente integrado fornecido pelo EasyAR
// app.useEasyAr();
  • Processamento de lógica de negócios
app.callback = (msg) => {
    // msg é a informação do alvo reconhecido
    // Analisar o campo meta e processar a lógica de negócios
};

Ui e inicialização do reconhecimento de nuvem

Arquivo html/src/app.js descrição dos principais métodos.

  • Inicialização da seleção da câmera
constructor(url = '') {
}
  • Configuração do reconhecimento de nuvem usando token personalizado
setToken(token) {
}
  • Configuração do reconhecimento de nuvem usando ambiente integrado EasyAR
useEasyAr() {
}

Processamento de reconhecimento em nuvem

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

  • Captura da câmera e configuração de reconhecimento em nuvem
constructor(interval, recognizeUrl, token, container) {
}
  • Abrir câmera, detectar e configurar pré-visualização horizontal/vertical do vídeo
openCamera(constraints) {
}
  • Iniciar reconhecimento
startRecognize(callback) {
}
  • Capturar imagem do vídeo
captureVideo() {
}
  • Enviar captura para serviço de reconhecimento em nuvem
httpPost(data) {
}

Tópicos relacionados