12

APIRTCPeerConnectionを使用できるように を作成する方法を学ぼうとしています。DataChannel私が理解したことから試したことは次のとおりです。

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チュートリアルを既に読みました。

4

3 に答える 3

13

たくさんの記事をふるいにかけて、ようやく動作するようになりました：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);
        });
    });
}

ふぅ。それを理解するのに少し時間がかかりました。

于 2013-01-03T10:26:03.663 に答える
4

Chrome と Firefoxの両方と互換性のあるデータ接続のセットアップを示す要点を投稿しました。

主な違いは、FF では接続が確立されるまで待たなければならないことですが、Chrome ではその逆です。オファーが送受信される前にデータ接続を作成する必要があるようです。

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

もう 1 つの違いは、Chrome がイベント オブジェクトを渡すの.ondatachannelに対し、FF は生のチャネルのみを渡すことです。

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

現在、Chrome Nightly も機能させるには、Chrome Nightly を開始する必要があることに注意してください--enable-data-channels。

于 2013-02-27T06:41:24.840 に答える
4

これは、私が今日 (2014 年 2 月) に Chrome で行った一連のイベントです。これは、ピア 1 がピア 2 にビデオをストリーミングする単純化されたケースです。

  1. ピアがメッセージを交換するための何らかの方法を設定します。(人々がこれを達成する方法の違いは、悲しいことに、さまざまな WebRTC コード サンプルを比較不可能にする理由です。しかし、精神的に、またコード編成において、このロジックを他のロジックから分離するようにしてください。)
  2. それぞれの側で、重要なシグナリング メッセージのメッセージ ハンドラーをセットアップします。それらを設定してそのままにしておくことができます。処理および送信するコア メッセージは 3 つあります。
    • addIceCandidate反対側から送られてきたアイス候補 ==> コー​​ル
    • オファーメッセージ==>それでSetRemoteDescription、答えを作って送信してください
    • 応答メッセージ ===>SetRemoteDescription付き
  3. それぞれの側で、新しい peerconnection オブジェクトを作成し、重要なイベント (onicecandidate、onremovestream、onaddstream など) のイベント ハンドラーをそれにアタッチします。
    • 氷の候補 ===> 相手に送る
    • ストリームが追加されました ===> ビデオ要素に添付して、それを見ることができます
  4. 両方のピアが存在し、すべてのハンドラーが配置されている場合、ピア 1 は何らかの種類のトリガー メッセージを取得して、ビデオ キャプチャを開始します (getUserMedia呼び出しを使用) 。
  5. 成功するとgetUserMedia、ストリームができます。addStreamピア 1 のピア接続オブジェクトを呼び出します。
  6. 次に -- そしてそのときだけ -- ピア 1 がオファーを出す
  7. ステップ 2 で設定したハンドラーにより、ピア 2 はこれを取得して応答を送信します。
  8. これと同時に (そしてややあいまいですが)、ピア接続オブジェクトはアイス候補の生成を開始します。それらは 2 つのピア間で送受信され、処理されます (上記のステップ 2 と 3)。
  9. ストリーミングは、次の 2 つの条件の結果として、不透明に自動的に開始されます。
    • オファー/回答交換
    • アイス候補の受け取り、交換、追加

ステップ 9 の後にビデオを追加する方法が見つかりません。何かを変更したい場合は、ステップ 3 に戻ります。

于 2014-02-06T19:07:24.160 に答える