Exemple de mini-programme WeChat pour la reconnaissance cloud d'images
Ce guide vous propose une analyse approfondie du code d'exemple pour vous aider à comprendre et à développer vos propres applications.
Pour les instructions de téléchargement et de configuration de l'exemple, veuillez consulter le Démarrage rapide.
Configuration de la cible de reconnaissance
Dans la gestion de la reconnaissance cloud, téléchargez une image de reconnaissance.
Nom de l'image de reconnaissance : Donnez un nom à la cible de reconnaissance, par exemple "Panda".
Télécharger l'image de reconnaissance : Sélectionnez et téléchargez une image. L'image utilisée dans cet exemple est :
Largeur : Largeur de l'image de reconnaissance (cm). La hauteur sera calculée automatiquement par le système en fonction de l'image téléchargée. La taille de l'image de reconnaissance correspond à la taille du contenu virtuel. Cet exemple ne l'utilise pas.
Meta : Informations supplémentaires, généralement utilisées pour stocker les informations de contenu AR. Dans cet exemple, le contenu utilisé est :
{"modelUrl": "https://sightp-assets.sightp.com/crs-mini/xiaoxiongmao.glb", "scale": 0.4}
Récupération de la cible de reconnaissance
Lors de l'appel de l'API de reconnaissance cloud, après la reconnaissance de la cible, les informations de la cible sont renvoyé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
Consultez les informations complètes des champs dans la Référence API
Décodez le meta en base64 pour obtenir les informations meta originales.
// data correspond aux données renvoyé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, qui doit être implémentée manuellement.
La méthode d'implémentation se trouve dans le fichier libs/atob.js du répertoire de l'exemple.
Explication du code principal
components/easyar-cloud/easyar-cloud.js
Utilise
wx.createCameraContextpour ouvrir la caméra, capturer des images et accéder à la reconnaissance cloud, entre autres méthodes.components/easyar-ar/easyar-ar.js
Utilise xr-frame pour ouvrir la caméra, capturer des images, accéder à la reconnaissance cloud et lire des vidéos ou afficher des modèles, entre autres méthodes.
components/libs/crs-client.js
Méthodes pour la génération de Token et l'accès à la reconnaissance cloud.
Avertissement
N'utilisez pas directement l'API Key et l'API Secret dans les applications clientes (comme Web, mini-programmes WeChat, etc.).
Ici, cela ne sert qu'à des fins de démonstration. Pour un environnement de production, générez le Token côté serveur.
Compréhension approfondie du code
Si vous souhaitez approfondir vos connaissances sur le développement de la reconnaissance cloud, nous vous recommandons vivement de lire le code source de l'exemple. Vous pouvez ensuite essayer de modifier et d'étendre le code source.
Astuce
Les explications suivantes partent du principe que vous possédez déjà des compétences en développement HTML et JavaScript. Si ce n'est pas le cas, nous vous suggérons d'apprendre d'abord ces bases pour mieux comprendre la suite.
Le moteur XR/3D utilisé sur les mini-programmes WeChat est XR-FRAME. Si vous ne le connaissez pas, nous vous conseillons de consulter d'abord la documentation.
Nous allons prendre l'exemple du rendu d'un modèle 3D pour présenter les principales explications du code source dans l'exemple.
Interface utilisateur et gestion de la scène
Explication du fichier components\easyar-ar\easyar-ar.wxml.
Configuration de la scène XR et du marqueur.
<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 correspond à l'URL de l'image de reconnaissance, renvoyée lorsque la reconnaissance cloud identifie une cible.
Gestion des opérations
Explication du code principal du fichier components\easyar-ar\easyar-ar.js.
handleTick() {
// Capture d'écran et envoi au service de reconnaissance cloud
this.capture().then(base64 => this.crsClient.searchByBase64(base64.split('base64,').pop())).then(res => {
// Résultat renvoyé par la reconnaissance cloud
console.info(res)
// Un retour de 0 signifie qu'aucune cible n'a été reconnue
if (res.statusCode != 0) {
return;
}
const target = res.result.target;
// Configuration du marqueur
this.loadTrackingImage(target.trackingImage.replace(/[\r\n]/g, ''));
// Vérification 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() {
// Récupération de 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.
Gestion de la reconnaissance cloud
Explication de la méthode principale du fichier components/libs/crs-client.js.
Envoi des données en 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 de rendu du modèle