WebRTC协议的问题理解工作流程

如何解决WebRTC协议的问题理解工作流程

自几天以来，我一直在为WebRTC奋斗，因此需要其他人指出我错了。 WebRTC的概念似乎非常简单，我的代码以这种方式工作：

假设我们有一个CALLER和CALLEE，它们是使用Javascript的2个html页面，而我使用的是与socket.io一起使用的NodeJS信令服务器。 如果您愿意，我可以共享代码，但是我认为我在概念上缺少一些东西，因此，如果我解释该过程，可能会更好。 但是，将让代码在本文的结尾。

流程如下： 然后等待CALLER＆CALLEE都连接到信号发送器

• 呼叫者->发送报价给-> CALLEE
• CALLEE->接收报价并生成答案并将其发送给CALLER 然后我需要重复该过程
• 呼叫者->发送报价给-> CALLEE
• CALLEE->接收报价并生成答案并将其发送给CALLER

我的问题是，当我刷新CALLEE页面时，我没有问题，CALLER知道有人刚刚断开连接，并且当CALLEE回流时被触发（但它只运行了一次）。

但是当我刷新CALLER时，我被搞砸了，并且遇到了错误

DOMException：无法在'RTCPeerConnection'上执行'setRemoteDescription'：无法设置远程商品sdp：后续商品中m行的顺序与先前商品/答案中的顺序不符。

我认为问题在于刷新过程中，当重新加载CALLER页面时PeerConnection被“重置”，但CALLEE的PeerConnection仍然具有远程和本地描述。

有人遇到这个问题吗？

let resendAfteranswer = false;

const { RTCPeerConnection,RTCSessionDescription } = window;

console.log(`I am the ${CLIENT_TYPE}`)
let peerConnection = new RTCPeerConnection();

peerConnection.onconnectionstatechange = function(event) {
  switch (peerConnection.connectionState) {
    case 'connecting' :
      document.getElementById("message-info").innerHTML ="Connecting..."
      break;
    case 'connected' :
      document.getElementById("message-info").innerHTML ="Connected"
  }
};

async function callUser() {
  let offer = await peerConnection.createOffer();
  await peerConnection.setLocalDescription(new RTCSessionDescription(offer));
  console.log('emit call-user')
  socket.emit("call-user",{
    offer
  });
}

const socket = io.connect("localhost:5000",{ query: "booking="+BOOKING_CODE });

socket.on("notify-users",async ({ users,type,from }) => {
  //We assume conenction initialization only come from CALLER
  if (CLIENT_TYPE==='CALLER' && users.length===2) {
    document.getElementById("message-info").innerHTML ="Ready to start"
    callUser();
  }
});


socket.on("call-made",async data => {
  console.log("call-made")
  try {
    await peerConnection.setRemoteDescription(
      new RTCSessionDescription(data.offer)
    );
    let answer = await peerConnection.createAnswer();
    await peerConnection.setLocalDescription(new RTCSessionDescription(answer));
    console.log('emit make-answer')
    socket.emit("make-answer",{
      answer,to: data.socket
    });
  }
  catch (error) {
    console.error(error)
  }
});

socket.on("answer-made",async data => {
  console.log("answer-made")
  await peerConnection.setRemoteDescription(
    new RTCSessionDescription(data.answer)
  );
  //On first connection we need to send again
  if (!resendAfteranswer) {
    console.log(">>> Resend after 1st answer")
    callUser(data.socket);
    resendAfteranswer = true;
  }
});

peerConnection.ontrack = function({ streams: [stream] }) {
  const remoteVideo = document.getElementById("remote-video");
  if (remoteVideo) {
    remoteVideo.srcObject = stream;
  }
};

navigator.getUserMedia(
  { video: true,audio: true },stream => {
    const localVideo = document.getElementById("local-video");
    if (localVideo) {
      localVideo.srcObject = stream;
    }
    stream.getTracks().forEach(track => peerConnection.addTrack(track,stream));
  },error => {
    console.warn(error.message);
  }
);

body {
  margin: 0;
  padding: 0;
  font-family: "Montserrat",sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #f9fafc;
  color: #595354;
}

.header {
  background-color: #ffffff;
  padding: 10px 40px;
  Box-shadow: 0px 3px 6px rgba(0,0.1);
}

.header > .logo-container {
  display: flex;
  align-items: center;
}

.header > .logo-container > .logo-img {
  width: 60px;
  height: 60px;
  margin-right: 15px;
}

.header > .logo-container > .logo-text {
  font-size: 26px;
  font-weight: 700;
}

.header > .logo-container > .logo-text > .logo-highlight {
  color: #65a9e5;
}

.content-container {
  width: 100%;
  height: calc(100vh - 89px);
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}

.active-users-panel {
  width: 300px;
  height: 100%;
  border-right: 1px solid #cddfe7;
}

.panel-title {
  margin: 10px 0 0 0;
  padding-left: 30px;
  font-weight: 500;
  font-size: 18px;
  border-bottom: 1px solid #cddfe7;
  padding-bottom: 10px;
}

.active-user {
  padding: 10px 30px;
  border-bottom: 1px solid #cddfe7;
  cursor: pointer;
  user-select: none;
}

.active-user:hover {
  background-color: #e8e9eb;
  transition: background-color 0.5s ease;
}

.active-user--selected {
  background-color: #fff;
  border-right: 5px solid #65a9e5;
  font-weight: 500;
  transition: all 0.5s ease;
}

.video-chat-container {
  padding: 0 20px;
  width:50%;
  position: relative;
}

.talk-info {
  font-weight: 500;
  font-size: 21px;
}

.remote-video {
  border: 1px solid #cddfe7;
  width: 100%;
  height: 100%;
  Box-shadow: 0px 3px 6px rgba(0,0.2);
}

.local-video {
  position: absolute;
  border: 1px solid #cddfe7;
  bottom: 60px;
  right: 40px;
  Box-shadow: 0px 3px 6px rgba(0,0.2);
  border-radius: 5px;
  width: 300px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <Meta charset="UTF-8" />
    <Meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <Meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Test Video Conf (with Socket.io)</title>
    <link rel="icon" href="data:;base64,=">
    <link rel="stylesheet" href="./styles.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
    <script>
      const CLIENT_TYPE = 'CALLER' 
      /*To testt you need to duplicate this page and changer value of CLIENT_TYPE by 'CALLEE'*/
    </script>
  </head>
  <body>
    <div class="container">
      <div class="content-container">
        <div class="video-chat-container">
          <h2 class="talk-info" id="message-info"></h2>
          <div class="video-container">
            <video autoplay class="remote-video" id="remote-video"></video>
            <video autoplay muted class="local-video" id="local-video"></video>
          </div>
        </div>
      </div>
    </div>
    <script src="./scripts/index.js"></script>
  </body>
</html>