Comment créer un canal de données dans une connexion homologue WebRTC?

J'ai enfin réussi à le faire fonctionner après tamisage à travers un grand nombre d'articles: http://jsfiddle.net/LcQzV/

Nous avons d'abord créer les par les pairs connexions:

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

Lorsque le client se connecte au serveur, il doit ouvrir un canal de données:

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

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

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

Lorsque le client crée un canal de données, le serveur peut répondre:

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

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

Nous avons besoin d'ajouter un faux flux audio vers le client et le serveur pour établir une connexion:

navigator.mozGetUserMedia(media, callback, errback);

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

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

Le client crée une offre:

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

Le serveur accepte l'offre et établit une connexion:

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

Ouf. Cela a pris un certain temps pour comprendre.

Ici est une séquence d'évènements que j'ai aujourd'hui (Février 2014) en Chrome. C'est pour un cas simplifié où les pairs 1 va diffuser de la vidéo par les pairs 2.

1. Configuré d'une certaine façon pour les pairs pour échanger des messages. (La variance dans la façon dont les gens à accomplir ce est ce qui le rend différent WebRTC exemples de code donc incommensurables, malheureusement. Mais mentalement, et dans votre organisation du code, essayez de séparer cette logique du reste.)
2. Sur chaque côté, de configurer les gestionnaires de messages pour les important les messages de signalisation. Vous pouvez les configurer et de les laisser en place. Il y a 3 messages essentiels pour gérer & envoyer:
   • une glace candidat envoyé de l'autre côté ==> appel addIceCandidate avec elle
   • une offre de message ==> SetRemoteDescription avec elle, puis faire une réponse & envoyer
   • un message de réponse ===> SetRemoteDescription avec elle
3. Sur chaque côté, de créer un nouveau peerconnection objet et de fixer des gestionnaires d'événements pour les événements importants: onicecandidate, onremovestream, onaddstream, etc.
   • glace candidat ===> envoyer de l'autre côté
   • flux ajoutée ===> de l'attacher à un élément vidéo de sorte que vous pouvez le voir, il
4. Lorsque les deux pairs sont présents et tous les gestionnaires sont en place, peer 1 reçoit un message de déclenchement d'un certain type pour commencer la capture vidéo (à l'aide de la getUserMedia appel)
5. Une fois getUserMedia réussit, c'est un flux. Appel addStream sur le peer 1 par des pairs de l'objet de connexion.
6. Alors-et seulement alors-peer 1 fait une offre
7. En raison de l'gestionnaires nous avons mis en place à l'étape 2, peer 2 obtient ceci et envoie une réponse
8. Simultanément avec cela (et un peu obscurément), les pairs objet de connexion commence à produire de la glace candidats. Ils obtiennent le va-et-vient entre les deux pairs et manipulés (étapes 2 & 3 ci-dessus)
9. Streaming commence par lui-même, de manière opaque, comme un résultat de 2 conditions:
   • offre/réponse de change
   • glace candidats ont reçu, échangé, et a ajouté

Je n'ai pas trouvé un moyen d'ajouter de la vidéo après l'étape 9. Lorsque je veux changer quelque chose, je reviens à l'étape 3.