Infocom webrtc conference japan
27
Infocom CORPORATION 2015 Struggle for WebRTC WebRTC Conference Japan 2015.02.06 インフォコム株式会社 技術企画室 我如古正志（がねこまさし）
-
Upload
mganeko -
Category
Technology
-
view
264 -
download
2
Transcript of Infocom webrtc conference japan
Infocom CORPORATION 2015
Struggle for WebRTC
WebRTC Conference Japan2015.02.06
インフォコム株式会社技術企画室
我如古正志（がねこまさし）
Infocom CORPORATION 2015
Struggle for WebRTC
インフォコムの取り組み
• 調べる
• 使う
• 遊ぶ
Infocom CORPORATION 2015
WebRTCを調べる
Infocom CORPORATION 2015
カメラ、マイク
• JavaScriptでOK– ローカルのHTMLファイルではダメ→ Webサーバを用意
– ここまでは簡単
ブラウザー Webサーバー
HTML
JavaScrpt
Infocom CORPORATION 2015
通信するための仕組み• 定番ライブラリや、PaaS型サービスもあるが、自分たちでも把握しておきたい
• シグナリング（ Peer-to-Peer通信を繋ぐまで）– 通信開始の仲介を手動で行う
• http://html5experts.jp/mganeko/5181/
– 仲介サーバーを用意して1対1で接続する• http://html5experts.jp/mganeko/5349/
– 複数人で通信を行う• http://html5experts.jp/mganeko/5438/
• 企業で使う– NAT/Firewall/Proxyが立ちふさがる– STUN/TURNサーバーを利用する
• http://html5experts.jp/mganeko/5554/
Infocom CORPORATION 2015
プラットフォームの拡大• プラットフォームの制約あり
– 会社で使うなら、当然IEも– 仕事で使うなら、当然iOSも– …そのままでは利用できない
• 回避策– IE + プラグイン … 社内ビデオチャットで試験利用中
• Temasysを試用
– iOSネイティブアプリ … Googleライブラリをベースに開発• 別途TokBox, Weemoなども試用
プラットフォーム拡大に向けて、引き続き調査中
Infocom CORPORATION 2015
高負荷時の対応• 多人数での同時ビデオチャット
– Peer-to-Peer構成だと高負荷– エンコード、デコード負荷– 通信経路の急激な増加
• 片方向配信で、多数人数への同時配信– 普通のPCでは、10人～20人への配信が限界
• MCU/メディアサーバーを利用することで上限を改善– 有償製品あり– オープンソースもあり… Kurento Media Server など– http://www.slideshare.net/mganeko/nodekurento
Infocom CORPORATION 2015
WebRTCを使う
Infocom CORPORATION 2015
社内の会議で使う
• 離れたオフィスのメンバーとビデオチャット– 東京、大阪、四国など、定期的に利用
• 2人～5人まで社内P2P構成
• 音声 ＋ 画面共有のパターンも利用
Infocom CORPORATION 2015
社内中継で使う• 対象
– 社内教育のプレゼン演習– 社内勉強会、研修
• 方法– 片方向の映像配信 ＋ テキストチャット– カメラ＋スクリーンの2画面放送のケースもあり– メディアサーバーを使うケースもあり– 映像、音声の品質維持のためには、適切な機器が重要
社内ネットワークで完結
Infocom CORPORATION 2015
社外と使う• Webチャットサービス β公開中
– https://talkin.info/
• NAT/Firewall越えの実地試験を兼ねて実施– オープンソースTURNサーバー稼働– rfc5766-turn-server
マカオ⇔東京
Infocom CORPORATION 2015
関連会社間で使う
• ネットワークは分離、相互接続は制限あり– IPアドレス指定、ポート指定で接続許可– DHCP環境でアドレス可変、P2Pでポート可変では接続できない
→ 内部TURNサーバーを設置、中継して接続
TURNサーバー
Webサーバーシグナリングサーバー
Network1Network2
Infocom CORPORATION 2015
サービスで使う
• HiSMRT RC：災害向け双方向WEB会議システム
–災害対策システムに組み込み、試験運用中
–展示ブースにお越しください！
特別なアプリ無しですぐ使える
Infocom CORPORATION 2015
サービスで使う（使いたい）
• 業務＋コミュニケーションを実現
• 現地作業者⇔リモート管理者/依頼者– 保守作業員⇔センター側エキスパート
– 訪問介護士⇔ケアマネージャー、遠隔地の家族
– ベビーシッター⇔仕事中の両親
Infocom CORPORATION 2015
サンプルアプリ：おねがいシッター
• ペットシッターと飼い主のやりとり• やってほしいタスクの管理• コミュニケーション、ペットの様子を見る
ペット
シッター
飼い主
参考出展中。展示ブースにお越しください！
Infocom CORPORATION 2015
WebRTCで遊ぶ
Infocom CORPORATION 2015
カメラで遊ぶ
• CSS3と組み合わせて
• SVG Filter効果
• アニメーション
DEMO
Infocom CORPORATION 2015
カメラで遊ぶ
• CSS3と組み合わせて
• SVG Filter効果
• アニメーション
Infocom CORPORATION 2015
録画して遊ぶ
• MediaStream Recording
– http://www.w3.org/TR/mediastream-recording/
• Firefoxで利用可能
• WebMで記録
DEMO
Infocom CORPORATION 2015
録画して遊ぶ
• MediaStream Recording
– http://www.w3.org/TR/mediastream-recording/
• Firefoxで利用可能
• WebMで記録
Infocom CORPORATION 2015
3Dで遊ぶ
• WebGLと組み合わせて、3D表現も
• WebRTC万華鏡を作ってみた
DEMO
Infocom CORPORATION 2015
3Dで遊ぶ
• WebGLと組み合わせて、3D表現も
• WebRTC万華鏡を作ってみた
Infocom CORPORATION 2015
3Dで遊ぶ
• WebGLと組み合わせて、3D表現も
• WebRTC万華鏡を作ってみた
Infocom CORPORATION 2015
Virtual Remote Realityで遊ぶ
• Oculus Rift DK2 と組み合わせて– ブラウザだけで簡易実現
– レンズひずみ変形はやっていません
• 2to1通信
• 展示ブースへどうぞ！
Infocom CORPORATION 2015
まとめ
Infocom CORPORATION 2015
WebRTCと踏み出そう
• WebRTCは今でも使えます
–苦労や工夫、ノウハウは必要ですが、共有します
• 業務＋コミュニケーション
–自社の製品、サービスにコミュニケーションを統合
• Webとコミュニケーションを進化させましょう！
Infocom CORPORATION 2015
Thank you!
