ウソ穴 Ver 5 Type C / MP4動画

6337 ワード
AR JavaScript 個人開発 ウソ穴 A-Frame JavaScript テキストリンク

はじめに

個人開発ウソ穴の作り方を紹介します。

ウソ穴とは

ウソ穴は、ライブ映像 or 動画とARを組み合わせて、壁に穴が空いた錯覚を作り出します。Webサイトなので、ユーザーはアプリのインストール無くウソ穴を使用できます。

ウソ穴 Ver 5 Type C / MP4動画

今回は、MP4形式の動画と組み合わせる ウソ穴 Ver 5 Type C を紹介します。

  • Webサイトは、Windows10環境のブラウザ Chrome, FireFox で動作を確認
  • iPhone+Safari で動作を確認
  • Androidでは正常に動作せず
    • Android 9 + Chrome : カメラ映像が液晶モニターと一致しない

デモ映像

構成図

ラズパイ上にWebサーバーなどウソ穴に必要なものを集約しています。

ウソ穴の構築方法

ここから、ウソ穴 Ver 5 Type Cの構築方法を紹介します。

  • 構築概要
    • Nodejsで、HTTPS対応のWebサーバーを構築
    • A-FrameでWebサイトにAR機能を実装
    • ラズパイにMP4形式の動画データを格納

ラズパイのセットアップ

ラズパイOSのインストールとセットアップで使っているリンク

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

今回はこれでおわり、別バージョンのウソ穴も公開する予定です。