Table of Contents

Web contoh pengenalan gambar cloud

Artikel ini akan membawa Anda menganalisis kode contoh secara mendalam, membantu Anda memahami dan mengembangkan contoh Anda sendiri berdasarkan ini.

Untuk instruksi pengunduhan dan konfigurasi sampel, silakan lihat pengantar cepat.

Pengaturan target pengenalan

Di manajemen pengenalan cloud, unggah gambar pengenalan.

  • Nama gambar pengenalan: Beri nama untuk target pengenalan, misalnya demo.
  • Unggah gambar pengenalan: Pilih dan unggah gambar. Gambar yang digunakan dalam sampel ini adalah: https://www.easyar.cn/assets/images/webar/xiaoxiongmao.png.
  • 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 adalah: {"modelUrl": "asset/model/trex_v3.fbx", "scale": 0.02}.

crs sample

Pengambilan target pengenalan

Saat memanggil API pengenalan cloud, setelah target dikenali, informasi target akan dikembalikan, dengan struktur sebagai berikut:

{
  "statusCode" : 0,
  "result" : {
    "target" : {
      "targetId" : "375a4c2e********915ebc93c400",
      "meta" : "eyJtb2RlbFVybCI6ICJhc3NldC9tb2RlbC90cmV4X3YzLmZieCIsICJzY2FsZSI6IDAuMDJ9",
      "name" : "demo",
      "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));

Penjelasan kode utama

  • src/webar.js

    Mengenkapsulasi beberapa operasi dasar, seperti menginisialisasi kamera, mengambil gambar, dan memanggil fungsi pengenalan cloud.

  • src/app.js

    Mengenkapsulasi operasi dasar antarmuka, seperti pengalihan kamera, interaksi antarmuka, dan operasi inisialisasi WebAR.

  • TokenVideoExample/asset/js/app.js dan TokenThreeJsExample/asset/js/app.js

    Konfigurasi pengenalan cloud, dan pemrosesan bisnis setelah pengenalan berhasil.

Efek yang diharapkan

  • Antarmuka setelah inisialisasi kamera

Efek yang diharapkan

  • Efek pemutaran video

Efek yang diharapkan

  • Efek rendering model

Efek yang diharapkan

Pemahaman mendalam kode

Jika Anda berharap untuk mempelajari pengembangan pengenalan cloud 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.

Kami akan menggunakan TokenThreeJsExample (merender model 3D) sebagai contoh, untuk memperkenalkan penjelasan kode sumber utama dalam sampel.

Pemrosesan bisnis

Penjelasan metode utama pada file TokenThreeJsExample/asset/js/app.js.

  • Inisialisasi objek App
// Inisialisasi objek App menggunakan URL Client-end cloud recognition
const app = new App('https://af0c1ca3b........0601c74.cn1.crs.easyar.com:8443');
  • Mengatur informasi cloud recognition
// Mengatur AppId dan token cloud recognition library, hanya boleh memilih satu dengan app.useEasyAr()
app.setToken({
    'crsAppId': 'f7ff4977......9984ef8068c', // CRS AppId dari cloud recognition library
    'token': 'pQWnZo1Qt4drnc........QXUQambomdPWEj9So' // Token yang dihasilkan dari APIKey + APISecret
});

// Jika menggunakan lingkungan terintegrasi yang disediakan EasyAR
// app.useEasyAr();
  • Pemrosesan logika bisnis
app.callback = (msg) => {
    // msg adalah informasi target yang dikenali
    // Parsing field meta di dalamnya, lalu proses logika bisnis
};

UI dan inisialisasi pengenalan awan

File html/src/app.js penjelasan metode utama.

  • Inisialisasi pemilihan kamera
constructor(url = '') {
}
  • Konfigurasi pengenalan awan menggunakan Token kustom
setToken(token) {
}
  • Konfigurasi pengenalan awan menggunakan lingkungan terintegrasi EasyAR
useEasyAr() {
}

Pemrosesan pengenalan awan

Penjelasan metode utama pada file html/src/webar.js.

  • Konfigurasi tangkapan kamera dan pengenalan awan
constructor(interval, recognizeUrl, token, container) {
}
  • Membuka kamera, mendeteksi dan mengatur pratinjau aliran video potret/lanskap
openCamera(constraints) {
}
  • Memulai pengenalan
startRecognize(callback) {
}
  • Menangkap gambar
captureVideo() {
}
  • Mengirim tangkapan layar ke layanan pengenalan awan
httpPost(data) {
}

Topik terkait