What we built
A self-hosted web portal for a VIOFO consumer dashcam — a control surface that turns a stack of raw .mp4 clips into a real per-drive review experience. Footage downloads itself the moment the car parks, organizes itself by trip, renders an interactive route map, plots speed and G-force telemetry alongside the video, and auto-picks the frame that captured the action so you can spot interesting clips at a glance. No more pulling SD cards. No more fighting the camera's flaky web UI. No more "I'll review the footage later" that never actually happens.
Built for a single owner who wanted more from their dashcam than the box it came in offered. The vendor's official web interface errored half the time and was painful to use; the alternative was popping the SD card every few days, copying clips by hand, and manually cleaning up the camera storage. They wanted what every dashcam owner secretly wants: a system that just handles it.
Now they have one.
Inside Dashcam Hub
The portal is organized around four jobs an owner actually does: see what's happening now (Status), find a specific clip from the catalog (Finder), watch the live feed (Live), and tune the system (Settings). Each tab opens a screen built around that one task — no menus inside menus, no "advanced" sections, no scavenger hunts for the toggle you need.
Finder — every trip, organized by drive
The Timeline view groups every clip by day, with each tile showing the smart-detected action frame instead of a generic first-second snapshot. Trips are auto-detected from the gap between clips, so the catalog reads like a trip log — not a flat dump of file names.
A separate Map view plots every drive on Leaflet, with each clip clickable straight to playback. Filters cover the obvious axes — date range, favorites, last-7-days quick selectors — for when you remember roughly when something happened but not the exact day.
Smart Thumbnails — see the action at a glance
A dashcam clip that triggered for a reason — someone walking too close, a door opened, a sudden brake — usually buries that moment somewhere in the middle of a 60-second file. The default thumbnail is whatever frame the camera grabbed at the start: usually empty road, or a parked-still scene that tells you nothing about what's in the clip.
The portal fixes that. Each clip is analyzed at ingest to find the triggering frame — the moment something actually happened — and that frame becomes the thumbnail. The result: a catalog where every preview tile is informative. You scroll through a day's clips and immediately see which ones are worth watching.
The per-drive review surface
This is where the portal earns its keep. Every clip opens to a unified review screen: video on the left, interactive map on the right with the drive's exact route highlighted, a Chart.js plot above the video tracking longitudinal (accel/brake) and lateral (cornering) G-forces aligned to the timeline, and a tile cluster of live telemetry — current MPH, average MPH, max MPH, compass bearing, lat/lon.
Hit play and everything moves together. The map updates as the video plays. The G-force chart highlights the moment you're watching. The MPH tile reads the real speed at that frame. It stops being "watching dashcam footage" and starts being the kind of debrief you'd get from a serious telemetry rig.
Live
A real-time feed from the camera, streamed straight through the portal. When the car is parked anywhere the portal can reach it, the Live tab shows exactly what the camera sees, right now — for the moments you care that something is happening but don't want to wait for a clip to land.
Sync Status — visibility into the pipeline
Behind every clip in the catalog is a download, a thumbnail render, an ffmpeg pass, a map cache, an index update. The Sync Status screen surfaces all of it in real time — what's processing, what just finished, what's queued — alongside a live log tail that streams as the worker does its thing. When something fails (it happens — a camera reboots mid-transfer, a network hiccups), this is the first place the owner can see why.
Settings — every knob you'd actually want
Where the files should land. How big the local cache can grow. Which folders on the camera get auto-deleted after a verified sync. The cron schedule for syncs. The cron schedule for cleanup. HLS cache size. Web server port. Log level. Concurrent download cap. Inactivity timeout.
The settings panel reads like a list of decisions that could have been hard-coded but were made configurable instead — because every constraint is genuinely environment-specific, and because the owner asked.
Beyond the portal: a modded camera
The dashcam's stock firmware required manually toggling station mode every time the car parked — open the camera's phone app, navigate three menus, tap a button, and now the portal could see it. That ritual is the difference between a system that gets used and one that doesn't.
A small firmware modification fixed it. Station mode is always on. The camera connects to the home network the moment it's in range, the portal sees it, and the sync starts. The owner does nothing — they drive home, and by the time they're done unloading groceries the day's footage is already on the NAS and the SD card is already cleaned up.
Tech stack
- Node.js + Express — REST endpoints, sync worker, HLS streaming proxy
- SQLite — clip index, lightweight and single-file, perfect for a single-user system
- ffmpeg — thumbnail extraction, video remuxing, smart-frame analysis
- Leaflet + OpenStreetMap — every map surface in the portal
- Chart.js — telemetry plots aligned to the video timeline
- Modified VIOFO firmware — keeps wifi station mode permanent, eliminating the manual connect step
Inputs and outputs are exactly what they were before — clips on the camera, owner reviewing footage on a laptop. The portal compressed everything in between: no more SD-card shuffle, no more flaky web UI, no more "I'll get to it later." It just handles it.
The VIOFO dashcam shipped with a bare-bones interface — connect, browse, download .mp4 files. No route view, no speed plot, no way to actually understand a given drive without scrubbing through video by hand. Useful as a recorder, useless as a review tool.
An Express backend that ingests footage from the camera by whichever channel is convenient on the day (USB, MicroSD, or HTTP), parses the embedded telemetry, and serves a custom frontend. Leaflet renders the route on a map, Chart.js handles the speed / G-force / acceleration plots, and clips link straight off the timeline so any moment of a drive is one click away.
Shipped to the driver and in regular use. A folder of .mp4 files is now a real archive of mapped, charted, browsable drives — the kind of view the camera should have shipped with.
Most of these started with one paragraph.
Send yours and we’ll tell you whether we’re the right fit before either of us spends another minute on it.