使用Firebase错误的简单对等WebRTC应用程序：处理ICE候选者时出错

Question

I am using Firebase as a signaling intermediary between two tabs in google chrome on my local computer. 我将Firebase用作本地计算机上google chrome中两个选项卡之间的信号中介。 I am using the most recent build on the simple-peer github repo: simplepeer.min.js. 我正在使用简单对等github回购中的最新版本：simplepeer.min.js。 The full error is 完整的错误是

Uncaught DOMException: Error processing ICE candidate

My netcode is as follows: 我的网络代码如下：

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
}
});

The error occurs when I open the second browser window and the code: 当我打开第二个浏览器窗口和代码时，发生错误：

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

executes. 执行。

In case I am missing anything, here is my Index.html: 如果我丢失了任何东西，这是我的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>

Any help will be much appreciated. 任何帮助都感激不尽。 Thank you. 谢谢。

Answer 1

Your code here: 您的代码在这里：

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

Will get the 'sender' overwritten each time you get an ' Offer ' or ' Candidate ' (different types of signals). 每次您收到“ 要约 ”或“ 候选 ”（不同类型的信号）时，都会覆盖“发件人”。

As your error says "Error processing ICE candidate" it means you use trickle: true option. 当您的错误提示“对ICE候选程序进行错误处理”时，表示您使用了细trickle: true选项。

You have to consider this facts: 您必须考虑以下事实：
Without trickle- 没有trick流
you get one signal, "Offer" and "Answer" on host and on client, respectively. 您分别在主机和客户端上收到一个信号“ Offer”和“ Answer”。
With trickle- 随着trick流
you get as above PLUS many more 'candidate' signals per each. 您将获得如上的效果，并且每个信号都有更多的“候选”信号。

So instead of overwriting the signals u get, you should keep a reference to the initial "Offer" and "Answer" and a list of all candidates per each side. 因此，您应该保留对初始“报价”和“答案”的引用，以及每侧所有候选人的列表，而不是覆盖收到的信号。 And try to "signal" back to each one of them (host will try to signal all client's candidates and vise versa). 并尝试“发信号”回到他们每个人（主持人将尝试发信号通知所有客户的候选人，反之亦然）。

使用Firebase错误的简单对等WebRTC应用程序：处理ICE候选者时出错

问题描述

1 个解决方案

解决方案1
0 2018-03-14 14:23:31

使用Firebase错误的简单对等WebRTC应用程序：处理ICE候选者时出错

问题描述

1 个解决方案

解决方案1 0 2018-03-14 14:23:31

解决方案1
0 2018-03-14 14:23:31