How to create data channel in WebRTC peer connecti

我想学习如何创建一个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岩石教程。

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

另一区别是，铬将一个事件对象来.ondatachannel而FF通过只是一个原始信道：

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

请注意，您目前需要的Chrome晚间开始--enable-data-channels ，它的工作为好。

Answer 3:

下面是在Chrome我今天的工作活动（2月2014）的序列。这是一个简化的情况下对等体1将视频流给端2。

建立某种方式让同行交换消息。（人们如何做到这一点的变化是什么使不同的WebRTC代码样本，以便不可通约的，可悲的，但精神上，并在你的代码组织，尝试这个逻辑从休息分离出来。）
在每一侧，对于重要的信令消息建立消息处理程序。你可以设置他们离开他们。有3级核心的信息处理和发送：
- 从另一侧==>呼叫发送冰候选addIceCandidate与它
- 提供消息==> SetRemoteDescription它，然后做出一个答案：发送
- 应答消息===> SetRemoteDescription与它
在每边，创建一个新的PeerConnection等对象并附事件处理程序给它的重要事件：onicecandidate，onremovestream，onaddstream等。
- 冰候选人===>发送给对方
- 气流中加入===>将其附加到视频元素，所以你可以看到它
两个对等方都存在，所有的处理很到位，对1得到某种形式的触发消息，开始视频捕捉（使用getUserMedia调用）
一旦getUserMedia成功，我们有一个流。呼叫addStream同行1的对等连接对象。
然后 - 然后才 - 端1作出一项要约
由于处理程序，我们在第2步设置，对2得到这并发送答案
与此并行地（和有些不明显），对等连接对象开始产生冰的候选者。他们得到两个节点之间来回发送和处理（上述步骤2和3）
开始流本身，不透明，出现两种情况之一的结果：
- 要约/应答交换
- 接收冰的候选人，交换，并添加