WebRTC について2012/06/04

アジェンダ

• ミーティングの目的• WebRTC とは

• できること• 応用例

目的•新規技術のつまみ食い•投資的な動き•今後の提案の材料と出来るようにしておく

•技術デモ止まりでなくプロダクションレベルへ

WebRTC とは• Web ブラウザで Real Time

Communication をするための仕様

• カメラ・マイクへのアクセス• ブラウザで P2P

• Google が主導

WebRTC とは

• ブラウザだけでビデオチャット・ボイスチャットを実装することが出来る

WebRTC とは• プロトコル (IETF が標準化)

• UDP ベース

• JavaScript API (W3C が標準化)

• Stream API

• Peer-to-peer connection

Stream API

• カメラ・マイクからのデータを取得できる

• キャプチャしたデータを HTML5 の

<video> タグにマッピングできる

• Canvas や Web Audio API で処理可能

P2P Connection

• ブラウザ同士で P2P 通信

• Peer 同士の取り次ぎは Signaling サーバを使用 (WebSocket)

• NAT を越えるには STUN サーバを使用

• いわゆるピュア P2P ではない

使用上の注意• 現時点でデスクトップ版 Chrome と

Opera の開発版のみ対応

• Chrome で使用する場合は about:flags

で WebRTC を有効にする

• 新しい規格のため仕様が安定していない

Demo

• https://webglmeeting.appspot.com/

• http://neave.com/webcam/html5/

• http://apprtc.appspot.com/html/face.html

今後の展望• Mozilla が Firefox へ実装中

• 2013 年 2 月に仕様策定完了予定

• Skype, Hangout のような Web アプリ

• Flash で流行したコンテンツの再利用

• モバイル端末での利用• Android 版 Chrome が実装してきそう

ライブラリ• JSARToolkit

• https://github.com/kig/JSARToolKit

• AR (拡張現実) 用のライブラリ

• Face.js / CCV

• https://github.com/liuliu/ccv

• 顔検出用ライブラリ

• getUserMedia.js

• https://github.com/addyosmani/getUserMedia.js

• getUserMedia の polyfill ライブラリ

参考

• 公式

• http://www.webrtc.org/

• API 仕様ドラフト (W3C)

• http://www.w3.org/TR/webrtc/

• こてさき Ajax : WebRTC事始め

• http://blog.livedoor.jp/kotesaki/archives/1794148.html