More Related Content
Similar to 色々なデバイスの映像を使ったWebブラウザでのWebRTC映像中継(GotAPIからのWebRTC利用) (20)
More from Device WebAPI Consortium (20)
色々なデバイスの映像を使ったWebブラウザでのWebRTC映像中継(GotAPIからのWebRTC利用)
- 1. Copyright © 2015 Device WebAPI Consortium. All Rights Reserved.
山添 隆文
2016/2/17
【WebRTCカンファレンス ショートプレゼン資料】
色々なデバイスの映像を使った
WebブラウザでのWebRTC映像中継
- 3. WebRTCの課題:音声の取り扱い
音声入力 WebRTC 音声出力
加工 加工
WebRTCで
受信した音声
を加工・解析
できない
外部音声入力
外部音声出力
Webブラウザ経由でのWebRTCの音声入力は加工可能。しかし、WebRTCからの音声出力の
ストリームを取り出すことはできず、そのため加工や外部の音声出力の利用もできない。
自分 相手
映像と音声で応用や外部機器連携できる範囲が
逆になっており、入力・出力の両方に課題がある状況
- 9. GotAPIのAPIアクセスのデザインパターン
・One shot data : HTTP GET/POSTでの単純アクセス
例: アクセスした瞬間のセンサーの値を取得(繰り返し
値が欲しい場合はポーリング)
・Event driven data : PUT/DELETE、WebSocketでのイベント処理
例: センサーの値に変化があった瞬間の値を連続的に自動取得
・Streaming data : URIの直接参照
例: OSやGotAPIの内部構造を経由せずにリソースとしてセンサー
の値をアプリから直接利用。
シンプルで手軽なHTTPアクセスと、効率的なWebSocketによるイベント処理を両立
- 16. Copyright © 2015 Device WebAPI Consortium. All Rights Reserved.
デモの使い方 STEP:0 下準備
ルータ
パソコンAndroid端末
無線LAN
1.同一ネットワークのパソコンとAndroid端末を用意
デバイスコネクト
デモWebサイト(HTML
ファイル)
マネージャアプリ
プラグイン
次ページ以降で説明次ページ以降で説明
- 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. Copyright © 2015 Device WebAPI Consortium. All Rights Reserved.
デモの使い方 STEP:2 パソコンから確認する準備
PCから試すために、スマートフォンへの外部からのアクセスを許可する
マネージャーアプリを開いて機能をオフにし、セキュリティ設定の外部IPを有効に
してから機能をオンにする
IPアドレス
(ローカルNW)
Android画面
- 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. 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. 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. Copyright © 2015 Device WebAPI Consortium. All Rights Reserved.
デモの使い方 STEP:4 動作確認:機能リストの表示
1.デモ画面でSearch Deviceを
選ぶと確認ダイアログが表示
され、[同意する]を選ぶと
Device Listにプラグインが
表示される。
2.Android端末の画面で
[同意する]を選ぶと
デモ画面に機能のリストが
表示される
PC画面
Android画面
PC画面
- 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. Copyright © 2015 Device WebAPI Consortium. All Rights Reserved.
スマホ用デモサイト
スマホの通話画面
PC用デモサイト
GetListで通話先を見つけて、
Callボタンで通話開始
デモの使い方 STEP:5 WebRTCデモサイトでの動作確認
PC用デモサイトかスマホ用デモサイトで通話先を見つけて通話開始
- 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実装:
ソースコード)