albatrosary's blog

UI/UXとエンタープライズシステム

SkyWay Video Chat を使ってみる - Web先端技術味見部(テーマ: SkyWay)-

12/20/2013 21Cafe で行われた「Web先端技術味見部(テーマ: SkyWay)」にお邪魔しましたのでレポートします。

SkyWay とは

SkyWay は NTT Comunications が開発している WebRTCアプリケーションです。

SkyWay サイト http://nttcom.github.io/skyway/ によると

WebRTCは、ブラウザ同士でリアルタイムに映像、音声、データを送受信できる画期的な新技術です。SkyWayを使えば、サーバを準備することなく、簡単なJavaScriptを書くだけで、WebRTCを使ったアプリが開発できます。

ということです。

味見準備

今回使用したデモ(ハンズオン)は

https://github.com/Y-NAKA/skyway_ajimibu

にありますので fork して簡易サーバを起動すればビデオチャットが実装されます。参考までに MAC だと python が既にインストールされていると思いますので skyway_ajimibu をclone したディレクトリで

python -m SimpleHTTPServer 8080

を実行し、ブラウザで

localhost:8080/index.html

を実行すればビデオチャットが使えます。

味見してみる

実際に実行すると下記画面が表示されます。カメラを使用しますので「許可」する必要があります。

f:id:albatrosary:20131220204322p:plain

許可を許すと

f:id:albatrosary:20131220205004p:plain

この用に自分の画像がブラウザー上に表示されます。「相手を呼び出す」の「チャット可能なPeerID」を選択し「Call」ボタンをクリックすると相手の顔がブラウザ上に送られてきます。繋げた画像は相手もありますので割愛します。

Peerjs

このアプリケーションのベースは「peerjs」を使っています。SkyWay のサイトにもあるように

SkyWay はPeerServer互換のWebAPIとPeerJSの一部を改変したJavaScriptライブラリを提供しています。

です。PeerJS については

https://github.com/peers/peerjs

を見て頂けるといいと思います。このサイトをみると

PeerJS simplifies WebRTC peer-to-peer data, video, and audio calls.

と書いてありますので「Peer to Peer」で接続できるのは魅力です。方方向からの画像も遅れるので先生の画像を生徒におくるが生徒の画像は受け付けないなどもできます。peerjs には再送制御も入っています。

最後に

こういったアプリケーションが簡単につくれるというのは HTML5 のすごいところです。やはり HTML5 関連技術は目が離せないところです。また、このソースはオープンソースですので pull req も対応できます。