WebRTC P2P仅重复显示本地流，求获取树莓派UV4L服务器远端流方案

我来帮你搞定从树莓派UV4L服务器获取第二路流的问题！你现在遇到本地和远端视频都显示本地流的情况，大概率是PeerConnection没正确处理UV4L的远端流，或是信令交互逻辑没适配UV4L的规则，下面一步步来调整：

第一步：修正远端流的渲染逻辑 #

你现在的代码应该是把本地流同时绑定到了两个video标签，这才导致重复显示。要确保当PeerConnection收到UV4L的远端流时，把它单独绑定到远端视频标签上，核心是监听PeerConnection的ontrack事件：

// 初始化PeerConnection实例后，立即监听远端轨道事件
peerConnection.ontrack = (event) => {
  const remoteVideo = document.getElementById('remoteVideo');
  // 仅在远端视频未绑定流时赋值，避免重复覆盖
  if (!remoteVideo.srcObject) {
    remoteVideo.srcObject = event.streams[0];
  }
};

第二步：适配UV4L的WebSocket信令流程 #

UV4L的WebRTC信令是基于自定义WebSocket协议的，和simpl.info的示例逻辑有差异，你需要调整信令交互步骤：

• 首先建立与树莓派UV4L服务器的WebSocket连接：

// 替换成你的树莓派IP，默认端口是8080
const ws = new WebSocket('ws://你的树莓派IP:8080/webrtc');

• 处理UV4L发送的信令消息，核心是处理offer和iceCandidate：

ws.onmessage = async (message) => {
  const data = JSON.parse(message.data);
  switch(data.type) {
    case 'offer':
      // 设置远端SDP描述
      await peerConnection.setRemoteDescription(new RTCSessionDescription(data));
      // 创建本地应答并发送给UV4L
      const answer = await peerConnection.createAnswer();
      await peerConnection.setLocalDescription(answer);
      ws.send(JSON.stringify(answer));
      break;
    case 'iceCandidate':
      // 添加远端ICE候选
      if (data.candidate) {
        await peerConnection.addIceCandidate(new RTCIceCandidate(data.candidate));
      }
      break;
    // 其他信令类型（比如stop）按需处理
  }
};

• 主动触发UV4L发送流：很多时候UV4L需要你先发送一个start命令才会推送offer，连接建立后可以发一条消息：

ws.send(JSON.stringify({ type: 'start' }));

第三步：明确本地流与远端流的绑定范围 #

你的HTML里要保留两个独立的video标签，分别对应本地和远端：

<video id="localVideo" autoplay muted playsinline></video>
<video id="remoteVideo" autoplay playsinline></video>

绑定本地流时只操作localVideo：

// 获取本地媒体流后，仅绑定到本地视频标签
const localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
document.getElementById('localVideo').srcObject = localStream;

// 如果你不需要向UV4L推送本地流，这一步可以省略
localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));

第四步：排查常见坑点 #

• 确认树莓派的防火墙/端口转发规则允许8080端口被你的本地机器访问
• 打开浏览器控制台，查看WebSocket连接状态、SDP设置错误等日志信息
• 确保树莓派上的UV4L服务已正确启用WebRTC模块，摄像头能正常输出流

内容的提问来源于stack exchange，提问作者Jack M.