ウソ穴 Ver 5 Type C / MP4動画

## はじめに

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

## ウソ穴とは

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

## ウソ穴 Ver 5 Type C / MP4動画

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

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

## デモ映像

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">のぞくように動画を再生する ウソ穴 Ver 5 Type C の作り方をQiitaに投稿しましたー<a href="https://t.co/xVUiAxzoUz">https://t.co/xVUiAxzoUz</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://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://twitter.com/hashtag/AR?src=hash&amp;ref_src=twsrc%5Etfw">#AR</a> <a href="https://t.co/hJB0tyxA9r">pic.twitter.com/hJB0tyxA9r</a></p>&mdash; j4amountain (@zsipparu) <a href="https://twitter.com/zsipparu/status/1283770112651038721?ref_src=twsrc%5Etfw">July 16, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


## 構成図

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/ce2a0df2-4098-016f-9b8f-a894c7bf1120.png)



## ウソ穴の構築方法

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

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

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

ラズパイ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対応のWebサイト構築

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

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

#### Webサイト（ウソ穴 Ver 5 Type C / MP4動画）の準備

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

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

画像/動画データが不足しているので、追加します。
`parts\img\tex001.jpg`
`parts\img\invisible.png`　※透過率100%の完全透明な画像ファイル
`parts\img\video.mp4`　※MP4形式の動画データ（自前で準備お願いします）

<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 C / MP4動画`の準備ができました。

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

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

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

```console
$ pwd
/home/pi/nodejs/01/wwwroot/usoana5/usoana5TypeC-movie
$ ls
parts  usoanaVer5TypeC.html
```

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

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