WebRTC

WebRTC は Web RealTimeCommunication の略で、ユーザーのWebカメラやマイクから動画や音声のデータをリアルタイムで取り込んだり、端末間でP2Pを行えるようにするための仕様で、現在 W3C によって標準化が進められています。これまではWebブラウザからWebカメラにアクセスするためには Flash を利用する必要がありましたが、これらを利用することで JavaScript から同様のことができるようになります。

Webカメラの映像を video要素 に表示する

まずは一番簡単なサンプルを作ってみました。

• DEMO

2013年3月時点で、Chrome27.0にて動作確認（Androidでも動くかも...）

まずは一番オーソドックスに、Webカメラの映像を video要素 に表示しています。

Webカメラの映像を video要素 を介して Canvas に表示する

video要素 にWebカメラの映像を表示できるということは、Webカメラ→video要素→canvasとデータを取り込めるということです。次のサンプルは一見すると先ほどのものと変わりませんが、htmlソースを見ると、映像の表示に video要素 ではなくcanvas要素 を使用しているのが確認できると思います。

• DEMO

2013年3月時点で、Chrome27.0にて動作確認（Androidでも動くかも...）

ここまで出来てしまえば、後は色々できますね。

この技術を「WebSocket」と組み合わせれば比較的簡単にビデオチャットとか作れそうですね。色々と夢が広がる仕様です。個人的にはAR・WebGLと連動してWebカメラの映像上に3Dな何かを表示するとかやってみたいです。