在 webRTC 调用中设置接收器

Question

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

我将 join 方法放在initialConnection 方法之前，因为如下所述，我认为错误出现在 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 can't be called in state stable”。为什么在超时后第二次调用 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);
};

我将调用者使用的代码放在错误源开始于错误本身之前的情况下。调用者通过单击创建按钮运行initialConnection 方法。然后被调用者副本粘贴调用者选项卡中的描述并单击加入，然后调用者副本粘贴被调用者的描述并单击设置被调用者描述

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 上添加一个候选者，并将其短路。不要那样做。

当然，使用 cut'n'paste 而不是表示您不需要涓涓细流候选人。相反，忽略候选人，只需等待null 候选人，然后再复制报价或答案。随着时间的推移，候选人会自动添加到本地报价/答案中。 null 表示该过程的结束，在某些情况下，这可能需要不到 1 秒到 20 秒的时间（有时会出现在 VPN、VM、多个网卡等情况下）。

顺便说一句，这可能就是为什么等待一秒钟才对你有用。

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