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.
Copyright © 2015 Device WebAPI Consortium. All Rights Reserved.
山添 隆文
2016/2/17
【WebRTCカンファレンス ショートプレゼン資料】
色々なデバイスの映像を使った
...
現時点でのWebRTCの課題:映像の取り扱い
映像入力 WebRTC 映像出力
加工 加工
Webブラウザ経由でのWebRTCの映像入力は標準のカメラ入力のみで、外部のカメラや
Canvasを相手に送ることができない。映像出力の加工は可能で、外...
WebRTCの課題:音声の取り扱い
音声入力 WebRTC 音声出力
加工 加工
WebRTCで
受信した音声
を加工・解析
できない
外部音声入力
外部音声出力
Webブラウザ経由でのWebRTCの音声入力は加工可能。しかし、WebRTCから...
UV4L:ドライバそのものがWebRTCクライアントとして動作。
現状はラズベリーパイでの映像のみ。
仮想ドライバ方式
外部の映像入力を取り扱う方法
PCやドライバを仮想化できる環境、標準カメラ入力を設定できる環境であれば、
ブラウザからでも利...
【SkyWayの音声認識APIイメージ図】
(https://github.com/nttcom/SkyWay-SpeechRecより利用可能)
NTTコミュニケーションズ プレスリリース「WebRTCプラットフォーム「SkyWay」にて世界初...
ドローン
USB接続のWebカメラ
HDMI入力
THETA S
スマートフォンの
カメラ
スマートフォンの
スクリーンキャスト
スマートグラス
(Vuzix M100)
Androdスマートフォン
(テザリング等で外部のデバイスと接続)
アク...
Chromeブラウザ
ドローン
USB接続のWebカメラ
HDMI入力
THETA S
スマートフォンの
カメラ
スマートフォンの
スクリーンキャスト
スマートグラス
(Vuzix M100)
Androdスマートフォン
(テザリング等で外部の...
・スマートフォン上にセキュリティや汎用性を考慮した
Webインターフェース(スマートフォン上の仮想サーバ)を
実現する取り組み
・2014年2月にAT&TのブライアンさんがOMAでWork Item化
ブライアンさんはW3C Push APIの...
GotAPIのAPIアクセスのデザインパターン
・One shot data : HTTP GET/POSTでの単純アクセス
例: アクセスした瞬間のセンサーの値を取得(繰り返し
値が欲しい場合はポーリング)
・Event driven dat...
セキュリティの担保
OMAからもWhite Paperを公開
http://device-webapi.org/link.html
ようするに、スマホで動作するLocalhostに様々な観点でセキュリティ対策を実施したもの
セキュリティ対策の基本的なコンセプト
ライブラリ
Kernel
IPネットワーク処理・管理
フレームワーク
ネイティブ
アプリ
スマートフォンOS
Webブラウザ
Webブラウザ・NW処理
からアクセスできる範囲 ネイティブアプリ
としてアクセ...
デバイスWebAPI(GotAPI)でのWebRTC課題解決
WebRTC非対応の
Webブラウザ/
ネイティブアプリ
デバイスWebAPI
WebRTCプラグイン WebRTC
外部カメラ用
プラグイン
外部カメラ
映像・音声リソース(出力)...
利用イメージ
Webブラウザ/
ネイティブアプリ
デバイスWebAPI
WebRTCプラグイン WebRTC
外部カメラ用
プラグイン
スマートグラス
Vuzix M100
映像・音声リソース(出力)
制御制御
REST API
映像リソース(...
デモ:仕組みの異なる複数の外部カメラを切り替え
DeviceConnectWebAPI(GotAPI準拠のOSS実装)のGitHubページ:https://github.com/DeviceConnect
指定なし
⇒スマホのカメラ映像
カメラ...
デモの使い方
※あくまで検証用のデモなので、IDを指定すれば他で同時に使っている方にも
そのままつながってしまう点に注意
Android端末に以下のAPKをインストール(詳細手順は次ページ以降)
WebRTCのみ試す場合
・dConnectMa...
Copyright © 2015 Device WebAPI Consortium. All Rights Reserved.
デモの使い方 STEP:0 下準備
ルータ
パソコンAndroid端末
無線LAN
1.同一ネットワークのパソコンと...
Copyright © 2015 Device WebAPI Consortium. All Rights Reserved.
0.Android端末、PC開発環境の準備
1.GitHubからPCにデモ用ファイルのダウンロード
2.「ADB I...
Copyright © 2015 Device WebAPI Consortium. All Rights Reserved.
デモの使い方 STEP:2 パソコンから確認する準備
PCから試すために、スマートフォンへの外部からのアクセスを許可...
Copyright © 2015 Device WebAPI Consortium. All Rights Reserved.
デモの使い方 STEP:3 PCでデモ用Webサイトを開く
> adb push demoWebSite
/sdca...
Copyright © 2015 Device WebAPI Consortium. All Rights Reserved.
3. Webブラウザで以下のURLを入力して開く
"http://[Android端末のIPアドレス]:8080/d...
Copyright © 2015 Device WebAPI Consortium. All Rights Reserved.
デモの使い方 STEP:3 PCでデモ用Webサイトを開く②
1.Firefoxブラウザでは、ダウンロードファイ...
Copyright © 2015 Device WebAPI Consortium. All Rights Reserved.
デモの使い方 STEP:4 動作確認:機能リストの表示
1.デモ画面でSearch Deviceを
選ぶと確認ダイア...
Copyright © 2015 Device WebAPI Consortium. All Rights Reserved.
PC用デモサイト(Gclue社Webサイト)をFirfoxブラウザで開く
http://test.gclue.io/...
Copyright © 2015 Device WebAPI Consortium. All Rights Reserved.
スマホ用デモサイト
スマホの通話画面
PC用デモサイト
GetListで通話先を見つけて、
Callボタンで通話開始...
以下、参考資料
デバイスWebAPIの仕組み(Androidの場合)
・スマートフォン上で動作する仮想サーバによりIP層を経由することで、
Webブラウザからでも高度な機能を実現
・アプリからも同様に利用可能
フレームワーク
ライブラリ
Kernel
デバイス...
デバイスWebAPI
(機能単位のREST API規定)
デバイスWebAPI
(機能単位のREST API規定)
Webのレイヤーで見た場合
Webアプリ(HTML5+Javascript)
Webブラウザ
Webエンジン
デバイス
低レイヤ...
参考:言葉の解説
デバイスコネクトWebAPI
NTTドコモが提供するオープンソースソフトウェア(MITライセンス)。 後述のGotAPI準拠の
実装という位置づけだが、実用性向上のための拡張や検証のための設定項目あり。
OMA GotAPI ...
Upcoming SlideShare
Loading in …5
×

色々なデバイスの映像を使ったWebブラウザでのWebRTC映像中継(GotAPIからのWebRTC利用)

4,497 views

Published on

WebRTC Conference Japan 2016 ショートプレゼン
NTTドコモ 山添 隆文氏

Published in: Technology
  • Be the first to comment

  • Be the first to like this

色々なデバイスの映像を使ったWebブラウザでのWebRTC映像中継(GotAPIからのWebRTC利用)

  1. 1. Copyright © 2015 Device WebAPI Consortium. All Rights Reserved. 山添 隆文 2016/2/17 【WebRTCカンファレンス ショートプレゼン資料】 色々なデバイスの映像を使った WebブラウザでのWebRTC映像中継
  2. 2. 現時点でのWebRTCの課題:映像の取り扱い 映像入力 WebRTC 映像出力 加工 加工 Webブラウザ経由でのWebRTCの映像入力は標準のカメラ入力のみで、外部のカメラや Canvasを相手に送ることができない。映像出力の加工は可能で、外部の映像出力にも送る ことができる(実際は遅延等の問題は残る)。 外部映像入力 外部映像出力 映像 内蔵カメラから 映像を変更できない 自分 相手
  3. 3. WebRTCの課題:音声の取り扱い 音声入力 WebRTC 音声出力 加工 加工 WebRTCで 受信した音声 を加工・解析 できない 外部音声入力 外部音声出力 Webブラウザ経由でのWebRTCの音声入力は加工可能。しかし、WebRTCからの音声出力の ストリームを取り出すことはできず、そのため加工や外部の音声出力の利用もできない。 自分 相手 映像と音声で応用や外部機器連携できる範囲が 逆になっており、入力・出力の両方に課題がある状況
  4. 4. UV4L:ドライバそのものがWebRTCクライアントとして動作。 現状はラズベリーパイでの映像のみ。 仮想ドライバ方式 外部の映像入力を取り扱う方法 PCやドライバを仮想化できる環境、標準カメラ入力を設定できる環境であれば、 ブラウザからでも利用可能だが、スマートフォンでは難しい。 【出展】Infinitegra TechBlogより http://www.infinitegra.co.jp/blog/?p=90
  5. 5. 【SkyWayの音声認識APIイメージ図】 (https://github.com/nttcom/SkyWay-SpeechRecより利用可能) NTTコミュニケーションズ プレスリリース「WebRTCプラットフォーム「SkyWay」にて世界初のマルチブラウザ 対応音声認識APIなどを無償公開」より http://www.ntt.com/release/monthNEWS/detail/20150728.html クライアントの音声出力ではなく、サーバサイドにて音声認識。 音声出力を取り扱う方法
  6. 6. ドローン USB接続のWebカメラ HDMI入力 THETA S スマートフォンの カメラ スマートフォンの スクリーンキャスト スマートグラス (Vuzix M100) Androdスマートフォン (テザリング等で外部のデバイスと接続) アクションカメラ サーマルカメラ ネイティブアプリとしての WebRTC処理映像入力の共通化 Webブラウザ デバイスやWebRTC処理制御のための 共通的なWebインターフェース NWカメラ ネイティブ アプリ OMA GotAPI /Device WebAPI を利用 やってみた事 様々な仕組み・開発環境・ 通信プロトコルのカメラ 映像 リソース
  7. 7. Chromeブラウザ ドローン USB接続のWebカメラ HDMI入力 THETA S スマートフォンの カメラ スマートフォンの スクリーンキャスト スマートグラス (Vuzix M100) Androdスマートフォン (テザリング等で外部のデバイスと接続) アクションカメラ サーマルカメラ WebRTC 映像入力の共通化 NWカメラ これからできそうな事 canvas デバイス制御のための 共通的なWebインターフェース 参考:https://html5experts.jp/shumpei-shiraishi/18355/ OMA GotAPI /Device WebAPI を利用 映像リソース
  8. 8. ・スマートフォン上にセキュリティや汎用性を考慮した Webインターフェース(スマートフォン上の仮想サーバ)を 実現する取り組み ・2014年2月にAT&TのブライアンさんがOMAでWork Item化 ブライアンさんはW3C Push APIのエディターなどもされていて、Push API もOMAで策定したものが元になっている ・NTTドコモにて仕様策定、OSS実装の展開を進め、 2015年4月にCandidate Release、ドコモ、ソフトバンク 等でデバイスWebAPIコンソーシアム設立 ※OMA(Open Mobile Alliance):携帯電話関連の標準化団体 ※GotAPI:Generic Open Terminal API OMA GotAPI(デバイスWebAPI)とは?
  9. 9. GotAPIのAPIアクセスのデザインパターン ・One shot data : HTTP GET/POSTでの単純アクセス 例: アクセスした瞬間のセンサーの値を取得(繰り返し 値が欲しい場合はポーリング) ・Event driven data : PUT/DELETE、WebSocketでのイベント処理 例: センサーの値に変化があった瞬間の値を連続的に自動取得 ・Streaming data : URIの直接参照 例: OSやGotAPIの内部構造を経由せずにリソースとしてセンサー の値をアプリから直接利用。 シンプルで手軽なHTTPアクセスと、効率的なWebSocketによるイベント処理を両立
  10. 10. セキュリティの担保 OMAからもWhite Paperを公開 http://device-webapi.org/link.html ようするに、スマホで動作するLocalhostに様々な観点でセキュリティ対策を実施したもの
  11. 11. セキュリティ対策の基本的なコンセプト ライブラリ Kernel IPネットワーク処理・管理 フレームワーク ネイティブ アプリ スマートフォンOS Webブラウザ Webブラウザ・NW処理 からアクセスできる範囲 ネイティブアプリ としてアクセスできる 範囲(Sandbox) ネイティブアプリと Webブラウザ・IPネットワーク からアクセスできる範囲 スマートフォン上にWebインターフェースを構築することで、 アプリ、Webのアクセス範囲の違いを使ったセキュリティ担保を実現 アプリストア アプリのユニーク性を Origin情報にドメイン名 (Origin情報) HTTPSで安全に通信をするだけでなく、HTTP通信でも問題がない環境の条件を模索 ※もちろんユーザ認証情報等をHTTPのレイヤーで扱わないことが前提
  12. 12. デバイスWebAPI(GotAPI)でのWebRTC課題解決 WebRTC非対応の Webブラウザ/ ネイティブアプリ デバイスWebAPI WebRTCプラグイン WebRTC 外部カメラ用 プラグイン 外部カメラ 映像・音声リソース(出力) 制御制御 REST API 映像リソース(入力) 自分(スマートフォン) 相手 (PC/スマートフォン のWebブラウザ) Webブラウザの仕様に影響されない機器連携によるWebRTCでのビデオチャットを実現 GotAPIフレームワーク
  13. 13. 利用イメージ Webブラウザ/ ネイティブアプリ デバイスWebAPI WebRTCプラグイン WebRTC 外部カメラ用 プラグイン スマートグラス Vuzix M100 映像・音声リソース(出力) 制御制御 REST API 映像リソース(入力) 作業者(スマートフォン) センター ウェアラブルデバイスを使った遠隔作業支援システム 指示 状況確認
  14. 14. デモ:仕組みの異なる複数の外部カメラを切り替え DeviceConnectWebAPI(GotAPI準拠のOSS実装)のGitHubページ:https://github.com/DeviceConnect 指定なし ⇒スマホのカメラ映像 カメラA の映像 カメラBの映像URL カメラAの映像URL カメラB の映像スマートフォンのWebブラウザ画面
  15. 15. デモの使い方 ※あくまで検証用のデモなので、IDを指定すれば他で同時に使っている方にも そのままつながってしまう点に注意 Android端末に以下のAPKをインストール(詳細手順は次ページ以降) WebRTCのみ試す場合 ・dConnectManager.apk:マネージャ(管理)アプリ ・dConnectDeviceWebRTC.apk:WebRTCプラグイン PC用デモサイト(Gclue社Webサイト): http://test.gclue.io/dwa/webrtc/demoSite/index.html ※HTTPのサイトなのでChromeブラウザでは動作しない(Chrome 47での変更) スマホ(Android)用デモサイト(Gclue社Webサイト) : http://test.gclue.io/dwa/webrtc/demoSite/videochat.html 外部カメラを利用する場合 ・dConnectDeviceUVC.apk:Webカメラプラグイン・・・USB Video Class 準拠カメラを利用の場合 ・デバイスコネクトがインストールされ外部アクセスが許可された端末(Vuzix M100等) 利用手順(ハンズオン資料):http://www.slideshare.net/device-webapi/gotapiweb ・MJPEG配信が可能なNWカメラ(Trek Ai-ball等)
  16. 16. Copyright © 2015 Device WebAPI Consortium. All Rights Reserved. デモの使い方 STEP:0 下準備 ルータ パソコンAndroid端末 無線LAN 1.同一ネットワークのパソコンとAndroid端末を用意 デバイスコネクト デモWebサイト(HTML ファイル) マネージャアプリ プラグイン 次ページ以降で説明次ページ以降で説明
  17. 17. Copyright © 2015 Device WebAPI Consortium. All Rights Reserved. 0.Android端末、PC開発環境の準備 1.GitHubからPCにデモ用ファイルのダウンロード 2.「ADB Install」コマンドでマネージャアプリ、Hostプラグイン)をAndroid端末に インストール(ほかに必要なプラグインもAPKファイルからインストールする) > adb install .¥demoWebSite¥apk¥dConnectManager.apk[改行] Successと出たら成功 > adb install .¥demoWebSite¥apk¥dConnectDeviceWebRTC.apk [改行] Successと出たら成功 デモの使い方 STEP:1 ADBを利用したアプリインストール PC作業 ダウンロードファイル demoWebSite ┣[apk] ┃ ┣dConnectManager.apk ┃ ┣dConnectDeviceWebRTC.apk ┃ ┗その他のAPKファイル ┃ ┣[css] ┣[js] ┗index.html https://github.com/DeviceConnect/DeviceConnect-Docs/blob/master/Bin/demoWebSite.zip
  18. 18. Copyright © 2015 Device WebAPI Consortium. All Rights Reserved. デモの使い方 STEP:2 パソコンから確認する準備 PCから試すために、スマートフォンへの外部からのアクセスを許可する マネージャーアプリを開いて機能をオフにし、セキュリティ設定の外部IPを有効に してから機能をオンにする IPアドレス (ローカルNW) Android画面
  19. 19. Copyright © 2015 Device WebAPI Consortium. All Rights Reserved. デモの使い方 STEP:3 PCでデモ用Webサイトを開く > adb push demoWebSite /sdcard/org.deviceconnect.android.manager/demoWebSite [改行] 補足 ChromeブラウザVer.45以降、PC・AndroidともにFileスキーム(file:///)でのデモの動作確認が 出来なくなったため、暫定対処としてLocalhost上にWebコンテンツを置けるようにしています demoWebSite ┣[apk] -APKファイル ┣[css] -スタイルシート ┣[js] -javascript ┃ ┗index.html 1. ダウンロードファイルの中身をadb pushでAndroid端末のストレージにコピー PCにダウンロードした ファイルのフォルダ ダウンロードしたZIPファイルをフォルダに展開
  20. 20. Copyright © 2015 Device WebAPI Consortium. All Rights Reserved. 3. Webブラウザで以下のURLを入力して開く "http://[Android端末のIPアドレス]:8080/demoWebSite/index.html?ip=[Android端末のIPアド レス]#demo" インストールしたAndroid端末上で開く場合は "http://localhost:8080/demoWebSite/index.html#demo" 操作対象のIPアドレスとして パラメータを付加 2. マネージャアプリのWebサーバ機能をオンにする ※外部IPの許可とWebサーバ機能はあくまで検証用なので、 意図しない端末の操作やデータ参照をされるリスクが 伴います。信頼が出来ないローカルネットワーク環境では 利用しないでください。 デモの使い方 STEP:3 PCでデモ用Webサイトを開く Android画面
  21. 21. Copyright © 2015 Device WebAPI Consortium. All Rights Reserved. デモの使い方 STEP:3 PCでデモ用Webサイトを開く② 1.Firefoxブラウザでは、ダウンロードファイルのindex.htmlを開くだけで確認できる ダウンロードファイル demoWebSite ┣[apk] -APKファイル ┣[css] -スタイルシート ┣[js] -javascript ┃ ┗index.html 2.URLの最後に"?ip=[Android端末のIPアドレス]#demo"と追加して移動 PC作業 ※ChromeブラウザVer.45以降、PC・AndroidともにFileスキーム(file:///)でのデモの動作確認が 出来なくなっております。
  22. 22. Copyright © 2015 Device WebAPI Consortium. All Rights Reserved. デモの使い方 STEP:4 動作確認:機能リストの表示 1.デモ画面でSearch Deviceを 選ぶと確認ダイアログが表示 され、[同意する]を選ぶと Device Listにプラグインが 表示される。 2.Android端末の画面で [同意する]を選ぶと デモ画面に機能のリストが 表示される PC画面 Android画面 PC画面
  23. 23. Copyright © 2015 Device WebAPI Consortium. All Rights Reserved. PC用デモサイト(Gclue社Webサイト)をFirfoxブラウザで開く http://test.gclue.io/dwa/webrtc/demoSite/index.html ※HTTPのサイトなのでChromeブラウザでは動作しない(Chrome 47での変更) スマホ(Android)用デモサイト(Gclue社Webサイト)を開き、スマホの画面に 表示される確認ダイアログで[同意する]を選ぶ http://test.gclue.io/dwa/webrtc/demoSite/videochat.html?=[Android端末のIPアドレス] PC画面 Android画面 スマホ用デモサイト デモの使い方 STEP:5 WebRTCデモサイトでの動作確認
  24. 24. Copyright © 2015 Device WebAPI Consortium. All Rights Reserved. スマホ用デモサイト スマホの通話画面 PC用デモサイト GetListで通話先を見つけて、 Callボタンで通話開始 デモの使い方 STEP:5 WebRTCデモサイトでの動作確認 PC用デモサイトかスマホ用デモサイトで通話先を見つけて通話開始
  25. 25. 以下、参考資料
  26. 26. デバイスWebAPIの仕組み(Androidの場合) ・スマートフォン上で動作する仮想サーバによりIP層を経由することで、 Webブラウザからでも高度な機能を実現 ・アプリからも同様に利用可能 フレームワーク ライブラリ Kernel デバイス Android OS デバイスWebAPI (ネイティブアプリ) 仮想サーバ IPネット ワーク層 Webブラウザ インターネット上のWebサイト Webアプリ (HTML5+Javascript) Webアプリ (HTML5+Javascript) Webアプリ (HTML5+Javascript) IP-NW経由 で仮想サーバに アクセス ネイティブ アプリとして 任意の機能 が利用可能 拡張プラグインC 拡張プラグインB 拡張プラグインA デバイスアクセス要求 を各デバイスの制御 命令に変換 (プラグインで拡張)
  27. 27. デバイスWebAPI (機能単位のREST API規定) デバイスWebAPI (機能単位のREST API規定) Webのレイヤーで見た場合 Webアプリ(HTML5+Javascript) Webブラウザ Webエンジン デバイス 低レイヤー デバイスAPI規定 (JavaScript) ドライバ/Profile相当 デバイスAPI規定 (JavaScript) ドライバ/Profile 最近のWeb規格化の流れ (Extensible Web) 低レイヤーの ドライバ Web アプリ Web ブラウザ スクリプト エンジン Python・ Ruby等 ネイティ ブアプリ 仮想サーバ+REST API I/F (GotAPIでの規定部分) デバイスWebAPI (機能単位のREST API規定) 低レイヤーの ドライバ ドライバ/ Profile デバイス ある意味でエンタープライズ開発 における最近のアーキテクチャスタイル (Micro Services)に近い? 一般的なWebアプリ(Webブラウザ) からのデバイス利用、トレンド デバイスWebAPIでのデバイス利用 ドライバ/Profile相当ドライバ/Profile相当 ドライバ/Profileドライバ/Profile
  28. 28. 参考:言葉の解説 デバイスコネクトWebAPI NTTドコモが提供するオープンソースソフトウェア(MITライセンス)。 後述のGotAPI準拠の 実装という位置づけだが、実用性向上のための拡張や検証のための設定項目あり。 OMA GotAPI (Generic Open Terminal API) OMA(Opne Mobile Alliance:携帯電話の標準化団体)で規格化された、スマートフォン上で Webインターフェースを実現するための技術仕様 OMA Device WebAPI GotAPI仕様はあくまでインターフェースとしての規格で、具体的な機器のAPIは「DeviceWeb API」として規定される。現在、ヘルスケア、3Dプリンタの規格化が進行中。 デバイスWebAPIコンソーシアム 「GotAPI」の普及活動や機能検討を行う団体として設立。 デバイスWebAPIマネージャ デバイスコネクトWebAPIをビルドした、各種アプリストアで公開されているAndroid/iOSアプリ (デモ用のWebサイトとセット)。デバイスWebAPIコンソーシアムを通じてGclue社が提供。 GotAPI(規格) デバイスWebAPI (規格) OMA (携帯電話の標準化団体) デバイスWebAPI コンソーシアム デバイスWebAPI マネージャ (公開アプリ) デバイスコネクト (GotAPI実装: ソースコード)

×