pion SFU对接react-native-webrtc ice-ufrag冲突及音频上行问题求解

问题1：新增第三台对等端时触发SetRemoteDescription called with multiple conflicting ice-ufrag values报错的解决方法 #

原因 #

你当前的代码全局仅创建了1个RTCPeerConnection实例，而pion sfu-ws的设计逻辑是每新增一个远端对等端，都会给当前端下发对应新对等端的独立offer，需要为每个offer创建独立的PeerConnection实例处理。你复用同一个已完成过信令交互的PC处理新offer，会导致新offer的ICE配置和原有PC中已存在的ICE参数冲突，生成的answer就会携带多个不同的ice-ufrag值，触发pion侧的参数校验报错。

修复步骤 #

• 调整实例存储逻辑，用数组或者Map来存储多个RTCPeerConnection实例，每个实例对应一个远端对等端的唯一标识
• 每次收到服务端下发的新offer时，新建独立的RTCPeerConnection实例，禁止复用已完成过信令交互的旧实例
• 给每个PeerConnection实例单独绑定ICE事件、流事件和对应信令的发送逻辑，避免实例之间的参数互相覆盖

问题2：移除RTCView组件后本地音频无法上行的修复方法 #

原因 #

存在两个核心问题：

1. 你代码中getUserMedia拿到本地音频流后，既没有调用addStream方法将流添加到PeerConnection中，也没有用引用类型的变量（比如useRef）持有这个流实例，JS的垃圾回收机制会在useEffect执行完成后释放这个流对象，底层的音频采集也会随之停止
2. react-native-webrtc的底层实现默认会检测当前是否有活跃的RTCView组件，当所有RTCView都被移除时，会默认暂停媒体引擎的采集和推流逻辑，避免不必要的资源占用，直接导致本地音频上行中断

修复步骤 #

• 新增useRef变量存储本地流实例，避免被GC回收：const localStreamRef = useRef(null)，拿到本地流后赋值给localStreamRef.current = stream
• 拿到本地流后、发送信令之前，调用pc.addStream(stream)将本地流添加到PeerConnection中，保证流可以正常上行
• 如果不需要展示RTCView，可在页面中添加一个宽高为0的隐藏RTCView组件，保持媒体引擎的活跃状态，示例代码如下：

<RTCView streamURL={localStreamRef.current?.toURL() || ''} style={{width: 0, height: 0, opacity: 0}} />

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