Tripframe

Dashcams name every clip with a string of digits, like 2024_0315_143022_000123F.MP4, and split each moment over separate front and rear files. Tripframe opens the SD card in your browser and turns that folder into a library: every clip by day and time, front and rear paired into one moment, ready to play, step through and save.

Nothing is uploaded. Files are read locally with the File System Access API. There is no server that receives your footage, no account and no tracking.

Features

• Timeline by day and time: date, time, camera and recording type are read straight from the file names.
• Trips: clips that follow each other become a trip, with its length and the time since the previous one. Every clip with GPS shows its top speed.
• Front, rear and interior in one moment: the cameras of the same second are paired, with a thumbnail of each.
• Synced playback: side by side, picture in picture or one camera. Swap front and rear with a button, the W key or a double-click. Drag the small picture's corner or the split line to resize. Scroll to zoom into the picture and drag to pan.
• Frame by frame: step with , and .; the real clock time and frame number are shown.
• Save frames as PNG, JPG or BMP, of one camera or all cameras side by side, named with the exact date and time; also one frame every N seconds.
• Save video in the layout you see: one camera is the original file, picture in picture or side by side is encoded into a new MP4.
• Export part of a clip faster, slower or backwards, with or without sound (I and O set the start and end).
• Join a trip into one video: one camera without re-encoding, or front and rear in one picture (picture in picture or side by side), with the route as GPX.
• GPS on a map: read from the video itself (Viofo/Novatek, BlackVue, GoPro). Map, satellite or hybrid view, the route coloured by speed, a heading arrow, km/h or mph.
• Telemetry: graphs of speed, distance, heading, altitude, gradient, G-force, satellites and HDOP; a data table; driving data on the video (H).
• Markers on the route (T), with optional street addresses; export and import as GPX. Route export as GPX, KML, CSV or GeoJSON.
• Weather at the time and place of the drive, if you switch online lookups on.
• Loud moments: finds bumps and horns in the sound of one clip, or of every clip in the folder.
• Filters for camera and recording type (normal, event/locked, parking, photos), a day list that follows your scroll, and autoplay of the next clip.
• Keyboard first: press ? in the player for every shortcut.
• 11 languages: English, Nederlands, Deutsch, Français, Español, Italiano, Português, Polski, Русский, 한국어 and 日本語. Light and dark theme.
• Works for ordinary folders too: any folder of photos and videos (a phone export, an action camera, a drone card) is sorted by day and time.

Supported dashcams

Brand	Example file name	Read from the name
Viofo and other Novatek-based cameras	2024_0315_143022_000123F.MP4	date, time, camera, parking/event
BlackVue	20240315_143022_NF.mp4	date, time, camera, normal/event/parking/manual
Thinkware	REC_2024_03_15_14_30_22_F.MP4	date, time, camera, recording type
70mai	NO20240315-143022-000123F.mp4	date, time, camera, normal/event/parking
Nextbase	240315_143022_001_FH.MP4	date, time, camera

Locked clips in folders such as RO, Event or Protect are marked as events, and Parking folders as parking. Other cameras work when the file name contains a date; otherwise the file's modification date is used. GPS is read from Viofo/Novatek freeGPS blocks, BlackVue NMEA data (with altitude and satellites from GGA lines) and the GoPro GPMF telemetry track (with altitude and the accelerometer).

Is your camera missing or named differently? Open an issue with a few example file names.

Use it

1. Take the microSD card out of the dashcam and put it in your computer.
2. Open tripframe.vercel.app/app and choose the card or its DCIM folder.
3. Pick a moment and play.

Browser support

Browser	Support
Chrome, Edge	Full: choose a folder, drag and drop, remembers the last folder
Firefox, Safari	Works through a folder picker

Many dashcams record in H.265 (HEVC). Edge plays it on most Windows PCs, Chrome needs the HEVC Video Extension from the Microsoft Store, and Safari on a Mac plays it out of the box.

Keyboard shortcuts

Key	Action
Space / K	Play or pause
, / .	One frame back or forward
← / →	5 seconds back or forward (Shift: 1 second)
↑ / ↓	Previous or next clip
W	Swap front and rear
1 / 2 / 3	Side by side, picture in picture, one camera
M	Mute or unmute
- / +	Volume down or up
G	Show or hide the map
H	Show or hide driving data on the video
T	Add a marker on the route
S	Save the current frame
I / O	Set the start or end of the part to export
R	Save the clip as a video in the layout you see
0	Reset zoom
?	Show the shortcuts
Esc	Back to the library

Privacy

Tripframe is a static web page. Your browser reads the folder you choose and your footage is never sent anywhere: no uploads, no account, no analytics, no cookies. It only reads files and never changes anything on the SD card. When a clip with GPS is shown on the map, map pictures are loaded from OpenStreetMap, or from Esri for the satellite views. Weather (Open-Meteo) and street addresses (OpenStreetMap Nominatim) are only looked up when you switch that on. See the privacy page.

Development

Tripframe is plain JavaScript with Vite, Leaflet for the map, Motion for animation, Lucide icons and mp4-muxer for writing joined and reversed videos. No framework, no backend. npm test runs the unit tests.

git clone https://github.com/JJanyar/tripframe.git
cd tripframe
npm install
npm run dev

npm run build writes a static site to dist/. The build also writes every site page and blog post per language (/nl/, /de/features/ …) with the text in the HTML, a sitemap.xml and structured data, so search engines and AI assistants can read the pages without running JavaScript.

Project layout

Path	What it holds
index.html, src/landing.*	The homepage
features/, dashcams/, how-it-works/, faq/, privacy/, 404.html	The other site pages; src/page.js and src/pages.css are shared
src/partials/	The navigation and footer, put into every page at build time
app/index.html, src/app.js	The library: folder scan, filters, trips, day list
src/viewer.js, src/record.js, src/clip.js	The player, frame and clip export
src/merge.js	Joining clips into one MP4, and two cameras into one picture
src/route.js, src/plot.js, src/geotags.js, src/online.js	GPS export, graphs, markers, weather and addresses
src/audio.js	Finding loud moments
src/parse.js	File name parsing and front/rear pairing
src/mp4.js	Frame rate, tracks, and GPS and telemetry from MP4 files
src/locales/	All interface text, one file per language
blog/, blog.js	Blog posts in Markdown (per language) and their build step
seo.js	Build step for static text, language pages and the sitemap
public/brand/	Logo and icons

Contributing

Contributions are welcome, especially support for more dashcam brands, translations and bug reports with example file names. See CONTRIBUTING.md.

Credits

Sample dashcam photos on the homepage, and the demo clips in public/demo made from them, are from Wikimedia Commons and are in the public domain or CC0. Flags from flag-icons (MIT). Map data © OpenStreetMap contributors.

License

MIT