Table of Contents

Panduan developer Web image cloud recognition

Proses utama untuk mengimplementasikan image cloud recognition di Web mencakup beberapa langkah inti: pertama memanggil kamera melalui browser untuk menangkap gambar real-time, kemudian mengunggah data gambar yang dikumpulkan ke server cloud untuk diproses, dan akhirnya menerima serta mengurai hasil yang dikembalikan dari cloud untuk menyelesaikan loop image recognition.

Langkah pengembangan

Implementasi pemrosesan kamera berbeda antar browser. Kode contoh dalam artikel ini tidak mencakup semua masalah kompatibilitas browser, jadi disarankan untuk menyesuaikannya dengan lingkungan sebenarnya.

Alurnya sebagai berikut:

flowchart LR

A((Inisialisasi kamera)) --> B[Ambil gambar kamera] --> C{Panggil cloud recognition API}
C ----> |Target tidak dikenali| B
C ----> |Target dikenali| D((Pemrosesan logika bisnis))

Pengaturan awal

Tambahkan elemen berikut ke halaman html:

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

Tambahkan konten berikut ke 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; binding stream video kamera ke video untuk preview 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('打开摄像头错误');
});
  • Pengaturan parameter kamera
    • constraints.video adalah true, memilih kamera secara otomatis
    • constraints.video adalah {facingMode: {exact: 'user'}}, menggunakan kamera depan
    • constraints.video adalah {facingMode: {exact: 'environment'}}, menggunakan kamera belakang
Kiat

Untuk parameter kamera lainnya, lihat parameter pengaturan kamera.

Mengambil gambar kamera

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

Memanggil cloud recognition API

// Client-end URL pustaka gambar cloud
const clientendUrl = '您云图库的 Client-end URL';
// Cloud Token pustaka gambar cloud
const token = '这里是云图库的 Cloud Token';
// CRS AppId pustaka gambar cloud
const appId = '这里是云图库的 CRS AppId';
// 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

Permintaan jaringan dapat dikirim menggunakan fetch, XMLHttpRequest, pustaka axois, dan sebagainya.

Pemrosesan hasil recognition

Setelah cloud recognition service API menerima permintaan, jika target berhasil dikenali maka hasil recognition dikembalikan; jika target tidak dikenali, status code tidak dikenali dikembalikan; untuk kesalahan lain, error code dan pesan terkait dikembalikan.

Target tidak dikenali

Jika target tidak dikenali, statusCode adalah 17, dan hasil yang dikembalikan adalah 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, dan hasil yang dikembalikan adalah 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
}

Deskripsi field utama:

  • targetId: id target
  • meta: informasi tambahan yang dienkode base64, seperti konten 3D atau URL video yang ditambahkan saat mengunggah image recognition
  • name: nama target
  • active: "1" berarti status aktif, "0" berarti status nonaktif
Kiat

Untuk informasi field lengkap, lihat API reference

Pemrosesan logika bisnis

Anda dapat menggunakan informasi dalam meta untuk memproses logika bisnis berikutnya, seperti memutar video, merender model 3D, dan sebagainya.

Topik terkait