如何在WebRTC對等連接中創建數據通道？

Question

我正在嘗試學習如何創建RTCPeerConnection以便我可以使用DataChannel API。 以下是我從我所理解的內容中嘗試過的內容：

var client = new mozRTCPeerConnection;
var server = new mozRTCPeerConnection;

client.createOffer(function (description) {
    client.setLocalDescription(description);
    server.setRemoteDescription(description);

    server.createAnswer(function (description) {
        server.setLocalDescription(description);
        client.setRemoteDescription(description);

        var clientChannel = client.createDataChannel("chat");
        var serverChannel = server.createDataChannel("chat");

        clientChannel.onmessage = serverChannel.onmessage = onmessage;

        clientChannel.send("Hello Server!");
        serverChannel.send("Hello Client!");

        function onmessage(event) {
            alert(event.data);
        }
    });
});

我不確定出了什么問題，但我假設連接從未建立，因為沒有顯示任何消息。

我在哪里可以了解更多相關信息？ 我已經閱讀了WebRTC入門 - HTML5 Rocks教程。

Answer 1

在篩選了很多文章后我終於開始工作： http ： //jsfiddle.net/LcQzV/

首先我們創建對等連接：

var media = {};
media.fake = media.audio = true;
var client = new mozRTCPeerConnection;
var server = new mozRTCPeerConnection;

當客戶端連接到服務器時，它必須打開一個數據通道：

client.onconnection = function () {
    var channel = client.createDataChannel("chat", {});

    channel.onmessage = function (event) {
        alert("Server: " + event.data);
    };

    channel.onopen = function () {
        channel.send("Hello Server!");
    };
};

當客戶端創建數據通道時，服務器可能會響應：

server.ondatachannel = function (channel) {
    channel.onmessage = function (event) {
        alert("Client: " + event.data);
    };

    channel.onopen = function () {
        channel.send("Hello Client!");
    };
};

我們需要向客戶端和服務器添加假音頻流以建立連接：

navigator.mozGetUserMedia(media, callback, errback);

function callback(fakeAudio) {
    server.addStream(fakeAudio);
    client.addStream(fakeAudio);
    client.createOffer(offer);
}

function errback(error) {
    alert(error);
}

客戶創建要約：

function offer(description) {
    client.setLocalDescription(description, function () {
        server.setRemoteDescription(description, function () {
            server.createAnswer(answer);
        });
    });
}

服務器接受要約並建立連接：

function answer(description) {
    server.setLocalDescription(description, function () {
        client.setRemoteDescription(description, function () {
            var port1 = Date.now();
            var port2 = port1 + 1;

            client.connectDataConnection(port1, port2);
            server.connectDataConnection(port2, port1);
        });
    });
}

唷。 這需要一段時間才能理解。

Answer 2

我已經發布了一個要點是顯示了建立數據連接， 既 Chrome和Firefox兼容。

主要區別在於，在FF中你需要等到設置連接，在Chrome中它恰恰相反：似乎你需要在來回發送任何優惠之前創建數據連接：

var pc1 = new RTCPeerConnection(cfg, con);
if (!pc1.connectDataConnection) setupDC1();    // Chrome...Firefox defers per other answer

另一個區別是Chrome將事件對象傳遞給.ondatachannel而FF只傳遞一個原始通道：

pc2.ondatachannel = function (e) {
    var datachannel = e.channel || e;

請注意，您目前需要Chrome每晚啟動--enable-data-channels才能使用它。

Answer 3

以下是我今天（2014年2月）在Chrome中發布的一系列事件。 這是針對簡化的情況，其中對等體1將視頻流式傳輸到對等體2。

1. 為對等體設置某種方式來交換消息。 （人們如何實現這一點的不同之處在於，不同的WebRTC代碼示例如此難以理解，令人遺憾。但在精神上，在您的代碼組織中，嘗試將此邏輯與其他邏輯分開。）
2. 在每一側，為重要的信令消息設置消息處理程序。 你可以設置它們並將它們保留下來。 有3個核心消息要處理和發送：
   • 從另一方發送的冰候選人==>用它調用addIceCandidate
   • 使用它提供消息==> SetRemoteDescription ，然后回答並發送它
   • 答案消息===> SetRemoteDescription with it
3. 在每一方面，創建一個新的peerconnection對象並為其執行重要事件的事件處理程序：onicecandidate，onremovestream，onaddstream等。
   • 冰候選人===>將其發送到另一方
   • stream added ===>將它附加到視頻元素，以便您可以看到它
4. 當兩個對等體都存在並且所有處理程序都到位時，對等體1獲得某種觸發消息以開始視頻捕獲（使用getUserMedia調用）
5. 一旦getUserMedia成功，我們就有了一個流。 在對等方1的對等連接對象上調用addStream 。
6. 然后 - 只有那時 - 同行1提出要約
7. 由於我們在步驟2中設置了處理程序，因此對等方2得到了這個並發送了答案
8. 與此同時（並且有些模糊），對等連接對象開始產生冰候選者。 他們在兩個同伴之間來回傳遞並處理（上面的步驟2和3）
9. 由於兩個條件，流式傳輸本身是不透明的：
   • 提供/回答交換
   • 冰候選人收到，交換和補充

我還沒有找到在步驟9之后添加視頻的方法。當我想要改變某些內容時，我會回到第3步。