Infocom webrtc conference japan

Infocom CORPORATION 2015

Struggle for WebRTC

WebRTC Conference Japan2015.02.06

インフォコム株式会社技術企画室

我如古正志（がねこまさし）


Struggle for WebRTC

インフォコムの取り組み

• 調べる

• 使う

• 遊ぶ


WebRTCを調べる


カメラ、マイク

• JavaScriptでOK– ローカルのHTMLファイルではダメ→ Webサーバを用意

– ここまでは簡単

ブラウザー Webサーバー

HTML

JavaScrpt


通信するための仕組み• 定番ライブラリや、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/

http://html5experts.jp/mganeko/5181/





プラットフォームの拡大• プラットフォームの制約あり

– 会社で使うなら、当然IEも– 仕事で使うなら、当然iOSも– …そのままでは利用できない

• 回避策– IE + プラグイン … 社内ビデオチャットで試験利用中

• Temasysを試用

– iOSネイティブアプリ … Googleライブラリをベースに開発• 別途TokBox, Weemoなども試用

プラットフォーム拡大に向けて、引き続き調査中


高負荷時の対応• 多人数での同時ビデオチャット

– Peer-to-Peer構成だと高負荷– エンコード、デコード負荷– 通信経路の急激な増加

• 片方向配信で、多数人数への同時配信– 普通のPCでは、10人～20人への配信が限界

• MCU/メディアサーバーを利用することで上限を改善– 有償製品あり– オープンソースもあり… Kurento Media Server など– http://www.slideshare.net/mganeko/nodekurento

http://www.slideshare.net/mganeko/nodekurento


WebRTCを使う


社内の会議で使う

• 離れたオフィスのメンバーとビデオチャット– 東京、大阪、四国など、定期的に利用

• 2人～5人まで社内P2P構成

• 音声＋画面共有のパターンも利用


社内中継で使う• 対象

– 社内教育のプレゼン演習– 社内勉強会、研修

• 方法– 片方向の映像配信＋テキストチャット– カメラ＋スクリーンの2画面放送のケースもあり– メディアサーバーを使うケースもあり– 映像、音声の品質維持のためには、適切な機器が重要

社内ネットワークで完結


社外と使う• Webチャットサービス β公開中

– https://talkin.info/

• NAT/Firewall越えの実地試験を兼ねて実施– オープンソースTURNサーバー稼働– rfc5766-turn-server

マカオ⇔東京

https://talkin.info/


関連会社間で使う

• ネットワークは分離、相互接続は制限あり– IPアドレス指定、ポート指定で接続許可– DHCP環境でアドレス可変、P2Pでポート可変では接続できない

→ 内部TURNサーバーを設置、中継して接続

TURNサーバー

Webサーバーシグナリングサーバー

Network1Network2


サービスで使う

• HiSMRT RC：災害向け双方向WEB会議システム

–災害対策システムに組み込み、試験運用中

–展示ブースにお越しください！

特別なアプリ無しですぐ使える


サービスで使う（使いたい）

• 業務＋コミュニケーションを実現

• 現地作業者⇔リモート管理者/依頼者– 保守作業員⇔センター側エキスパート

– 訪問介護士⇔ケアマネージャー、遠隔地の家族

– ベビーシッター⇔仕事中の両親


サンプルアプリ：おねがいシッター

• ペットシッターと飼い主のやりとり• やってほしいタスクの管理• コミュニケーション、ペットの様子を見る

ペット

シッター

飼い主

参考出展中。展示ブースにお越しください！


WebRTCで遊ぶ


カメラで遊ぶ

• CSS3と組み合わせて

• SVG Filter効果

• アニメーション

DEMO


カメラで遊ぶ

• CSS3と組み合わせて

• SVG Filter効果

• アニメーション


録画して遊ぶ

• MediaStream Recording

– http://www.w3.org/TR/mediastream-recording/

• Firefoxで利用可能

• WebMで記録

DEMO

http://www.w3.org/TR/mediastream-recording/


録画して遊ぶ

• MediaStream Recording

– http://www.w3.org/TR/mediastream-recording/

• Firefoxで利用可能

• WebMで記録

http://www.w3.org/TR/mediastream-recording/


3Dで遊ぶ

• WebGLと組み合わせて、3D表現も

• WebRTC万華鏡を作ってみた

DEMO


3Dで遊ぶ




3Dで遊ぶ




Virtual Remote Realityで遊ぶ

• Oculus Rift DK2 と組み合わせて– ブラウザだけで簡易実現

– レンズひずみ変形はやっていません

• 2to1通信

• 展示ブースへどうぞ！


まとめ


WebRTCと踏み出そう

• WebRTCは今でも使えます

–苦労や工夫、ノウハウは必要ですが、共有します

• 業務＋コミュニケーション

–自社の製品、サービスにコミュニケーションを統合

• Webとコミュニケーションを進化させましょう！


Thank you!

Technology

Infocom webrtc conference japan