Penjelasan contoh aplikasi wechat pengenalan awan gambar
Artikel ini akan membawa Anda menganalisis kode contoh secara mendalam, membantu Anda memahami dan mengembangkan contoh Anda sendiri berdasarkan ini.
Untuk petunjuk pengunduhan dan konfigurasi sampel, silakan lihat Memulai dengan Cepat.
Pengaturan target pengenalan
Di manajemen pengenalan awan, unggah gambar pengenalan.
Nama gambar pengenalan: Beri nama target pengenalan, seperti "Panda".
Unggah gambar pengenalan: Pilih dan unggah gambar, gambar yang digunakan dalam sampel ini adalah:
Lebar: Lebar gambar pengenalan (cm). Tinggi gambar pengenalan akan dihitung secara otomatis oleh sistem berdasarkan gambar yang Anda unggah. Ukuran gambar pengenalan sesuai dengan ukuran konten virtual, tidak digunakan dalam sampel ini.
Meta: Informasi tambahan, umumnya digunakan untuk menyimpan informasi konten AR, konten yang digunakan dalam sampel ini:
{"modelUrl": "https://sightp-assets.sightp.com/crs-mini/xiaoxiongmao.glb", "scale": 0.4}
Pengambilan target pengenalan
Saat memanggil API pengenalan awan, setelah target dikenali, informasi target akan dikembalikan, strukturnya sebagai 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
Lihat informasi bidang lengkap di Referensi API
Dekode meta menggunakan base64 untuk mendapatkan informasi meta asli.
// data adalah data yang dikembalikan
const meta = data.result.target.meta;
const modelInfo = JSON.parse(atob(meta));
Catatan
Tidak ada metode atob di aplikasi mini WeChat, perlu diimplementasikan sendiri.
Metode implementasi ada di file direktori contoh libs/atob.js.
Penjelasan kode utama
components/easyar-cloud/easyar-cloud.js
Menggunakan metode seperti
wx.createCameraContextuntuk membuka kamera, mengambil gambar, dan mengakses pengenalan awan.components/easyar-ar/easyar-ar.js
Menggunakan metode seperti xr-frame untuk membuka kamera, mengambil gambar, mengakses pengenalan awan, serta memutar video dan merender template.
components/libs/crs-client.js
Metode pembuatan Token dan akses pengenalan awan.
Peringatan
Jangan gunakan API Key dan API Secret langsung di aplikasi klien (seperti Web, aplikasi mini WeChat, dll.).
Ini hanya untuk demonstrasi, saat digunakan di lingkungan produksi, harap hasilkan Token di sisi server.
Pemahaman mendalam kode
Jika Anda berharap mempelajari pengembangan pengenalan awan lebih dalam, sangat disarankan untuk membaca kode sumber sampel. Berdasarkan ini, Anda dapat mencoba memodifikasi dan memperluas kode sumber.
Kiat
Konten berikut didasarkan pada asumsi bahwa Anda telah memiliki kemampuan pengembangan HTML dan JavaScript tingkat tertentu. Jika Anda belum menguasai keterampilan dasar ini, disarankan untuk mempelajari pengetahuan terkait secara sistematis terlebih dahulu, untuk lebih memahami konten selanjutnya.
Mesin XR/3D yang digunakan di aplikasi mini WeChat adalah XR-FRAME, jika Anda tidak terbiasa, disarankan untuk merujuk ke dokumentasi terlebih dahulu.
Kami akan mengambil perenderan model 3D sebagai contoh untuk memperkenalkan penjelasan kode sumber utama dalam sampel.
UI dan pemrosesan adegan
Penjelasan file components\easyar-ar\easyar-ar.wxml.
Adegan XR dan pengaturan 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, akan dikembalikan saat pengenalan awan mengenali target.
Pemrosesan bisnis
Penjelasan kode utama file components\easyar-ar\easyar-ar.js.
handleTick() {
// Ambil tangkapan layar dan kirim ke layanan pengenalan awan
this.capture().then(base64 => this.crsClient.searchByBase64(base64.split('base64,').pop())).then(res => {
// Hasil yang dikembalikan oleh pengenalan awan
console.info(res)
// Mengembalikan 0 berarti tidak ada target yang 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 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
Lihat kode lengkap di file sumber contoh.
Pemrosesan pengenalan awan
Penjelasan metode utama file components/libs/crs-client.js.
Kirim data base64 gambar ke API layanan pengenalan awan.
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 beranda contoh
- Efek perenderan model