Table of Contents

Ejemplo Web de reconocimiento en la nube de imágenes

Este artículo le guía en un análisis profundo del código de ejemplo, para ayudarle a comprenderlo y desarrollar sus propios ejemplos a partir de él.

Para descargar y configurar el sample, consulte Inicio rápido.

Configuración del objetivo de reconocimiento

En la gestión de reconocimiento en la nube, cargue una imagen de reconocimiento.

  • Nombre de la imagen de reconocimiento: asigne un nombre al objetivo de reconocimiento, como demo.
  • Cargar imagen de reconocimiento: seleccione y cargue una imagen. La imagen usada en este sample es: https://www.easyar.cn/assets/images/webar/xiaoxiongmao.png.
  • Ancho: ancho de la imagen de reconocimiento (cm). La altura de la imagen de reconocimiento será calculada automáticamente por el sistema según la imagen cargada. El tamaño de la imagen de reconocimiento corresponde al tamaño del contenido virtual, y no se usa en este sample.
  • Meta: información adicional, generalmente usada para almacenar información de contenido AR. El contenido usado en este sample es: {"modelUrl": "asset/model/trex_v3.fbx", "scale": 0.02}.

crs sample

Obtener objetivo de reconocimiento

Después de llamar a la API de reconocimiento en la nube y reconocer un objetivo, se devuelve información del objetivo con la siguiente estructura:

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

Para información completa de campos, consulte Referencia de API

Decodifique meta con base64 para obtener la información meta original.

// data son los datos devueltos
const meta = data.result.target.meta;
const modelInfo = JSON.parse(atob(meta));

Descripción del código principal

  • src/webar.js

    Encapsula varias operaciones básicas, como inicialización de cámara, captura de imagen y llamadas de reconocimiento en la nube.

  • src/app.js

    Encapsula operaciones básicas de la interfaz, como cambio de cámara, interacción de interfaz e inicialización de WebAR.

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

    Configuración del reconocimiento en la nube y procesamiento de negocio después del reconocimiento correcto.

Efecto esperado

  • Interfaz después de la inicialización de cámara

Efecto esperado

  • Efecto de reproducción de video

Efecto esperado

  • Efecto de renderizado de modelo

Efecto esperado

Comprensión profunda del código

Si desea estudiar el desarrollo de reconocimiento en la nube con mayor profundidad, se recomienda encarecidamente leer el código fuente del sample. Sobre esta base, puede intentar modificar y ampliar el código fuente.

Consejo

La siguiente explicación se basa en la premisa de que ya tiene cierto nivel de capacidad de desarrollo HTML y JavaScript. Si aún no domina estas habilidades básicas, se recomienda aprender primero los conocimientos relacionados de forma sistemática para comprender mejor el contenido posterior.

Usaremos TokenThreeJsExample (renderizado de modelos 3D) como ejemplo para introducir la descripción del código fuente principal del sample.

Procesamiento de negocio

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

  • Inicializar el objeto App
// inicializa el objeto App con el Client-end URL de reconocimiento en la nube
const app = new App('https://af0c1ca3b........0601c74.cn1.crs.easyar.com:8443');
  • Configurar informacion de cloud recognition
// configura el AppId y el token de la biblioteca de reconocimiento en la nube; solo se puede usar una de estas opciones o app.useEasyAr()
app.setToken({
    'crsAppId': 'f7ff4977......9984ef8068c', // CRS AppId de la biblioteca de reconocimiento en la nube
    'token': 'pQWnZo1Qt4drnc........QXUQambomdPWEj9So' // Token generado a partir de APIKey + APISecret
});

// si se usa el entorno integrado proporcionado por EasyAR
// app.useEasyAr();
  • Procesar logica de negocio
app.callback = (msg) => {
    // msg contiene la informacion del target reconocido
    // analiza el campo meta y procesa la logica de negocio
};

UI e inicialización de Cloud Recognition

Descripción de los métodos principales del archivo html/src/app.js.

  • Inicializar la selección de cámara
constructor(url = '') {
}
  • Configurar Cloud Recognition con un Token personalizado
setToken(token) {
}
  • Configurar Cloud Recognition con el entorno integrado de EasyAR
useEasyAr() {
}

Procesamiento de Cloud Recognition

Descripción de los métodos principales del archivo html/src/webar.js.

  • Captura de cámara y configuración de Cloud Recognition
constructor(interval, recognizeUrl, token, container) {
}
  • Abrir la cámara y detectar la configuración de preview del video stream horizontal/vertical
openCamera(constraints) {
}
  • Iniciar recognition
startRecognize(callback) {
}
  • Captura
captureVideo() {
}
  • Enviar la captura al servicio Cloud Recognition para recognition
httpPost(data) {
}

Temas relacionados