使用Firebase錯誤的簡單對等WebRTC應用程序：處理ICE候選者時出錯

Question

我將Firebase用作本地計算機上google chrome中兩個選項卡之間的信號中介。 我正在使用簡單對等github回購中的最新版本：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>

任何幫助都感激不盡。 謝謝。

Answer 1

您的代碼在這里：

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

每次您收到“ 要約 ”或“ 候選 ”（不同類型的信號）時，都會覆蓋“發件人”。

當您的錯誤提示“對ICE候選程序進行錯誤處理”時，表示您使用了細trickle: true選項。

您必須考慮以下事實：
沒有trick流
您分別在主機和客戶端上收到一個信號“ Offer”和“ Answer”。
隨着trick流
您將獲得如上的效果，並且每個信號都有更多的“候選”信號。

因此，您應該保留對初始“報價”和“答案”的引用，以及每側所有候選人的列表，而不是覆蓋收到的信號。 並嘗試“發信號”回到他們每個人（主持人將嘗試發信號通知所有客戶的候選人，反之亦然）。

使用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