Penjelasan contoh cloud image recognition WeChat Mini Program
Artikel ini akan memandu Anda menganalisis kode sample secara mendalam, membantu Anda memahami dan mengembangkan contoh sendiri berdasarkan kode tersebut.
Untuk mengunduh dan mengonfigurasi sample, lihat Quick Start.
Pengaturan target pengenalan
Di manajemen cloud recognition, unggah gambar pengenalan.
Nama gambar pengenalan: beri nama target pengenalan, misalnya "Panda".
Unggah gambar pengenalan: pilih dan unggah sebuah gambar. Gambar yang digunakan dalam sample ini adalah:
Lebar: lebar gambar pengenalan (cm). Tinggi gambar akan dihitung otomatis oleh sistem berdasarkan gambar yang Anda unggah. Ukuran gambar pengenalan sesuai dengan ukuran konten virtual; sample ini tidak menggunakannya.
Meta: informasi tambahan, biasanya digunakan untuk menyimpan informasi konten AR. Konten yang digunakan dalam sample ini:
{"modelUrl": "https://sightp-assets.sightp.com/crs-mini/xiaoxiongmao.glb", "scale": 0.4}
Memperoleh target pengenalan
Setelah memanggil API cloud recognition dan target dikenali, informasi target akan dikembalikan dengan struktur berikut:
{
"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
}
Kiat
Untuk informasi field lengkap, lihat API Reference
Decode meta dengan base64 untuk memperoleh informasi meta asli.
// data adalah data yang dikembalikan
const meta = data.result.target.meta;
const modelInfo = JSON.parse(atob(meta));
Catatan
Di WeChat Mini Program tidak ada metode atob, sehingga Anda perlu mengimplementasikannya sendiri.
Implementasinya ada di file libs/atob.js dalam direktori contoh.
Penjelasan kode utama
components/easyar-cloud/easyar-cloud.js
Metode menggunakan
wx.createCameraContextuntuk membuka kamera, menangkap gambar, dan mengakses cloud recognition.components/easyar-ar/easyar-ar.js
Metode menggunakan xr-frame untuk membuka kamera, menangkap gambar, mengakses cloud recognition, memutar video, dan merender template.
components/libs/crs-client.js
Metode untuk menghasilkan Token dan mengakses cloud recognition.
Peringatan
Jangan gunakan API Key dan API Secret langsung pada aplikasi klien (seperti Web, WeChat Mini Program, dll.).
Ini hanya untuk demonstrasi. Untuk lingkungan produksi, hasilkan Token di sisi server.
Memahami kode secara mendalam
Jika Anda ingin mempelajari pengembangan cloud recognition lebih mendalam, sangat disarankan membaca source code sample. Berdasarkan itu, Anda dapat mencoba memodifikasi dan memperluas source code.
Kiat
Penjelasan berikut mengasumsikan Anda sudah memiliki kemampuan pengembangan HTML dan JavaScript pada tingkat tertentu. Jika belum menguasai dasar-dasar ini, disarankan mempelajarinya secara sistematis agar lebih mudah memahami bagian berikutnya.
Mesin XR/3D yang digunakan pada WeChat Mini Program adalah XR-FRAME. Jika belum familiar, sebaiknya lihat dokumentasinya terlebih dahulu.
Kami akan menggunakan rendering model 3D sebagai contoh untuk menjelaskan source code utama dalam sample.
UI dan pemrosesan scene
Penjelasan file components\easyar-ar\easyar-ar.wxml.
Pengaturan XR scene dan 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>
Kiat
markerImg adalah alamat gambar pengenalan yang dikembalikan saat cloud recognition mengenali target.
Pemrosesan bisnis
Penjelasan kode utama file components\easyar-ar\easyar-ar.js.
handleTick() {
// Tangkap gambar dan kirim ke layanan cloud recognition
this.capture().then(base64 => this.crsClient.searchByBase64(base64.split('base64,').pop())).then(res => {
// Hasil yang dikembalikan oleh cloud recognition
console.info(res)
// Nilai kembali 0 menunjukkan target tidak dikenali
if (res.statusCode != 0) {
return;
}
const target = res.result.target;
// Atur marker
this.loadTrackingImage(target.trackingImage.replace(/[\r\n]/g, ''));
// Deteksi dari informasi meta apakah berupa model atau video
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() {
// Dapatkan gambar kamera
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));
},
Kiat
Untuk kode lengkap, lihat file sumber contoh.
Pemrosesan cloud recognition
Penjelasan metode utama file components/libs/crs-client.js.
Kirim data base64 gambar ke API layanan cloud recognition.
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),
});
});
});
}
Efek yang diharapkan
- Halaman awal contoh
- Efek rendering model