A Next.js demo that showcases a real-time dashcam monitoring experience powered by VideoDB-style streaming, scene indexing, alerts, and an AI copilot UI.

The app plays a published HLS dashcam stream, surfaces time-based safety alerts, shows scene summaries as the video progresses, and lets users ask preset copilot questions about events in the footage.

• HLS video playback for a published dashcam stream
• Time-based alert overlay for notable road events
• Scene index panel with generated summaries for video segments
• Copilot chat panel with contextual responses
• Responsive dashboard layout for desktop and mobile
• Mock API routes for alerts, chat, and scene indexes

• Next.js App Router
• React
• TypeScript
• Tailwind CSS
• HLS.js / Video.js

Install dependencies:

npm install

Run the development server:

npm run dev

Open http://localhost:3000 in your browser.

npm run dev # Start the local development server
npm run build # Build the production app
npm run start # Start the production server
npm run lint # Run linting

The app can be served from a sub-path by setting NEXT_PUBLIC_BASE_PATH.

Example:

NEXT_PUBLIC_BASE_PATH=/dashcam-demo npm run dev

For local development at the root path, no environment variables are required.

src/app/
 api/alerts/ # Returns alert events based on playback time
 api/chat/ # Returns copilot responses for preset questions
 api/indexes/ # Returns scene summaries based on playback time
 page.tsx # Main demo page
src/components/ # Video player, activity bar, chat, alerts, dashboard
public/ # Static icons and thumbnails

• The demo uses published VideoDB HLS URLs and static/mock API responses.
• No VideoDB API key is required to run this demo locally.
• If you replace the sample stream, update the related thumbnails, alerts, chat responses, and scene indexes to match your footage.

This is a standard Next.js app and can be deployed to Vercel or any platform that supports Next.js.

npm run build
npm run start