Table of Contents

Contoh Web pengenalan cloud gambar

Artikel ini mengajak Anda menganalisis kode sampel secara mendalam, membantu Anda memahaminya dan mengembangkan contoh Anda sendiri berdasarkan sampel tersebut.

Untuk instruksi unduhan dan konfigurasi sample, lihat Mulai cepat.

Pengaturan target pengenalan

Dalam manajemen pengenalan cloud, unggah sebuah gambar pengenalan.

  • Nama gambar pengenalan: beri target pengenalan sebuah nama, seperti demo.
  • Unggah gambar pengenalan: pilih dan unggah sebuah 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 otomatis oleh sistem berdasarkan gambar yang Anda unggah. Ukuran gambar pengenalan sesuai dengan ukuran konten virtual, dan 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

Mendapatkan target pengenalan

Setelah memanggil API pengenalan cloud dan mengenali target, informasi target akan dikembalikan dengan struktur berikut:

{
  "statusCode" : 0,
  "result" : {
    "target" : {
      "targetId" : "375a4c2e********915ebc93c400",
      "meta" : "eyJtb2RlbFVybCI6ICJhc3NldC9tb2RlbC90cmV4X3YzLmZieCIsICJzY2FsZSI6IDAuMDJ9",
      "name" : "demo",
      "modified" : 1746609056804
    }
  },
  "date" : "2026-01-05T05:50:36.484Z",
  "timestamp" : 1767592236484
}
Kiat

Untuk informasi field lengkap, lihat Referensi API

Dekode meta dengan base64 untuk mendapatkan informasi meta asli.

// data adalah data yang dikembalikan
const meta = data.result.target.meta;
const modelInfo = JSON.parse(atob(meta));

Deskripsi kode utama

  • src/webar.js

    Mengemas beberapa operasi dasar, seperti inisialisasi kamera, pengambilan gambar, dan pemanggilan pengenalan cloud.

  • src/app.js

    Mengemas operasi dasar antarmuka, seperti pergantian kamera, interaksi antarmuka, dan 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 kode mendalam

Jika Anda ingin mempelajari pengembangan pengenalan cloud secara lebih mendalam, sangat disarankan membaca kode sumber sample. Berdasarkan ini, Anda dapat mencoba memodifikasi dan memperluas kode sumber.

Kiat

Penjelasan berikut didasarkan pada prasyarat bahwa Anda sudah memiliki kemampuan pengembangan HTML dan JavaScript pada tingkat tertentu. Jika Anda belum menguasai keterampilan dasar ini, disarankan mempelajari pengetahuan terkait secara sistematis terlebih dahulu agar dapat lebih memahami konten berikutnya.

Kami menggunakan TokenThreeJsExample (rendering model 3D) sebagai contoh untuk memperkenalkan deskripsi kode sumber utama dalam sample.

Pemrosesan bisnis

The main methods in TokenThreeJsExample/asset/js/app.js are described below.

  • Inisialisasi objek App
// inisialisasi objek App dengan Client-end URL pengenalan cloud
const app = new App('https://af0c1ca3b........0601c74.cn1.crs.easyar.com:8443');
  • Atur informasi cloud recognition
// atur AppId dan token pustaka pengenalan cloud; hanya salah satu dari ini atau app.useEasyAr() yang dapat digunakan
app.setToken({
    'crsAppId': 'f7ff4977......9984ef8068c', // CRS AppId pustaka pengenalan cloud
    'token': 'pQWnZo1Qt4drnc........QXUQambomdPWEj9So' // Token yang dihasilkan dari APIKey + APISecret
});

// jika menggunakan lingkungan terintegrasi yang disediakan EasyAR
// app.useEasyAr();
  • Proses logika bisnis
app.callback = (msg) => {
    // msg adalah informasi target yang dikenali
    // parse field meta di dalamnya dan proses logika bisnis
};

UI dan inisialisasi Cloud Recognition

Penjelasan metode utama file html/src/app.js.

  • Inisialisasi pemilihan kamera
constructor(url = '') {
}
  • Mengonfigurasi Cloud Recognition dengan Token kustom
setToken(token) {
}
  • Mengonfigurasi Cloud Recognition dengan lingkungan terintegrasi EasyAR
useEasyAr() {
}

Pemrosesan Cloud Recognition

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

  • Screenshot kamera dan konfigurasi Cloud Recognition
constructor(interval, recognizeUrl, token, container) {
}
  • Membuka kamera dan mendeteksi pengaturan preview video stream landscape/portrait
openCamera(constraints) {
}
  • Memulai recognition
startRecognize(callback) {
}
  • Screenshot
captureVideo() {
}
  • Mengirim screenshot ke layanan Cloud Recognition untuk recognition
httpPost(data) {
}

Topik terkait