2013年04月14日

WebRTCをお手軽に。Peer.js試してみた



WebRTCへの最近の僕

今年最初のブログ記事ポスト。いやーもう4月も半ば。桜も散っちゃいました。ほんと、更新頻度の低いブログです・・・今日は、WebRTC関連の話題。

DataChannel(映像、音声以外の任意のデータを送受信できる機能)が実装されたり、Firefox nightlyでも実装が始まったり、Chrome for Android(beta)でも実装が始まったりと、最近ホットなニュースが目白押しのWebRTC(Web Real Time Communication)。僕も、ちょいちょいプロトタイプ実装を試しています。

例えば、3/22のWeb先端味見部の時に、当日講師の吉川さんに取り上げていただいたチャット実装(github)とか(その後、吉川さん、大津谷さんのcontributeのおかげで、ビデオチャット機能実装とかバグ改修とか進められています)

なお、上のコードは、サンプルサイト公開もしています。(http://rtcdc.komasshu.info/)お互いに、room no も含め、同一URLにアクセスしたら、両側で"start"をクリック後、片方から"send Offer"をクリックすると p2p でのビデオ and テキストチャットができます。

とにかく面倒くさい

ただ、このWebRTCですが、とにかく面倒くさい。特にRTCPeerConnection APIの部分が、ほんと酷い。細かい話は、僕の以前のブログを参照頂ければ(すみません、この記事書いた時とAPI実装が変わっているので細かい部分は現在とは違っています。あくまで、大枠だけ見てください)と思いますが、

  • セッション情報をやり取りするために、ブローカーサーバーとの通信(WebSocketなんかを使うことが多い)を実装
  • Peer間で、p2pの通信を行うための API call(offer、answer : 映像フォーマットなどのネゴシエーション、candidate : p2p通信用アドレス・ポートのやりとり)や、それにまつわるイベントハンドリング
  • イベントハンドラに応じた、UI(DOM)の制御
と、そのAPIがかなり難解。SIPとかNAT超えとかやってる人だと、比較的すんなり入れると思いますが、そうでないと「なんだよ、STUNとかOfferって」ってなっちゃいます。更に色んな情報制御のプレーンを同時に扱わなければならないため、専門用語に慣れている人でさえ、かなり苦労すること請け合いです。WebGLほどでは無いですが、HTML5系ではかなり難解なAPIです。

上にあげたサンプルコードのクライアントJSの部分はこちらから確認できますが、すごいシンプルなチャットのコーディングでもこれぐらい必要なっちゃう(普通にWebSocketだけで書いたほうが、遥かに簡単)。とてもじゃありませんが、これをスクラッチで使って、もっと複雑なコードを書こうとは思えません。

簡単 WebRTC フレームワーク。Peer.js

てな不満は色んな人達が感じているようで、WebRTC用のフレームワークライブラリがすでに複数公開されています。で、今回は、その中の一つ http://peerjs.com/ を調べてみたので、今回はその内容を紹介します。ちなみに、昨日 NTT-AT の金城さん主催で開催された ふらっと勉強会 WebRTC自習会の際に、色々と調べたものです。

とりあえず、ページのスニペット(UDPサーバー・クライアントのコード)を見ると分かるのですが、とにかくシンプルにWebRTCを使うことができます。多分、WebSocketやsocket.ioのプログラミングに慣れている人であれば、殆ど類似の考え方で使えますので、そんなに苦労しないと思います。

また、WebRTCには別にWebSocketなどによるブローカーサーバーを作らなければならないのですが、これも公開されていて、API keyの申請は必要(僕は試していませんが・・・)ですが、特にブローカーサーバーを作らなくても、簡単にWebRTCを試すことができます。また、ブローカーサーバー自体もOpen Sourceで公開されており、簡単に自分で立てることも可能です(僕は、今回そのアプローチを使いました)。ただし、こちらのAPIはDataChannelのみのフレームワーク(多分)ですので、その点には注意してください。

こちらの、Peer.js。APIが簡単なのもさることながら、内部的に結構充実した機能が実装されており、

各種データタイプへの対応
WebRTCのDataChannelでは、データ送受信フォーマットがバイナリーのみとなっているため、データ送受信時に各種変換処理が必要なのですが、その辺りが簡単に対応出来ます(connect()メソッドの第二引数でデータタイプを指定する。例えば、UTF8でのデータ送受信時には
{serialization: binary-utf8}
を指定する。
reliable通信への対応
WebRTCのDataChannelはUDP通信のため、パケットロスが起きると、データが欠落してしまいます。WebRTCでは、これを防ぐため reliable (再送制御)通信をサポートする仕様策定を進めていますが、現状まだ実装されていません。ここで、実験的ですが、connect()の第二引数で
{reliable: true}
を指定すると、ライブラリにより再送制御が行われるようになります。ただし、現状のDataChannel実装ではデータ送信にトラフィック制限がかかっており、ファイルなどのデータを送信するのに異常に時間がかかったりしますので、あくまで、ショートデータのみに使ったほうが得策です。あと、コードを見ると、reliable:trueを設定した際、serializationの設定がスルーされてしまう実装となっているため、例えばUTF8を送受信するとおかしなことになります。
ブローカーサーバーとのWebSocket / XHR フォールバック
ブローカーサーバーとの通信は、通常はWebSocketが使われますが、失敗するとXHRにフォールバックします。コードを見ると、socket.ioは用いておらず、独自実装のようです。
といった機能がサポートされています(更に詳細は API reference なんかを確認してください(英語))。また、興味のある人は、是非ソースコードもチェックしてみてください。

チャットサンプル

ということで、Peer.jsを使ったチャットサンプルを作ってみました(UTF-8対応版)(reliableはdefaultでfalseになっているので、ロスがあるとデータが途中で落ちちゃいますが・・・)。

まずは、ブローカーサーバー。今回は、自前で立ててみました。nodeのインストールと

$ npm peer
が必要です。無茶苦茶簡単ですw
var PeerServer = require('peer').PeerServer;
var server = new PeerServer({ port: 9000 });

次に、クライアントのコード JavaScritpのみ示します。今回は、ブローカーを独自に立てたため、Peerオブジェクトのコンストラクト時に、オプションでサーバーのアドレスとポートを指定しています。また、UTF-8をサポートするために、connect()メソッドでやはりオプション指定しています。

チャット実装時にUDPサーバーとクライアントのコードを同居しなければならないため、WebSocketのみでコーディングするよりも若干コード量が増えていますが、かなり簡単にWebRTCを利用できることがわかると思います。(生で書くのに比べると段違いの差です

var peer_, conn_;
 
var enableForm_ = function(id) {
	$("form").each(function(e){
		$(this).find("button").attr("disabled", $(this).attr("id") === id ? false : "disabled");
	})
}
var setupForRemote_ = function(conn) {
	if(!!conn) conn_ = conn;
 
	enableForm_("chat");
 
	conn_.on("data", function(data){
		showChat_(conn_.peer, data)
	});
}
 
var showChat_ = function(id, mesg) {
	$("<dt>"+id+"</dt><dd>"+mesg+"</dd>").appendTo("dl")
}
 
$("form#connect").submit(function(e){
	e.preventDefault();
	$(this).find("button").attr("disabeld", "disabled")
 
	var id = $(this).find("input[name=myid]").val();
	peer_ = Peer(id, { 
		"host": "localhost", 
		"port": 9000
	});
 
	peer_.on('connection', setupForRemote_);
	enableForm_("call")
})
 
$("form#call").submit(function(e){
	e.preventDefault();
	var id = $(this).find("input[name=remoteid]").val();
	conn_ = peer_.connect(id, {"serialization": "binary-utf8"});
 
	conn_.on('open', setupForRemote_);
})
 
$("form#chat").submit(function(e){
	e.preventDefault();
 
	var mesg = $(this).find("input").val();
	showChat_("me", mesg)
	conn_.send(mesg)
})
 
function init(){
	enableForm_("connect")
}
init();

HTMLも含めた全体は、gistで確認してください。

まとめ

今回は、WebRTCのDataChannelを簡単に使えるようにするフレームワーク Peer.js を紹介しました。ネットワークゲームとか連携系のサービスなどで、レスポンス性をあげ、かつサーバー負荷を下げることが期待されるWebRTCのDataChannelですが、このライブラリを使うことで、そのコーディング障壁をかなり下げることができます。興味の有る方は、是非お試しを



人気ブログランキングへ
kotesaki at 21:15│Comments(14)TrackBack(0)clip!

トラックバックURL

この記事へのコメント

1. Posted by Mubasharat   2013年05月01日 03:11
を使うことで、そのコーディング障壁をかなり下げることができます。興味の有る方は、是非お試しを
2. Posted by guild wars 2 gold   2013年05月14日 12:20
5 ということで、Peer.jsを使ったチャットサンプルを作ってみました(UTF-8対応版)(reliableはdefaultでfalseになっているので、ロスがあるとデータが途中で落ちちゃいますが・・・)。
3. Posted by Diablo 3 Po   2013年09月14日 18:51
идеи о том, обнаружить ничего, и все узнать о Выравнивание власть и золота дешево в семь основные этапы .
4. Posted by AION Kinah   2013年09月14日 18:51
простой способ , чтобы полностью понять почти все узнать касающиеся Выравнивание власть и золота дешево в Два основные этапы .
5. Posted by gw2 gold   2013年09月14日 18:51
Лучшие процессы Узнайте о вау власти выравнивания 1-90 дешевые и путей можно Регистрация вау власти выравнивания 1-90 дешевые элита
6. Posted by BNS d'Or   2013年09月14日 18:51
Борьба процессы Практика вау власти выравнивания 1-90 дешевые И Кроме того, как Одна банка Регистрация вау власти выравнивания 1-90 дешевые Лучшие собаки
7. Posted by UGGムートンブーツ   2013年12月28日 04:57
http://www.sacwomen.com/
UGGムートンブーツ http://www.sacwomen.com/
8. Posted by セリーヌブギーバッグ新作   2014年06月09日 06:27
■サイズ : W:35.0×H:18.0×D:19.0
9. Posted by longchamp le pliage paris   2014年08月28日 02:20
Il mit la main ¨? sa poche pour prendre son <a href="http://www.christiancarhire.com/sac-de-voyage-longchamp-femme.html!" title="sac de voyage longchamp femme!">sac de voyage longchamp femme</a> couteau mais ne le trouva pas.
10. Posted by vanessa bruno paris pas cher   2014年08月29日 03:00
Nous savons que la production de fer et d’acier connaissait alors une expansion particulierement rapide mais, elle demeurait encore plus petite que celle du bois .Gordon Bertram, &laquo;Historical Statistics on Growth and...suite. Naturellement, beaucoup d’etablissements utilisaient a la fois le <a href="http://www.teteenlair-orchestre.fr/ralph/vetement-ralph-laurenvetement-ralph-lauren-hommevetement-ralph-lauren-femme-pas-cher.html" title="vetement ralph lauren femme pas cher">vetement ralph lauren femme pas cher</a> bois et le metal
11. Posted by veste gucci   2014年09月20日 06:59
Pour ne parler ici que des Antilles, ces gracieuses corbeilles de fleurs aux parfums si doux et si enivrants, surgies du sein des eaux et disseminees comme de ravissantes oasis sur les flots bleus de l’Atlantique ; terres benies ou tout sourit au c?ur et sur lesquelles la vie s’ecoule comme un reve feerique des Mille et une Nuits ; a combien de batailles terribles ont-elles assiste ! Quelles luttes acharnees ont-elles soutenues avec une energie et une abnegation heroiques pour resister, soit au revoltes des noirs, soit aux attaques plus formidables encore de puissants envahisseurs etrangers afin de rester francaises et se conserver a cette mere patrie qu’elles aiment avec passion, peut-etre a cause de sa constante ingratitude envers elles.
12. Posted by http://www.vidam.it/administrator/ray-ban30.html   2014年09月28日 12:58
http://www.vidam.it/components/ray-ban16.html <a href="http://www.vidam.it/components/ray-ban16.html">レイバン メガネ 店舗 横浜</a> <a href="http://www.vidam.it/components/ray-ban16.html">http://www.vidam.it/components/ray-ban16.html</a> http://www.vidam.it/components/ray-ban16.html <a href="http://www.vidam.it/components/ray-ban16.html">レイバン メガネ 店舗 横浜</a> <a href="http://www.vidam.it/components/ray-ban16.html">http://www.vidam.it/components/ray-ban16.html</a>
http://www.vidam.it/administrator/ray-ban30.html http://www.vidam.it/administrator/ray-ban30.html
[url=http://www.vidam.it/administrator/ray-ban30.html]http://www.vidam.it/administrator/ray-ban30.html[/url]
13. Posted by レイバン アビエイター レンズ交換   2014年10月09日 23:13
http://www.banhamzoo.co.uk/Conservation/raybanaviator-150.html <a href="http://www.banhamzoo.co.uk/Conservation/raybanaviator-150.html">レイバン アビエイター 調整</a> <a href="http://www.banhamzoo.co.uk/Conservation/raybanaviator-150.html">レイバン アビエイター 調整</a> <a href="http://www.banhamzoo.co.uk/Conservation/raybanaviator-150.html">http://www.banhamzoo.co.uk/Conservation/raybanaviator-150.html</a>
14. Posted by 野尻佳志   2015年09月23日 10:55
すみません、PeerJSについて困っておりますので質問させてください。
PeerJSでビデオチャットを構築したんですが、
WebSocketのOpenに失敗する時があります。
(接続して放っておくとLostConnectionとなります。)
XHRのオープン処理とかかわっているように見えます。

数度に一度失敗して毎回は発生しません。
もし、そのようなことで解決策をご存知ならご教授方よろしくお願いします。

この記事にコメントする

名前:
URL:
  情報を記憶: 評価: 顔