React Native中WebRTC onAddStream事件未触发问题求助

嘿，我之前开发视频通话插件时也踩过一模一样的坑！React Native的WebRTC实现目前只兼容旧的onAddStream事件，不支持标准的ontrack，这就是你遇到问题的核心原因。

问题根源 #

当从纯音频通话切换到视频通话时，如果你在Web端把新的视频轨道直接添加到已有的音频流里，移动端的onAddStream是不会触发的——这个事件只在全新的MediaStream被添加到PeerConnection时才会响应，对现有流的轨道变更完全无感。而Web端的ontrack能捕获轨道添加动作，所以移动端到Web端的视频能正常显示，反过来就不行。

解决方案：发送新的MediaStream代替更新现有流 #

核心思路是：每次轨道发生变化（比如添加/移除视频轨）时，不要修改已有的流，而是创建一个包含当前所有需要轨道的新MediaStream，再通过PeerConnection发送这个新流，这样移动端的onAddStream就能正确捕获到变化。

举个Web端的代码示例：

// 假设你已经有正在使用的音频流audioStream，现在获取到了视频轨道videoTrack
// 1. 收集当前需要保留的所有轨道（这里是音频轨+新的视频轨）
const allTracks = [...audioStream.getTracks(), videoTrack];
// 2. 创建新的MediaStream
const newCombinedStream = new MediaStream(allTracks);
// 3. 移除旧的流（可选，避免冗余流占用资源）
peerConnection.getStreams().forEach(stream => peerConnection.removeStream(stream));
// 4. 添加新的流到PeerConnection
peerConnection.addStream(newCombinedStream);
// 5. 发起重新协商
const offer = await peerConnection.createOffer();
await peerConnection.setLocalDescription(offer);
// 把offer发送给移动端完成协商流程...

移动端这边，只需要在onAddStream回调里拿到新的流，直接替换掉之前的音频流用于渲染即可：

// React Native端的PeerConnection回调处理
peerConnection.onAddStream = (event) => {
  // event.stream就是包含音频+视频的新流，直接更新渲染源
  setRemoteStream(event.stream);
};

如果之后需要切回纯音频，用同样的逻辑：创建只包含音频轨的新流发送，移动端的onAddStream会再次触发，更新流即可。

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