DEV Community

Cover image for Real-time Object Detection with TensorFlow.js
Oluwamayowa Adeoni
Oluwamayowa Adeoni

Posted on

Real-time Object Detection with TensorFlow.js

#programming #python #aws #datascience

Run computer vision models in the browser — no server, no latency.

Deploying deep learning models in production often requires powerful servers, GPU hosting, and network latency trade-offs. But what if your users could run object detection models right in their browser, powered by WebGL?

That’s exactly what TensorFlow.js makes possible — and in this post, you’ll learn how to build a real-time object detection app that runs entirely on the client-side.

Why TensorFlow.js?

  • Runs directly in the browser
  • Uses WebGL for GPU acceleration
  • No server, no backend, no latency
  • Works offline
  • Ideal for privacy-sensitive apps

What You’ll Need

TensorFlow.js (npm or CDN)

COCO-SSD model or YOLO (pretrained)

A webcam + browser

Basic knowledge of HTML, JS & async functions

Step 1: Set Up HTML + JS Project

Create a simple index.html and include TensorFlow.js + the COCO-SSD model:
index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Real-Time Object Detection</title>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.10.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>
  </head>
  <body>
    <h2>Real-Time Object Detection</h2>
    <video id="webcam" autoplay playsinline width="640" height="480"></video>
    <canvas id="canvas" width="640" height="480"></canvas>
    <script src="script.js"></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Step 2: Capture the Webcam

script.js

const video = document.getElementById('webcam');

async function setupCamera() {
  const stream = await navigator.mediaDevices.getUserMedia({
    video: true,
    audio: false
  });
  video.srcObject = stream;
  return new Promise((resolve) => {
    video.onloadedmetadata = () => resolve(video);
  });
}
Enter fullscreen mode Exit fullscreen mode

Step 3: Load COCO-SSD Model 

let model;

async function loadModel() {
  model = await cocoSsd.load();
  console.log("Model loaded.");
}
Enter fullscreen mode Exit fullscreen mode

Step 4: Start Real-Time Detection 

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

async function detectFrame() {
  const predictions = await model.detect(video);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

  predictions.forEach(pred => {
    ctx.strokeStyle = "#00FFFF";
    ctx.lineWidth = 2;
    ctx.strokeRect(...pred.bbox);
    ctx.font = "18px Arial";
    ctx.fillStyle = "#00FFFF";
    ctx.fillText(pred.class, pred.bbox[0], pred.bbox[1] > 10 ? pred.bbox[1] - 5 : 10);
  });

  requestAnimationFrame(detectFrame);
}
Enter fullscreen mode Exit fullscreen mode

Step 5: Initialize 

(async () => {
  await setupCamera();
  await loadModel();
  detectFrame();
})();
Enter fullscreen mode Exit fullscreen mode

Now visit index.html in your browser and grant webcam permission — boom, you’ve got real-time object detection running locally and instantly!

Why This Works at the Edge

Runs 100% client-side

No video upload or cloud inference

Extremely fast thanks to WebGL

Great for offline or privacy-first use cases (e.g. education, field apps, kiosks)

Optional Enhancements

Swap in YOLOv8 via ONNX.js

Add image capture or video recording

Auto-capture and label training data

Build a Chrome Extension or PWA

Real-World Use Cases

Retail analytics (e.g., people counting)

Edge surveillance

Educational AR apps

Browser-based prototyping for ML engineers

No-backend demos for product teams

Useful Resources

Top comments (1)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.