Table of Contents

Descripción del ejemplo de reconocimiento de imágenes en la nube para mini programas de WeChat

Este artículo le guiará por un análisis en profundidad del código sample para ayudarle a comprenderlo y desarrollar sus propios ejemplos sobre esta base.

Para la descarga y configuración del sample, consulte Inicio rápido.

Configuración del objetivo de reconocimiento

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

  • Nombre de la imagen de reconocimiento: asigne un nombre al objetivo de reconocimiento, por ejemplo "Panda".

  • Subir imagen de reconocimiento: seleccione y suba una imagen. La imagen usada en este sample es:

    sample

  • Ancho: ancho de la imagen de reconocimiento (cm). El sistema calculará automáticamente la altura según la imagen subida. El tamaño de la imagen de reconocimiento corresponde al tamaño del contenido virtual; este sample no lo usa.

  • Meta: información adicional, generalmente usada para almacenar información de contenido AR. El contenido usado en este sample es:

    {"modelUrl": "https://sightp-assets.sightp.com/crs-mini/xiaoxiongmao.glb", "scale": 0.4}

sample

Obtención del objetivo de reconocimiento

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

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

Para ver la información completa de los campos, consulte la Referencia de API

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

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

En los mini programas de WeChat no existe el método atob, por lo que debe implementarlo usted mismo.

La implementación se encuentra en el archivo libs/atob.js del directorio del ejemplo.

Descripción del código principal

  • components/easyar-cloud/easyar-cloud.js

    Métodos para usar wx.createCameraContext para abrir la cámara, capturar imágenes y acceder al reconocimiento en la nube.

  • components/easyar-ar/easyar-ar.js

    Métodos para usar xr-frame para abrir la cámara, capturar imágenes, acceder al reconocimiento en la nube, reproducir video y renderizar plantillas.

  • components/libs/crs-client.js

    Métodos para generar Token y acceder al reconocimiento en la nube.

Advertencia

No use API Key ni API Secret directamente en aplicaciones cliente (como Web, mini programas de WeChat, etc.).

Esto es solo para demostración. En producción, genere Token en el servidor.

Comprensión profunda del código

Si desea aprender con más profundidad el desarrollo de reconocimiento en la nube, 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 asume que ya tiene cierto nivel de capacidad de desarrollo en HTML y JavaScript. Si aún no domina estas bases, se recomienda aprender sistemáticamente estos conocimientos para comprender mejor el contenido posterior.

El motor XR/3D usado en mini programas de WeChat es XR-FRAME. Si no lo conoce, se recomienda consultar primero la documentación.

Usaremos el renderizado de un modelo 3D como ejemplo para explicar el código fuente principal del sample.

UI y procesamiento de escena

Descripción del archivo components\easyar-ar\easyar-ar.wxml.

Configuración de la escena XR y Marker.

<xr-scene ar-system="modes:Marker" id="xr-scene" bind:ready="handleReady" bind:ar-ready="handleARReady" bind:tick="handleTick">
    <xr-node>
        <xr-ar-tracker wx:if="{{markerImg != ''}}" mode="Marker" src="{{markerImg}}" id="arTracker"></xr-ar-tracker>
        <xr-camera id="camera" node-id="camera" position="0.8 2.2 -5" clear-color="0.925 0.925 0.925 1" background="ar" is-ar-camera></xr-camera>
    </xr-node>
    <xr-shadow id="shadow-root"></xr-shadow>
    <xr-node node-id="lights">
        <xr-light type="ambient" color="1 1 1" intensity="2" />
        <xr-light type="directional" rotation="180 0 0" color="1 1 1" intensity="1" />
    </xr-node>
</xr-scene>
Consejo

markerImg es la dirección de la imagen de reconocimiento, que se devuelve cuando el reconocimiento en la nube identifica un objetivo.

Procesamiento de negocio

Descripción del código principal del archivo components\easyar-ar\easyar-ar.js.

handleTick() {
    // Capturar imagen y enviarla al servicio de reconocimiento en la nube            
    this.capture().then(base64 => this.crsClient.searchByBase64(base64.split('base64,').pop())).then(res => {
        // Resultado devuelto por el reconocimiento en la nube
        console.info(res)

        // Si devuelve 0, indica que no se reconoció ningún objetivo
        if (res.statusCode != 0) {
            return;
        }

        const target = res.result.target;

        // Configurar marker
        this.loadTrackingImage(target.trackingImage.replace(/[\r\n]/g, ''));

        // Detectar en la información meta si es un modelo o un video
        try {
            const setting = JSON.parse(atob(target.meta));
            if (setting.modelUrl) {
                this.loadModel(target.targetId, setting);
            } else if (setting.videoUrl) {
                this.loadVideo(target.targetId, setting);
            }
        } catch (e) {
            console.error(e);

        }
    }).catch(err => {
        console.info(err)
    });
},

capture() {
    // Obtener imagen de la cámara
    const opt = { type: 'jpg', quality: this.properties.config.jpegQuality };
    if (this.scene.share.captureToDataURLAsync) {
        return this.scene.share.captureToDataURLAsync(opt);
    }

    return Promise.resolve(this.scene.share.captureToDataURL(opt));
},
Consejo

Consulte el archivo fuente del ejemplo para ver el código completo.

Procesamiento de reconocimiento en la nube

Descripción de los métodos principales del archivo components/libs/crs-client.js.

Enviar datos base64 de la imagen a la API del servicio de reconocimiento en la nube.

searchByBase64(img) {
    const params = {
        image: img,
        notracking: 'false',
        appId: this.config.crsAppId,
    };

    return this.queryToken().then(token => {
        return new Promise((resolve, reject) => {
            wx.request({
                url: `${this.config.clientEndUrl}/search`,
                method: 'POST',
                data: params,
                header: {
                    'Authorization': token,
                    'content-type': 'application/json'
                },
                success: res => resolve(res.data),
                fail: err => reject(err),
            });
        });
    });
}

Efecto esperado

  • Página inicial del ejemplo

Efecto esperado

  • Efecto de renderizado del modelo

Temas relacionados