A Vue 3 + Quasar web application for viewing and managing media files (photos, videos, live streams, tachograph files) from flespi IoT / telematics devices.
MediaBox connects to the flespi platform over its REST API and MQTT WebSockets, so device media, upload notifications and command results update in real time.
- 📂 Media explorer per device — browse photos and videos in grid or list view
- 🎬 Player — video.js-based playback (HLS, MPEG-TS) plus low-latency WebRTC live streams
- 🟢 Live stream wall — watch multiple device cameras at once
- 🗓 Timeline — visual per-camera timeline of recorded media
- 🎛 Device commands — request photos/videos, start streams, playback, tachograph downloads
- ⬆️ Uploads — push media files with metadata to a device
- 🔗 Share / embed — generate links and embeddable players for a media file
- 🔄 Real-time updates over MQTT (uploads, connections, command queue)
- Node.js
^18,^16, or^14.19 - npm
>= 6.13.4(or Yarn>= 1.21.1) - A flespi account and an access token
npm install
# or
yarnnpm run devThe dev server runs over HTTPS at https://localhost:7060 with hot reload.
MediaBox needs a flespi token to talk to the platform. You can provide one by:
- appending it as a query param on any route:
https://localhost:7060/#/?token=YOUR_FLESPI_TOKEN, or - letting the app store it in
SessionStorageafter login.
See Query parameters for details.
The region (e.g. flespi.io vs flespi.me) is detected automatically via
/auth/regions.
The app uses hash-based routing, so a query string is read from after the
# (e.g. …/#/device/123?token=…), not before it.
| Param | Required | Description |
|---|---|---|
token |
No | flespi access token, applied on any route. When present it is stored in SessionStorage and reused on later visits, so it only needs to be passed once. Examples: https://localhost:7060/#/?token=<token> or …/#/uuid/<uuid>?token=<token>. The FlespiToken prefix is optional — a bare token works too. |
For path parameters (:deviceid, :uuid) see Routes below.
npm run build # production build to dist/spaBuilt files are meant to be served over an HTTP server — opening index.html
over file:// will not work.
npm run lint| Route | Description |
|---|---|
/ |
Device selection |
/device/:deviceid |
Media explorer for a device (:deviceid — flespi device id) |
/uuid/:uuid |
Standalone player for a single media file (:uuid — media file UUID) |
- Vue 3 (Options API) + Quasar 2 (Vite), dark mode enabled
- Pinia stores:
auth(token / connection / region),media(device files, MQTT subscriptions, timeline),appearance(theme color) - flespi-io-js provides the REST client (
$connector.http) and MQTT client ($connector.socket), wired up insrc/boot/flespi-io.js - video.js for playback; mpegts.js for MPEG-TS live streams; native WebRTC for webrtc streams
Media files are served from https://media.flespi.io/{uuid} (region-specific);
append ?preview=jpeg for thumbnails.
Command forms are rendered via FormBox.
MIT © Gurtam (flespi)