javascript - 页面重新加载后连接多个对等连接

Question

我正在创建一个 Web 应用程序，用于使用 WebRTC 的智能手机进行监控，并且我正在使用 socket.io 作为信令服务器。

当我发送流时，我在接收该流的“观看”页面上创建了一个RTCPeerConnection 对象。我在不同的页面上发送流。用户最多可以从智能手机附加四个流，因此在“观看”页面上最多有四个 RTCPeerConnection 对象。

一旦来自“传输”页面的报价出现，就会自动接收流，然后在“观看”页面上创建 RTCPeerConnection 对象并连接到标准 WebRTC 架构。

“传输”页面:

  function onCreateOfferSuccess(sdp){
  //console.log(sdp);
  pc.setLocalDescription(new RTCSessionDescription(sdp));
  console.log('ask');
  socket.emit('ask', {"sdp":JSON.stringify(pc.localDescription),
                      "user": loggedUserID,
                      "fromSocket": ownSocket});
}

“观看”页面:

socket.on('ask', function(offer){
   if (offer.user === loggedUserID){
      TempDescriptions = JSON.parse(offer.sdp);
      console.log(TempDescriptions)
      currTransmiterSocket = offer.fromSocket;
      console.log(currTransmiterSocket);
      getStream();
}

function getStream(){
   try {
       setTimeout(function(){
           console.log(time, 'getStream()');
           connection = getPeerConnection();

           connection.setRemoteDescription(
           new RTCSessionDescription(TempDescriptions),
           function() {
               connection.createAnswer(gotDescription, function(error){
           console.log(error)
           });
           }, function(error){
               console.log(error)
           });
       }, getStreamDelay*3000)
       getStreamDelay++
   }

   catch(err){
       console.log(err);
   }
};

我的 Web 应用程序需要这样的功能，当我们退出“观看”页面并再次返回时，必须显示所有先前包含的流。

为了实现此功能，我使用了oniceconnectionstatechange 方法。如果流断开连接，将执行 iceRestart 函数，该函数创建带有选项 {iceRestart: true}

的报价

“传输”页面:

var options_with_restart = {offerToReceiveAudio: false,
                            offerToReceiveVideo: true,
                            iceRestart: true};

function iceRestart(event){  
  try{
      setTimeout(function(){
       pc.createOffer(options_with_restart).then(onCreateOfferSuccess, onCreateOfferError);
      },1000);
  } catch(error) {
      console.log(error);

问题是，当我重新启动“watch”页面时，所有页面“transmit”立即发送请求。尽管同时创建了四个 RTCPeerConnection 对象(假设用户发送了四个流)，但只有一个对象已连接。

我已经为这个问题苦恼好几天了。我尝试在后续调用 getStream() 函数时设置增加的时间延迟，如上面的代码所示，我尝试在执行 之前检查 signallingState 连接>getStream() 函数，我尝试了其他几种方法，但均无效。

如果您需要我的代码的某些部分来提供帮助，请写信。

编辑:

“观看”页面中的 gotDescription() 方法。

function gotDescription(sdp) {
   try{
       connection.setLocalDescription(sdp,
       function() {
       registerIceCandidate();
       socket.emit('response', {"sdp": sdp,
                                "user": loggedUserID,
                                "fromSocket": ownSocket,
                                "toSocket": currTransmiterSocket});
        }, function(error){
               console.log(error)
           });
   } catch(err){
       console.log(err);
   }
}

我添加 console.log 和 RTCPeerConnection 对象

控制台输出: /image/dQXkE.png 1

日志显示连接的signalingState是“稳定的”，但是当我开发对象时，signalingState等于“have-remote-offer”

like here

Answer 1

移除TempDescriptions全局变量，将sdp直接传给getStream(offer.sdp)。

否则，您 socket.on('ask', function(offer){ 调用了 4 次，覆盖了 TempDescriptions。然后 3 秒后，您的 4 setTimeout 滚动，全部访问 TempDescriptions 的最终值。

这可能就是为什么只有一个 RTCPeerConnection 重新连接的原因。

一般来说，使用时间延迟来分离连接似乎是个坏主意，因为它会减慢重新连接的速度。相反，为什么不发送一个 id？例如

socket.emit('ask', {id: connectionNumber++,
                    sdp: JSON.stringify(pc.localDescription),
                    user: loggedUserID,
                    fromSocket: ownSocket});

更新:停止向window添加全局变量

每当您像这样分配给未声明的变量时:

connection = getPeerConnection();

...它在 window 上创建一个全局，例如window.connection，和你有同样的问题。您有 4 个连接，但您将它们存储在一个变量中。

在源文件的开头键入 "use strict"; 以捕获此内容:

ReferenceError: assignment to undeclared variable connection

范围界定:一般问题

您在这里处理 4 个连接，但您缺少确定每个实例范围的方法。

大多数其他语言会告诉您创建一个类并创建对象实例，然后将包括connection 在内的所有内容放在this 上。这是一个好方法。在 JS 中，您可以改用闭包。但至少您仍然需要 4 个变量来保存 4 个连接，或者一个 connections 数组。然后你抬头——例如来 self 提到的 id——要处理的连接。

此外，您的 try/catch 不会捕获异步错误。我强烈建议不要定义所有这些回调，而是 using promises ，甚至 async/await在处理高度异步的 WebRTC API 时。这使得范围界定变得微不足道。例如

const connections = [];

socket.on('ask', async ({user, id, sdp, fromSocket}) => {
  try {
    if (user != loggedUserID) return;
    if (!connections[id]) {
      connections[id] = getPeerConnection();
      registerIceCandidate(connections[id]);
    }
    const connection = connections[id];
    await connection.setRemoteDescription(JSON.parse(sdp));
    await connection.setLocalDescription(await connection.createAnswer());
    socket.emit('response', {sdp,
                             user: loggedUserID,
                             fromSocket: ownSocket,
                             toSocket: fromSocket});
  } catch (err) {
    console.log(err);
  }
};

这种错误处理方式是可靠的。