Javascript WebRTC:连接交换显示黑色视频

我试图建立一个随机的连接系统。我有一个启动连接的按钮，还可以为新的自动呼叫寻找新的对等方。但它是断断续续的，有时工作得很完美，有时我不知道了

后端-server.js

    /** successful connection */
wss.on('connection', function (client) {
    console.log("A new WebSocket client was connected.");
    /** incomming message */
    client.on('message', function (message) {
      /** broadcast message to all clients */
        var obj = JSON.parse(message);
        if("callState" in obj) {
          // New client, add it to the id/client object
          // client.set('call_state') = 1
          console.log("Recebeu mensagem!!!");
        }else if("sdp" in obj || "ice" in obj) {
          wss.broadcast(message, client);
        }else{
          console.log("Recebeu: "+message);
        }
    });
});

// broadcasting the message to all WebSocket clients.
wss.broadcast = function (data, exclude) {
  console.log("Broadcasting message to all " + this.clients.length + " WebSocket clients.");
  for(var i in this.clients) {
    client = this.clients[i];
    // don't send the message to the sender...
    if (client === exclude) continue;
    if (client.readyState === client.OPEN) client.send(data);
    else console.error('Error: the client state is ' + client.readyState);
  }
};

    /** button START */
function start(isCaller) {
    peerConnection = new RTCPeerConnection(peerConnectionConfig);
    peerConnection.onicecandidate = gotIceCandidate;
    peerConnection.addStream(localStream);

    if ('ontrack' in peerConnection) {
        // WebRTC Spec, Firefox
        peerConnection.ontrack = ontrack
     } else {
        // Chrome, etc. This can be removed once all browsers support `ontrack`
        peerConnection.onaddstream = gotRemoteStream
     }

    if(isCaller) {
        peerConnection.createOffer().then(createdDescription).catch(errorHandler);
    }
}

function gotMessageFromServer(message) {
    if(!peerConnection) start(false);

    var signal = JSON.parse(message.data);

    // Ignore messages from ourself
    if(signal.uuid == uuid) return;

    if(signal.sdp) {
        peerConnection.setRemoteDescription(new RTCSessionDescription(signal.sdp)).then(function() {
            // Only create answers in response to offers
            if(signal.sdp.type == 'offer') {
                peerConnection.createAnswer().then(createdDescription).catch(errorHandler);
            }
        }).catch(errorHandler);
    } else if(signal.ice) {
        peerConnection.addIceCandidate(new RTCIceCandidate(signal.ice)).catch(errorHandler);
    }
}

前端-webrtc.js

    /** successful connection */
wss.on('connection', function (client) {
    console.log("A new WebSocket client was connected.");
    /** incomming message */
    client.on('message', function (message) {
      /** broadcast message to all clients */
        var obj = JSON.parse(message);
        if("callState" in obj) {
          // New client, add it to the id/client object
          // client.set('call_state') = 1
          console.log("Recebeu mensagem!!!");
        }else if("sdp" in obj || "ice" in obj) {
          wss.broadcast(message, client);
        }else{
          console.log("Recebeu: "+message);
        }
    });
});

// broadcasting the message to all WebSocket clients.
wss.broadcast = function (data, exclude) {
  console.log("Broadcasting message to all " + this.clients.length + " WebSocket clients.");
  for(var i in this.clients) {
    client = this.clients[i];
    // don't send the message to the sender...
    if (client === exclude) continue;
    if (client.readyState === client.OPEN) client.send(data);
    else console.error('Error: the client state is ' + client.readyState);
  }
};

    /** button START */
function start(isCaller) {
    peerConnection = new RTCPeerConnection(peerConnectionConfig);
    peerConnection.onicecandidate = gotIceCandidate;
    peerConnection.addStream(localStream);

    if ('ontrack' in peerConnection) {
        // WebRTC Spec, Firefox
        peerConnection.ontrack = ontrack
     } else {
        // Chrome, etc. This can be removed once all browsers support `ontrack`
        peerConnection.onaddstream = gotRemoteStream
     }

    if(isCaller) {
        peerConnection.createOffer().then(createdDescription).catch(errorHandler);
    }
}

function gotMessageFromServer(message) {
    if(!peerConnection) start(false);

    var signal = JSON.parse(message.data);

    // Ignore messages from ourself
    if(signal.uuid == uuid) return;

    if(signal.sdp) {
        peerConnection.setRemoteDescription(new RTCSessionDescription(signal.sdp)).then(function() {
            // Only create answers in response to offers
            if(signal.sdp.type == 'offer') {
                peerConnection.createAnswer().then(createdDescription).catch(errorHandler);
            }
        }).catch(errorHandler);
    } else if(signal.ice) {
        peerConnection.addIceCandidate(new RTCIceCandidate(signal.ice)).catch(errorHandler);
    }
}

在服务器日志中显示，每次我按下“开始”按钮，它都会记录1条SDP消息和14条ICE消息

---

编辑：包括错误

当我第一次按下“开始”按钮时，一切正常。但是，在以下通话中，有时只保留音频功能，有时不保留新连接

在多次单击“开始”后，我能够重现一个错误： DomeException[InvalidStateError:“无法将远程应答设置为状态。” 稳定“代码：11 nsresult:0x8053000b]

---

我有一台本地服务器运行：

你说的“随机连接系统”是什么意思？请解释所需的行为，什么有效，什么无效，以及您收到的错误消息。@jib我在6台不同的计算机上执行连接服务的测试。当您单击“开始”按钮时，它会搜索一个新的候选对象并打开一个新的连接，不同的连接会有所不同。但有时它不连接任何机器，有时只有音频工作（远程视频全黑）。所有机器都有配置和浏览器。没有明显的错误。这个想法是通过一个“下一步”按钮与陌生人进行视频聊天（随机与另一个人建立连接）。附：在谷歌的帮助下翻译。我不知道你所说的“搜索新候选人”是什么意思。你是指潜在的同龄人，还是ICE候选人？这些是完全不同的事情。退一步说，为了让两个对等方可靠地建立联系，他们需要提前就各自的角色达成一致（哪一个是提供方，哪一个是应答方）。因此，在进行WebRTC协商之前，您需要解决如何发现要与谁联系的问题。否则，两个对等方可能处于不兼容状态，协商失败。@jib潜在对等方。每次用户按下“开始”按钮时，它都会重新同步并落在服务器的广播上，该广播会将连接数据发送给处于“打开”状态的所有人，不包括帐户本身。有了它，魔术就按照你的意愿发生，并随机启动与另一个用户（随机用户）的连接。但如果你一直按“开始”，你就“开始”了，没有视频或者没有和任何人同步。@jib现在我更明白了。我从头到尾地学习了教程，非常完美。非常感谢你的解释。