Raspberry Pi 5 Camera Web Browser Integration Issue

Question

Problem I'm trying to stream Raspberry Pi 5 camera feed to a web browser using Next.js. While libcamera-hello works in terminal, I can't get the camera stream to work in the browser. Current Setup Raspberry Pi 5 (Raspberry Pi OS Bookworm) Camera Module 3 (IMX708) Next.js 14.0.4 libcamera v0.3.2

What I've Tried

1. Using MediaDevices API:

const stream = await navigator.mediaDevices.getUserMedia({
  video: {
    deviceId: { exact: '/dev/video0' }
  }
});

2. 2. Using libcamera-vid:

libcamera-vid --camera 0 --width 1280 --height 720 --codec mjpeg --inline -t 0 -o http://0.0.0.0:8080

3.** Using v4l2loopback:**

sudo modprobe v4l2loopback
libcamera-vid -t 0 --inline -o /dev/video0

**Error Messages **

• Browser doesn't prompt for camera permission
• No video stream appears
• Camera works with libcamera-hello in terminal

**System Info ** **Video Devices: **

$ ls -l /dev/video*
crw-rw-rw-+ 1 root video 81, 17 Jan  9 20:09 /dev/video0
crw-rw-rw-+ 1 root video 81, 18 Jan  9 20:09 /dev/video1
crw-rw-rw-+ 1 root video 81, 16 Jan  9 20:09 /dev/video19
# ... more devices

**V4L2 Devices: **

$ v4l2-ctl --list-devices
pispbe (platform:1000880000.pisp_be):
        /dev/video20
        /dev/video21
        # ... more devices

rp1-cfe (platform:1f00128000.csi):
        /dev/video0
        /dev/video1
        # ... more devices

**Camera Detection: **

$ dmesg | grep -i camera
[    6.582909] imx708 11-001a: camera module ID 0x0301

**Code Implementation ** Here's my current Next.js API implementation:

// pages/api/camera.ts
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'POST') {
    try {
      const { action } = req.body;
      
      if (action === 'start') {
        const command = `libcamera-vid \
          --camera 0 \
          --width 1280 \
          --height 720 \
          --framerate 30 \
          --codec h264 \
          --inline \
          -t 0 \
          -o /dev/video0`;

        const child = exec(command);
        // ...
      }
    } catch (error) {
      // ...
    }
  }
}```



**Question**

How can I properly stream Raspberry Pi 5 camera feed to a web browser using Next.js? What's the correct approach for browser integration?
I need a solution that:

1. Works with Raspberry Pi 5's new camera system
2. Can be integrated with Next.js
3. Provides real-time video feed in the browser