javascript - 页面刷新后 PeerConnection 重置

Question

我正在使用 webrtc 制作 Web 应用程序以使用智能手机进行监控。应用程序在一个站点上显示少量流，但是当我刷新浏览器时，连接正在关闭。我不知道如何重新连接多个流。

我使用 node.js 和 websocket 作为服务器端。调用者和被调用者在不同的脚本上工作

调用者脚本：

(function () {
'use strict';



function getBrowserRTCConnectionObj () {

  var servers = {'iceServers': [{'url': 'stun:stun.services.mozilla.com'}, {'url': 'stun:stun.l.google.com:19302'}]};

  if (window.mozRTCPeerConnection) {
    return new mozRTCPeerConnection(servers);
  } else if (window.webkitRTCPeerConnection) {
      return new webkitRTCPeerConnection(servers);
  } else if (window.msRTCPeerConnection) {
      return new msRTCPeerConnection(servers);
  } else {
    return new RTCPeerConnection(servers);
  }
}

var btn1 = document.getElementById('btn1');
btn1.onclick = function(){

    navigator.getUserMedia({
      audio: false,
      video: {width: { min: 100, ideal: 480, max: 2000 },
                height: { min: 100, ideal: 640, max: 2000 }}
    }, function(aliceStream) {
      aliceConn = getBrowserRTCConnectionObj();

      aliceConn.addStream(aliceStream);


      aliceConn.onicecandidate = function (evt) {
        if (evt.candidate) {

          var lightCandidate = {
            sdpMid: evt.candidate.sdpMid,
            sdpMLineIndex: evt.candidate.sdpMLineIndex,
            candidate: evt.candidate.candidate
          }

          // send ice alice's iceCandidate to Bob
          socket.emit('candidate_transmision', { "candidate": lightCandidate });
          console.log(`wysylanie: ICE candidate:\n${evt.candidate ? evt.candidate.candidate : '(null)'}`);
        }
      };



      aliceConn.createOffer( function (desc) {
        // desc is typeof RTCSessionDescription wich contains Alice's session
        aliceConn.setLocalDescription(desc);

        // send desc to Bob
        socket.emit('ask', JSON.stringify(desc));
        console.log('wysylanie: wyslalem oferte do odbierania:', desc)

      },function(err) {
          console.error(err);
      }, {
        offerToReceiveAudio: 1,
        offerToReceiveVideo: 1
      });

    }, function(e) {
      console.error("You are not allow navigator use device", e);
    });
  };

function close () {
    if(aliceConn) {
        aliceConn.close();
    }
    aliceConn = {};
}

function reconnect() {

  aliceConn.createOffer( function (desc) {
        // desc is typeof RTCSessionDescription wich contains Alice's session
        aliceConn.setLocalDescription(desc);

        // send desc to Bob
        socket.emit('ask', JSON.stringify(desc));
        console.log('wysylanie: wyslalem oferte do odbierania:', desc)

      },function(err) {
          console.error(err);
      }, {
        iceRestart: true,
        offerToReceiveAudio: 1,
        offerToReceiveVideo: 1
      });

}

    socket.on('candidate_reciever', function(candidate){
      // var candidate = JSON.parse(candidate);

      console.log('candidate_reciever');
      aliceConn.addIceCandidate( new RTCIceCandidate(candidate.candidate),
        function() {
          console.log('AddIceCandidate success!');
        }, function(err) {
          console.error('Error AddIceCandidate');
          console.error(err);
        });
    });

    socket.on('response', function(bobDesc){
      var bobDesc = bobDesc;
      aliceConn.setRemoteDescription(new RTCSessionDescription(bobDesc));
      //toggleVideo();
    });

}) ();

被调用者脚本：

function gotDescription(bobDesc) {
    bobConn.setLocalDescription(bobDesc,
    function() {
            console.log('odbieranie: odebralem oferte: ', 
bobDesc.sdp);
            // isAcceptedOffer = true;
            registerIceCandidate();
            // send desc to Alice
            socket.emit('response', bobDesc);
     }, function(err) {
            console.error(err);
    });
}


function registerIceCandidate() {
for(var i = 0; i < aliceTempIceCandidates.length; i++) {
    bobConn.addIceCandidate(
        new RTCIceCandidate(aliceTempIceCandidates[i]), function() {
        console.log('odbieranie: AddIceCandidate success!');
    }, function(err) {
        console.error('Error AddIceCandidate');
        console.error(err);
    });
}
}

function sentIceCandidates(evt) {

if (evt.candidate) {

    var lightCandidate = {
        sdpMid: evt.candidate.sdpMid,
        sdpMLineIndex: evt.candidate.sdpMLineIndex,
        candidate: evt.candidate.candidate
    }
    // send desc to Alice
    // socket.emit('CANDIDATE_WEB_RTC_BOB', { "candidate": evt.candidate });
    socket.emit('candidate_reciever', { "candidate": lightCandidate });
    console.log('odbieranie: wyslalem ice candidates')
}
};

function AddingStream(evt) {
    if (video1.readyState === 0){
        video1 = video1 = attachMediaStream(video1, evt.stream);
        console.log(video1.width, video1.height);
    } else if (video1.readyState === 4 && video2.readyState === 0){
        video2 = attachMediaStream(video2, evt.stream);
    } else if (video2.readyState === 4 && video3.readyState === 0){
        video3 = attachMediaStream(video3, evt.stream);
    } else if (video3.readyState === 4 && video4.readyState === 0){
        video4 = attachMediaStream(video4, evt.stream);
    }
};

function ShowAnotherStream(){

bobConn = getBrowserRTCConnectionObj();
bobConn.onicecandidate = sentIceCandidates;
bobConn.onaddstream = AddingStream;
bobConn.setRemoteDescription(
    new RTCSessionDescription(aliceTempDesc),
    function() {
        bobConn.createAnswer(gotDescription, displayError);
        //toggleVideo();
}, displayError);   
};

我正在尝试与 iceRestrart: true 重新协商并在 iceConnectionState = dissconnected 之后创建 offert，但它对我不起作用。

标签： javascriptwebrtc