React Native WebRTC群视频通话远程流黑屏问题求助

1. 错误的RTCPeerConnection初始化参数 #

你在创建RTCPeerConnection时混入了PeerJS专属的配置项（host/path/secure/port），但react-native-webrtc的RTCPeerConnection遵循标准WebRTC规范，构造参数仅需iceServers等标准配置，多余参数会导致连接初始化异常。

修改方式：

const pc = new RTCPeerConnection({
  iceServers: [
    { urls: ['stun:stun.l.google.com:19302', 'stun:stun2.l.google.com:19302'] },
    { urls: 'stun:global.stun.twilio.com:3478?transport=udp' },
  ],
});

2. 缺失ICE候选的接收处理 #

你仅实现了ICE候选的发送逻辑，但未处理远端发送的ICE候选，这会导致WebRTC无法完成网络连通性检测，即使拿到流也无法传输数据，最终显示黑屏。

添加ICE候选接收逻辑：
在Socket初始化阶段添加监听：

this.socket.on('icecandidate_multiple', async ({ candidate, userId }) => {
  // 群聊场景需按userId存储对应PeerConnection，这里假设peerConnections是对象结构
  const pc = this.state.peerConnections[userId];
  if (pc && candidate) {
    try {
      await pc.addIceCandidate(new RTCIceCandidate(candidate));
    } catch (error) {
      console.error('添加ICE候选失败:', error);
    }
  }
});

同时修改PeerConnection的存储方式，为每个远端用户维护独立连接：

// createOffer中更新状态
this.setState(prevState => ({
  peerConnections: {
    ...prevState.peerConnections,
    [目标用户userId]: pc
  }
}));

// handleOffer中同理
this.setState(prevState => ({
  peerConnections: {
    ...prevState.peerConnections,
    [userId]: pc
  }
}));

3. ontrack回调中流的处理问题 #

当前你在ontrack中创建了remoteStream但未使用，直接赋值event.streams[0]到状态，部分场景下event.streams可能为空，正确做法是将收到的track添加到自定义MediaStream中。

修正ontrack逻辑：

pc.ontrack = (event) => {
  // 按userId区分远端流
  let remoteStream = this.state.remoteStreams[userId];
  if (!remoteStream) {
    remoteStream = new MediaStream();
  }
  remoteStream.addTrack(event.track);
  
  this.setState(prevState => ({
    remoteStreams: {
      ...prevState.remoteStreams,
      [userId]: remoteStream
    }
  }));
};

4. RTCView的渲染问题 #

确保RTCView配置正确，群聊场景需循环渲染多个远端流：

// 本地流渲染
<RTCView
  streamURL={this.state.localStream?.toURL()}
  style={{ width: 100, height: 150 }}
  mirror={true}
/>

// 远端流渲染（群聊场景）
{Object.values(this.state.remoteStreams).map((stream, index) => (
  <RTCView
    key={index}
    streamURL={stream.toURL()}
    style={{ width: 200, height: 300 }}
    mirror={false}
  />
))}

5. PeerConnection状态监听错误 #

你在onconnectionstatechange中使用了未定义的peerConnectionRef.current，需直接使用当前创建的PC实例获取状态：

pc.onconnectionstatechange = () => {
  console.log(`连接状态变更为: ${pc.connectionState}`);
};

pc.oniceconnectionstatechange = () => {
  console.log(`ICE连接状态变更为: ${pc.iceConnectionState}`);
  if (pc.iceConnectionState === 'connected') {
    console.log('ICE连接成功');
  }
};

额外注意事项 #

• 确保已正确申请摄像头、麦克风权限，可通过mediaDevices.enumerateDevices()确认权限状态
• 群聊场景下，每个远端用户需对应独立的RTCPeerConnection和MediaStream，不能用单个变量存储
• 公网测试需配置TURN服务器，仅STUN无法穿透部分复杂网络

内容的提问来源于stack exchange，提问作者user3211705