過去数週間に、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 は mozGetUserMedia
、mozRTCPeerConnection
、DataChannel
をサポートしています(about:config の設定を忘れないでください)。
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 で報告してください。