はじめに
個人開発ウソ穴の作り方を紹介します。
ウソ穴とは
ウソ穴は、ライブ映像 or 動画とARを組み合わせて、壁に穴が空いた錯覚を作り出します。Webサイトなので、ユーザーはアプリのインストール無くウソ穴を使用できます。
ウソ穴 Ver 5 Type C / MP4動画
今回は、MP4形式の動画と組み合わせる ウソ穴 Ver 5 Type C を紹介します。
- Webサイトは、Windows10環境のブラウザ Chrome, FireFox で動作を確認
- iPhone+Safari で動作を確認
- Androidでは正常に動作せず
- Android 9 + Chrome : カメラ映像が液晶モニターと一致しない
デモ映像
のぞくように動画を再生する ウソ穴 Ver 5 Type C の作り方をQiitaに投稿しましたーhttps://t.co/xVUiAxzoUz#ウソ穴 #protoout #AR pic.twitter.com/hJB0tyxA9r
— j4amountain (@zsipparu) July 16, 2020
構成図
ラズパイ上にWebサーバーなどウソ穴に必要なものを集約しています。
ウソ穴の構築方法
ここから、ウソ穴 Ver 5 Type Cの構築方法を紹介します。
- 構築概要
- Nodejsで、HTTPS対応のWebサーバーを構築
- A-FrameでWebサイトにAR機能を実装
- ラズパイにMP4形式の動画データを格納
ラズパイのセットアップ
ラズパイOSのインストールとセットアップで使っているリンク
-
ラズパイOSインストール[2020年版]
- ラズパイOSのインストール
-
ラズビアン(Raspbian)初期設定
- Wi-Fi接続など初期設定
HTTPS対応のWebサイト構築
Nodejsインストールと、オレオレ証明書でHTTPS対応
Webサイト（ウソ穴 Ver 5 Type C / MP4動画）の準備
以下のソースをHTTPS対応のWebサイトにコピーします。
画像/動画データが不足しているので、追加します。
parts\img\tex001.jpg
parts\img\invisible.png ※透過率100%の完全透明な画像ファイル
parts\img\video.mp4 ※MP4形式の動画データ（自前で準備お願いします）
tex001.jpgのダウンロード
invisible.pngのダウンロード
これで、ウソ穴 Ver 5 Type C / MP4動画の準備ができました。
ファイル構造はこのようになります。
$ pwd
/home/pi/nodejs/01/wwwroot/usoana5/usoana5TypeC-movie
$ tree
.
├── parts
│ ├── img
│ │ ├── invisible.png
│ │ └── tex001.jpg
│ └── movie
│ └── video.mp4
└── usoana5TypeC.html
ウソ穴 Ver 5 Type C / MP4動画 を動かす
Webサービスを開始する
以下コマンドでWebサービスを開始します。ポート3000はhttp通信（非暗号化通信）で、ポート3001はhttps通信（暗号化通信）です。ウソ穴は、https通信が必須なので3001番ポートを使います。
$ pwd
/home/pi/nodejs/01
$ node app.js
サーバがポート3000で起動しました。モード:development
サーバがポート3001で起動しました。モード:development
ブラウザでWebサイトを開く
ブラウザで以下のURLを指定すると、ウソ穴が動きます。
https://{ラズパイのIPアドレス}:3001/.../usoanaVer5TypeC.html
usoanaVer5TypeC.htmlファイルが以下パスの場合、URLは、https://{ラズパイのIPアドレス}:3001/usoana5/usoana5TypeC-movie/usoanaVer5TypeC.htmlになります。
$ pwd
/home/pi/nodejs/01/wwwroot/usoana5/usoana5TypeC-movie
$ ls
parts usoanaVer5TypeC.html
今回はこれでおわり、別バージョンのウソ穴も公開する予定です。