Real-Time Dog Detection in Browser Using TensorFlow.js and MobileNet V2
This guide demonstrates how to build a web‑based real‑time dog detector that accesses the phone camera via the browser, processes video frames with TensorFlow.js and a pre‑trained COCO‑SSD MobileNet V2 model, and plays an audio alert when a dog is recognized, all deployed on an Android device using Termux.
Background : The author needed a way to detect a dog on a sofa during shedding season and automatically play a sound to deter it.
Requirement Analysis :
Access the phone camera through the Chrome browser using navigator.mediaDevices.getUserMedia .
Perform real‑time object detection on video frames with TensorFlow.js and the COCO‑SSD MobileNet V2 model.
Play a predefined audio clip when the model detects a "dog".
Deploy the solution on an unused Android phone using Termux and a local HTTP server.
Technical Points :
Camera access and video streaming: const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "user" } }); const videoElement = document.getElementById("camera-stream"); videoElement.srcObject = stream;
Load the detection model: let dogDetector; async function loadDogDetector() { const model = await cocoSsd.load(); dogDetector = model; }
Process each video frame and run detection: videoElement.addEventListener("play", async () => { requestAnimationFrame(processVideoFrame); }); async function processVideoFrame() { if (!videoElement.paused && !videoElement.ended) { canvas.width = videoElement.videoWidth; canvas.height = videoElement.videoHeight; ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height); const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); const predictions = await dogDetector.detect(imageData); for (const prediction of predictions) { if (prediction.class === "dog") { playDogBarkSound(); } } requestAnimationFrame(processVideoFrame); } }
Play the alert sound: let playing = false; async function playDogBarkSound() { if (playing) return; playing = true; const audio = new Audio("./getout.mp3"); audio.addEventListener("ended", () => { playing = false; }); audio.volume = 0.5; await audio.play(); }
Deploy with Termux: Install Termux, then install python3 . Run python3 -m http.server 8000 to serve the files. Open the browser on the phone and navigate to http://localhost:8000 .
Project Code (HTML) :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobile Dog Detector</title>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/[email protected]/dist/coco-ssd.min.js"></script>
<style>
#camera-stream { width: 200px; height: auto; }
#name { height: 200px; overflow-y: auto; font-family: Arial, sans-serif; }
</style>
</head>
<body>
<video id="camera-stream" autoplay playsinline></video>
<div id="name" style="height:200px"></div>
<script>/* JavaScript from steps above */</script>
</body>
</html>Result : The application successfully detects a dog in the camera view and plays the configured sound, running entirely on a legacy Android phone without any server‑side components.
Conclusion : By combining browser APIs, TensorFlow.js, and a lightweight deployment via Termux, developers can create fast, on‑device AI solutions for simple automation tasks.
Rare Earth Juejin Tech Community
Juejin, a tech community that helps developers grow.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.