webrtc建立一对多的连接时问题处理

本文已参与「新人创作礼」活动， 一起开启掘金创作之路。

最近做的项目有个需求是在项目中连接摄像头，连接一个摄像头的时候，用webrtc建立一对一的连接是没问题的。但是当我打算连接多个摄像头的时候，出现了问题：

1. 同时连接2个摄像头时，同时建立多个 webrtc 连接前面的会失败，最后一个成功
2. 前面的 webrtc 连接建立成功之后，再建立第二个连接，都能成功

我用的是websocket和webrtc结合，达到一个在项目中直播监控摄像头的效果。

我的项目和摄像头建立连接的步骤： 1）获取 webrtc ticket：getWebrtcTicket 2）创建websocket：createWebsocket 3）ws.onmessage 通知peetIn事件，配对成功 4）配对成功之后，建立 peerConnection 连接：createPeerConnection

webrtc建立连接的流程图：

因为我也是第一次用webrtc，所以也不知道怎么处理这个问题，只能一点点试。

本来我用的建立一对多关系的实现方式是：在拿到设备（摄像头）列表之后，循环调用建立webrtc连接的方法，但是似乎只走了最后一个设备建立连接的方法：

// 最开始代码，直接循环调用建立连接的方法
data.devicesList.forEach((item, index) => {
  createWebrtcConnection(index);
});

出现上述问题后，尝试单独调用createWebrtcConnection方法，也是不行。后来想着不行就等前面的连接建立完了之后再去建立新的连接，就试了试用setTimeout定时器，后来发现果然有用：

// 加了定时器，但是因为后期连接的设备可能很多，我用累加的方式给它们处理，每个连接间隔了100毫秒
const delay = 0;
data.devicesList.forEach((item, index) => {
  // createWebrtcConnection(index);   // 只有最后一个成功，前面的失败
  setTimeout(() => {
    createWebrtcConnection(index); //
  }, delay + index * 100);
});

但是我知道这是有弊端的，定时器太多了对页面的性能也有影响，后期还要清除，但是目前我能想到的解决问题的办法就是这个，后面要在别的地方找个合适的时机清除定时器。

也希望有了解webrtc建立一对多连接的大佬不吝赐教。