Table of Contents

Imagen nube reconocimiento wechat miniprograma ejemplo descripción

Este artículo le guiará a través de un análisis detallado del código de ejemplo, ayudándole a comprender y desarrollar su propia instancia basada en este.

Para descargar y configurar la muestra, consulte inicio rápido.

Reconocimiento objetivo configuración

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

  • Nombre de la imagen de reconocimiento: asigne un nombre al objetivo de reconocimiento, como "panda".

  • Subir imagen de reconocimiento: seleccione y suba una imagen. La imagen utilizada en esta muestra es:

    sample

  • 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 que suba. El tamaño de la imagen de reconocimiento corresponde al tamaño del contenido virtual, que no se utiliza en esta muestra.

  • Meta: información adicional, generalmente utilizada para almacenar información de contenido AR. El contenido utilizado en esta muestra:

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

sample

Reconocimiento objetivo obtención

Al llamar a la API de reconocimiento en la nube, después de reconocer el objetivo, se devuelve 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 información completa de campos, consulte referencia API

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

// data es el dato devuelto
const meta = data.result.target.meta;
const modelInfo = JSON.parse(atob(meta));
Nota

WeChat Mini Program no tiene el método atob, necesita implementarlo usted mismo.

El método de implementación se encuentra en el archivo libs/atob.js del directorio de ejemplo.

Principal código explicación

  • 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 y reproducir videos y renderizar plantillas.

  • components/libs/crs-client.js

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

Advertencia

No use directamente API Key y API Secret en aplicaciones cliente (como Web, WeChat Mini Program, etc.).

Esto es solo para fines de demostración. Para uso en producción, genere el Token en el servidor.

Código comprensión profunda

Si desea aprender más profundamente sobre el desarrollo de reconocimiento en la nube, se recomienda encarecidamente leer el código fuente de la muestra. Sobre esta base, puede intentar modificar y extender el código fuente.

Consejo

El siguiente contenido se basa en la premisa de que ya posee cierta capacidad de desarrollo HTML y JavaScript. Si aún no domina estas habilidades básicas, se recomienda aprender sistemáticamente los conocimientos relacionados primero, para comprender mejor el contenido posterior.

El motor XR/3D utilizado en WeChat Mini Program es XR-FRAME. Si no está familiarizado, se recomienda consultar primero la documentación.

Tomaremos el renderizado de modelos 3D como ejemplo para presentar las principales explicaciones del código fuente en la muestra.

UI y escenario procesamiento

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

Configuración de 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 detecta un objetivo.

Negocio procesamiento

Explicación del código principal en el archivo components\easyar-ar\easyar-ar.js.

handleTick() {
    // Capturar y enviar 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)

        // Devolver 0 indica que no se detectó ningún objetivo
        if (res.statusCode != 0) {
            return;
        }

        const target = res.result.target;

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

        // Detectar si es modelo o video desde la información meta
        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 de ejemplo para ver el código completo.

Reconocimiento en la nube procesamiento

Explicación del método principal en el 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 de inicio de ejemplo

Efecto esperado

  • Efecto de renderizado de modelo

Temas relacionados