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
やってみた事 様々な仕組み 開発環境 通信プロトコルのカメラ NW カメラ アクションカメラ ドローン USB 接続の Web カメラ Androd スマートフォン ( テザリング等で外部のデバイスと接続 ) Web ブラウザ ネイティブアプリ デバイスや WebRTC 処理制御のための共通的な Web インターフェース OMA GotAPI /Device WebAPI を利用 HDMI 入力 THETA S 映像入力の共通化 映像リソース ネイティブアプリとしての WebRTC 処理 スマートグラス (Vuzix M100) サーマルカメラ スマートフォンのスクリーンキャスト スマートフォンのカメラ
これからできそうな事 参考 :https://html5experts.jp/shumpei-shiraishi/18355/ Androd スマートフォン ( テザリング等で外部のデバイスと接続 ) NW カメラ アクションカメラ Chrome ブラウザ canvas WebRTC ドローン USB 接続の Web カメラ HDMI 入力 THETA S スマートグラス (Vuzix M100) サーマルカメラ デバイス制御のための共通的な Web インターフェース 映像入力の共通化 スマートフォンのスクリーンキャスト スマートフォンのカメラ 映像リソース 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 情報 ) Web ブラウザ アプリストアアプリのユニーク性を Origin 情報に ネイティブアプリ Web ブラウザ NW 処理からアクセスできる範囲 フレームワークライブラリ IPネットワーク処理 管理 Kernel スマートフォンOS ネイティブアプリとしてアクセスできる範囲 (Sandbox) ネイティブアプリと Web ブラウザ IP ネットワークからアクセスできる範囲 スマートフォン上に Web インターフェースを構築することで アプリ Web のアクセス範囲の違いを使ったセキュリティ担保を実現
デバイス WebAPI(GotAPI) での WebRTC 課題解決 Web ブラウザの仕様に影響されない機器連携による WebRTC でのビデオチャットを実現 自分 ( スマートフォン ) WebRTC 非対応の Web ブラウザ / ネイティブアプリ REST API デバイス WebAPI 制御 制御 相手 (PC/ スマートフォンの Web ブラウザ ) 映像 音声リソース ( 出力 ) WebRTC プラグイン WebRTC 映像リソース ( 入力 ) GotAPI フレームワーク 外部カメラ用プラグイン 外部カメラ
利用イメージ ウェアラブルデバイスを使った遠隔作業支援システム 作業者 ( スマートフォン ) センター Web ブラウザ / ネイティブアプリ REST API デバイス WebAPI 映像 音声リソース ( 出力 ) 制御 制御 WebRTCプラグイン 状況確認 指示 WebRTC 映像リソース ( 入力 ) 外部カメラ用プラグイン スマートグラス 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 の仕組み (Android の場合 ) スマートフォン上で動作する仮想サーバにより IP 層を経由することで Web ブラウザからでも高度な機能を実現 アプリからも同様に利用可能 IP-NW 経由で仮想サーバにアクセス インターネット上の Web サイト Web Web アプリアプリ Webアプリ (HTML5+Javascript) (HTML5+Javascript) (HTML5+Javascript) Web ブラウザ ライブラリ Kernel Android OS フレームワーク IP ネットワーク層 デバイスWebAPI ( ネイティブアプリ ) 拡張プラグインA 拡張プラグインB 拡張プラグインC 仮想サーバ デバイスアクセス要求を各デバイスの制御命令に変換 ( プラグインで拡張 ) ネイティブアプリとして任意の機能が利用可能 デバイス
Web のレイヤーで見た場合 一般的な Web アプリ (Web ブラウザ ) からのデバイス利用 トレンド Web アプリ (HTML5+Javascript) デバイス API 規定 (JavaScript) ドライバ /Profile ドライバ /Profile ドライバ /Profile ドライバ相当 /Profile 相当 Web ブラウザ Web エンジン デバイス 低レイヤーデバイス API 規定 (JavaScript) 低レイヤーのドライバ 最近の Web 規格化の流れ (Extensible Web) デバイス WebAPI でのデバイス利用 Web アプリ Web ブラウザ Python Ruby 等 スクリプトエンジン 仮想サーバ +REST API I/F (GotAPI での規定部分 ) デバイスデバイス WebAPI デバイス WebAPI WebAPI ( 機能単位のREST API 規定 ) ( 機能単位のREST API 規定 ) ( 機能単位のREST API 規定 ) ドライバ / Profile デバイス ネイティブアプリ 低レイヤーのドライバ ある意味でエンターフ ライス 開発における最近のアーキテクチャスタイル (Micro Services) に近い?
参考 : 言葉の解説 デバイスコネクト 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 社が提供 OMA ( 携帯電話の標準化団体 ) GotAPI( 規格 ) テ ハ イス WebAPI ( 規格 ) テ ハ イスコネクト (GotAPI 実装 : ソースコート ) テ ハ イス WebAPI コンソーシアム テ ハ イス WebAPI マネージャ ( 公開アプリ )