The Problem

Tesla dashcam footage is stored as a series of one‑minute MP4 clips with embedded SEI telemetry. Users must manually stitch clips, extract telemetry, and overlay data—a time‑consuming, error‑prone process that usually requires third‑party tools.

What This Does

exportdash.cam is a client‑side viewer and exporter. The UI lives under src/app/ with page.tsx as the Next.js entry point. Dropping a TeslaCam folder onto src/components/DropZone.tsx triggers src/hooks/useSeiData.ts, which reads each clip, parses SEI packets via src/lib/dashcam-mp4.ts (protobufjs‑driven) and builds a time‑aligned telemetry stream.

Key UI pieces:

  • VideoPlayer.tsx – multi‑camera playback with controls.
  • TelemetryCard.tsx – live speed/G‑force overlay.
  • TelemetryTimeline.tsx – event bar (brake, gas, turn signals).
  • MapView.tsx – Leaflet map synced to GPS data.
  • VideoExporter.tsx – WebCodecs‑based export that burns telemetry into a new MP4.

All processing stays in the browser; no server‑side storage or upload is required.

How It Is Wired

  1. Entry point – src/app/page.tsx renders <DropZone />.
  2. File ingestion – DropZone.tsx calls useSeiData with the dropped folder path.
  3. SEI extraction – useSeiData.ts iterates files, invoking dashcam-mp4.ts → parseMp4 → extractSei (protobuf schema in public/dashcam.proto). The resulting telemetry objects are stored in React state.
  4. Sequence detection – src/lib/sequence-detector.ts groups consecutive clips into a single playback sequence; the detector is called from useSeiData.
  5. Rendering – VideoPlayer.tsx receives the ordered clip list and telemetry; it composes TelemetryCard, TelemetryTimeline, MapView, and optional VideoExporter. Each component imports only the data it needs, keeping the import graph shallow (18 internal modules, 6 edges, no cycles).
  6. Export – When the user clicks “Export”, VideoExporter.tsx pulls the current playback buffer, uses WebCodecs to re‑encode, and writes telemetry frames into the output MP4.

The most connected module is src/components/VideoPlayer.tsx (imports 4 others, depth 8), making it the primary impact zone for any UI change.

How To Use It

# Clone the upstream repository
git clone https://github.com/moses-y/exportdash.cam.git
cd exportdash.cam

# Install dependencies (npm is declared in package.json)
npm install

# Development server
npm run dev        # starts Next.js on http://localhost:3000

For containerised deployment:

docker build -t exportdash .
docker run -p 8080:80 exportdash   # UI reachable at http://localhost:8080

Or with Compose: docker compose up.

No environment variables or external services are required; all assets are under public/.

Real‑World Use

A fleet‑maintenance tool can embed this repo in an internal portal. Technicians drop a vehicle’s TeslaCam folder, review telemetry‑enhanced playback, and export a single video for incident reports—all without leaving the browser or exposing raw footage to a backend.

Code Health & Issues

  • HIGH – Dependency advisory – next@16.1.4 has CVE‑2026‑44575. Upgrade to the patched version.
  • HIGH – No test suite – 18 source files, zero test files. Add unit/integration tests and a CI step.
  • HIGH – No CI pipeline – No GitHub Actions or other workflow. Create a build‑and‑test workflow.
  • HIGH – No Docker build gate – Dockerfile exists but is never validated automatically. Add a CI job that builds the image.
  • MEDIUM – Dependabot missing – No automated dependency updates. Add .github/dependabot.yml.
  • MEDIUM – Base images not pinned – node:20-alpine and nginx:alpine are mutable tags. Pin by digest.
  • MEDIUM – Container runs as root – No USER directive. Create a non‑root user and switch before CMD.
  • MEDIUM – Oversized files – VideoPlayer.tsx (743 lines), TelemetryTimeline.tsx, VideoExporter.tsx. Split by responsibility.
  • MEDIUM – Deep nesting – VideoPlayer.tsx has indentation depth 8; refactor with early returns/guards.
  • LOW – Missing repo conventions – No .editorconfig, .gitattributes, or formatter config. Add them to standardise contributions.

No tests, CI, or build validation currently exist, which raises regression risk for UI‑heavy components.

The Bottom Line

exportdash.cam delivers a fully client‑side Tesla dashcam viewer with telemetry overlay and export, built on Next.js, Tailwind, and WebCodecs. The code works but suffers from large, deeply nested components, an outdated Next.js version with a known CVE, and a missing testing/CI infrastructure. It is suitable for teams that need a quick, self‑hosted viewer and are prepared to invest in refactoring and adding automated quality gates.