javascript - 在 webRTC 调用中设置接收器

Question

我正在使用 webRTC 打开 2 个用户之间的数据通道，该网站的简化版本是:1 个按钮，使用 onclick="myLive.initiateConnection()"
创建调用1 个带有 id="caller"的输入，用于将 SDP 描述从第一个用户选项卡复制粘贴到第二个用户
使用 onclick="myLive.join()"接听电话的 1 个按钮
1 个带有 id="callee"的输入，用于将 SDP 描述从第二个用户复制粘贴到第一个用户
1 个带有 onclick="setCallee($('#callee').val())"的按钮，用于将远程描述设置为第一个用户

我将 join 方法放在 initiateConnection 方法之前，因为如下所述，我认为错误出在 join 调用的 gotCallerInfo 中:

join = function(){
connection = new peerConnection(servers);
    connection.onicecandidate = function(evt){
        if(evt.candidate){
            connection.addIceCandidate(new RTCIceCandidate(event.candidate));
        }
    };

    connection.ondatachannel = function(ev){
        dataChannel = ev.channel;
        dataChannel.onmessage = receiveMessage;
            ev.channel.onopen = function(){
                alert('connection established, callee');
            };
        };
        gotCallerInfo($("#caller").val())
    };

gotCallerInfo = function(data){
    var newDesc = JSON.parse(data);
    connection.setRemoteDescription(new RTCSessionDescription(newDesc), function(){
        connection.createAnswer(function(desc){          
            connection.setLocalDescription(desc);

此代码不通过 webRTC 连接 2 个用户。通过调整这里的代码并使用 chrome 进行测试，我注意到我可以通过单击加入按钮两次来使我的 webRTC 调用工作......或者在等待 1s () 后再次调用 createAnswer，webRTC 调用可以与 chrome 一起工作.但是对于 firefox，它会触发错误“无法在稳定状态下调用 createAnswer”。为什么在超时后第二次调用 createAnswer 人为地解决了 chrome 的问题(不幸的是 firefox 没有)？我想我做错事了，但是 setRemoteDescription、createAnswer 和 setLocalDescription 的顺序是正确的。第二个 createAnswer 创建的 Desc2 比第一个创建的 desc 长，所以我怀疑 setLocalDescription 触发了一些需要发送给调用者的 ICE 候选人的收集，在这种情况下，我怎样才能得到 desc 的完整描述createAnswer 的第一次调用？

            //setTimeout(function(){
                //connection.createAnswer(function(desc){           
                    $("#callee").val(JSON.stringify(desc));
                //}, errorCallback);
            //}, 1000);
        }, errorCallback);
    }, errorCallback);
};

我将放置调用者使用的代码，以防错误源在错误本身之前开始。调用者通过单击创建按钮运行 initiateConnection 方法。然后被调用者复制粘贴来自调用者选项卡的描述并单击加入，然后调用者复制粘贴来自被调用者的描述并单击设置被调用者描述

initiateConnection = function(){
    connection = new peerConnection(servers);
    connection.onicecandidate = function(evt){
        if(evt.candidate){
        connection.addIceCandidate(new RTCIceCandidate(event.candidate));
        }
    };

    dataChannel = connection.createDataChannel("channel");
    dataChannel.onopen = function(){
        alert('connection established, caller');
    };
    dataChannel.onmessage = receiveMessage;
    connection.createOffer(function(description){
        connection.setLocalDescription(description);
        $("#caller").val(JSON.stringify(description));
    }, errorCallback);
};

setCallee = function(data){
    connection.setRemoteDescription(new RTCSessionDescription(JSON.parse(data)));
};

receiveMessage = function(){};

errorCallback = function(){};  

Answer 1

几个问题:

connection.onicecandidate = function(evt){
    if(evt.candidate){
    connection.addIceCandidate(new RTCIceCandidate(event.candidate));

在这里，您要在同一个 peerConnection 上添加一个候选人，并将其短路。不要那样做。

当然，使用剪切和粘贴而不是表示您不需要逐条筛选候选人。相反，忽略候选人并在复制提议或答案之前简单地等待 null 候选人。随着时间的推移，候选人会自动添加到本地报价/答案中。 null 表示该过程结束，在某些情况下可能需要 <1 秒到大约 20 秒(有时会在 VPN、VM、多个网卡等中看到)。

顺便说一下，这可能就是为什么稍等片刻它对你有用。

有关剪切'n'粘贴的工作示例，请参阅WebRTC, ice candidates connection