Question

我在WebRTC的提供生成过程的抽象中遇到了一个奇怪的问题。似乎即将到来的冰候选人从未到达空候选人。我在使用几乎相同的代码之前已经成功生成了优惠，但无论出于什么原因，我的抽象版本只能达到12个候选者，而原始版本只有20个。这很奇怪，似乎代码几乎相同，但抽象的代码甚至不能在同一个浏览器上工作。

原始工作代码：

optimize

带有抽象函数的新版本（没有获得null ice候选者）

    var localConn = new webkitRTCPeerConnection({'iceServers':[{...}]});
    var remoteConn = new webkitRTCPeerConnection({'iceServers':[{...}]});

    function initMedia(localView, callback){
        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
        var constraints = {audio:true,video:true};
        navigator.getUserMedia(constraints, successStream, errorStream);
        //onSuccess and Error functions
        function successStream(stream){
            window.stream = stream;
            if(window.URL){
                $('#'+localView).attr('src',window.URL.createObjectURL(stream));
            } else {
                $('#'+localView).attr('src',stream);
            }
            localConn.addStream(stream);
            remoteConn.addStream(stream);
            console.log('local Stream: '+ stream.id);
            callback();     //-> goes on to create new offer
        }
        function errorStream(error){
            console.log('navigator.getUserMedia error: ', error);
        }
    }

    //function that generates offer and sends it out to a callback
    function newOffer(callback){
        console.log('creating new offer');

        localConn.createOffer(function (sessionDescription){
            localConn.setLocalDescription(sessionDescription);
        }, function(error){
            console.log('Error setting local description: '+error);
        });
        createOffer();
        //gather ICE with a callback to handle/send generated offer
        function createOffer(){
            localConn.onicecandidate = function(iceEvent){
                console.log('gathering local ice');        //ice events fired (20 total)
                //upon gathering all local ice
                if(iceEvent.candidate === null){
                    console.log('local ice gathered');    //success
                    var offer = {'type': localConn.localDescription.type,
                                 'sdp': localConn.localDescription.sdp};
                    offer = JSON.stringify(offer);
                    console.log('offer created');
                    callback(offer);
                }  
            }
        }
    }

Answer 1

streamHandle(stream);    //gets inserted into createOffer function

你的createOffer函数和你的initStream函数之间可能会有一场比赛，因为当你计算他们设定的所有内容时，这两者之间是有效的异步（很难确定，因为你＆＃39） ;不显示该代码。）

如果您想抽象WebRTC，您应该考虑使用旧的遗留API，而不是使用RTCPeerConnection modern promise-methods。在处理与此类似的比赛时，Promise是回调的优秀抽象。

还可以考虑使用onnegotiationneeded回调来触发协商，以解决此问题（但要注意bug in Chrome）。

这是一个本地连接示例（在Chrome中使用https fiddle）：

＆＃13;

var pc1 = new RTCPeerConnection(), pc2 = new RTCPeerConnection();

navigator.mediaDevices.getUserMedia({video: true, audio: true})
  .then(stream => pc1.addStream(video1.srcObject = stream))
  .catch(e => console.log(e));

pc1.onicecandidate = e => pc2.addIceCandidate(e.candidate);
pc2.onicecandidate = e => pc1.addIceCandidate(e.candidate);

pc2.ontrack = e => video2.srcObject = e.streams[0];
pc1.oniceconnectionstatechange = e => console.log(pc1.iceConnectionState);
pc1.onnegotiationneeded = e =>
  pc1.createOffer().then(d => pc1.setLocalDescription(d))
  .then(() => pc2.setRemoteDescription(pc1.localDescription))
  .then(() => pc2.createAnswer()).then(d => pc2.setLocalDescription(d))
  .then(() => pc1.setRemoteDescription(pc2.localDescription))
  .catch(e => console.log(e));

＆＃13;

<video id="video1" width="160" height="120" autoplay muted></video>
<video id="video2" width="160" height="120" autoplay></video>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

＆＃13;

如何抽象WebRTC提供？

1 个答案: