页面重新加载后重新连接服务器对等连接

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);

问题在于，当我重新启动“监视”页面时，所有“传输”页面都立即发送询问。尽管一次创建了四个 RTCPeerConnection 对象（假设用户发送了四个流），但仅连接了一个对象。

几天来我一直在努力解决这个问题。如上面的代码所示，我试图为后续调用 getStream（）函数设置一个增加的时间延迟，我尝试在执行 getStream（）之前检查signallingState连接。 ）函数，我尝试了其他几种方法，但没有一个起作用。

如果您需要我的部分代码来帮助，请编写。

编辑：

“监视”页面中的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 object

控制台输出： https://i.stack.imgur.com/dQXkE.png 1

log显示连接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的数组。然后您向上看-例如从我提到的id中开始-要处理的连接。

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

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);
  }
};

这样，错误处理就很可靠。