APPS JAPAN 2016 専門セミナー https://reg.f2ff.jp/public/application/add/472 講演資料

1. APPS JAPAN 2016
WebRTCでアプリやIoT機器に
リアルタイム・コミュニケーション
を追加しよう
NTTコミュニケーションズ
技術開発部
Webコアテクニカルユニットリーダ／担当課長
おおつや りょうすけ
大津谷 亮祐
@rotsuya ←Twitterで資料のURLをお知らせします
2016年6月9日
Copyright © NTT Communications Corporation. All rights reserved.

2. 自己紹介

3. 仕事
WebRTCプラットフォーム“SkyWay”
担当マネージャ
skyway.io

4. コミュニティ
WebRTCをテーマにしたカンファレンス
“WebRTC Conference Japan” 実行委員会 幹事
webrtcconference.jp

5. プライベート
神奈川県 葉山町 在住
趣味は海と畑
www.flickr.com/photos/sushicam/11618587456/

6. 1. コミュニケーションアプリのユーザ体験の課題
www.flickr.com/photos/skippytpe/4434510076/

7. ケース1
無料通話
アプリ

8. ミッション
Skypeで母に
子供の顔を見せる
www.flickr.com/photos/34547181@N00/16489065067/

9. www.flickr.com/photos/travosaurus/537788283/
もしもし〜

10. www.flickr.com/photos/travosaurus/537788283/
アプリのイ
ンストール
できる？
www.flickr.com/photos/mladjenovic_n/5997776381/in/faves-56432237@N00/

11. www.flickr.com/photos/travosaurus/537788283/
GooglePlayと
いうアプリを
立ち上げてく
れる？

12. 5分経過…

13. www.flickr.com/photos/travosaurus/537788283/
GooglePlayで
Skypeを検索
して

14. 5分経過…
www.flickr.com/photos/mladjenovic_n/5997776381/in/faves-56432237@N00/

15. www.flickr.com/photos/travosaurus/537788283/
Skypeのイン
ストールが
終わったら
立ち上げて

16. www.flickr.com/photos/travosaurus/537788283/
次は
Microsoftの
アカウント
を作るよ。

17. www.flickr.com/photos/travosaurus/537788283/
え？無料だよ。
なんで無料なの
かって？いろい
ろ儲かってるか
ら、そんなこと
気にしないでい
いの！

18. www.flickr.com/photos/travosaurus/537788283/
え？カード詐欺？
大丈夫大丈夫大丈
夫大丈夫大丈夫大
丈夫大丈夫大丈夫

19. 5分経過…

20. www.flickr.com/photos/travosaurus/537788283/
じゃ、サイ
ンインして。

21. 5分経過…

22. www.flickr.com/photos/travosaurus/537788283/
連絡先を追
加するよ。
rotsuyaで検
索してくれ
る？

23. www.flickr.com/photos/travosaurus/537788283/
ロシアのR。
大阪のO。
…

24. 5分経過…

25. www.flickr.com/photos/travosaurus/537788283/
追加でき
た？じゃ、
かけてみ
るよ。

26. やってられるか！！

27. appear.inならURLを送るだけ！
appear.in

28. ケース2
オンライン英会話

29. レッスン予約の後

30. Skypeをダウンロードし

31. インストールし

32. アカウントを作成し

33. サインインし

34. アドレス帳に登録してレッスンを開始

35. 子供が不用意に
Skypeを使わない
よう注意が必要
www.flickr.com/photos/tomono347/3641351980

36. 楽天生命のネット保険デスクはブラウザの中でビデオ通話ができる
www.rakuten-life.co.jp/videochat/

37. ケース3
スマホアプリや
Webサイトからの
お問い合わせ
www.sbisec.co.jp

38. 電話リンクを
クリックして
www.sbisec.co.jp

39. 電話を発信して
www.sbisec.co.jp

40. こちらは●●証券
です。ご用件の
番号をプシュ
フォンで入力し
て最後に#を…

41. 5分経過…

42. もしもし、
お待たせしました。
ご本人様を確認するた
めに、お名前のフル
ネーム、住所、お電話
番号を教えていただけ
ますでしょうか…

43. 5分経過…

44. 実は、Webサイ
トの使い方でわ
からないところ
が…

45. Kindle Fire (Amazonのタブレット) のMaydayボタンは
アプリの中でビデオチャットで問い合わせられる
www.youtube.com/watch?v=X40j57v5g6I

46. ケース4
大きなファイルをメールで送りたい

47. SkyShareならブラウザでファイルを送信できる
近日公開

48. コミュニケーションアプリのユーザ体験の課題
データ送信手段が貧弱ユーザ体験の分断
他社アプリ/サービス/デバイスの強制
高いITリテラシを要求
www.flickr.com/photos/wespeck/4960579336/www.amazon.co.jp/dp/4878893583

49. 課題を解決する技術

50. Agenda
1. コミュニケーションアプリのユーザ体験の課題
2. WebRTCの概要
3. WebRTCの活用事例
4. WebRTC活用アプリの開発

51. 2. WebRTCの概要
www.flickr.com/photos/karthikc/3826273837/

52. WebRTC
= Web Real Time Communication

53. Web IPネットワーク上の
Real Time 時差がほとんどない
Communication 通信 / 意思疎通

54. 1876年にベルが
電話を発明。
以降、電話会社が
リアルタイム・
コミュニケーションを
独占。
www.flickr.com/photos/mattb_tv/2550476978

55. 2000年前後に
NapsterやSkypeが登場
スーパーハッカーが
電話会社の独占を壊した。
www.flickr.com/photos/132889348@N07/18410514419

56. “リアルタイム・コミュニケーションの民主化”
2011年にWebRTCが発表され、
すべてのソフトウェアエンジニアが
リアルタイム・コミュニケーションを
扱えるようになった。
www.flickr.com/photos/tjflex/57210112

57. WebRTCの特徴 エンジニア編

58. 特徴1
リアルタイム・コミュニケーションの
オープン標準

59. IETFとW3Cで標準化
• プロトコル
• NAT越えの手順
• 映像/音声の符号化
(コーデック)
• ブラウザのJavaScript API

60. 特徴2
映像・音声とデータに対応

61. 特徴3
アプリとWebの両方で使える

62. WebRTCの特徴 マーケター編

63. 特徴1 一貫性のあるユーザ体験
ビデオ/音声通話、データ送信を
Webやアプリに埋め込める

64. 特徴2 ITリテラシーを問わない
Webブラウザだけで利用できるので
アプリのインストールが不要
www.flickr.com/photos/vonderauvisuals/8636722022/

65. 特徴3
家電やIoTでも
利用できる
Raspberry
Piでも動作

66. 特徴4 電話とも連携できる
WebRTC⇔SIPゲートウェイサーバを利用
ブラウザやアプリで電話の発着信が可能

67. 3. WebRTCの活用事例
https://www.flickr.com/photos/jepoirrier/6003559370/

68. コンタクトセンタ
ネット保険デスク by 楽天生命
www.rakuten-life.co.jp/videochat/

69. ビデオ会議
SkyWay Conference @東京海上日動システムズ by NTTコミュニケーションズ
SkyWayのビデオ会議サンプルアプリを社内利用
近日公開

70. チャットアプリの通話機能
Facebook Messenger, Google Hangouts, Skype for Web, チャットワーク

71. 教育
オンライン英会話 by ECC
online.ecc.co.jp

72. 医療
CLINICS by Medley
clinics.medley.life

73. コンテンツ配信
4K映像配信 by フジテレビオンデマンド and Mist Technologies
fod.fujitv.co.jp/s/fodlabo/

74. スマートグラス
インスペクショングラス
by NEXCOシステムズ
セイコーエプソン
www.nexco-sys.co.jp/info/20151117132/

75. オンラインゲームのチャット機能
スプラトゥーン専用“勝手”ボイスチャット「イカデンワ」
www.youtube.com/watch?v=1DUbj29jx-w

76. スプラトゥーンのルール
4人 VS 4人。オンライン対戦。
毎回チームがシャッフル。
www.flickr.com/photos/dreaman06/16280128352/

77. 専用“勝手”ボイスチャットが登場
ikadenwa.ink

78. ボイスチャットのグループを簡単に組み替えられる
ikadenwa.ink

79. VRはキーボードが見えない
テキストチャットが使えない
ボイスチャットが更に重要に

80. ロボット
Romo, Double
www.doublerobotics.comtwitter.com/romotivejp

81. ROMO TURISMO @APPS JAPAN 2016
ゲーム少年なら誰もが夢見た、
ラジコンを使ったカーレースを、
WebRTCを使って実現

82. www.youtube.com/watch?v=oO-WjCKX9LY

83. ロボット
テレイグジスタンスロボット by 慶応大学メディアデザイン研究科

84. 4. WebRTC活用アプリの開発
www.flickr.com/photos/bethcanphoto/89521364/

85. ブラウザの対応状況
✔ ✔ ✔✘ ?

86. Safariのレンダリングエンジン“WebKit”の開発状況を調べてみると…
webkit.org/status/

87. WebRTCが開発中に！
webkit.org/status/

88. WWDC 2016に期待！
日本時間 2016/6/14~
developer.apple.com/wwdc/

89. ブラウザAPI
MediaStream カメラ映像、マイク音声の取得
RTCPeerConnection 映像、音声の通信
RTCDataChannel データ通信

90. WebRTC次期バージョンのAPI
developer.microsoft.com/ja-jp/microsoft-edge/platform/documentation/dev-guide/realtime-communication/object-rtc-api/

91. ネイティブアプリでWebRTCを利用する

92. 方法1 webrtc.orgが公開しているオープンソース、通称“libwebrtc”を使う
webrtc.org/native-code/

93. 方法2 オープンソース“OpenWebRTC”を使う
www.openwebrtc.org

94. Windows, Macはハイブリッドアプリがオススメelectron.atom.io

95. P2P
blog.peer5.com/the-p2p-witch-hunt/

96. P2Pの敵、NAT
IPアドレス枯渇に対応するために登場
外部から内部にアクセスできない
www.flickr.com/photos/pensiero/7796309194/

97. ICE
NAT越えの方法
1. NATが無いときはP2P
2. NATがあるときはSTUN / UDPホールパンチングで
NATに穴を空けてP2P
3. NATに穴が空かない時はTURN(=リレーサーバー)を経由

98. UDPホールパンチング
www.brynosaurus.com/pub/net/p2pnat/

99. プロトコルは温故知新
www.flickr.com/photos/kimtetsu/16647401117/

100. chimera.labs.oreilly.com/books/1230000000545/ch18.html
シグナリング メディア データ

101. コーデック
紆余曲折あって、必須コーデックが決定
• G.711
• Opus
• VP8
• H.264
新しいコーデックも使われ始めている
• VP9
• H.264/SVC (H.264UC)

102. 多人数会議の実現方法
www.flickr.com/photos/noodlepie/6358092469/

103. P2P フルメッシュ
人数が増えると通信量が急増
4人 4×3=12本 ⤵×4.7
8人 8×7=56本 ⤵×4.3
16人 16×15=240本 www.slideshare.net/minamotot/webrtc-44772839/27

104. SFU
SFU
上りを1本に束ね
サーバで分配
www.slideshare.net/minamotot/webrtc-44772839/27

105. MCU
上り/下りとも1本
サーバで4 in 1の映像を合成
www.slideshare.net/minamotot/webrtc-44772839/27

106. 多人数会議の実現方法
SFU
ゼロ サーバ負荷 大
大 クライアント負荷、ネットワーク負荷 小
www.slideshare.net/minamotot/webrtc-44772839/27

107. ちょっと待って、難しすぎる！
www.flickr.com/photos/mindaugasdanys/3766009204/

108. みんなそう思ってます
twitter.com/cohtan/status/709761814444138496

109. みんなそう思ってます
jxck.hatenablog.com/entry/ortc-to-webrtcnv

110. そんなあなたに、
WebRTCプラットフォーム
• 米国企業
• 音声/ビデオ通話に
特化
• 通話時間による従量
課金
• たぶん最大手
• NTTコミュニケーショ
ンズが開発･運営
• 音声&データに対応
• 無料(有償化予定)
• 4400+アプリで利用
出展中！
• 米国企業
• 電話API、後にビデオ
通話にも対応
• 転送データ量による
従量課金
• 米国企業
• コンタクトセンタに
特化
• コーディング無しで
も利用可能
出展中！

111. リアルタイム・コミュニケーションを活用した
アプリを作るための部品
skyway.io

112. サーバ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利用を促進

113. まとめ

114. “リアルタイム・コミュニケーションの民主化”
2011年にWebRTCが発表され、
すべてのソフトウェアエンジニアが
リアルタイム・コミュニケーションを
扱えるようになった。
www.flickr.com/photos/tjflex/57210112

115. WebRTCがコミュニケーションアプリの
ユーザ体験の課題を解決
データ送信手段が貧弱ユーザ体験の分断
他社アプリ/サービス/デバイスの強制
高いITリテラシを要求
www.flickr.com/photos/wespeck/4960579336/www.amazon.co.jp/dp/4878893583

116. WebRTCは、
個人にとっても
ビジネスにとっても
有用な武器になる