Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Infocom CORPORATION 2015
Struggle for WebRTC
WebRTC Conference Japan
2015.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通信を繋ぐまで)
– 通信開始の仲介を手動で行...
Infocom CORPORATION 2015
プラットフォームの拡大
• プラットフォームの制約あり
– 会社で使うなら、当然IEも
– 仕事で使うなら、当然iOSも
– …そのままでは利用できない
• 回避策
– IE + プラグイン …...
Infocom CORPORATION 2015
高負荷時の対応
• 多人数での同時ビデオチャット
– Peer-to-Peer構成だと高負荷
– エンコード、デコード負荷
– 通信経路の急激な増加
• 片方向配信で、多数人数への同時配信
– ...
Infocom CORPORATION 2015
WebRTCを使う
Infocom CORPORATION 2015
社内の会議で使う
• 離れたオフィスのメンバーとビデオチャット
– 東京、大阪、四国など、定期的に利用
• 2人~5人まで 社内P2P構成
• 音声 + 画面共有のパターンも利用
Infocom CORPORATION 2015
社内中継で使う
• 対象
– 社内教育のプレゼン演習
– 社内勉強会、研修
• 方法
– 片方向の映像配信 + テキストチャット
– カメラ+スクリーンの2画面放送のケースもあり
– メディアサ...
Infocom CORPORATION 2015
社外と使う
• Webチャットサービス β公開中
– https://talkin.info/
• NAT/Firewall越えの実地試験を兼ねて実施
– オープンソースTURNサーバー稼働
–...
Infocom CORPORATION 2015
関連会社間で使う
• ネットワークは分離、相互接続は制限あり
– IPアドレス指定、ポート指定で接続許可
– DHCP環境でアドレス可変、P2Pでポート可変では接続できない
→ 内部TURNサー...
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で利用可能
• Web...
Infocom CORPORATION 2015
録画して遊ぶ
• MediaStream Recording
– http://www.w3.org/TR/mediastream-recording/
• Firefoxで利用可能
• Web...
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は今でも使えます
– 苦労や工夫、ノウハウは必要ですが、共有します
• 業務+コミュニケーション
– 自社の製品、サービスにコミュニケーションを統合
•...
Infocom CORPORATION 2015
Thank you!
Upcoming SlideShare
Loading in …5
×

Infocom webrtc conference japan

923 views

Published on

WebRTC Conference Japane (2015.02.06)のLTの資料です。

Published in: Technology
  • Be the first to comment

Infocom webrtc conference japan

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

×