ウソ穴 Ver 5 Type A / GStreamer

## はじめに

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

## ウソ穴とは

`ウソ穴`は、ライブ映像 or 動画とARを組み合わせて、壁に穴が空いた錯覚を作り出します。

Webサイトなので、ユーザーはアプリのインストール無くウソ穴を使用できます。

## ウソ穴 Ver 5 Type A / GStreamer

今回は、GStreamer によるライブ配信と組み合わせる `ウソ穴 Ver 5 Type A` を紹介します。

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

## デモ映像

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">壁に穴があいたように錯覚させる AR 『ウソ穴』の作り方をQiitaに投稿しました。<br>ウソ穴 Ver 5 Type A / GStreamer<a href="https://t.co/tKZUmspUrL">https://t.co/tKZUmspUrL</a><a href="https://twitter.com/hashtag/%E3%82%A6%E3%82%BD%E7%A9%B4?src=hash&amp;ref_src=twsrc%5Etfw">#ウソ穴</a> <a href="https://t.co/L6p8Cs35ri">pic.twitter.com/L6p8Cs35ri</a></p>&mdash; j4amountain (@zsipparu) <a href="https://twitter.com/zsipparu/status/1281895570450403328?ref_src=twsrc%5Etfw">July 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

壁の表面には、ARマーカーを、裏面にはラズパイを設置しています。

![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/5bee7278-2306-cb23-48e1-3131b94771dc.png)



## 構成図

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/88eeceea-d3f4-654f-af93-05d299b0075c.png)

※ウソ穴 Ver 5 Type A は、iPhone, Android 非対応


![line.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/9c68ade3-a816-8830-4a78-a1539fefb0ed.png)

## ウソ穴の構築方法

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

- 構築概要
    - ラズパイにカメラモジュールを接続
    - ラズパイに、ウソ穴の構成要素を集約
    - GStramerで、カメラモジュールの映像をストリーミング
    - Nodejsで、HTTPS対応のWebサーバーを構築
    - A-FrameでWebサイトでAR機能を実装


#### ラズパイのセットアップ

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

- [ラズパイOSインストール[2020年版]](https://note.com/agw/n/n65a147a5827a?magazine_key=mc40e905e6d42)
    - ラズパイOSのインストール
- [ラズビアン(Raspbian)初期設定](https://note.com/agw/n/naac1db76d70f?magazine_key=mc40e905e6d42)
    - Wi-Fi接続など初期設定
- [ストリーミングサーバを構築してみた](https://note.com/agw/n/ne767158e323d?magazine_key=mc40e905e6d42)
    - カメラモジュールの認識

#### ストリーミング

GStreamerインストールで使っているリンク

- [ラズパイ4とGStreamerでストリーミングサーバーを作ろう](https://qiita.com/zgw426/items/aba3db7d639a8b1a8981)

#### HTTPS対応のWebサイト

Nodejsインストールと、オレオレ証明書でHTTPS対応

- [ラズパイを映像展示用デバイスにした話](https://qiita.com/zgw426/items/61949d7802bebaaee941)
- [[Node.js] Windows10にオレオレ証明書でSSL通信のWebサーバを作る](https://qiita.com/zgw426/items/3e3dcb1ae26b2efa2eb7)

#### Webサイト（ウソ穴 Ver 5 Type A / GStreamer）の準備

以下のソースをHTTPS対応のWebサイトにコピーします。

- [usoana-public/usoana5TypeA-GStreamer](https://github.com/zgw426/usoana-public/tree/master/usoana5TypeA-GStreamer)

画像データが不足しているので、追加します。
`parts\img\tex001.jpg`
`parts\img\invisible.png`　※透過率100%の完全透明な画像ファイル

<a href="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/6e9ec860-a9f0-b0eb-d9dc-7bcae6fa77b2.jpeg" download="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/6e9ec860-a9f0-b0eb-d9dc-7bcae6fa77b2.jpeg">tex001.jpgのダウンロード</a>
<a href="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/6213d073-c34e-fa2e-b5d7-95703c5af180.png" download="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/6213d073-c34e-fa2e-b5d7-95703c5af180.png">invisible.pngのダウンロード</a>
![invisible.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/6213d073-c34e-fa2e-b5d7-95703c5af180.png)

これで、`ウソ穴 Ver 5 Type A / GStreamer`の準備ができました。

ファイル構造はこのようになります。

```console
$ 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

```

![line.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/5a7ac0a9-4c11-6a1d-7009-1214b4f08fd3.png)


## ウソ穴 Ver 5 Type A / GStreamer 動かす

#### ストリーミングを開始する

`parts\gstreamer` をカレントディレクトリにし、以下コマンドを実行しストリーミングを開始します。

```console
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ファイルが作成されます。

```console
$ 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番ポートを使います。

```console
$ 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`になります。

```console
$ pwd
/home/pi/nodejs/01/wwwroot/usoana5/usoana5TypeA-GStreamer
$ ls
parts  usoanaVer5TypeA.html
```

![line.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/5a7ac0a9-4c11-6a1d-7009-1214b4f08fd3.png)

今回はこれでおわり、iPhone対応版とか、動作再生版とか、別バージョンのウソ穴も公開する予定です。