如何在Next.js中实现树莓派5摄像头的浏览器实时流传输？

针对你遇到的浏览器无权限提示、无视频流问题，结合Bookworm系统的libcamera栈特性，提供以下三个可落地的解决方案：

方案一：libcamera-vid推HTTP MJPG流（最简单直接） #

利用libcamera-vid直接推送MJPG格式的HTTP流，前端通过img标签即可直接渲染，无需处理摄像头权限。

1. 启动摄像头推流
   在树莓派终端执行以下命令，启动HTTP流服务（根据需要调整分辨率和帧率）：

libcamera-vid -t 0 --inline --width 1280 --height 720 --framerate 30 -o http://0.0.0.0:8080/stream.mjpg

参数说明：

• -t 0：无限时长推流
• --inline：将MJPG帧头嵌入流中，确保浏览器可解析
• --width/--height/--framerate：适配IMX708的输出参数，避免性能过载

2. Next.js前端组件实现
   创建客户端组件（需加'use client'指令），直接拉取流：

'use client';

export default function CameraStream() {
  const piIp = '你的树莓派局域网IP'; // 如192.168.1.100

  return (
    <div className="camera-container">
      <h3>树莓派摄像头实时流</h3>
      <img 
        src={`http://${piIp}:8080/stream.mjpg`} 
        alt="Camera Feed"
        style={{ maxWidth: '100%', border: '1px solid #eee' }}
      />
    </div>
  );
}

3. 必要配置

• 开放树莓派8080端口：sudo ufw allow 8080
• 确保前端与树莓派处于同一局域网，或通过公网映射端口访问

方案二：v4l2loopback虚拟设备适配MediaDevices API #

通过虚拟V4L2设备让libcamera流被浏览器的MediaDevices API识别，解决权限提示问题。

1. 安装并配置虚拟设备

# 安装依赖
sudo apt install v4l2loopback-dkms v4l2loopback-utils

# 加载虚拟设备模块（指定设备号为0，标记为可识别的相机）
sudo modprobe v4l2loopback video_nr=0 card_label="Virtual Camera" exclusive_caps=1

exclusive_caps=1是关键参数，确保浏览器将虚拟设备识别为标准摄像头。

2. 将libcamera流推送到虚拟设备

libcamera-vid -t 0 --width 1280 --height 720 --framerate 30 -o /dev/video0

3. Next.js前端调用MediaDevices API
   注意：此方案要求前端运行在localhost或HTTPS环境下（浏览器安全限制）：

'use client';

import { useEffect, useRef } from 'react';

export default function CameraStream() {
  const videoRef = useRef(null);

  useEffect(() => {
    const startStream = async () => {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({
          video: { 
            deviceId: 'default', 
            width: { ideal: 1280 }, 
            height: { ideal: 720 } 
          }
        });
        if (videoRef.current) {
          videoRef.current.srcObject = stream;
        }
      } catch (err) {
        console.error('摄像头访问失败:', err);
      }
    };

    startStream();

    // 组件卸载时停止流
    return () => {
      if (videoRef.current?.srcObject) {
        videoRef.current.srcObject.getTracks().forEach(track => track.stop());
      }
    };
  }, []);

  return (
    <div>
      <h3>MediaDevices摄像头流</h3>
      <video 
        ref={videoRef} 
        autoPlay 
        playsInline 
        style={{ maxWidth: '100%', border: '1px solid #eee' }}
      />
    </div>
  );
}

方案三：WebRTC低延迟流（适合实时互动场景） #

如果需要更低延迟的流，可结合WebRTC实现：

1. 启动WebRTC流服务
   安装并启动webrtc-streamer（树莓派Bookworm官方源可直接安装）：

sudo apt install webrtc-streamer
webrtc-streamer -c "/usr/bin/libcamera-vid -t 0 --width 1280 --height 720 --framerate 30 -o -"

2. Next.js前端拉取WebRTC流

'use client';

export default function CameraStream() {
  const piIp = '你的树莓派局域网IP';

  return (
    <div>
      <h3>低延迟摄像头流</h3>
      <video 
        src={`http://${piIp}:8000/stream/video0`} 
        autoPlay 
        playsInline 
        style={{ maxWidth: '100%' }}
      />
    </div>
  );
}

常见问题排查 #

• 浏览器无权限提示：使用MediaDevices API时必须在localhost或HTTPS环境；HTTP MJPG流无需权限，若无法加载检查端口是否开放、IP是否正确。
• 流无输出：执行libcamera-vid时添加--verbose参数查看日志，确认摄像头是否被正确识别；检查树莓派摄像头排线是否插紧。
• 性能卡顿：降低分辨率（如640x480）或帧率（如15fps），避免树莓派CPU过载。

内容的提问来源于stack exchange，提问作者Nedim Toymuş