APPS JAPAN 2016
WebRTCでアプリやIoT機器に
リアルタイム・コミュニケーション
を追加しよう
NTTコミュニケーションズ
技術開発部
Webコアテクニカルユニットリーダ/担当課長
おおつや りょうすけ
大津谷 亮祐
@rotsuya ←Twitterで資料のURLをお知らせします
2016年6月9日
Copyright © NTT Communications Corporation. All rights reserved.
自己紹介
仕事
WebRTCプラットフォーム“SkyWay”
担当マネージャ
skyway.io
コミュニティ
WebRTCをテーマにしたカンファレンス
“WebRTC Conference Japan” 実行委員会 幹事
webrtcconference.jp
プライベート
神奈川県 葉山町 在住
趣味は海と畑
www.flickr.com/photos/sushicam/11618587456/
1. コミュニケーションアプリのユーザ体験の課題
www.flickr.com/photos/skippytpe/4434510076/
ケース1
無料通話
アプリ
ミッション
Skypeで母に
子供の顔を見せる
www.flickr.com/photos/34547181@N00/16489065067/
www.flickr.com/photos/travosaurus/537788283/
もしもし〜
www.flickr.com/photos/travosaurus/537788283/
アプリのイ
ンストール
できる?
www.flickr.com/photos/mladjenovic_n/5997776381/in/faves-56432237@N00/
www.flickr.com/photos/travosaurus/537788283/
GooglePlayと
いうアプリを
立ち上げてく
れる?
5分経過…
www.flickr.com/photos/travosaurus/537788283/
GooglePlayで
Skypeを検索
して
5分経過…
www.flickr.com/photos/mladjenovic_n/5997776381/in/faves-56432237@N00/
www.flickr.com/photos/travosaurus/537788283/
Skypeのイン
ストールが
終わったら
立ち上げて
www.flickr.com/photos/travosaurus/537788283/
次は
Microsoftの
アカウント
を作るよ。
www.flickr.com/photos/travosaurus/537788283/
え?無料だよ。
なんで無料なの
かって?いろい
ろ儲かってるか
ら、そんなこと
気にしないでい
いの!
www.flickr.com/photos/travosaurus/537788283/
え?カード詐欺?
大丈夫大丈夫大丈
夫大丈夫大丈夫大
丈夫大丈夫大丈夫
5分経過…
www.flickr.com/photos/travosaurus/537788283/
じゃ、サイ
ンインして。
5分経過…
www.flickr.com/photos/travosaurus/537788283/
連絡先を追
加するよ。
rotsuyaで検
索してくれ
る?
www.flickr.com/photos/travosaurus/537788283/
ロシアのR。
大阪のO。
…
5分経過…
www.flickr.com/photos/travosaurus/537788283/
追加でき
た?じゃ、
かけてみ
るよ。
やってられるか!!
appear.inならURLを送るだけ!
appear.in
ケース2
オンライン英会話
レッスン予約の後
Skypeをダウンロードし
インストールし
アカウントを作成し
サインインし
アドレス帳に登録してレッスンを開始
子供が不用意に
Skypeを使わない
よう注意が必要
www.flickr.com/photos/tomono347/3641351980
楽天生命のネット保険デスクはブラウザの中でビデオ通話ができる
www.rakuten-life.co.jp/videochat/
ケース3
スマホアプリや
Webサイトからの
お問い合わせ
www.sbisec.co.jp
電話リンクを
クリックして
www.sbisec.co.jp
電話を発信して
www.sbisec.co.jp
こちらは●●証券
です。ご用件の
番号をプシュ
フォンで入力し
て最後に#を…
5分経過…
もしもし、
お待たせしました。
ご本人様を確認するた
めに、お名前のフル
ネーム、住所、お電話
番号を教えていただけ
ますでしょうか…
5分経過…
実は、Webサイ
トの使い方でわ
からないところ
が…
Kindle Fire (Amazonのタブレット) のMaydayボタンは
アプリの中でビデオチャットで問い合わせられる
www.youtube.com/watch?v=X40j57v5g6I
ケース4
大きなファイルをメールで送りたい
SkyShareならブラウザでファイルを送信できる
近日公開
コミュニケーションアプリのユーザ体験の課題
データ送信手段が貧弱ユーザ体験の分断
他社アプリ/サービス/デバイスの強制
高いITリテラシを要求
www.flickr.com/photos/wespeck/4960579336/www.amazon.co.jp/dp/4878893583
課題を解決する技術
Agenda
1. コミュニケーションアプリのユーザ体験の課題
2. WebRTCの概要
3. WebRTCの活用事例
4. WebRTC活用アプリの開発
2. WebRTCの概要
www.flickr.com/photos/karthikc/3826273837/
WebRTC
= Web Real Time Communication
Web IPネットワーク上の
Real Time 時差がほとんどない
Communication 通信 / 意思疎通
1876年にベルが
電話を発明。
以降、電話会社が
リアルタイム・
コミュニケーションを
独占。
www.flickr.com/photos/mattb_tv/2550476978
2000年前後に
NapsterやSkypeが登場
スーパーハッカーが
電話会社の独占を壊した。
www.flickr.com/photos/132889348@N07/18410514419
“リアルタイム・コミュニケーションの民主化”
2011年にWebRTCが発表され、
すべてのソフトウェアエンジニアが
リアルタイム・コミュニケーションを
扱えるようになった。
www.flickr.com/photos/tjflex/57210112
WebRTCの特徴 エンジニア編
特徴1
リアルタイム・コミュニケーションの
オープン標準
IETFとW3Cで標準化
• プロトコル
• NAT越えの手順
• 映像/音声の符号化
(コーデック)
• ブラウザのJavaScript API
特徴2
映像・音声とデータに対応
特徴3
アプリとWebの両方で使える
WebRTCの特徴 マーケター編
特徴1 一貫性のあるユーザ体験
ビデオ/音声通話、データ送信を
Webやアプリに埋め込める
特徴2 ITリテラシーを問わない
Webブラウザだけで利用できるので
アプリのインストールが不要
www.flickr.com/photos/vonderauvisuals/8636722022/
特徴3
家電やIoTでも
利用できる
Raspberry
Piでも動作
特徴4 電話とも連携できる
WebRTC⇔SIPゲートウェイサーバを利用
ブラウザやアプリで電話の発着信が可能
3. WebRTCの活用事例
https://www.flickr.com/photos/jepoirrier/6003559370/
コンタクトセンタ
ネット保険デスク by 楽天生命
www.rakuten-life.co.jp/videochat/
ビデオ会議
SkyWay Conference @東京海上日動システムズ by NTTコミュニケーションズ
SkyWayのビデオ会議サンプルアプリを社内利用
近日公開
チャットアプリの通話機能
Facebook Messenger, Google Hangouts, Skype for Web, チャットワーク
教育
オンライン英会話 by ECC
online.ecc.co.jp
医療
CLINICS by Medley
clinics.medley.life
コンテンツ配信
4K映像配信 by フジテレビオンデマンド and Mist Technologies
fod.fujitv.co.jp/s/fodlabo/
スマートグラス
インスペクショングラス
by NEXCOシステムズ
セイコーエプソン
www.nexco-sys.co.jp/info/20151117132/
オンラインゲームのチャット機能
スプラトゥーン専用“勝手”ボイスチャット「イカデンワ」
www.youtube.com/watch?v=1DUbj29jx-w
スプラトゥーンのルール
4人 VS 4人。オンライン対戦。
毎回チームがシャッフル。
www.flickr.com/photos/dreaman06/16280128352/
専用“勝手”ボイスチャットが登場
ikadenwa.ink
ボイスチャットのグループを簡単に組み替えられる
ikadenwa.ink
VRはキーボードが見えない
テキストチャットが使えない
ボイスチャットが更に重要に
ロボット
Romo, Double
www.doublerobotics.comtwitter.com/romotivejp
ROMO TURISMO @APPS JAPAN 2016
ゲーム少年なら誰もが夢見た、
ラジコンを使ったカーレースを、
WebRTCを使って実現
www.youtube.com/watch?v=oO-WjCKX9LY
ロボット
テレイグジスタンスロボット by 慶応大学メディアデザイン研究科
4. WebRTC活用アプリの開発
www.flickr.com/photos/bethcanphoto/89521364/
ブラウザの対応状況
✔ ✔ ✔✘ ?
Safariのレンダリングエンジン“WebKit”の開発状況を調べてみると…
webkit.org/status/
WebRTCが開発中に!
webkit.org/status/
WWDC 2016に期待!
日本時間 2016/6/14~
developer.apple.com/wwdc/
ブラウザAPI
MediaStream カメラ映像、マイク音声の取得
RTCPeerConnection 映像、音声の通信
RTCDataChannel データ通信
WebRTC次期バージョンのAPI
developer.microsoft.com/ja-jp/microsoft-edge/platform/documentation/dev-guide/realtime-communication/object-rtc-api/
ネイティブアプリでWebRTCを利用する
方法1 webrtc.orgが公開しているオープンソース、通称“libwebrtc”を使う
webrtc.org/native-code/
方法2 オープンソース“OpenWebRTC”を使う
www.openwebrtc.org
Windows, Macはハイブリッドアプリがオススメelectron.atom.io
P2P
blog.peer5.com/the-p2p-witch-hunt/
P2Pの敵、NAT
IPアドレス枯渇に対応するために登場
外部から内部にアクセスできない
www.flickr.com/photos/pensiero/7796309194/
ICE
NAT越えの方法
1. NATが無いときはP2P
2. NATがあるときはSTUN / UDPホールパンチングで
NATに穴を空けてP2P
3. NATに穴が空かない時はTURN(=リレーサーバー)を経由
UDPホールパンチング
www.brynosaurus.com/pub/net/p2pnat/
プロトコルは温故知新
www.flickr.com/photos/kimtetsu/16647401117/
chimera.labs.oreilly.com/books/1230000000545/ch18.html
シグナリング メディア データ
コーデック
紆余曲折あって、必須コーデックが決定
• G.711
• Opus
• VP8
• H.264
新しいコーデックも使われ始めている
• VP9
• H.264/SVC (H.264UC)
多人数会議の実現方法
www.flickr.com/photos/noodlepie/6358092469/
P2P フルメッシュ
人数が増えると通信量が急増
4人 4×3=12本 ⤵×4.7
8人 8×7=56本 ⤵×4.3
16人 16×15=240本 www.slideshare.net/minamotot/webrtc-44772839/27
SFU
SFU
上りを1本に束ね
サーバで分配
www.slideshare.net/minamotot/webrtc-44772839/27
MCU
上り/下りとも1本
サーバで4 in 1の映像を合成
www.slideshare.net/minamotot/webrtc-44772839/27
多人数会議の実現方法
SFU
ゼロ サーバ負荷 大
大 クライアント負荷、ネットワーク負荷 小
www.slideshare.net/minamotot/webrtc-44772839/27
ちょっと待って、難しすぎる!
www.flickr.com/photos/mindaugasdanys/3766009204/
みんなそう思ってます
twitter.com/cohtan/status/709761814444138496
みんなそう思ってます
jxck.hatenablog.com/entry/ortc-to-webrtcnv
そんなあなたに、
WebRTCプラットフォーム
• 米国企業
• 音声/ビデオ通話に
特化
• 通話時間による従量
課金
• たぶん最大手
• NTTコミュニケーショ
ンズが開発・運営
• 音声&データに対応
• 無料(有償化予定)
• 4400+アプリで利用
出展中!
• 米国企業
• 電話API、後にビデオ
通話にも対応
• 転送データ量による
従量課金
• 米国企業
• コンタクトセンタに
特化
• コーディング無しで
も利用可能
出展中!
リアルタイム・コミュニケーションを活用した
アプリを作るための部品
skyway.io
サーバAPIとクライアントSDKを提供
分類 機能 説明
API
シグナリング 接続情報(SDP … IP、ポート、コーデック等)仲介
NAT
越え
STUN NAT配下の端末にグローバルIPアドレスを通知
TURN UDPホールパンチングが不可能な環境で使用するリレーサーバ
SDK/
ライブ
ラリ
JavaScript SDK Webアプリ向けSDK
iOS/Android SDK iOS/Androidのネイティブアプリ向けSDK
IE/Safariプラグイン対応 IE/SafariでSkyWayを利用可能にするブラウザプラグイン
多人数接続ライブラリ 多人数フルメッシュ接続用のライブラリ
画面共有ライブラリ 画面共有機能用のライブラリおよびブラウザ拡張機能
音声認識ライブラリ 音声認識(Speech-to-Text)のAPI
ポータ
ル
API設定変更 APIキーの追加/削除、ドメインの追加/変更、TURN利用申請
セキュリティ文書
WebRTCのセキュリティ解説文書をオープンソース公開し、
企業でのWebRTC利用を促進
まとめ
“リアルタイム・コミュニケーションの民主化”
2011年にWebRTCが発表され、
すべてのソフトウェアエンジニアが
リアルタイム・コミュニケーションを
扱えるようになった。
www.flickr.com/photos/tjflex/57210112
WebRTCがコミュニケーションアプリの
ユーザ体験の課題を解決
データ送信手段が貧弱ユーザ体験の分断
他社アプリ/サービス/デバイスの強制
高いITリテラシを要求
www.flickr.com/photos/wespeck/4960579336/www.amazon.co.jp/dp/4878893583
WebRTCは、
個人にとっても
ビジネスにとっても
有用な武器になる

WebRTCでアプリやIoT機器にリアルタイム・コミュニケーションを追加しよう

Editor's Notes

  • #2 資料を公開する 質問 WebRTCを知っている人、知らない人 WebRTCを試したり使ったり採用したことがある人、ない人