Simple-Peer WebRTC App Using Firebase Error: Error processing ICE Candidate答案

【问题标题】：Simple-Peer WebRTC App Using Firebase Error: Error processing ICE candidateSimple-Peer WebRTC App Using Firebase Error: Error processing ICE Candidate
【发布时间】：2017-11-22 02:49:31
【问题描述】：

我使用 Firebase 作为本地计算机上 google chrome 中两个选项卡之间的信号中介。我正在使用 simple-peer github repo 上的最新版本：simplepeer.min.js。完整的错误是

Uncaught DOMException: Error processing ICE candidate

我的网络代码如下：

const roomId = extractQueryString('roomId');
firebase.auth().onAuthStateChanged((user) => {
    if (user && roomId) {
    // User is signed in.
    const isAnonymous = user.isAnonymous;
    const uid = user.uid;
    const sessionId = Math.floor(Math.random()*1000000000);
    const testLocation = firebase.database().ref();
    console.log(uid);

    //doesRoomExist(roomId); 

    const p2pConnection = new SimplePeer({
        initiator: document.location.hash === '#initiator'
    });

    p2pConnection.on( 'signal', (signal) => {
        console.log(signal);
        testLocation.child(roomId).child(uid).set({
            sender: sessionId,
            signal: signal
        });
    });

    testLocation.child(roomId).on('child_added', (snapshot) =>{
        if( snapshot.val().sender !== sessionId ) {
            p2pConnection.signal( snapshot.val().signal );
        }
    });

    /*
     * We'll send a message to the other side as soon as
     * the connection is established
     */
    p2pConnection.on( 'connect', () => {
        console.log( 'webrtc datachannel connected' );
        p2pConnection.send( 'Hello from user ' + userName );
    });

    p2pConnection.on( 'close', () => {
        console.log( 'webrtc datachannel closed' );
    });

    p2pConnection.on( 'data', (data) => {
        console.log( 'received data <b>' + data + '</b>' );
    });

    //db.ref().child('ergh').set({ID:uid});
} else {
    // Do stuff if they inputted an invalid room or fb is down
}
});

当我打开第二个浏览器窗口和代码时出现错误：

    testLocation.child(roomId).on('child_added', (snapshot) =>{
    if( snapshot.val().sender !== sessionId ) {
        p2pConnection.signal( snapshot.val().signal );
    }
});

执行。

如果我遗漏了什么，这里是我的 Index.html：

<!DOCTYPE html>
<html>
    <script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js">
</script>
    <script>
        // Initialize Firebase
        var config = {
            apiKey: "AIzaSyAUEtS1zEakv0a1TIlsTobQwwTyvlUzQGc",
            authDomain: "simple-whiteboard.firebaseapp.com",
            databaseURL: "https://simple-whiteboard.firebaseio.com",
            projectId: "simple-whiteboard",
            storageBucket: "simple-whiteboard.appspot.com",
            messagingSenderId: "272918396058"
        };
        firebase.initializeApp(config);

    firebase.auth().signInAnonymously().catch(function(error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
    });

</script>
<script src="js/simplepeer.min.js"></script>
<script src="js/draw.js"></script>
<script src="js/RTC-networking.js"></script>

<body onload="init()">
        <canvas id="myCanvas" width="400" height="400"
            style="position:absolute;top:10%;left:10%;border:2px solid;">
        </canvas>
</body>

任何帮助将不胜感激。谢谢。

【问题讨论】：

标签： javascript web webrtc

【解决方案1】：

你的代码在这里：

 p2pConnection.on( 'signal', (signal) => {
    console.log(signal);
    testLocation.child(roomId).child(uid).set({
        sender: sessionId,
        signal: signal
    });
});

每次收到“Offer”或“Candidate”（不同类型的信号）时，都会覆盖“sender”。

正如您的错误所说“错误处理 ICE 候选”，这意味着您使用了 trickle: true 选项。

您必须考虑以下事实：
没有涓涓细流-
您会分别在主机和客户端收到一个信号，“Offer”和“Answer”。
有涓涓细流-
您会得到上述每个信号以及更多的“候选”信号。

因此，您应该保留对初始“Offer”和“Answer”的引用以及每边所有候选人的列表，而不是覆盖您获得的信号。并尝试向每个人“发信号”（主机将尝试发信号给所有客户的候选人，反之亦然）。

【讨论】：