Bilderkennung in der cloud wechat-miniprogramm-beispielanleitung
Dieser artikel führt sie durch eine tiefgehende analyse des beispielcodes, um ihnen zu helfen, ihn zu verstehen und darauf aufbauend ihre eigenen instanzen zu entwickeln.
Anweisungen zum herunterladen und konfigurieren des samples finden sie unter schnellstart.
Erkennungsziele einstellen
In der cloud-erkennungsverwaltung laden sie ein erkennungsbild hoch.
Erkennungsbildname: Geben sie dem erkennungsziel einen namen, z.b. "Panda".
Erkennungsbild hochladen: Wählen sie ein bild aus und laden sie es hoch. Das in diesem beispiel verwendete bild ist:
Breite: Die breite des erkennungsbildes (cm). Die höhe des erkennungsbildes wird automatisch basierend auf ihrem hochgeladenen bild berechnet. Die größe des erkennungsbildes entspricht der größe des virtuellen inhalts, was in diesem beispiel nicht verwendet wird.
Meta: Zusatzinformationen, typischerweise zur speicherung von ar-inhaltsinformationen. In diesem beispiel verwendete inhalte:
{"modelUrl": "https://sightp-assets.sightp.com/crs-mini/xiaoxiongmao.glb", "scale": 0.4}
Erkennungsziele abrufen
Wenn die cloud-erkennungs-api aufgerufen wird und ein ziel erkannt wird, werden zielinformationen zurückgegeben. Die struktur ist wie folgt:
{
"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 die meta-information mit base64, um die ursprünglichen meta-informationen zu erhalten.
// data sind die zurückgegebenen daten
const meta = data.result.target.meta;
const modelInfo = JSON.parse(atob(meta));
Anmerkung
In wechat-miniprogrammen gibt es keine atob-methode. Diese muss selbst implementiert werden.
Die implementierung befindet sich in der beispielverzeichnisdatei libs/atob.js.
Hauptcode-erklärung
components/easyar-cloud/easyar-cloud.js
Verwendet methoden wie
wx.createCameraContextzum öffnen der kamera, aufnehmen von bildern und zugriff auf die cloud-erkennung.components/easyar-ar/easyar-ar.js
Verwendet xr-frame zum öffnen der kamera, aufnehmen von bildern, zugriff auf die cloud-erkennung sowie wiedergabe von videos und rendering von modellen.
components/libs/crs-client.js
Methoden zur token-generierung und zum zugriff auf die cloud-erkennung.
Warnung
Verwenden sie api-key und api-secret nicht direkt auf client-seite (z.b. web, wechat-miniprogramme usw.).
Dies dient hier nur demonstrationszwecken. Für den produktiveinsatz generieren sie bitte token auf server-seite.
Code-vertiefung
Wenn sie die cloud-erkennungsentwicklung tiefergehend lernen möchten, wird dringend empfohlen, den sample-quellcode zu lesen. Basierend darauf können sie versuchen, den quellcode zu ändern und zu erweitern.
Tipp
Die folgenden erklärungen setzen voraus, dass sie über grundkenntnisse in html- und javascript-entwicklung verfügen. Wenn sie diese grundfertigkeiten noch nicht beherrschen, wird empfohlen, sich zunächst mit den relevanten kenntnissen vertraut zu machen, um die folgenden inhalte besser zu verstehen.
Die auf wechat-miniprogrammen verwendete xr/3d-engine ist xr-frame. Wenn sie damit nicht vertraut sind, wird empfohlen, zunächst die dokumentation zu konsultieren.
Wir werden das rendering eines 3d-modells als beispiel verwenden, um die wichtigsten quellcode-erklärungen im sample vorzustellen.
UI- und szenenbehandlung
Datei components\easyar-ar\easyar-ar.wxml-erklärung.
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 erkennungsbildes, die zurückgegeben wird, wenn ein ziel von der cloud-erkennung erkannt wird.
Geschäftslogik-behandlung
Hauptcode-erklärung in der datei components\easyar-ar\easyar-ar.js.
handleTick() {
// Bild aufnehmen und an 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)
// Rückgabewert 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, ''));
// Aus meta-informationen prüfen, ob es sich 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
Vollständigen code finden sie in der beispiel-quelldatei.
Cloud-erkennungsbehandlung
Hauptmethoden-erklärung in der datei components/libs/crs-client.js.
Senden von bild-base64-daten an die cloud-erkennungsdienst-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),
});
});
});
}
Erwartete effekte
- Beispiel-startseite
- Modell-rendering-effekt