RTS Intruder Detection Demo

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

The app plays a published HLS security-camera stream, detects time-based security events, updates dashboard counters, and provides contextual copilot responses for common security questions.

Features

• HLS video playback for a published security-camera stream
• Time-based alert overlay for intruder and door-activity events
• Dashboard counters for detected activity
• Scene index panel with generated summaries for video segments
• Copilot chat panel with contextual responses
• Responsive layout for desktop and mobile
• Mock API routes for alerts, chat, and scene indexes

Tech stack

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

Getting started

Install dependencies:

npm install

Run the development server:

npm run dev

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

Available scripts

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

Configuration

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

Example:

NEXT_PUBLIC_BASE_PATH=/intruder-detection npm run dev

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

Project structure

src/app/
  api/alerts/     # Returns security alerts 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

Notes

• 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, dashboard defaults, and scene indexes to match your footage.

Deployment

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