SmartCam: Live Object Detection in the Browser

Problem

Many detection demos are offline clips or heavy client-side models. A useful demo needs a live stream, readable overlays, and CPU-aware cadence so the server does not melt when FPS spikes.

Solution

A server-side YOLOv8 nano loop that resizes frames, runs detection, draws boxes and labels, and emits MJPEG so the browser only displays the annotated stream.

What Dmitri Derevjanko built

Dmitri wired Ultralytics YOLOv8 into FastAPI, built the OpenCV processing loop, MJPEG endpoint, overlay styling, throttling, Docker/Nginx packaging, and the ai-news repository.

Architecture

1. Frames are captured, resized, and normalized before YOLOv8 nano inference.
2. Cadence control limits how many frames are processed under high input FPS.
3. Overlays (box, class, confidence) are drawn server-side for readable motion.
4. MJPEG streams annotated frames to a small HTML/JS client.
5. Docker plus Nginx keep the demo consistent across environments.

Technologies

• Python
• FastAPI
• YOLOv8
• OpenCV
• MJPEG
• Docker
• Nginx

Result

A browser-visible live detection demo that stays stable on imperfect streams and throttles work when the camera is faster than the CPU.

Limitations

• Nano weights favour throughput over the largest models' accuracy.
• Latency depends on camera, network, and CPU; this is not a guaranteed real-time SLA.
• Classes are the model's trained vocabulary, not a custom factory taxonomy.

Live demo and source

Live demo: https://ai-news.dmitriderevjanko.com

GitHub: https://github.com/DmitriDerevjanko/ai-news

Portfolio case study: https://dmitriderevjanko.com/projects/smartcam/

Other independent projects by Dmitri Derevjanko

• Law Agent
• Marketplace Intelligence
• OSINT Radar
• OncoView AI
• Global Risk Forecast
• SteelVision
• FinanceLens Analyst
• Estonian Company Intelligence Hub
• Opportunity Intelligence Studio