【WebRTCカンファレンス ショートプレゼン資料】

色々なデバイスの映像を使った
WebブラウザでのWebRTC映像中継

山添 隆文
2016/2/17
Copyright © 2015 Device WebAPI Consortium. All Rights Reserved.

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

WebRTC

映像入力

映像出力

内蔵カメラから映像を変更できない

外部映像入力加工
自分加工

外部映像出力相手

WebRTCの課題：音声の取り扱い
Webブラウザ経由でのWebRTCの音声入力は加工可能。しかし、WebRTCからの音声出力のストリームを取り出すことはできず、そのため加工や外部の音声出力の利用もできない。
WebRTCで受信した音声を加工・解析できない

WebRTC

音声入力

外部音声入力

加工

音声出力

加工

外部音声出力自分

相手

映像と音声で応用や外部機器連携できる範囲が逆になっており、入力・出力の両方に課題がある状況

外部の映像入力を取り扱う方法
PCやドライバを仮想化できる環境、標準カメラ入力を設定できる環境であれば、ブラウザからでも利用可能だが、スマートフォンでは難しい。

UV4L：ドライバそのものがWebRTCクライアントとして動作。
現状はラズベリーパイでの映像のみ。

仮想ドライバ方式【出展】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

やってみた事
Androdスマートフォン（テザリング等で外部のデバイスと接続）
様々な仕組み・開発環境・通信プロトコルのカメラ

NWカメラ

ネイティブ
アプリ

Webブラウザアクションカメラ
ドローン
USB接続のWebカメラ

デバイスやWebRTC処理制御のための共通的なWebインターフェース

HDMI入力THETA S
スマートグラス（Vuzix M100）
サーマルカメラOMA GotAPI/Device WebAPIを利用

映像リソース

映像入力の共通化

スマートフォンのカメラ
スマートフォンのスクリーンキャスト

ネイティブアプリとしてのWebRTC処理

これからできそうな事
参考：https://html5experts.jp/shumpei-shiraishi/18355/
Androdスマートフォン（テザリング等で外部のデバイスと接続）
NWカメラ

Chromeブラウザ

アクションカメラ

canvas

ドローン
USB接続のWebカメラ

デバイス制御のための共通的なWebインターフェース

HDMI入力THETA S
スマートグラス（Vuzix M100）
サーマルカメラ

WebRTC

映像リソース

映像入力の共通化

スマートフォンのカメラ
スマートフォンのスクリーンキャスト

OMA GotAPI/Device WebAPI
を利用

OMA GotAPI（デバイス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

GotAPIのAPIアクセスのデザインパターン

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

シンプルで手軽なHTTPアクセスと、効率的なWebSocketによるイベント処理を両立セキュリティの担保ようするに、スマホで動作するLocalhostに様々な観点でセキュリティ対策を実施したもの

OMAからもWhite Paperを公開
http://device-webapi.org/link.html

セキュリティ対策の基本的なコンセプト
HTTPSで安全に通信をするだけでなく、HTTP通信でも問題がない環境の条件を模索※もちろんユーザ認証情報等をHTTPのレイヤーで扱わないことが前提
アプリストア
アプリのユニーク性をOrigin情報に

ドメイン名（Origin情報）

ネイティブ
アプリ

Webブラウザ
Webブラウザ・NW処理
からアクセスできる範囲

フレームワーク
ライブラリ

ネイティブアプリとしてアクセスできる範囲（Sandbox）

IPネットワーク処理・管理
KernelスマートフォンOS
ネイティブアプリとWebブラウザ・IPネットワークからアクセスできる範囲

スマートフォン上にWebインターフェースを構築することで、アプリ、Webのアクセス範囲の違いを使ったセキュリティ担保を実現

デバイスWebAPI（GotAPI）でのWebRTC課題解決
Webブラウザの仕様に影響されない機器連携によるWebRTCでのビデオチャットを実現

自分（スマートフォン）
WebRTC非対応の
Webブラウザ/ネイティブアプリ

REST API

映像・音声リソース（出力）デバイスWebAPI
制御

制御WebRTCプラグイン

映像リソース（入力）

GotAPIフレームワーク

外部カメラ

相手（PC/スマートフォンのWebブラウザ）

外部カメラ用
プラグイン

WebRTC利用イメージ
ウェアラブルデバイスを使った遠隔作業支援システム
作業者(スマートフォン)
Webブラウザ/ネイティブアプリ

センター
REST API

映像・音声リソース（出力）デバイスWebAPI
制御

制御
状況確認

WebRTCWebRTCプラグイン
指示
映像リソース（入力）

外部カメラ用
プラグイン
スマートグラス
Vuzix M100

デモ：仕組みの異なる複数の外部カメラを切り替え指定なし⇒スマホのカメラ映像

カメラAの映像URL

カメラAの映像
カメラBの映像URL
スマートフォンのWebブラウザ画面

カメラBの映像

DeviceConnectWebAPI（GotAPI準拠のOSS実装）のGitHubページ：https://github.com/DeviceConnect

デモの使い方※細かい使い方は後日追記予定※あくまで検証用のデモなので、IDを指定すれば他で同時に使っている方にもそのままつながってしまう点に注意

Android端末に以下のAPKをインストール
https://github.com/DeviceConnect/DeviceConnect-Docs/tree/master/Bin/Android
WebRTCのみ試す場合
・dConnectManager.apk：マネージャアプリ
・dConnectDeviceWebRTC.apk：WebRTCプラグイン
PC用デモサイト（Gclue社Webサイト）：
http://test.gclue.io/dwa/webrtc/demoSite/index.html※HTTPのサイトなのでChromeブラウザでは動作しない

スマホ(Android)用デモサイト（Gclue社Webサイト） ：http://test.gclue.io/dwa/webrtc/demoSite/videochat.html
外部カメラを利用する場合
・dConnectDeviceUVC.apk： USB Video Class 準拠のWebカメラを利用する場合
・デバイスコネクトマネージャ／ホストプラグインがインストールされ、外部からのアクセスが許可されたAndroid端末（Vuzix M100等）
・MJPEG配信が可能なNWカメラ（Trek Ai-ball等）

以下、参考資料

デバイスWebAPIの仕組み（Ａｎｄｒｏｉｄの場合）・スマートフォン上で動作する仮想サーバによりIP層を経由することで、Webブラウザからでも高度な機能を実現・アプリからも同様に利用可能
インターネット上のWebサイト

WebアプリWebアプリ(HTML5+Javascript)
Webアプリ(HTML5+Javascript)(HTML5+Javascript)

IP-NW経由で仮想サーバにアクセス

Webブラウザ

デバイスWebAPI（ネイティブアプリ）
拡張プラグインA
拡張プラグインB
拡張プラグインC

仮想サーバ

フレームワーク
ライブラリ
Kernel

IPネット
ワーク層

Android OS

デバイス

デバイスアクセス要求を各デバイスの制御命令に変換（プラグインで拡張）ネイティブ
アプリとして任意の機能が利用可能

Webのレイヤーで見た場合一般的なWebアプリ（Webブラウザ）からのデバイス利用、トレンド

Webアプリ(HTML5+Javascript)
ドライバ/Profile相当
ドライバ/Profile相当
ドライバ/Profile相当
WebブラウザWebエンジン
低レイヤー
デバイスAPI規定
デバイスAPI規定（JavaScript）（JavaScript）
ドライバ/Profile
ドライバ/Profile
ドライバ/Profile

低レイヤーのドライバ

デバイスWebAPIでのデバイス利用

Web
アプリ

Python・Ruby等

Webブラウザスクリプトエンジン

ネイティ
ブアプリ

仮想サーバ＋REST API I/F（GotAPIでの規定部分）

デバイスWebAPI
デバイスWebAPI
デバイスWebAPI（機能単位のRESTAPI規定）（機能単位のREST API規定）（機能単位のREST API規定）

ドライバ/
Profile低レイヤーのドライバ

デバイス
デバイス

最近のWeb規格化の流れ(Extensible Web)

ある意味でｴﾝﾀｰﾌﾟﾗｲｽﾞ開発
における最近のｱｰｷﾃｸﾁｬｽﾀｲﾙ
(Micro Services)に近い？

参考：言葉の解説
デバイスコネクトWebAPI
NTTドコモが提供するオープンソースソフトウェア（MITライセンス）。 後述のGotAPI準拠の実装という位置づけだが、実用性向上のための拡張や検証のための設定項目あり。

OMA GotAPI (Generic Open Terminal API)OMA（Opne Mobile Alliance：携帯電話の標準化団体）で規格化された、スマートフォン上でWebインターフェースを実現するための技術仕様

OMA Device WebAPIGotAPI仕様はあくまでインターフェースとしての規格で、具体的な機器のAPIは「DeviceWeb
API」として規定される。現在、ヘルスケア、３Dプリンタの規格化が進行中。

デバイスWebAPIコンソーシアム「GotAPI」の普及活動や機能検討を行う団体として設立。

デバイスWebAPIマネージャ
デバイスコネクトWebAPIをビルドした、各種アプリストアで公開されているAndroid/iOSアプリ（デモ用のWebサイトとセット）。デバイスWebAPIコンソーシアムを通じてGclue社が提供。

OMA(携帯電話の標準化団体)

GotAPI(規格)ﾃﾞﾊﾞｲｽWebAPI（規格）

ﾃﾞﾊﾞｲｽｺﾈｸﾄ（GotAPI実装：ｿｰｽｺｰﾄﾞ）
ﾃﾞﾊﾞｲｽWebAPI
ｺﾝｿｰｼｱﾑ
ﾃﾞﾊﾞｲｽWebAPI
マネージャ（公開アプリ）