WebRTC が Firefox、Android、iOS に対応

過去数週間に、WebRTC で多くの変化がありました。更新が必要です

特に、複数のブラウザとプラットフォームで WebRTC が利用可能になることを心待ちにしております。

getUserMedia は、Chrome、Opera、Firefox Nightly/Aurora でフラグなしで利用できます(Firefox の場合は設定が必要です)。getUserMedia のクロスブラウザ デモ(simpl.info/gum)をご覧ください。また、getUserMedia をウェブ オーディオの入力として使用する Chris Wilson の素晴らしい例もご覧ください。

webkitRTCPeerConnection が Chrome 安定版に追加され、フラグなしになりました。TURN サーバーのサポートは、Chrome 24 以降で利用できます。Chrome の RTCPeerConnection 実装の超シンプルなデモは simpl.info/pc で、優れたビデオ チャット アプリケーションは apprtc.appspot.com でご覧いただけます。名前について補足すると、数回の反復処理を経て、現在は webkitRTCPeerConnection という名前になっています。他の名前と実装は非推奨になりました。標準化プロセスが安定すると、webkit 接頭辞は削除されます)。

また、WebRTC は、デスクトップ版 Firefox Nightly と Aurora にも実装されました。iOS と Android では、Ericsson の Bowser ブラウザを介して利用できます。

DataChannel

DataChannel は、任意のデータの高パフォーマンス、低レイテンシ、ピアツーピアの通信を実現する WebRTC API です。API は WebSocket と同様にシンプルですが、ブラウザ間で直接通信が行われるため、リレー(TURN)サーバーが必要な場合でも(ファイアウォールと NAT に対応する「ホールパンチ」が失敗した場合)、DataChannel は WebSocket よりもはるかに高速です。

DataChannel は、Chrome バージョン 25 でフラグを介して使用可能になる予定ですが、このバージョンでは使用できない可能性があります。これは試験運用版であり、完全な機能が提供されない場合があります。また、Firefox の実装では通信できません。今後のバージョンの DataChannel はより安定し、Firefox で DataChannel を操作できるように実装される予定です。

Firefox Nightly/Aurora は mozGetUserMediamozRTCPeerConnectionDataChannel をサポートしています(about:config の設定を忘れないでください)。

Firefox で実行されている DataChannel のスクリーンショットを次に示します。

Firefox DataChannel のスクリーンショット

このデモは http://mozilla.github.com/webrtc-landing/data_test.html にあります。コード スニペットは次のとおりです。

pc1.onconnection = function() {
    log("pc1 onConnection ");
    dc1 = pc1.createDataChannel("This is pc1",{}); // reliable (TCP-like)
    dc1 = pc1.createDataChannel("This is pc1",{outOfOrderAllowed: true, maxRetransmitNum: 0}); // unreliable (UDP-like)
    log("pc1 created channel " + dc1 + " binarytype = " + dc1.binaryType);
    channel = dc1;
    channel.binaryType = "blob";
    log("pc1 new binarytype = " + dc1.binaryType);

    // Since we create the datachannel, don't wait for onDataChannel!
    channel.onmessage = function(evt) {
    if (evt.data instanceof Blob) {
        fancy_log("*** pc2 sent Blob: " + evt.data + ", length=" + evt.data.size,"blue");
    } else {
        fancy_log('pc2 said: ' + evt.data, "blue");
    }
    }
    channel.onopen = function() {
    log("pc1 onopen fired for " + channel);
    channel.send("pc1 says Hello...");
    log("pc1 state: " + channel.state);
    }
    channel.onclose = function() {
    log("pc1 onclose fired");
    };
    log("pc1 state:" + channel.readyState);
        }

Firefox の実装の詳細とデモについては、hacks.mozilla.org ブログをご覧ください。基本的な WebRTC のサポートは、2013 年初頭の Firefox 18 でリリースされる予定です。また、getUserMedia や createOffer/Answer の制約、TURN(ファイアウォールの背後にあるブラウザ間の通信を可能にする)などの追加機能のサポートも予定されています。

WebRTC の詳細については、WebRTC のスタートガイドをご覧ください。WebRTC に関する書籍もあります。書籍と複数の電子書籍形式で入手できます。

解像度の制約

制約は Chrome 24 以降に実装されています。これらを使用して、getUserMedia() 呼び出しと RTCPeerConnection addStream() 呼び出しの動画解像度の値を設定できます。

例については、simpl.info/getusermedia/constraints をご覧ください。ブレークポイントを設定して値を調整することで、さまざまな制約を試すことができます。

注意点がいくつかあります。1 つのブラウザタブで設定された getUserMedia 制約は、その後に開くすべてのタブの制約に影響します。制約に許可されていない値を設定すると、わかりにくいエラー メッセージが表示されます。

navigator.getUserMedia error:  NavigatorUserMediaError {code: 1, PERMISSION_DENIED: 1}

同様に、サーバーでではなくローカル ファイル システムから getUserMedia を使用するとエラーが発生します。

ストリーミング画面キャプチャ

タブキャプチャは、Chrome Dev チャンネルで利用可能になりました。これにより、タブの表示領域をストリームとしてキャプチャし、ローカルで使用したり、RTCPeerConnection の addStream() で使用したりできます。画面キャストやウェブページの共有に非常に便利です。詳しくは、WebRTC タブ コンテンツのキャプチャに関する提案をご覧ください。

これらの API を使ってどのようなことをしているか、ぜひコメント欄でお知らせください。

発生したバグは、chromiumbugs.appspot.com で報告してください。