Table of Contents

Description de l'exemple de reconnaissance cloud d'images pour mini-programmes WeChat

Cet article vous guide dans une analyse approfondie du code sample afin de vous aider à le comprendre et à développer vos propres exemples sur cette base.

Pour le téléchargement et la configuration du sample, consultez Démarrage rapide.

Configuration de la cible de reconnaissance

Dans la gestion de la reconnaissance cloud, téléversez une image de reconnaissance.

  • Nom de l'image de reconnaissance : attribuez un nom à la cible de reconnaissance, par exemple « Panda ».

  • Téléverser l'image de reconnaissance : sélectionnez et téléversez une image. L'image utilisée dans ce sample est :

    sample

  • Largeur : largeur de l'image de reconnaissance (cm). La hauteur sera calculée automatiquement par le système selon l'image téléversée. La taille de l'image de reconnaissance correspond à celle du contenu virtuel ; elle n'est pas utilisée dans ce sample.

  • Meta: informations supplémentaires, généralement utilisées pour stocker les informations de contenu AR. Le contenu utilisé dans ce sample est :

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

sample

Obtention de la cible de reconnaissance

Après l'appel de l'API de reconnaissance cloud et la reconnaissance de la cible, les informations de cible sont retournées avec la structure suivante :

{
  "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
}
Astuce

Pour les informations complètes des champs, consultez la Référence API

Décodez meta avec base64 pour obtenir les informations meta d'origine.

// data correspond aux données retournées
const meta = data.result.target.meta;
const modelInfo = JSON.parse(atob(meta));
Note

Les mini-programmes WeChat ne disposent pas de la méthode atob, vous devez donc l'implémenter vous-même.

L'implémentation se trouve dans le fichier libs/atob.js du répertoire de l'exemple.

Description du code principal

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

    Méthodes utilisant wx.createCameraContext pour ouvrir la caméra, capturer des images et accéder à la reconnaissance cloud.

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

    Méthodes utilisant xr-frame pour ouvrir la caméra, capturer des images, accéder à la reconnaissance cloud, lire des vidéos et rendre des templates.

  • components/libs/crs-client.js

    Méthodes de génération de Token et d'accès à la reconnaissance cloud.

Avertissement

N'utilisez pas directement API Key ni API Secret dans les applications clientes (Web, mini-programmes WeChat, etc.).

Ceci est uniquement destiné à la démonstration. En production, générez le Token côté serveur.

Compréhension approfondie du code

Si vous souhaitez étudier plus en profondeur le développement de la reconnaissance cloud, il est fortement recommandé de lire le code source du sample. Sur cette base, vous pouvez essayer de modifier et d'étendre le code source.

Astuce

L'explication suivante suppose que vous possédez déjà un certain niveau de compétences en développement HTML et JavaScript. Si vous ne maîtrisez pas encore ces bases, il est recommandé de les apprendre systématiquement afin de mieux comprendre la suite.

Le moteur XR/3D utilisé sur les mini-programmes WeChat est XR-FRAME. Si vous ne le connaissez pas, il est recommandé de consulter d'abord la documentation.

Nous prendrons le rendu d'un modèle 3D comme exemple pour présenter les principales explications du code source dans le sample.

UI et traitement de la scène

Description du fichier components\easyar-ar\easyar-ar.wxml.

Configuration de la scène XR et du 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>
Astuce

markerImg est l'adresse de l'image de reconnaissance, retournée lorsque la reconnaissance cloud identifie une cible.

Traitement métier

Description du code principal du fichier components\easyar-ar\easyar-ar.js.

handleTick() {
    // Capturer une image et l'envoyer au service de reconnaissance cloud            
    this.capture().then(base64 => this.crsClient.searchByBase64(base64.split('base64,').pop())).then(res => {
        // Résultat retourné par la reconnaissance cloud
        console.info(res)

        // Un retour de 0 indique qu'aucune cible n'a été reconnue
        if (res.statusCode != 0) {
            return;
        }

        const target = res.result.target;

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

        // Détecter dans les informations meta s'il s'agit d'un modèle ou d'une vidéo
        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() {
    // Obtenir l'image de la caméra
    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));
},
Astuce

Consultez le fichier source de l'exemple pour le code complet.

Traitement de la reconnaissance cloud

Description des principales méthodes du fichier components/libs/crs-client.js.

Envoyer les données base64 de l'image à l'API du service de reconnaissance cloud.

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),
            });
        });
    });
}

Effet attendu

  • Page d'accueil de l'exemple

Effet attendu

  • Effet de rendu du modèle

Rubriques connexes