Table of Contents

Ejemplo web de reconocimiento de imágenes en la nube

Esta guía te llevará a través de un análisis detallado del código de ejemplo, ayudándote a comprenderlo y a desarrollar tus propias implementaciones basadas en él.

Para descargar y configurar el ejemplo, consulta el inicio rápido.

Configuración de objetivos de reconocimiento

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

  • Nombre de la imagen de reconocimiento: asigna un nombre al objetivo de reconocimiento, por ejemplo, demo.
  • Subir imagen de reconocimiento: selecciona y sube una imagen. En este ejemplo se utiliza: https://www.easyar.cn/assets/images/webar/xiaoxiongmao.png.
  • Ancho: el ancho de la imagen de reconocimiento (cm). La altura se calculará automáticamente. El tamaño de la imagen de reconocimiento corresponde al tamaño del contenido virtual, que no se utiliza en este ejemplo.
  • Meta: información adicional, normalmente utilizada para almacenar datos de contenido AR. En este ejemplo se usa: {"modelUrl": "asset/model/trex_v3.fbx", "scale": 0.02}.

crs sample

Obtención de objetivos de reconocimiento

Cuando se llama a la API de reconocimiento en la nube y se detecta un objetivo, se devuelve información sobre él 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

Consulta todos los campos en la referencia de API

Decodifica meta usando base64 para obtener la información original.

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

Explicación del código principal

  • src/webar.js

    Encapsula operaciones básicas como inicializar la cámara, capturar imágenes y llamar al reconocimiento en la nube.

  • src/app.js

    Gestiona operaciones de interfaz como cambiar de cámara, interacciones 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 posterior a la detección.

Resultado esperado

  • Interfaz tras inicializar la cámara

Resultado esperado

  • Reproducción de video

Resultado esperado

  • Renderizado de modelo 3D

Resultado esperado

Comprensión profunda del código

Si deseas aprender en profundidad sobre el desarrollo de reconocimiento en la nube, te recomendamos leer el código fuente del ejemplo. Posteriormente, puedes intentar modificarlo y ampliarlo.

Consejo

El siguiente contenido asume que tienes conocimientos previos de desarrollo HTML y JavaScript. Si no los tienes, te sugerimos aprenderlos primero.

Usaremos TokenThreeJsExample (renderizado 3D) para explicar las partes principales del código.

Procesamiento de negocios

Explicación de los métodos principales del archivo TokenThreeJsExample/asset/js/app.js.

  • Inicializar el objeto App
// Inicializar el objeto App usando la URL del Client-end de reconocimiento en la nube
const app = new App('https://af0c1ca3b........0601c74.cn1.crs.easyar.com:8443');
  • Configurar información relacionada con el reconocimiento en la nube
// Establecer AppId y token de la biblioteca de reconocimiento en la nube. Solo se puede usar uno entre este método y app.useEasyAr()
app.setToken({
    'crsAppId': 'f7ff4977......9984ef8068c', // CRS AppId de la biblioteca de reconocimiento en la nube
    'token': 'pQWnZo1Qt4drnc........QXUQambomdPWEj9So' // Token generado con APIKey + APISecret
});

// Si se usa el entorno integrado proporcionado por EasyAR
// app.useEasyAr();
  • Procesamiento de la lógica de negocios
app.callback = (msg) => {
    // msg es la información del objetivo reconocido
    // Analizar el campo "meta" y procesar la lógica de negocios
};

UI e inicialización del reconocimiento en la nube

El archivo html/src/app.js contiene los siguientes métodos principales.

  • Inicialización de la selección de cámara
constructor(url = '') {
}
  • Configuración del reconocimiento en la nube usando un token personalizado
setToken(token) {
}
  • Configuración del reconocimiento en la nube usando el entorno integrado de EasyAR
useEasyAr() {
}

Procesamiento de reconocimiento en la nube

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

  • Captura de cámara y configuración de reconocimiento en la nube
constructor(interval, recognizeUrl, token, container) {
}
  • Abrir cámara, detectar y configurar la vista previa de flujo de video en modo vertical/horizontal
openCamera(constraints) {
}
  • Iniciar reconocimiento
startRecognize(callback) {
}
  • Capturar pantalla
captureVideo() {
}
  • Enviar captura al servicio de reconocimiento en la nube
httpPost(data) {
}

Temas relacionados