React Native基于PeerJS实现n人多人视频通话的改造方案咨询

可行性说明 #

完全可以在现有一对一通话的基础上改造实现多人视频通话。PeerJS本身支持同时建立多个独立的点对点连接，采用Mesh组网方案即可实现最多8人以内的多人视频通话（人数更多建议更换为SFU架构，无法直接通过PeerJS原生实现）。

具体改造步骤 #

1. 调整状态存储结构 #

原有单个remoteUser、remoteStream、activeCall状态仅支持存储单路通话信息，需要替换为支持多路存储的Map结构：

// 替换原有单路状态
const [remoteStreams, setRemoteStreams] = useState<Map<string, {
  user: User,
  stream: MediaStream,
  callInstance: any
}>>(new Map());

以用户的peerId作为唯一key，分别存储每个远程用户的基础信息、视频流、通话实例。

2. 调整呼叫逻辑 #

原有单人呼叫的peerServer.call核心逻辑不需要改动，只需要将单次呼叫改为批量遍历呼叫，同时将每路通话的实例和流单独存储即可：

// 单人呼叫逻辑改造
const callSingleUser = (user: User) => {
  if (!peerServer || !socket || !user.peerId) {
    Alert.alert('Peer服务或Socket连接未初始化');
    return;
  }
  socket.emit('call', user.username);
  try {
    // 核心call方法无需修改，与原有逻辑一致
    const callInstance = peerServer.call(user.peerId, localStream);
    // 每路通话单独监听stream事件，存入对应Map项
    callInstance.on('stream', (stream: MediaStream) => {
      setRemoteStreams(prev => {
        const newMap = new Map(prev);
        newMap.set(user.peerId, {
          user,
          stream,
          callInstance
        });
        return newMap;
      });
    });
    // 监听单路通话关闭事件，移除对应存储项
    callInstance.on('close', () => {
      setRemoteStreams(prev => {
        const newMap = new Map(prev);
        newMap.delete(user.peerId);
        return newMap;
      });
    });
    callInstance.on('error', (err: Error) => {
      console.error('呼叫错误', err);
    });
  } catch (error) {
    console.log('发起呼叫失败', error);
  }
}

// 新增多人呼叫入口
const groupCall = (targetUsers: User[]) => {
  // 遍历所有目标用户逐个发起呼叫
  targetUsers.forEach(user => callSingleUser(user));
  navigate('Call');
}

3. 调整呼入处理逻辑 #

修改原有呼入监听逻辑，支持处理多路呼入请求，每路接起后单独存储流信息：

io.on('call', (user: User) => {
  peerServer.on('call', (call: any) => {
    Alert.alert(
      '新通话邀请',
      `${user?.username} 邀请你加入视频通话`,
      [
        {
          text: '拒绝',
          onPress: () => {
            io.emit('reject-call', user?.username);
          },
          style: 'cancel',
        },
        {
          text: '接受',
          onPress: () => {
            io.emit('accept-call', user?.username);
            call.answer(localStream);
            // 接起后存储当前路的流信息
            call.on('stream', (stream: MediaStream) => {
              setRemoteStreams(prev => {
                const newMap = new Map(prev);
                newMap.set(user.peerId, {
                  user,
                  stream,
                  callInstance: call
                });
                return newMap;
              });
            });
            call.on('close', () => {
              setRemoteStreams(prev => {
                const newMap = new Map(prev);
                newMap.delete(user.peerId);
                return newMap;
              });
            });
            navigate('Call');
          },
        },
      ],
      { cancelable: false },
    );
  });
});

4. 调整通话页面与挂断逻辑 #

• 通话页面遍历remoteStreams，为每个流渲染独立的RTCView组件即可显示多路视频画面
• 原有closeCall方法修改为遍历remoteStreams所有项，逐个调用callInstance.close()，最后清空Map即可结束所有通话

注意事项 #

• Mesh架构下每个用户需要同时上传/下载N-1份视频流，仅适合8人以内的小规模场景，人数过多会导致设备性能和带宽不足
• 可在Socket服务端新增房间管理能力，用户加入房间后自动向房间内所有在线用户发起呼叫，无需手动选择目标用户

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