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

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/mladjenovic_n/5997776381/in/faves-56432237@N00/


GooglePlay というアプリを立ち上げてくれる？

5 分経過…


GooglePlay でSkype を検索して

5 分経過…

www.flickr.com/photos/mladjenovic_n/5997776381/in/faves-56432237@N00/


Skype のインストールが終わったら立ち上げて


次は Microsoftのアカウントを作るよ。


え？無料だよ。なんで無料なのかって？いろいろ儲かってるから、そんなこと気にしないでいいの！


え？カード詐欺？大丈夫大丈夫大丈夫大丈夫大丈夫大丈夫大丈夫大丈夫

5 分経過…


じゃ、サインインして。

5 分経過…


連絡先を追加するよ。rotsuya で検索してくれる？


ロシアの R 。大阪の O 。…

5 分経過…


追加できた？じゃ、かけてみるよ。

やってられるか！！

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

課題を解決する技術

Agenda1. コミュニケーションアプリのユーザ体験の課題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 でも利用できるRaspberryPi でも動作

特徴 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 ECConline.ecc.co.jp

医療CLINICS by Medley

clinics.medley.life

コンテンツ配信4K 映像配信 by フジテレビオンデマンド and Mist Technologies

fod.fujitv.co.jp/s/fodlabo/

スマートグラスインスペクショングラスbyNEXCO システムズセイコーエプソン

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/

ブラウザ APIMediaStream カメラ映像、マイク音声の取得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 の敵、 NATIP アドレス枯渇に対応するために登場外部から内部にアクセスできない

www.flickr.com/photos/pensiero/7796309194/

ICENAT 越えの方法1. NAT が無いときは P2P2. NAT があるときは STUN / UDPホールパンチングで

NAT に穴を空けて P2P3. 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.78 人 8×7=56 本 ⤵×4.316 人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 アプリ向け SDKiOS/Android SDK iOS/Android のネイティブアプリ向け SDKIE/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 は、個人にとってもビジネスにとっても有用な武器になる

Software

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