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

Copyright © 2015 Device WebAPI Consortium. All Rights Reserved.
山添隆文
2016/2/17
【WebRTCカンファレンスショートプレゼン資料】
色々なデバイスの映像を使った
WebブラウザでのWebRTC映像中継

現時点でのWebRTCの課題：映像の取り扱い
映像入力 WebRTC 映像出力
加工加工
Webブラウザ経由でのWebRTCの映像入力は標準のカメラ入力のみで、外部のカメラや
Canvasを相手に送ることができない。映像出力の加工は可能で、外部の映像出力にも送る
ことができる（実際は遅延等の問題は残る）。
外部映像入力
外部映像出力
映像
内蔵カメラから
映像を変更できない
自分相手

WebRTCの課題：音声の取り扱い
音声入力 WebRTC 音声出力
加工加工
WebRTCで
受信した音声
を加工・解析
できない
外部音声入力
外部音声出力
Webブラウザ経由でのWebRTCの音声入力は加工可能。しかし、WebRTCからの音声出力の
ストリームを取り出すことはできず、そのため加工や外部の音声出力の利用もできない。
自分相手
映像と音声で応用や外部機器連携できる範囲が
逆になっており、入力・出力の両方に課題がある状況

UV4L：ドライバそのものがWebRTCクライアントとして動作。
現状はラズベリーパイでの映像のみ。
仮想ドライバ方式
外部の映像入力を取り扱う方法
PCやドライバを仮想化できる環境、標準カメラ入力を設定できる環境であれば、
ブラウザからでも利用可能だが、スマートフォンでは難しい。
【出展】Infinitegra TechBlogより
http://www.infinitegra.co.jp/blog/?p=90

【SkyWayの音声認識APIイメージ図】
(https://github.com/nttcom/SkyWay-SpeechRecより利用可能)
NTTコミュニケーションズプレスリリース「WebRTCプラットフォーム「SkyWay」にて世界初のマルチブラウザ
対応音声認識APIなどを無償公開」より http://www.ntt.com/release/monthNEWS/detail/20150728.html
クライアントの音声出力ではなく、サーバサイドにて音声認識。
音声出力を取り扱う方法

ドローン
USB接続のWebカメラ
HDMI入力
THETA S
スマートフォンの
カメラ
スクリーンキャスト
スマートグラス
（Vuzix M100）
Androdスマートフォン
（テザリング等で外部のデバイスと接続）
アクションカメラ
サーマルカメラ
ネイティブアプリとしての
WebRTC処理映像入力の共通化
Webブラウザ
デバイスやWebRTC処理制御のための
共通的なWebインターフェース
NWカメラネイティブ
アプリ
OMA GotAPI
/Device WebAPI
を利用
やってみた事
様々な仕組み・開発環境・
通信プロトコルのカメラ
映像
リソース

Chromeブラウザ
ドローン
USB接続のWebカメラ
HDMI入力
THETA S
カメラ
スクリーンキャスト
（Vuzix M100）
Androdスマートフォン
（テザリング等で外部のデバイスと接続）
アクションカメラ
サーマルカメラ
WebRTC
映像入力の共通化
NWカメラ
これからできそうな事
canvas
デバイス制御のための
共通的なWebインターフェース
参考：https://html5experts.jp/shumpei-shiraishi/18355/
OMA GotAPI
/Device WebAPI
を利用
映像リソース

・スマートフォン上にセキュリティや汎用性を考慮した
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）とは？

GotAPIのAPIアクセスのデザインパターン
・One shot data ： HTTP GET/POSTでの単純アクセス
例：アクセスした瞬間のセンサーの値を取得（繰り返し
値が欲しい場合はポーリング）
・Event driven data ： PUT/DELETE、WebSocketでのイベント処理
例：センサーの値に変化があった瞬間の値を連続的に自動取得
・Streaming data ： URIの直接参照
例： OSやGotAPIの内部構造を経由せずにリソースとしてセンサー
の値をアプリから直接利用。
シンプルで手軽なHTTPアクセスと、効率的なWebSocketによるイベント処理を両立

セキュリティの担保
OMAからもWhite Paperを公開
http://device-webapi.org/link.html
ようするに、スマホで動作するLocalhostに様々な観点でセキュリティ対策を実施したもの

セキュリティ対策の基本的なコンセプト
ライブラリ
Kernel
IPネットワーク処理・管理
フレームワーク
ネイティブ
アプリ
スマートフォンOS
Webブラウザ
Webブラウザ・NW処理
からアクセスできる範囲ネイティブアプリ
としてアクセスできる
範囲（Sandbox）
ネイティブアプリと
Webブラウザ・IPネットワーク
からアクセスできる範囲
スマートフォン上にWebインターフェースを構築することで、
アプリ、Webのアクセス範囲の違いを使ったセキュリティ担保を実現
アプリストア
アプリのユニーク性を
Origin情報にドメイン名
（Origin情報）
HTTPSで安全に通信をするだけでなく、HTTP通信でも問題がない環境の条件を模索
※もちろんユーザ認証情報等をHTTPのレイヤーで扱わないことが前提

デバイスWebAPI（GotAPI）でのWebRTC課題解決
WebRTC非対応の
Webブラウザ/
ネイティブアプリ
デバイスWebAPI
WebRTCプラグイン WebRTC
外部カメラ用
プラグイン
外部カメラ
映像・音声リソース（出力）
制御制御
REST API
映像リソース（入力）
自分（スマートフォン）相手
（PC/スマートフォン
のWebブラウザ）
Webブラウザの仕様に影響されない機器連携によるWebRTCでのビデオチャットを実現
GotAPIフレームワーク

利用イメージ
Webブラウザ/
ネイティブアプリ
デバイスWebAPI
WebRTCプラグイン WebRTC
外部カメラ用
プラグイン
Vuzix M100
映像・音声リソース（出力）
制御制御
REST API
映像リソース（入力）
作業者(スマートフォン)
センター
ウェアラブルデバイスを使った遠隔作業支援システム
指示
状況確認

デモ：仕組みの異なる複数の外部カメラを切り替え
DeviceConnectWebAPI（GotAPI準拠のOSS実装）のGitHubページ：https://github.com/DeviceConnect
指定なし
⇒スマホのカメラ映像
カメラA
の映像
カメラBの映像URL
カメラAの映像URL
カメラB
の映像スマートフォンのWebブラウザ画面

デモの使い方
※あくまで検証用のデモなので、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等）

デモの使い方 STEP：0 下準備
ルータ
パソコンAndroid端末
無線LAN
１．同一ネットワークのパソコンとAndroid端末を用意
デバイスコネクト
デモWebサイト（HTML
ファイル）
マネージャアプリ
プラグイン
次ページ以降で説明次ページ以降で説明

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

デモの使い方 STEP：2 パソコンから確認する準備
PCから試すために、スマートフォンへの外部からのアクセスを許可する
マネージャーアプリを開いて機能をオフにし、セキュリティ設定の外部IPを有効に
してから機能をオンにする
IPアドレス
（ローカルNW）
Android画面

デモの使い方 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ファイルをフォルダに展開

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画面

デモの使い方 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:///)でのデモの動作確認が
出来なくなっております。

デモの使い方 STEP:4 動作確認：機能リストの表示
1.デモ画面でSearch Deviceを
選ぶと確認ダイアログが表示
され、[同意する]を選ぶと
Device Listにプラグインが
表示される。
2.Android端末の画面で
[同意する]を選ぶと
デモ画面に機能のリストが
表示される
PC画面
Android画面
PC画面

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デモサイトでの動作確認

スマホ用デモサイト
スマホの通話画面
PC用デモサイト
GetListで通話先を見つけて、
Callボタンで通話開始
デモの使い方 STEP:5 WebRTCデモサイトでの動作確認
PC用デモサイトかスマホ用デモサイトで通話先を見つけて通話開始

デバイスWebAPIの仕組み（Ａｎｄｒｏｉｄの場合）
・スマートフォン上で動作する仮想サーバによりIP層を経由することで、
Webブラウザからでも高度な機能を実現
・アプリからも同様に利用可能
フレームワーク
ライブラリ
Kernel
デバイス
Android OS
デバイスWebAPI
（ネイティブアプリ）
仮想サーバ
IPネット
ワーク層
Webブラウザ
インターネット上のWebサイト
Webアプリ
(HTML5+Javascript)
Webアプリ
(HTML5+Javascript)
Webアプリ
(HTML5+Javascript)
IP-NW経由
で仮想サーバに
アクセス
ネイティブ
アプリとして
任意の機能
が利用可能
拡張プラグインC
拡張プラグインB
拡張プラグインA
デバイスアクセス要求
を各デバイスの制御
命令に変換
（プラグインで拡張）

デバイスWebAPI
（機能単位のREST API規定）
デバイスWebAPI
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
低レイヤーの
ドライバ
ドライバ/
Profile
デバイス
ある意味でｴﾝﾀｰﾌﾟﾗｲｽﾞ開発
における最近のｱｰｷﾃｸﾁｬｽﾀｲﾙ
(Micro Services)に近い？
一般的なWebアプリ（Webブラウザ）
からのデバイス利用、トレンド
デバイスWebAPIでのデバイス利用
ドライバ/Profile相当ドライバ/Profile相当
ドライバ/Profileドライバ/Profile

参考：言葉の解説
デバイスコネクトWebAPI
NTTドコモが提供するオープンソースソフトウェア（MITライセンス）。後述のGotAPI準拠の
実装という位置づけだが、実用性向上のための拡張や検証のための設定項目あり。
OMA GotAPI (Generic Open Terminal API)
OMA（Opne Mobile Alliance：携帯電話の標準化団体）で規格化された、スマートフォン上で
Webインターフェースを実現するための技術仕様
OMA Device WebAPI
GotAPI仕様はあくまでインターフェースとしての規格で、具体的な機器のAPIは「DeviceWeb
API」として規定される。現在、ヘルスケア、３Dプリンタの規格化が進行中。
デバイスWebAPIコンソーシアム
「GotAPI」の普及活動や機能検討を行う団体として設立。
デバイスWebAPIマネージャ
デバイスコネクトWebAPIをビルドした、各種アプリストアで公開されているAndroid/iOSアプリ
（デモ用のWebサイトとセット）。デバイスWebAPIコンソーシアムを通じてGclue社が提供。
GotAPI(規格)
ﾃﾞﾊﾞｲｽWebAPI
（規格）
OMA
(携帯電話の標準化団体)
ｺﾝｿｰｼｱﾑ
マネージャ
（公開アプリ）
ﾃﾞﾊﾞｲｽｺﾈｸﾄ
（GotAPI実装：
ｿｰｽｺｰﾄﾞ）

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

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

Recommended

More Related Content

What's hot

What's hot(17)

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

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

More from Device WebAPI Consortium

More from Device WebAPI Consortium(20)

Recently uploaded

Recently uploaded(7)

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