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.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
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.