1. Mengenal Apa Itu Object Detection

Pernahkah Anda melihat sistem kamera keamanan yang mampu menandai keberadaan orang atau mobil secara otomatis dengan kotak persegi? Teknologi tersebut dikenal sebagai Object Detection (deteksi objek).

Deteksi objek merupakan cabang dari computer vision yang menggabungkan dua tugas utama: klasifikasi (menentukan objek apa yang ada di dalam gambar) dan lokalisasi (menentukan letak posisi objek tersebut menggunakan koordinat bounding box). Berkat kemajuan arsitektur deep neural network, proses pemindaian ini kini tidak harus bergantung pada server komputasi awan yang mahal—melainkan dapat dijalankan langsung di sisi peramban web (client-side browser) secara aman, cepat, dan hemat latensi.

2. Persiapan & Instalasi Package

Untuk menyusun aplikasi deteksi visual berbasis web, Anda hanya memerlukan pustaka inti machine learning dari Google untuk ekosistem JavaScript:

npm install @tensorflow/tfjs @tensorflow-models/coco-ssd

• @tensorflow/tfjs: Pustaka komputasi tensor berbasis akselerasi WebGL/WebGPU di browser.
• @tensorflow-models/coco-ssd: Model pra-latih (pre-trained model) berbasis arsitektur MobileNet yang dirancang ringan untuk mengenali 80 kategori objek umum secara instan.

3. Contoh Implementasi Sederhana pada ReactJS

Berikut adalah versi ringkas dan bersih dari komponen React untuk membaca kamera laptop atau ponsel, lalu menggambar kotak deteksi di atas kanvas secara langsung:

import React, { useEffect, useRef, useState } from 'react';
import * as tf from '@tensorflow/tfjs';
import * as cocoSsd from '@tensorflow-models/coco-ssd';

export default function SimpleObjectDetection() {
  const videoRef = useRef(null);
  const canvasRef = useRef(null);
  const [model, setModel] = useState(null);
  const [loading, setLoading] = useState(true);

  // 1. Inisialisasi Model Deep Learning
  useEffect(() => {
    async function initModel() {
      await tf.ready();
      const loadedModel = await cocoSsd.load({ base: 'lite_mobilenet_v2' });
      setModel(loadedModel);
      setLoading(false);
    }
    initModel();
  }, []);

  // 2. Mengakses Kamera Web
  const startCamera = async () => {
    const stream = await navigator.mediaDevices.getUserMedia({
      video: { width: 640, height: 480 },
      audio: false,
    });
    if (videoRef.current) {
      videoRef.current.srcObject = stream;
      videoRef.current.play();
    }
  };

  // 3. Loop Inferensi Real-Time
  useEffect(() => {
    let animationId;
    async function detectFrame() {
      if (model && videoRef.current && videoRef.current.readyState === 4) {
        const predictions = await model.detect(videoRef.current);
        drawBoxes(predictions);
      }
      animationId = requestAnimationFrame(detectFrame);
    }

    if (model) detectFrame();
    return () => cancelAnimationFrame(animationId);
  }, [model]);

  // 4. Visualisasi Kotak Deteksi ke Canvas
  const drawBoxes = (predictions) => {
    const ctx = canvasRef.current?.getContext('2d');
    if (!ctx || !videoRef.current) return;

    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    predictions.forEach((pred) => {
      if (pred.score < 0.5) return;
      const [x, y, width, height] = pred.bbox;

      // Gambar Kotak
      ctx.strokeStyle = '#059669';
      ctx.lineWidth = 3;
      ctx.strokeRect(x, y, width, height);

      // Label & Skor
      ctx.fillStyle = '#059669';
      ctx.fillText(
        `${pred.class.toUpperCase()} ${Math.round(pred.score * 100)}%`,
        x,
        y > 10 ? y - 5 : 10
      );
    });
  };

  return (
    <div style={{ position: 'relative', width: 640, height: 480 }}>
      {loading && <p>Memuat model AI...</p>}
      <video ref={videoRef} width="640" height="480" style={{ position: 'absolute' }} />
      <canvas ref={canvasRef} width="640" height="480" style={{ position: 'absolute', zIndex: 10 }} />
      <button onClick={startCamera} style={{ position: 'absolute', zIndex: 20, bottom: 10, left: 10 }}>
        Aktifkan Kamera
      </button>
    </div>
  );
}

4. Bedah Alur Kerja Program

Memahami kode di atas tidaklah rumit jika kita membaginya ke dalam siklus kerja sistem:

1. Pemuatan Model (Model Loading): Aplikasi mengunduh bobot jaringan saraf tiruan (weights) MobileNet yang telah dioptimalkan untuk perangkat ringan, lalu menyimpannya ke memori browser melalui hook useEffect.
2. Pengambilan Aliran Video (Video Streaming): Memanfaatkan Web API standar (navigator.mediaDevices.getUserMedia) untuk menangkap feed visual kamera secara langsung tanpa plugin tambahan.
3. Siklus Inferensi Berulang (Inference Loop): Menggunakan fungsi bawaan peramban requestAnimationFrame, setiap frame visual dari video dikirim ke model untuk dihitung matriks probabilitasnya.
4. Skalasi & Visualisasi Kanvas (Canvas Overlay): Hasil prediksi berupa koordinat [x, y, width, height] dan label objek digambar tepat di atas lapisan kanvas transparan yang berhimpitan dengan elemen video.

5. Pemanfaatan Nyata di Kehidupan Sehari-hari

Studi kasus deteksi objek bukan sekadar demo kode yang menarik di layar, melainkan fondasi bagi otomatisasi berbagai sektor industri:

• Sistem Ritel & Kasir Otomatis: Mengidentifikasi barang belanjaan yang diletakkan di meja kasir secara serentak tanpa perlu memindai kode barcode satu per satu.
• Keamanan & Monitoring Ruangan: Menghitung jumlah orang di dalam ruangan atau memantau area terbatas secara otomatis lewat CCTV pintar.
• Sortir Kualitas Industri (Quality Assurance): Memisahkan produk cacat dan produk layak di ban berjalan manufaktur secara instan.
• Asisten Aksesibilitas: Membantu penyandang tunanetra mengenali barang-barang di sekitar mereka melalui integrasi suara.

6. Tonton Demo Langsungnya

Ingin melihat bagaimana model ini bekerja secara halus dan interaktif saat diuji langsung dengan objek nyata seperti buku, smartphone, dan cangkir? Simak dokumentasi demo berikut: