Beispielanleitung für die Bild-Cloud-Erkennung im WeChat-Mini-Programm
Dieses Dokument führt Sie durch den Beispielcode und hilft Ihnen, darauf aufbauend Ihre eigene Anwendung zu entwickeln.
Hinweise zu Download und Konfiguration des Samples finden Sie unter Schnellstart.
Erkennungsziel einrichten
Laden Sie im Cloud-Erkennungsmanagement ein Erkennungsbild hoch.
Name des Erkennungsbilds: Geben Sie dem Erkennungsziel einen Namen, zum Beispiel „Panda“.
Erkennungsbild hochladen: Wählen Sie ein Bild aus und laden Sie es hoch. Das in diesem Beispiel verwendete Bild ist:
Breite: Breite des Erkennungsbildes (cm). Die Höhe wird vom System automatisch anhand des hochgeladenen Bildes berechnet. Die Größe des Erkennungsbildes und des virtuellen Inhalts sind zueinander passend, werden in diesem Sample aber nicht verwendet.
Meta: Zusatzinformationen, die normalerweise zur Speicherung von AR-Inhaltsinformationen verwendet werden. Das in diesem Sample verwendete Format ist:
{"modelUrl": "https://sightp-assets.sightp.com/crs-mini/xiaoxiongmao.glb", "scale": 0.4}
Erkennungsziel abrufen
Wenn Sie die Cloud-Erkennungs-API aufrufen und das Ziel erkannt wird, werden Zielinformationen zurückgegeben. Die Struktur sieht wie folgt aus:
{
"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
}
Tipp
Vollständige Feldinformationen finden Sie in der API-Referenz
Dekodieren Sie meta mit Base64, um die ursprünglichen Meta-Informationen zu erhalten.
// data ist die zurückgegebene Datenstruktur
const meta = data.result.target.meta;
const modelInfo = JSON.parse(atob(meta));
Anmerkung
In WeChat-Mini-Programmen gibt es keine atob-Funktion; sie muss selbst implementiert werden.
Die Implementierung finden Sie in der Beispielverzeichnisdatei libs/atob.js.
Hauptcode erklärt
components/easyar-cloud/easyar-cloud.jsVerwendet
wx.createCameraContext, um die Kamera zu öffnen, Bilder aufzunehmen und auf die Cloud-Erkennung zuzugreifen.components/easyar-ar/easyar-ar.jsVerwendet xr-frame, um die Kamera zu öffnen, Bilder aufzunehmen, auf die Cloud-Erkennung zuzugreifen und Video sowie Render-Templates abzuspielen.
components/libs/crs-client.jsToken-Erzeugung und Zugriff auf die Cloud-Erkennung.
Warnung
Verwenden Sie API Key und API Secret nicht direkt in Client-Anwendungen (z. B. Web oder WeChat-Mini-Programme).
Dies dient hier nur als Demonstration. Erzeugen Sie in einer produktiven Umgebung das Token bitte auf dem Server.
Code tiefer verstehen
Wenn Sie die Entwicklung mit Cloud Recognition weiter vertiefen möchten, lesen Sie dringend den Quellcode des Samples. Darauf aufbauend können Sie den Quellcode anpassen und erweitern.
Tipp
Der folgende Abschnitt setzt voraus, dass Sie bereits über gewisse HTML- und JavaScript-Kenntnisse verfügen. Wenn diese Grundlagen noch fehlen, lernen Sie diese bitte zuerst, damit Sie den weiteren Inhalt besser verstehen.
Die im WeChat-Mini-Programm verwendete XR-/3D-Engine ist XR-FRAME. Wenn Sie diese nicht kennen, lesen Sie bitte zuerst die Dokumentation.
Im Folgenden verwenden wir das Rendern eines 3D-Modells als Beispiel, um den Quellcode des Samples zu erläutern.
UI- und Szenenverarbeitung
Beschreibung der Datei components\easyar-ar\easyar-ar.wxml.
XR-Szene und Marker-Einstellungen.
<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>
Tipp
markerImg ist die Adresse des Erkennungsbilds. Sie wird zurückgegeben, wenn die Cloud-Erkennung das Ziel gefunden hat.
Geschäftslogik
Beschreibung der Hauptlogik in components\easyar-ar\easyar-ar.js.
handleTick() {
// Bildschirm aufnehmen und an den Cloud-Erkennungsdienst senden
this.capture().then(base64 => this.crsClient.searchByBase64(base64.split('base64,').pop())).then(res => {
// Von der Cloud-Erkennung zurückgegebenes Ergebnis
console.info(res)
// 0 bedeutet, dass kein Ziel erkannt wurde
if (res.statusCode != 0) {
return;
}
const target = res.result.target;
// Marker setzen
this.loadTrackingImage(target.trackingImage.replace(/[\r\n]/g, ''));
// Prüfen, ob es sich bei den Meta-Informationen um ein Modell oder ein Video handelt
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() {
// Kamerabild abrufen
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));
},
Tipp
Den vollständigen Code finden Sie in der Beispielquelle.
Cloud-Erkennungsverarbeitung
Beschreibung der Hauptmethode in components/libs/crs-client.js.
Senden von Bild-Base64-Daten an die Cloud-Erkennungs-API.
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),
});
});
});
}
Erwartetes Ergebnis
- Startseite des Beispiels
- Anzeige des gerenderten Modells