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.
スマートフォンでの
WebRTC活用
情報システム本部 システムサービス事業統括部
コミュニケーションサービス部 コミュニケーションサービス開発課
源 拓洋
2
自己紹介
源 拓洋 (みなもと たくみ)
2014年新卒
電気電子システム工学専攻
趣味はハードウェア設計・製作
経験が多いのはAndroidアプリ開発
3
Agenda
WebRTC Native Code package の紹介
WebRTCアプリ開発の勘所
ネイティブアプリケーションのポイント
4
Agenda
WebRTC Native Code package の紹介
WebRTCアプリ開発の勘所
ネイティブアプリケーションのポイント
5
■Apps
Chrome 29 (2013/08)-
FireFox 24 (2013/09)-
Opera 20 (2014/03)-
スマートフォンブラウザにおけるWebRTC
Bowser(2012/10)-
Ericsson社の
W...
6
厳しい・・・
国内のiOSシェアって半分以上くらいあるはず。
7
WebRTCを利用したスマホアプリを作成可能
WebRTC Native Code package
• GoogleのChrome向けWebRTC実装がベース
• Opera, Mozila, Intel, ARM, MIPS, Temas...
8
利用方法
ネイティブアプリケーションに組み込んで利用する
WebRTC Native Code packageソースコード取得
ライブラリファイル生成
アプリケーションへの組み込み
*.jar ファイル*.a ファイルiOS Android...
9
Nativeアプリのメリット?
Chromeのバージョンアップの影響を受けない
Chromeがバージョンアップした際、アプリの更新が必要に、なるかも。
Chromeがバージョンアップしてから通信できなくなった!→ちょくちょくある話
ライブラ...
10
Android 3.2以上
(もっと下でもいけるかも?)
armv7/arm64対応
iPhone3GS以降
対応OSバージョン
iOS Android
明記されていないが、依存関係から推測すると…
iPhone3GSで動くかは疑問
iP...
11
サンプルアプリケーション
iOS AndroidBrowser
取得したソースコードの中にAppRTCDemoというサンプルが含まれている
AppRTCDemo - https://apprtc.appspot.com/
WebRTC標準...
12
“Install Prerequisite software”と書かれているのは
サンプルビルドについて
AppRTCDemoのビルド方法は下記URLにまとまっている
http://www.webrtc.org/native-code
→...
13
Agenda
WebRTC Native Code package の紹介
WebRTCアプリ開発の勘所
ネイティブアプリケーションのポイント
14
AppRTCDemoをビルドする前や動かないときに見ておく
Issues/Changes
ライブラリのIssues/Changesは下記のURLで見ることができる
https://code.google.com/p/webrtc/
iOS...
15
ただし、情報の鮮度には要注意!
WebRTC email list
情報共有の場としてはdiscuss-webrtcというgoogleグループがある
https://groups.google.com/forum/#!forum/disc...
16
WebRTC Native Code packageの取り扱い
デバイスや通信はPeerConnectionFactoryが持ってる
ユーザープログラム(Java,Obj-C)の立ち位置はJavascript
直接ブラウザのレイヤー...
17
感覚的な話
Javascriptより近くて、直接からは遠い存在
Native制御系
ユーザープログラム
Native制御系
Javascript
Javascriptエンジン
インターフェイス
ブラウザ Native Code packa...
18
セグメンテーションエラー1
ユーザープログラム Native制御系
AとBをつなげてください
\はーい/
A B
\ガッチャン/
ライブラリ利用時の距離感
制御しているが直接関与していないという意識
19
セグメンテーションエラー2
カメラ メディア処理 メディア処理 描画系
メディア処理
\はーい/\次のフレーム来たよ/
\次のフレーム来たよ!・・・あれ!?/
\はーい/\次のフレーム来たよ/
カメラ メディア処理
\あれ!?/
カメラと...
20
N人接続
PeerConnectionFactory
PeerConnection PeerConnection
NativeアプリにおいてもN人接続は可能
リソース破棄の実装に悩む
• サンプルは無い
→最近Android版AppRTC...
21
シグナリングの悩み
WebRTCはSDPやCandidateを交換することでつながる
→WebSocketなどサーバからイベント通知可能な規格がよく利用される
iOSやAndroidで利用する際には、
外部のライブラリを取り込む等して対応...
22
AppRTCDemoの場合
最近、AppRTCDemoがWebSocketライブラリを持っている
WebViewでサポートされている規格であれば
WebView経由でシグナリングするアイデアもある
→インターフェイスJavascriptを...
23
SDPの中にCandidateを入れる
onIceCandidateが発生する度に通信を行う実装が多い (TrickleICE)
メリット:接続が早くなる
デメリット:コネクションを確立するまでに通信する回数が多くなりがち
SDPにCan...
24
CPUに余裕ができ、速度や消費電力の点で優位になる…はず
VP8 ハードウェア支援
Androidの一部端末においてVP8のハードウェア支援に対応している
Androidにおけるハードウェア支援対応リストは下記URL
http://wik...
25
Agenda
WebRTC Native Code package の紹介
WebRTCアプリ開発の勘所
ネイティブアプリケーションのポイント
26
サービスとして提供する際には要考慮
NAT越え
モバイルネットワークと固定回線間でつなぐ場合において
STUNやTURNはほぼ必須になってくる
DataChannel
Android/iOSともにDataChannelが実装されている(未...
27
MCU/SFU
P2P
SFU
MCU
P2P
• Web会議のようなサービスを展開する場合、
複数のPeerと映像を送受信することとなる
• モバイルの場合はよりリソースがシビアになる
SFU (Selective Forwarding...
28
位置情報
現在位置を常時取得
PUSH通知
電話ライクな挙動が可能になる
NFC/Bluetoothの活用
シグナリングに利用できる
タッチパネル/グラフィックス
ブラウザでは難しいUXの実現
アラーム
スケジュール通知
外部ハードウェア...
29
ユースケース
ブラウザと連携させて
スマホならでは?
• コミュニケーションアプリ (PUSH通知という強み)
• セミナーアプリ (DataChannelで資料共有?)
• Web会議アプリ (PeerConnectionを複数つくれば...
30
OpenWebRTC
Ericssonが開発したGStreamerベースのWebRTC実装
 BSD二条項ライセンス
 クロスプラットフォーム(iOS/Android/Mac/Linux)
 GoogleGlassなどでも動作する
...
31
まとめ
メリット
デメリット
• Video/Audioを使ったiOS/Androidアプリが容易に実装可能になっている
• ブラウザとも通信できるという大きなメリット
• スマートフォンのハードウェアを生かし、ネイティブならではの実装も...
32
EOF
Upcoming SlideShare
Loading in …5
×

スマートフォンでの WebRTC活用

10,017 views

Published on

WebRTC Conference Japanでの発表スライドです。

Published in: Technology
  • Be the first to comment

スマートフォンでの WebRTC活用

  1. 1. スマートフォンでの WebRTC活用 情報システム本部 システムサービス事業統括部 コミュニケーションサービス部 コミュニケーションサービス開発課 源 拓洋
  2. 2. 2 自己紹介 源 拓洋 (みなもと たくみ) 2014年新卒 電気電子システム工学専攻 趣味はハードウェア設計・製作 経験が多いのはAndroidアプリ開発
  3. 3. 3 Agenda WebRTC Native Code package の紹介 WebRTCアプリ開発の勘所 ネイティブアプリケーションのポイント
  4. 4. 4 Agenda WebRTC Native Code package の紹介 WebRTCアプリ開発の勘所 ネイティブアプリケーションのポイント
  5. 5. 5 ■Apps Chrome 29 (2013/08)- FireFox 24 (2013/09)- Opera 20 (2014/03)- スマートフォンブラウザにおけるWebRTC Bowser(2012/10)- Ericsson社の WebRTC対応ブラウザ Androidのブラウザは”ほぼ”対応 しかし、実際には動かないケースも… iOS App Android ■Built-in WebView v36- (Android L)
  6. 6. 6 厳しい・・・ 国内のiOSシェアって半分以上くらいあるはず。
  7. 7. 7 WebRTCを利用したスマホアプリを作成可能 WebRTC Native Code package • GoogleのChrome向けWebRTC実装がベース • Opera, Mozila, Intel, ARM, MIPS, TemasysさんなどがAUTHORS • BSDライクなライセンスでロイヤリティフリー WebRTCを実装したNative Codeパッケージ
  8. 8. 8 利用方法 ネイティブアプリケーションに組み込んで利用する WebRTC Native Code packageソースコード取得 ライブラリファイル生成 アプリケーションへの組み込み *.jar ファイル*.a ファイルiOS Android アプリケーションに内包される
  9. 9. 9 Nativeアプリのメリット? Chromeのバージョンアップの影響を受けない Chromeがバージョンアップした際、アプリの更新が必要に、なるかも。 Chromeがバージョンアップしてから通信できなくなった!→ちょくちょくある話 ライブラリとしてアプリに取り込んでいるため影響が無い →ライブラリを使用したアプリケーション間の通信は問題がない Chromeがバージョンアップされてもライブラリのバージョンは変わらない →Chromeに合わせてライブラリやアプリを更新していく必要性がある
  10. 10. 10 Android 3.2以上 (もっと下でもいけるかも?) armv7/arm64対応 iPhone3GS以降 対応OSバージョン iOS Android 明記されていないが、依存関係から推測すると… iPhone3GSで動くかは疑問 iPhone5以上と書くのが現実的? AppRTCDemoのminSDKVersionが13 ハングアウトが使えるならば、使えるという判断基準もあり?
  11. 11. 11 サンプルアプリケーション iOS AndroidBrowser 取得したソースコードの中にAppRTCDemoというサンプルが含まれている AppRTCDemo - https://apprtc.appspot.com/ WebRTC標準?アプリケーション ライブラリを疑う質問をすると二言目に「AppRTCDemoもだめ?」と聞かれる ライブラリをビルドした際には必ずAppRTCDemoで動作確認を行ってから利用する
  12. 12. 12 “Install Prerequisite software”と書かれているのは サンプルビルドについて AppRTCDemoのビルド方法は下記URLにまとまっている http://www.webrtc.org/native-code →ライブラリは同時にビルドされる $git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git $export PATH=`pwd`/depot_tools:"$PATH“ AppRTCDemoが *.ipa or *.apk 形式で出力される
  13. 13. 13 Agenda WebRTC Native Code package の紹介 WebRTCアプリ開発の勘所 ネイティブアプリケーションのポイント
  14. 14. 14 AppRTCDemoをビルドする前や動かないときに見ておく Issues/Changes ライブラリのIssues/Changesは下記のURLで見ることができる https://code.google.com/p/webrtc/ iOS/Androidで問題を抱えた状態となっていることは少なくない
  15. 15. 15 ただし、情報の鮮度には要注意! WebRTC email list 情報共有の場としてはdiscuss-webrtcというgoogleグループがある https://groups.google.com/forum/#!forum/discuss-webrtc  ビルドツールの使い方(ビルドオプションなど)  Constraintsの設定  想定外の挙動への対処(使い方の問題)  セグメンテーション違反への対処
  16. 16. 16 WebRTC Native Code packageの取り扱い デバイスや通信はPeerConnectionFactoryが持ってる ユーザープログラム(Java,Obj-C)の立ち位置はJavascript 直接ブラウザのレイヤーに干渉できず、ConstraintsやSDPを通じて制御することになる 映像・音声の加工はライブラリ自体を改変することになる (WebAudioは当然無い) PeerConnectionFactory カメラ マイクエンコーダ/デコーダ 通信 ユーザープログラム PeerConnection 描画系 PeerConnectionFactory = ブラウザと考える 下記の様な処理を意識する必要は無い • アコースティックエコーキャンセラ • オートゲインコントロール • 帯域やCPU負荷に応じた動画制御
  17. 17. 17 感覚的な話 Javascriptより近くて、直接からは遠い存在 Native制御系 ユーザープログラム Native制御系 Javascript Javascriptエンジン インターフェイス ブラウザ Native Code package 距離感の違い 時々落ちる よく落ちる 滅多に落ちない
  18. 18. 18 セグメンテーションエラー1 ユーザープログラム Native制御系 AとBをつなげてください \はーい/ A B \ガッチャン/ ライブラリ利用時の距離感 制御しているが直接関与していないという意識
  19. 19. 19 セグメンテーションエラー2 カメラ メディア処理 メディア処理 描画系 メディア処理 \はーい/\次のフレーム来たよ/ \次のフレーム来たよ!・・・あれ!?/ \はーい/\次のフレーム来たよ/ カメラ メディア処理 \あれ!?/ カメラと描画系が落ちる要因の2強 native non-native 間の密接な接点
  20. 20. 20 N人接続 PeerConnectionFactory PeerConnection PeerConnection NativeアプリにおいてもN人接続は可能 リソース破棄の実装に悩む • サンプルは無い →最近Android版AppRTCDemoにカメラ切り替えが載ったのは参考になる • 破棄する順序や処理を誤るとセグメンテーションエラーで落ちる →3人つないで一人落とすときに全員落ちる →アプリが実は正常終了していない • カメラ、描画系の扱いには特に注意 できるから、あきらめないで。 PeerConnection
  21. 21. 21 シグナリングの悩み WebRTCはSDPやCandidateを交換することでつながる →WebSocketなどサーバからイベント通知可能な規格がよく利用される iOSやAndroidで利用する際には、 外部のライブラリを取り込む等して対応する必要がある WebSocketはiOS/Android標準でサポートされない
  22. 22. 22 AppRTCDemoの場合 最近、AppRTCDemoがWebSocketライブラリを持っている WebViewでサポートされている規格であれば WebView経由でシグナリングするアイデアもある →インターフェイスJavascriptを作り共通化することも可能 iOS Android SocketRocket https://github.com/square/SocketRocket Autobahn http://autobahn.ws/android/
  23. 23. 23 SDPの中にCandidateを入れる onIceCandidateが発生する度に通信を行う実装が多い (TrickleICE) メリット:接続が早くなる デメリット:コネクションを確立するまでに通信する回数が多くなりがち SDPにCandidateを入れてえば互いに一度通信するだけでOK メリット:シグナリング方法の幅が広がる デメリット: SDPの生成に20秒近くかかることも…
  24. 24. 24 CPUに余裕ができ、速度や消費電力の点で優位になる…はず VP8 ハードウェア支援 Androidの一部端末においてVP8のハードウェア支援に対応している Androidにおけるハードウェア支援対応リストは下記URL http://wiki.webmproject.org/hardware/devices 更新されている様子がみられない…もっと増えてるはず… iOSの場合H264のハードウェア支援には・・・対応するかもしれない https://code.google.com/p/webrtc/issues/detail?id=4081
  25. 25. 25 Agenda WebRTC Native Code package の紹介 WebRTCアプリ開発の勘所 ネイティブアプリケーションのポイント
  26. 26. 26 サービスとして提供する際には要考慮 NAT越え モバイルネットワークと固定回線間でつなぐ場合において STUNやTURNはほぼ必須になってくる DataChannel Android/iOSともにDataChannelが実装されている(未検証)
  27. 27. 27 MCU/SFU P2P SFU MCU P2P • Web会議のようなサービスを展開する場合、 複数のPeerと映像を送受信することとなる • モバイルの場合はよりリソースがシビアになる SFU (Selective Forwarding Unit) • Peerは必要な映像/音声を選択的に受け取る • Peerの上りストリームは1つだけ • 全員の音声を一本に合成できるものもある MCU (Multi-point Control Unit) • 複数の映像/音声を合成し一本にまとめる • Peerの上りと下りストリームは1つずつ
  28. 28. 28 位置情報 現在位置を常時取得 PUSH通知 電話ライクな挙動が可能になる NFC/Bluetoothの活用 シグナリングに利用できる タッチパネル/グラフィックス ブラウザでは難しいUXの実現 アラーム スケジュール通知 外部ハードウェア BLE/USB IoT? ファイルアクセス ファイル交換 センサー活用 新しいコミュニケーション ネイティブアプリならではの利用機能
  29. 29. 29 ユースケース ブラウザと連携させて スマホならでは? • コミュニケーションアプリ (PUSH通知という強み) • セミナーアプリ (DataChannelで資料共有?) • Web会議アプリ (PeerConnectionを複数つくれば…) • 監視ソリューション (デスクトップ共有機能の応用) • ゲーム (ブラウザがコンソール、スマホがコントローラ等) • ファイル転送/共有 (NFC/Bluetooth/GPSなどを使ってシグナリング)
  30. 30. 30 OpenWebRTC Ericssonが開発したGStreamerベースのWebRTC実装  BSD二条項ライセンス  クロスプラットフォーム(iOS/Android/Mac/Linux)  GoogleGlassなどでも動作する http://www.ericsson.com/research-blog/tag/webrtc/ 最近RaspberryPiでも動くようになったらしい RaspberryPi = 3800円Linuxボード https://twitter.com/OpenWebRTC/status/544842113012477952 IoTにWebRTC?…
  31. 31. 31 まとめ メリット デメリット • Video/Audioを使ったiOS/Androidアプリが容易に実装可能になっている • ブラウザとも通信できるという大きなメリット • スマートフォンのハードウェアを生かし、ネイティブならではの実装も可能 • DataChannelと組み合わせて… • シグナリングの実装はブラウザより悩む • 「ネイティブだから映像/音声が容易に加工できる」は間違い • ちょっと変わったことをしようとすると辛い
  32. 32. 32 EOF

×