A web page that watches your camera live — 30 frames a second, offline, no server

Here's the idea in one line: a single web page turns on your camera and live draws boxes around everything it sees — a mug, a plant, your hand. 30 frames a second. No server, no key, and it works in airplane mode too.

And here's what's genuinely new. Running a model over live video in the browser just didn't work before — it was slow, frames lagged, and every decent project moved to a server with a video stream. In July 2026 Google shipped LiteRT.js — the very engine that runs AI on your phone, on Android and iOS, now in the browser. And crucially, it can compute on the GPU via WebGPU — several times faster than earlier web runtimes, and against a plain CPU the gap runs into tens of times. That speed jump is what the whole project rides on: the model finally keeps up with the video.

Why this one

This isn't the model built into the browser that reads one frame and hands back JSON. That model is fixed — a tiny chat that "looked at a photo." Here you bring your own specialized model — an object detector, a hand tracker, an upscaler — and run it over a stream of frames. That's a different class of task: not "parse this snapshot," but "watch and react right now."

And you'll actually use it. Wave your hand — the slides flip. Point the camera at your desk — the page names everything on it. And the camera picture never leaves: it's computed on your device, offline, free. That's the kind of thing you're not shy to show — and you'll want to.

What you'll learn

• Your own model in the browser. For the first time you plug in not someone's cloud service but a concrete model file — a .tflite you download ready-made from Kaggle or Hugging Face. A whole class opens up: detection, body pose, depth, upscaling, speech recognition — all local.
• GPU vs CPU. Tell the engine to compute on the graphics card (webgpu) and you'll see the difference live: same frames, but smooth. You'll get why "on-device" stopped meaning "slow."
• The real-time loop. You'll learn to run a model in a loop over camera frames and draw the result on top. That's the backbone of anything "watch and react" — from games to virtual try-ons.

A ready starter prompt

Don't ask the agent to "make a site that recognizes objects from the camera" — out of habit it'll wire up a cloud vision API and a key. Say it plainly: the model is local, .tflite, computes on the GPU, over live video.

The strong prompt leaves nothing to guesswork: it's clear the model is local and in .tflite form, that it computes on the GPU, that the input is a stream of frames and not a single shot, and that there's a fallback. The first result lands closer to what you meant.

What you'll get

You open the page, allow the camera — and over the live video, labeled boxes appear: mug, laptop, plant. Move an object and the box follows it, smoothly. In the corner, an honest frame counter. Turn off the wifi and it keeps working, because there's nothing for the compute to reach out to: the model is already yours.

And it scales with one file swap. Drop in a hand-tracking model and you've got a gesture remote: make a fist — pause, wave — next slide. Drop in an upscaler and the page cleans up blurry frames. One loop, different models.

The weekend plan

• Friday evening: start an empty index.html, load @litertjs/core, and get the camera into a <video>. Goal — see your own face on the page.
• Saturday: download a ready-made detection .tflite, compile it with webgpu, run one frame, and log the boxes to the console.
• Sunday: draw the boxes and labels on a <canvas> over the video, add the FPS counter and the fallback note. Ship it as a static page — no server needed.

That's exactly the scale where a weekend gives you a finished, living thing — and you feel, for the first time, that the model runs on your machine, not somewhere in the cloud for money.

Source: Google Developers Blog — LiteRT.js