【IoT】デバイスWebAPIを使って簡易ビデオシースルー型HMDを作ってみた

# 概要
- デバイスWebAPIを用いて、OculusGoを簡易的なビデオシースルー型HMDに変身させます
- VR端末を通して、スマホカメラの映像をリアルタイムで見るところまでをハンズオンで学習できます　※OculusGoが無くてもPCブラウザ等で体験できます

### この記事を読むと...
- デバイスWebAPIの基本的な使い方について学べます
- **簡単に多種多様なデバイス制御プログラミングが出来る**ようになります

### 完成イメージ
![1.jpeg](https://qiita-image-store.s3.amazonaws.com/0/320410/4d0991f4-718b-9b37-58bf-31bf672db21f.jpeg)


# デバイスWebAPIとは
- 様々なＩｏＴ機器とサービスをつなぐWebインターフェース技術です
- スマートフォン上で動作する仮想サーバに、スマートフォン内部のIPネットワーク層を経由することで、Webブラウザからでも高度な機能アクセスを実現できます
- ネイティブアプリからも同様に利用可能です
<img width="594" alt="2.png" src="https://qiita-image-store.s3.amazonaws.com/0/320410/83b34b53-4bc5-910e-48a1-1b8aa510d1e5.png">

- デバイスWebAPIが作られた背景や詳しい仕組みを知りたい方は、デバイスWebAPIコンソーシアムのホームページをご覧ください[[1]](https://device-webapi.org/gotapi.html)
- デバイスWebAPIによるデバイス制御のデモ動画もあります[[2]](http://device-webapi.org/demo_en.html)

### Device Web API Manager
- スマートフォン上でHTTPサーバとして動作し、 デバイスを操作するためのWebAPIを提供するソフトウェアで、各デバイス用プラグインを動かす機能を持っています
- Device Web API Manager 向けに作られたプラグインをインストールすることで、 WebAPIから操作できるデバイスを増やすことができます

<img width="446" alt="3.png" src="https://qiita-image-store.s3.amazonaws.com/0/320410/48926f44-6d6c-92f2-f497-290cc0ac1b43.png">


# ハンズオン
### 必要なもの
#### ハードウェア
- Android端末
- OculusGo ※お持ちで無くても、PCブラウザ等でお試しいただけます
- 無線ネットワーク環境(モバイルWiFiルーター、テザリング等)

#### ソフトウェア
- Device Web API Managerアプリ(Android端末にインストール)
- Webブラウザ（OculusGoの場合は標準ブラウザ、PCの場合はChromeを推奨）

### 全体的な流れ
1. ゲートウェイデバイス（Android端末）にDevice Web API  Managerをインストール
2. Device Web API Managerの設定
3. OculusGoブラウザでREST APIをたたく

## 1. Device Web API Managerのインストール
以下のアプリをGooglePlayからダウンロードします。
### Device Web API Manager
https://play.google.com/store/apps/details?id=org.deviceconnect.android.manager
※GooglePlayで「Device Web API Manager」と検索し、ダウンロードすることも可能です。下記のアイコンのアプリを選択してください。
![4.png](https://qiita-image-store.s3.amazonaws.com/0/320410/89f106d4-992f-3e7b-1e81-8bbebd365507.png)

### （補足）プラグインについて
- 今回のハンズオンでは不要ですが、プラグインについてご紹介します
- プラグインはDevice Web API Managerの中で動作し、デバイスとDevice Web API Managerの間を仲介する役割を持ちます
- プラグインを追加することで、対応するデバイスや機能を拡張することができます
- GitHubには、すでに多種多様なプラグインが公開されています[[3]](https://github.com/DeviceConnect/DeviceConnect-Android/tree/master/dConnectDevicePlugin)

## 2. Device Web API Managerの設定

### （重要）注意事項
- Device Web API Managerにはセキュリティ機能があります
- ただし今回は簡単に試すためにLocal Oauth/Origin有効化のチェックを外し、セキュリティ機能を無効にします
- ハンズオン後には、逆の手順でセキュリティ機能を有効にしてください

### 設定手順
1. アプリを開いて右上の アイコンを選択し、設定を選択
2. Device Web API Managerをオフ
3. セキュリティを以下の通りに設定
 - 外部IPを許可　→選択する
 - Local OAuth　→選択を外す
 - Origin有効化　→選択を外す
<img width="1019" alt="5.png" src="https://qiita-image-store.s3.amazonaws.com/0/320410/e2f5da98-1489-5b87-8377-32e2136314f9.png">

4. Device Web API Managerをオンにします。
 - 同一ネットワークのPCからスマートフォンの機能にアクセスできるようになります
<img width="789" alt="6.png" src="https://qiita-image-store.s3.amazonaws.com/0/320410/cfc177e1-d465-a5af-a22a-ee5cc049a145.png">

### （補足）各設定項目について
- Device Web API Manager
 - 仮想サーバの起動・停止 ONにすることでデバイスにアクセスが可能になります
- 外部IPを許可
 - 外部の端末からの操作を可能にします
- Local OAuth
 - アプリがDevice Web API Manager を使用する前に 使用許可を求めるダイアログを表示します
 - アプリが使用するプロファイル一覧等が表示されます

<img width="210" alt="7.png" src="https://qiita-image-store.s3.amazonaws.com/0/320410/47750f57-26c7-f5c7-215a-a5a51a1670ee.png">

- Origin有効化
 - アプリからのリクエストにOriginが設定されることを要求します。
 - Origin:デバイスに対して命令を送ることができるホストを指定します

## 3. OculusGoブラウザでREST APIをたたく
### 外部アプリからアクセス可能な状態か確認
- Webブラウザを起動し、アドレス欄に以下のURLを入力します
 - スマホのIPアドレス: 4035/gotapi/availability (例 192.168.1.2)
- 「”result”:0,・・・」と表示されれば成功です
- 「”result”:1,・・・」と表示された場合は何かしら設定に問題がある状態です
- その場合、下記を確認してみてください
 - URLがあっているか
 - アプリの設定が正しく設定されているか
 - PCとスマートフォンが同一ネットワーク上にあるか

### Device Web API Managerを使うための準備
- スマートフォン自体をWebブラウザからLAN経由で操作する動作確認用Webサイトです
- Webブラウザのアドレス欄に以下のURLを入力してください
 - http://deviceconnectusers.github.io/manager/?ip=スマホのIPアドレス#demo
 - スマホのIPアドレス例：　192.168.43.1  　　※テザリング利用の場合

### ブラウザからスマートフォンカメラの映像を取得
1. Webブラウザ画面で [Search Device]を選ぶと Device Listに[Host]が表示されるので選択してください
![8.jpeg](https://qiita-image-store.s3.amazonaws.com/0/320410/6831cb25-52bb-8e78-04eb-05d019837c72.jpeg)

2. スマートフォンの画面で認証画面が出た場合、[同意する]を選ぶと、デモ画面に機能のリストが表示されます

3. [mediaStreamRecoding]を選択します
![9.jpeg](https://qiita-image-store.s3.amazonaws.com/0/320410/3aa4d56b-e96e-5461-189e-e6e3cc164281.jpeg)

4. スマートフォン内蔵のカメラを選びます　※ここではバックカメラを選択します
![10.jpeg](https://qiita-image-store.s3.amazonaws.com/0/320410/69954a18-4afb-3ec2-de4b-dcc835250abb.jpeg)

5. [Preview]を選択します
![11.jpeg](https://qiita-image-store.s3.amazonaws.com/0/320410/e2122cb9-8ae1-3076-ed42-26d429fbc59f.jpeg)

6. スマートフォンカメラの映像がリアルタイムで流れます　　※スマートフォンをOculusGoに貼り付ければ、簡易ビデオシースルー型HMDの完成です
![1.jpeg](https://qiita-image-store.s3.amazonaws.com/0/320410/8f8b7667-4526-c847-1a0e-b67d4301ad6f.jpeg)

※ハンズオン終了後は、セキュリティ設定を有効にし、Device WebAPI Managerをオフにしてください

# 終わりに
- デバイスWebAPIを用いたカメラ制御及び活用例について、簡単にご紹介させていただきました
- 今回、ご紹介したのはデバイスWebAPIのほんの一部の機能に過ぎません
- 先にも述べましたが、デバイスWebAPIが作られた背景や仕組みを知りたい場合はデバイスWebAPIコンソーシアムのホームページをご覧いただくと良いでしょう[[1]](https://device-webapi.org/gotapi.html)
- 実際にデバイスWebAPIを活用してアプリやサービスを作る場合、curlによるREST APIの動作確認をすると開発を進めやすいです[[4]](http://www.slideshare.net/device-webapi/gotapiweb)
- デバイスWebAPIはオープンソースで利用可能でGitHubで公開中です[[5]](https://github.com/DeviceConnect)[[6]](https://github.com/DeviceConnect/DeviceConnect-Spec/wiki/Device-Connect-API-Reference)
- 本記事がきっかけでデバイスWebAPIに触れていただき、アプリやサービスでご活用いただければ嬉しく思います

# 参考情報
- [1] デバイスWebAPIコンソーシアム, "GotAPIとは",
https://device-webapi.org/gotapi.html
- [2] デバイスWebAPIコンソーシアム, "GotAPI demo videos",
http://device-webapi.org/demo_en.html
- [3] GitHub, "DeviceConnect/DeviceConnect-Android",
https://github.com/DeviceConnect/DeviceConnect-Android/tree/master/dConnectDevicePlugin
- [4] SlideShare, "デバイスWebAPIによるスマートフォン周辺デバイスの活用", 
http://www.slideshare.net/device-webapi/gotapiweb
- [5] GitHub, "DeviceConnect", 
https://github.com/DeviceConnect
- [6] GitHub, "Device Connect API Reference",  
https://github.com/DeviceConnect/DeviceConnect-Spec/wiki/Device-Connect-API-Reference