7
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

NTTドコモ サービスイノベーション部Advent Calendar 2018

Day 7

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

Last updated at Posted at 2018-12-06

概要

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

この記事を読むと...

  • デバイスWebAPIの基本的な使い方について学べます
  • 簡単に多種多様なデバイス制御プログラミングが出来るようになります

完成イメージ

1.jpeg

デバイスWebAPIとは

  • 様々なIoT機器とサービスをつなぐWebインターフェース技術です
  • スマートフォン上で動作する仮想サーバに、スマートフォン内部のIPネットワーク層を経由することで、Webブラウザからでも高度な機能アクセスを実現できます
  • ネイティブアプリからも同様に利用可能です
2.png
  • デバイスWebAPIが作られた背景や詳しい仕組みを知りたい方は、デバイスWebAPIコンソーシアムのホームページをご覧ください[1]
  • デバイスWebAPIによるデバイス制御のデモ動画もあります[2]

Device Web API Manager

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

(補足)プラグインについて

  • 今回のハンズオンでは不要ですが、プラグインについてご紹介します
  • プラグインはDevice Web API Managerの中で動作し、デバイスとDevice Web API Managerの間を仲介する役割を持ちます
  • プラグインを追加することで、対応するデバイスや機能を拡張することができます
  • GitHubには、すでに多種多様なプラグインが公開されています[3]

2. Device Web API Managerの設定

(重要)注意事項

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

設定手順

  1. アプリを開いて右上の アイコンを選択し、設定を選択
  2. Device Web API Managerをオフ
  3. セキュリティを以下の通りに設定
  • 外部IPを許可 →選択する
  • Local OAuth →選択を外す
  • Origin有効化 →選択を外す
5.png
  1. Device Web API Managerをオンにします。
  • 同一ネットワークのPCからスマートフォンの機能にアクセスできるようになります
6.png

(補足)各設定項目について

  • Device Web API Manager
  • 仮想サーバの起動・停止 ONにすることでデバイスにアクセスが可能になります
  • 外部IPを許可
  • 外部の端末からの操作を可能にします
  • Local OAuth
  • アプリがDevice Web API Manager を使用する前に 使用許可を求めるダイアログを表示します
  • アプリが使用するプロファイル一覧等が表示されます
7.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を使うための準備

ブラウザからスマートフォンカメラの映像を取得

  1. Webブラウザ画面で [Search Device]を選ぶと Device Listに[Host]が表示されるので選択してください
    8.jpeg

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

  3. [mediaStreamRecoding]を選択します
    9.jpeg

  4. スマートフォン内蔵のカメラを選びます ※ここではバックカメラを選択します
    10.jpeg

  5. [Preview]を選択します
    11.jpeg

  6. スマートフォンカメラの映像がリアルタイムで流れます  ※スマートフォンをOculusGoに貼り付ければ、簡易ビデオシースルー型HMDの完成です
    1.jpeg

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

終わりに

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

参考情報

7
4
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?