はじめに
個人開発ウソ穴の作り方を紹介します。
ウソ穴とは
ウソ穴は、ライブ映像 or 動画とARを組み合わせて、壁に穴が空いた錯覚を作り出します。
Webサイトなので、ユーザーはアプリのインストール無くウソ穴を使用できます。
ウソ穴 Ver 5 Type A / GStreamer
今回は、GStreamer によるライブ配信と組み合わせる ウソ穴 Ver 5 Type A を紹介します。
- Webサイトは、Windows10環境のブラウザ Chrome, FireFox で動作を確認
- iPhone,Androidでは正常に動作せず
- iPhone+Safari : ストリーミングが再生されない
- Android 9 + Chrome : カメラ映像が液晶モニターと一致しない
デモ映像
壁に穴があいたように錯覚させる AR 『ウソ穴』の作り方をQiitaに投稿しました。
— j4amountain (@zsipparu) July 11, 2020
ウソ穴 Ver 5 Type A / GStreamerhttps://t.co/tKZUmspUrL#ウソ穴 pic.twitter.com/L6p8Cs35ri
壁の表面には、ARマーカーを、裏面にはラズパイを設置しています。
構成図
※ウソ穴 Ver 5 Type A は、iPhone, Android 非対応
ウソ穴の構築方法
ここから、ウソ穴 Ver 5 Type Aの構築方法を紹介します。
- 構築概要
- ラズパイにカメラモジュールを接続
- ラズパイに、ウソ穴の構成要素を集約
- GStramerで、カメラモジュールの映像をストリーミング
- Nodejsで、HTTPS対応のWebサーバーを構築
- A-FrameでWebサイトでAR機能を実装
ラズパイのセットアップ
ラズパイOSのインストールとセットアップで使っているリンク
-
ラズパイOSインストール[2020年版]
- ラズパイOSのインストール
-
ラズビアン(Raspbian)初期設定
- Wi-Fi接続など初期設定
-
ストリーミングサーバを構築してみた
- カメラモジュールの認識
ストリーミング
GStreamerインストールで使っているリンク
HTTPS対応のWebサイト
Nodejsインストールと、オレオレ証明書でHTTPS対応
Webサイト（ウソ穴 Ver 5 Type A / GStreamer）の準備
以下のソースをHTTPS対応のWebサイトにコピーします。
画像データが不足しているので、追加します。
parts\img\tex001.jpg
parts\img\invisible.png ※透過率100%の完全透明な画像ファイル
tex001.jpgのダウンロード
invisible.pngのダウンロード
これで、ウソ穴 Ver 5 Type A / GStreamerの準備ができました。
ファイル構造はこのようになります。
$ pwd
/home/pi/nodejs/01/wwwroot/usoana5/usoana5TypeA-GStreamer
$ tree
.
├── parts
│ ├── gstreamer
│ │ ├── output.m3u8
│ │ ├── segment00031.ts <--ストリーミング開始で追加される
│ │ ├── segment00032.ts <--ストリーミング開始で追加される
│ ├── img
│ │ ├── invisible.png
│ │ └── tex001.jpg
│ └── js
│ └── hls-load-texture
│ └── hls.js@latest
└── usoanaVer5TypeA.html
ウソ穴 Ver 5 Type A / GStreamer 動かす
ストリーミングを開始する
parts\gstreamer をカレントディレクトリにし、以下コマンドを実行しストリーミングを開始します。
sudo gst-launch-1.0 -v -e v4l2src device=/dev/video0 \
! video/x-h264,width=480,height=480,framerate=15/1 \
! h264parse ! mpegtsmux \
! hlssink max-files=8 target-duration=5 \
location=./segment%05d.ts \
playlist-location=output.m3u8 \
playlist-root=./
ストリーミングを開始すると、parts/gstreamer配下に、output.m3u8とsegmentXXXXX.tsファイルが作成されます。
$ pwd
/home/pi/nodejs/01/wwwroot/usoana5/usoana5TypeA-GStreamer/parts/gstreamer
$ ls
output.m3u8 segment00032.ts segment00034.ts segment00036.ts segment00038.ts
segment00031.ts segment00033.ts segment00035.ts segment00037.ts
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/.../usoanaVer5TypeA.html
usoanaVer5TypeA.htmlファイルが以下パスの場合、URLは、https://{ラズパイのIPアドレス}:3001/usoana5/usoana5TypeA-GStreamer/usoanaVer5TypeA.htmlになります。
$ pwd
/home/pi/nodejs/01/wwwroot/usoana5/usoana5TypeA-GStreamer
$ ls
parts usoanaVer5TypeA.html
今回はこれでおわり、iPhone対応版とか、動作再生版とか、別バージョンのウソ穴も公開する予定です。