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

以下是针对远端流黑屏问题的直接排查点与修复方案：

1. 验证远端视频轨道状态 #

先确认远端流的视频轨道是否处于激活状态，在获取到远端流后执行以下代码：

console.log('视频轨道状态:', remoteStream.getVideoTracks()[0]?.readyState);

如果返回"ended"或"inactive"，说明远端未正确捕获或发送视频流，需检查远端设备的相机权限、媒体捕获逻辑，以及信令是否完整传递了媒体轨道信息。

2. 检查RTCView配置正确性 #

• 确保stream属性正确绑定远端流，且给RTCView设置明确的宽高样式，无宽高会导致画面无法渲染。
• 合理设置objectFit属性，避免因适配问题导致黑屏。
  示例代码：

<RTCView
  stream={remoteStream}
  style={{ width: '100%', height: 350 }}
  objectFit="contain"
/>

3. 修正PeerConnection的媒体约束与ICE配置 #

• 创建Offer/Answer时，必须明确设置接收视频的约束：

  const offerOptions = {
    offerToReceiveAudio: true,
    offerToReceiveVideo: true,
  };
  await peerConnection.createOffer(offerOptions);
  

• 确认ICE服务器配置正确，缺少STUN/TURN服务器会导致P2P连接失败，看似获取到候选但实际媒体流未打通：

  const configuration = {
    iceServers: [
      { urls: 'stun:stun.l.google.com:19302' },
      // 如有需要添加TURN服务器配置
    ]
  };
  const peerConnection = new RTCPeerConnection(configuration);
  

4. 正确监听ontrack事件获取远端流 #

不要通过手动构造MediaStream的方式处理远端流，必须通过PeerConnection的ontrack事件获取官方返回的流对象：

peerConnection.ontrack = (event) => {
  if (event.streams?.[0]) {
    setRemoteStream(event.streams[0]);
  }
};

避免在onicecandidate等其他事件中设置远端流，时机错误会导致流未完全初始化。

5. 确认本地设备权限 #

即使是远端流，部分设备会因本地相机/麦克风权限未获取，导致媒体流处理逻辑异常。检查权限示例：

import { PermissionsAndroid } from 'react-native';

const checkPermissions = async () => {
  const [cameraPerm, micPerm] = await Promise.all([
    PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.CAMERA),
    PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.RECORD_AUDIO),
  ]);
  if (!cameraPerm || !micPerm) {
    // 申请权限
  }
};

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