webRTC-未從其他對等方獲取流和冰候選

Question

我正在使用 webRTC 和 socket.io 開發視頻通話應用程序。 我看過其他類似的項目，並正在嘗試實現我自己的項目。

第一個對等點創建報價，另一個對等點獲取報價並將其保存到其遠程描述中，並創建第一個對等方收到的答案。 但冰候選人沒有交換，也流。 下面是客戶端代碼：

var socket = io();
var peerConn,
  onlineUsers = [],
  username,
  caller;

function createOffer(callee) {
  peerConn = new RTCPeerConnection();
  peerConn.onicecandidate = onIce;
  peerConn.onaddstream = onAddStream;
  navigator.mediaDevices
    .getUserMedia({ audio: true, video: { height: 240, width: 320 } })
    .then(stream => (window.myVideo.srcObject = stream))
    .then(stream => peerConn.addStream(stream));
  peerConn.createOffer().then(offer => {
    peerConn.setLocalDescription(offer);
    socket.emit("call", callee, peerConn.localDescription);
  });
  caller = callee;
}

socket.on("call", (callee, caller, sdp) => {
  if (callee == username) createAnswer(sdp, caller);
});
function createAnswer(sdp, caller) {
  peerConn = new RTCPeerConnection();
  peerConn.onicecandidate = onIce;
  peerConn.onaddstream = onAddStream;
  window.caller = caller;
  navigator.mediaDevices
    .getUserMedia({ audio: true, video: { height: 240, width: 320 } })
    .then(stream => (window.myVideo.srcObject = stream))
    .then(stream => peerConn.addStream(stream));
  peerConn.setRemoteDescription(new RTCSessionDescription(sdp));
  peerConn.createAnswer().then(answer => {
    peerConn.setLocalDescription(answer);
    socket.emit("answer", caller, peerConn.localDescription);
  });
  console.log(peerConn.localDescription);
  console.log(peerConn.remoteDescription);
}

function onIce(event) {
  if (event.candidate) {
    socket.emit("ice", caller, event.candidate);
    console.log("sent ice");
  } else {
    console.log("Sent all ice");
  }
}

function onAddStream(event) {
  console.log("remote stream added");
  frndsVideo.srcObject = event.stream;
}

socket.on("answer", (callee, caller, sdp) => {
  if (caller == username) setRemoteDes(sdp);
});
function setRemoteDes(sdp) {
  peerConn.setRemoteDescription(sdp);
  console.log(peerConn.localDescription);
  console.log(peerConn.remoteDescription);
}

function addIce(caller, callee, ice) {
  peerConn.addIceCandidate(new RTCIceCandidate(ice));
  console.log("ice added");
}

socket.on("ice", addIce);

和服務器端js代碼：

socket.on("call", (callee, sdp) => {
    console.log(`${socket.username} calling ${callee}  ${sdp}`);
    onlineUsers.forEach((user, i) => {
      if (user.username == callee || user.username == socket.username) {
        onlineUsers[i].inCall = true;
      }
    });
    socket.broadcast.emit(`call`, callee, socket.username, sdp);
  });
  socket.on("answer", (caller, sdp) => {
    console.log(`${socket.username} answered ${caller}  ${sdp}`);
    socket.broadcast.emit("answer", socket.username, caller, sdp);
  });
  socket.on("ice", (caller, ice) => {
    socket.broadcast.emit("ice", socket.username, caller, ice);
    console.log("ice recived and sent");
  });

請幫我解決一下這個。

Answer 1

在 Firefox 中運行它，你會看到這個錯誤：

InvalidStateError: Cannot create offer when there are no valid transceivers.

你打電話createOffer前addStream ，產生一個空的報價，沒有候選人。

您還在setLocalDescription完成之前使用peerConn.localDescription 。

這些是需要按順序運行的異步方法，而不是並行運行。 嘗試鏈接它們：

function createOffer(callee) {
  peerConn = new RTCPeerConnection();
  peerConn.onicecandidate = onIce;
  peerConn.onaddstream = onAddStream;
  navigator.mediaDevices
    .getUserMedia({audio: true, video: {height: 240, width: 320}})
    .then(stream => {
      peerConn.addStream(myVideo.srcObject = stream);
      return peerConn.createOffer();
    })
    .then(offer => peerConn.setLocalDescription(offer))
    .then(() => socket.emit("call", callee, peerConn.localDescription))
    .catch(e => console.log(e));
  caller = callee;
}

此外，在回答方面，永遠不要延遲調用setRemoteDescription否則你可能會錯過候選人。 這是時間敏感的，正如我在另一個答案中解釋的那樣。

function createAnswer(sdp, caller) {
  peerConn = new RTCPeerConnection();
  peerConn.onicecandidate = onIce;
  peerConn.onaddstream = onAddStream;
  window.caller = caller;
  peerConn.setRemoteDescription(sdp)
  .then(() => navigator.mediaDevices
    .getUserMedia({audio: true, video: {height: 240, width: 320}}))
  .then(stream => {
    peerConn.addStream(myVideo.srcObject = stream);
    return peerConn.createAnswer();
  })
  .then(answer => peerConn.setLocalDescription(answer))
  .then(() => socket.emit("answer", caller, peerConn.localDescription))
  .catch(e => console.log(e));
}