ブラウザで簡易にWebカメラを使う手段として、以前にjQueryのプラグインを使う方法をご紹介しましたが、

今回はプラグイン無しでやってみます。

WebRTC (Web Real-Time Communication)というHTML5のAPIです。

これで、簡単にボイスチャットやビデオチャット、ファイル共有ができるようになります。

ブラウザは限定されます、現在(2014/01/13)対応しているのは以下のもの.....だそうです(by Wiki)。

パソコン

Google Chrome 23~
Mozilla Firefox 22~
Opera 12~

アンドロイド

Google Chrome 28~ (29 から標準で有効)
Mozilla Firefox 24~
Opera Mobile 12~

*Android 4.1.2で確認できたのは、Chrome(最新版)、Firefox(最新版)でした。
*Android 2.3.3で確認できたのは、Firefox(最新版)のみでした。

まずは、Webカメラを使ってみます。

サンプル(PC)


サンプル(Android)





クラウドサービスを使ってみる

NTT CommunicatiosのSkyWay

WebRTCのシステムを手軽に開発したい方向け。



PeerJSをベースにしているようで、開発側はJavaScriptのみでコードを書けるようです。

サイトに行ってAPIキーを申し込むと、最初はローカル用のキーをもらえ、後で運用に使うキーを送ってくれます。

この運用キーならNAT超えができるみたい。

因みにAPIキーの申し込みには、ご自分のサイトのドメインが必要です(APIキーひとつに対してドメインは5個まで)。

それ以上なら、複数のAPIキーを申し込みましょう。

サンプルコードも豊富。

PeerIDを使って通信しあうので、このIDのやり取りのロジックは開発側が考えなきゃいけませんが....。

(PeerIDは36桁くらいある、やけに長いものなのでユーザーに手入力してもらうわけにはいかんでしょう)

VideoChatのサンプル画面。

右上にIDが表示されるので、それを相手に教えてCallしてもらうという寸法。
あるいは、相手のIDを教えてもらって、こちらからCallする。



2014/01/14現在、ChromeとFireFoxで動作確認、それ以外はペケでした。

以下は、SkyWayのサイトからDLしたのVideo Cahtのサンプルです。

Video Chat

APIキーを書き換えれば、このままでも使えます。

CallするPeerIDが分かっていれば、以下のコードでダイレクトにCallできます。

var peerid = "xxxxxxxxx";
var call = peer.call(peerid, window.localStream);
step3(call);





ビデオチャットをやってみる

以前にAdobeのCirrusでやろうとしていたことが、ずいぶん簡単に実現できそうです(ビデオ チャット サービス)。

ここでは、peerConnectionを使ってP2Pで接続する必要があります。

で、これを実現するのに必要なモノ。

1:カメラからの動画取得などでWebSocketが必要になるためNode.jsの環境を作る。
2:P2PのNAT超えのためにSTUNサーバーを準備する。

この2つを自前で用意する覚悟のない人(私です)は以下のものを使ってみます。

Heroku:node.jsを使えるクラウドサービス
Google:STUNサーバー





Heroku

Singn Upしてアカウントを取得し、Heroku Toolbeltを取得します。

これはHerokuを利用するためツールです(Gitなど)。







Under construction 工事中