Raspberry Pi Webcam Dashboard (Frontend)

A Next.js-based frontend for a Raspberry Pi webcam system, providing a responsive UI to manage cameras (Raspberry Pi via picamera2 or CameraIDS), preview live streams, capture and store images, and monitor system metrics like CPU usage, memory, and temperature. Integrates with the webcam-backend API.

Features

• Camera Management: Select and control Raspberry Pi or CameraIDS cameras.
• Live Preview: Stream camera feeds via WebSocket with start/stop functionality.
• Image Storage: Capture images manually or at set intervals, with access to stored images in a file explorer.
• System Monitoring: Display Raspberry Pi metrics (hostname, platform, architecture, CPU temperature, per-core CPU usage, memory, and storage).
• Responsive UI: Built with Next.js 15.1.7, shadcn/ui (New York style), Tailwind CSS, and Lucide icons.

Prerequisites

• Hardware:
  • Raspberry Pi (tested on Raspberry Pi 5) with compatible cameras (picamera or CameraIDS).
• Software:
  • Node.js (v18 or later).
  • Next.js (15.1.7).
  • Systemd (for production deployment).
• Backend:
  • webcam-backend running on http://0.0.0.0:8000.
  • For CameraIDS, IDS Peak software must be installed (see backend README).
• Dependencies: Listed in package.json.

Installation

1. Clone the Repository:

   git clone https://github.com/gnaegit/webcam-frontend.git
   mv webcam-frontend /home/pi/webcam/webcam-frontend
   cd /home/pi/webcam/webcam-frontend

2. Install Dependencies:

   npm install

   Installs next@15.1.7, react@19.0.0, react-use-websocket, @radix-ui/* (shadcn/ui), lucide-react, tailwindcss, and other dependencies.

3. Verify UI and Styling Setup:

   • shadcn/ui configured with "New York" style in components.json.
   • Tailwind CSS configured in tailwind.config.ts and src/app/globals.css.
   • Path aliases: @/components, @/lib/utils, @/ui, @/lib, @/hooks.
   • Lucide icons enabled for UI elements.

4. Configure Proxy:

   • next.config.js proxies /py/:path* to the backend at http://0.0.0.0:8000:

     const nextConfig = {
       async rewrites() {
         return [
           {
             source: "/py/:path*",
             destination: "http://0.0.0.0:8000/:path*",
           },
         ];
       },
     };
     export default nextConfig;

   • Update destination if the backend is hosted elsewhere.

5. Set Up Systemd Service (Production):

   • Copy webcam-frontend.service to /etc/systemd/system/:

     sudo cp webcam-frontend.service /etc/systemd/system/

   • Verify ExecStart uses the correct npm path:

     [Unit]
     Description=Webcam Next.js Frontend
     After=network.target
     
     [Service]
     User=pi
     WorkingDirectory=/home/pi/webcam/webcam-frontend
     ExecStart=/usr/bin/npm run start
     Restart=always
     Environment=PORT=3000
     StandardOutput=journal
     StandardError=journal
     
     [Install]
     WantedBy=multi-user.target

   • Enable the service (do not start during development):

     sudo systemctl enable webcam-frontend.service

6. Verify Setup:

   • Ensure the backend is running on http://0.0.0.0:8000.
   • Start the frontend service (production):

     sudo systemctl start webcam-frontend.service
     sudo systemctl status webcam-frontend.service

Usage

1. Access the Application:

   • Open http://<raspberry-pi-ip>:3000 in a browser.

2. Welcome Page (/):

   • Links to Camera Page and Stats Page.

3. Camera Page (/camera):

   • Select a camera (Raspberry Pi or CameraIDS).
   • Start/stop live preview via WebSocket.
   • Capture images manually or set storage intervals.
   • Adjust CameraIDS settings (exposure, gain) if supported.
   • Access stored images via "View Stored Images" (links to /camera/images).

4. File Explorer (/camera/images):

   • Browse, download, or delete stored images and folders.
   • WebSocket updates refresh the file list when new images are saved.

5. Stats Page (/stats):

   • Displays system metrics: hostname, platform, architecture, CPU temperature, per-core CPU usage, memory, and storage usage.
   • Updates every 5 seconds.

6. Monitoring:

   • Check WebSocket connection status and camera states on the Camera Page.
   • View errors/warnings in the UI or browser console.

Project Structure

• app/page.tsx: Welcome page with navigation links.
• app/camera/page.tsx: Camera management, live preview, and storage controls.
• app/camera/images/page.tsx: File explorer for stored images.
• app/stats/page.tsx: System metrics display.
• next.config.js: Configures backend proxy.
• components.json: shadcn/ui and Tailwind CSS configuration.
• package.json: Dependencies and scripts (dev, build, start).
• webcam-frontend.service: Systemd service for production.

Development

1. Stop Production Services:

   sudo systemctl stop webcam-frontend.service
   sudo systemctl stop webcam-backend.service

   • Verify ports are free:

     sudo lsof -i :3000
     sudo lsof -i :8000

2. Run the Backend:

   • Follow webcam-backend README:

     cd ../webcam-backend
     source venv/bin/activate
     uvicorn main:app --host 0.0.0.0 --port 8000

3. Run the Frontend:

   npm run dev

   • Uses Turbopack (next dev --turbopack) for hot-reloading.
   • Access at http://localhost:3000.

4. Testing:

   • Test camera selection, live preview, image capture/storage, and file explorer.
   • Verify system stats update correctly.
   • Check browser console and backend logs for errors.

Production

1. Stop Development Servers:

   • Terminate npm run dev and backend processes.

2. Build the Application:

   npm run build

3. Start Services:

   sudo systemctl start webcam-frontend.service
   sudo systemctl start webcam-backend.service

4. Verify:

   • Check service status:

     sudo systemctl status webcam-frontend.service
     sudo systemctl status webcam-backend.service

   • Access at http://<raspberry-pi-ip>:3000.

Troubleshooting

• Service Fails to Start:
  • Check logs: journalctl -u webcam-frontend.service.
  • Verify npm path: which npm.
  • Ensure /home/pi/webcam/webcam-frontend exists.
• Port Conflicts:
  • Check occupied ports: sudo lsof -i :3000 or sudo lsof -i :8000.
  • Terminate conflicting processes or change ports.
• Backend Unavailable:
  • Confirm backend is running on http://0.0.0.0:8000.
  • Check backend logs: journalctl -u webcam-backend.service.
• Camera Issues:
  • Verify camera hardware and backend configuration.
  • For CameraIDS, ensure IDS Peak software is installed (see backend README).
• WebSocket Issues:
  • Ensure backend WebSocket endpoint (/py/ws) is accessible.
  • Check browser console for connection errors.

Contributing

Submit issues or pull requests to webcam-frontend or webcam-backend.

License

MIT License.