Table of Contents

Panduan pengembang web untuk pengenalan awan gambar

Kunci alur kerja untuk mengimplementasikan pengenalan awan gambar di sisi web mencakup beberapa langkah inti berikut: pertama, memanggil kamera melalui browser untuk menangkap gambar secara real-time, kemudian mengunggah data gambar yang dikumpulkan ke server awan untuk diproses pengenalan, dan akhirnya menerima serta mengurai hasil yang dikembalikan dari awan, sehingga menyelesaikan seluruh siklus pengenalan gambar.

Langkah pengembangan

Implementasi pemrosesan kamera berbeda di berbagai browser. Kode contoh dalam artikel ini tidak mencakup semua masalah kompatibilitas browser, disarankan untuk menyesuaikan dengan lingkungan aktual.

Alurnya sebagai berikut:

flowchart LR

A((Inisialisasi kamera)) --> B[Mengambil gambar dari kamera] --> C{Memanggil API pengenalan awan}
C ----> |Tidak ada target yang dikenali| B
C ----> |Target dikenali| D((Pemrosesan logika bisnis))

Pengaturan awal

Tambahkan elemen berikut di halaman html:

<video id="video"></video>
<canvas id="canvas"></canvas>

Tambahkan konten berikut dalam kode js untuk mendapatkan objek yang diperlukan:

const videoEl = document.querySelector('#video');
const canvasEl = document.querySelector('#canvas');
const canvasCtx = canvasEl.getContext('2d');
  • videoEl adalah elemen video, yang mengikat aliran video kamera ke video untuk pratinjau real-time
  • canvasEl adalah elemen canvas
  • canvasCtx adalah objek context 2d dari canvas

Inisialisasi kamera

const constraints = {
    audio: false,
    video: true,
};
navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
    videoEl.srcObject = stream;
    videoEl.play();
}).catch((err) => {
    console.error(err);
    alert('Kesalahan membuka kamera');
});
  • Pengaturan parameter kamera
    • constraints.video sebagai true, memilih kamera secara otomatis
    • constraints.video sebagai {facingMode: {exact: 'user'}}, menggunakan kamera depan
    • constraints.video sebagai {facingMode: {exact: 'environment'}}, menggunakan kamera belakang
Kiat

Lebih banyak parameter kamera, lihat Parameter pengaturan kamera.

Mengambil gambar dari kamera

canvasCtx.drawImage(videoEl, 0, 0, videoEl.offsetWidth, videoEl.offsetWidth);
const image = canvasElement.toDataURL('image/jpeg', 0.8).split('base64,').pop();

Memanggil API pengenalan awan

// Client-end URL dari cloud image library
const clientendUrl = 'Client-end URL cloud image library Anda';
// Cloud Token dari cloud image library
const token = 'Ini adalah Cloud Token dari cloud image library';
// CRS AppId dari cloud image library
const appId = 'Ini adalah CRS AppId dari cloud image library';
// image adalah gambar yang diambil pada langkah sebelumnya
const image = '/9j/4AAQSkZJRgABAQ......';

fetch(`${clientendUrl}/search`, {
    method: 'POST',
    body: `{ "image": "${image}", "appId": "${appId}", "notracking": true }`,
    headers: {
        'Content-Type': 'application/json;Charset=UTF-8',
        'Authorization': token
    }
}).then(res => res.json()).then(data => {
    console.info(data);
    // TODO: Pemrosesan hasil pengenalan
});
Kiat

Untuk mengirim permintaan jaringan, Anda dapat menggunakan fetch, XMLHttpRequest, atau pustaka axois dll.

Pemrosesan hasil pengenalan

API layanan pengenalan awan setelah menerima permintaan, jika berhasil mengenali target akan mengembalikan hasil pengenalan; jika tidak ada target yang dikenali, akan mengembalikan kode status tidak dikenali; jika kesalahan lain, mengembalikan kode kesalahan dan pesan informasi yang sesuai.

Tidak ada target yang dikenali

Jika tidak ada target yang dikenali, statusCode adalah 17, hasil yang dikembalikan sebagai berikut:

{
  "statusCode" : 17,
  "result" : {
    "message" : "No result: there is no matching."
  },
  "date" : "2026-01-05T05:49:02.651Z",
  "timestamp" : 1767592142651
}

Target dikenali

Jika target dikenali, statusCode adalah 0, hasil yang dikembalikan sebagai berikut:

{
  "statusCode" : 0,
  "result" : {
    "target" : {
      "targetId" : "375a4c2e********915ebc93c400",
      "allowSimilar" : "0",
      "detectableDistinctiveness" : 1,
      "detectableFeatureCount" : 3,
      "type" : "ImageTarget",
      "trackableDistinctiveness" : 0,
      "detectableFeatureDistribution" : 1,
      "trackableFeatureCount" : 3,
      "detectableRate" : 2,
      "trackableFeatureDistribution" : 1,
      "size" : "1",
      "trackablePatchContrast" : 0,
      "meta" : "eyJ2aWRlb1VybCI6Im********pL0Vhc3lBUi1NZWdhLm1wNCJ9",
      "grade" : "2",
      "trackablePatchAmbiguity" : 3,
      "name" : "Mega video",
      "appKey" : "f7ff497********f8068c",
      "trackableRate" : 2,
      "active" : "1",
      "date" : "1746609056804",
      "modified" : 1746609056804
    }
  },
  "date" : "2026-01-05T05:50:36.484Z",
  "timestamp" : 1767592236484
}

Penjelasan bidang utama:

  • targetId: id target
  • meta: informasi tambahan yang dikodekan base64, seperti konten 3D atau URL video yang ditambahkan saat mengunggah gambar pengenalan
  • name: nama target
  • active: "1" untuk status diaktifkan, "0" untuk status dinonaktifkan
Kiat

Untuk informasi bidang lengkap, lihat Referensi API

Pemrosesan logika bisnis

Anda dapat menggunakan informasi dalam meta untuk memproses logika bisnis selanjutnya, seperti memutar video, merender model 3D, dll.

Topik terkait