ウソ穴 Ver 5 Type B / 時雨堂 Sora

## はじめに

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

## ウソ穴とは

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

## ウソ穴 Ver 5 Type B / 時雨堂 Sora

- 時雨堂さんの`Sora`をつかったウソ穴の作り方を紹介
- 時雨堂さんの`Sora`は遅延がほとんどないストリーミング
- 時雨堂さんの`Sora`のおかげでウソ穴の"穴感"がよりリアルになる

時雨堂さんの技術力すげー

## デモ映像

向かって左がウソ穴、右がホントの穴です。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ホントの穴と、ウソ穴 (ライブ映像とARで作った穴) の比較テスト。3Dオブジェクトの形状を工夫して、本物っぽい穴に近づけてみた。 <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/AR?src=hash&amp;ref_src=twsrc%5Etfw">#AR</a> <a href="https://twitter.com/hashtag/%E6%99%82%E9%9B%A8%E5%A0%82?src=hash&amp;ref_src=twsrc%5Etfw">#時雨堂</a> <a href="https://twitter.com/hashtag/sora?src=hash&amp;ref_src=twsrc%5Etfw">#sora</a><br>間違えて動かないオモチャ買ったので obniz で回した。 <a href="https://t.co/VWpbWeDr0J">pic.twitter.com/VWpbWeDr0J</a></p>&mdash; j4amountain (@zsipparu) <a href="https://twitter.com/zsipparu/status/1231853386447745027?ref_src=twsrc%5Etfw">February 24, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


## 参考

- [Sora JavaScript SDKを使ってみた](https://qiita.com/zgw426/items/99524c75a2894d8a3ca7)
- [Sora JavaScript SDK ドキュメントークイックスタート](https://sora-js-sdk.shiguredo.jp/quickstart.html#quickstart)


## 構成図

- ストリーミング機能に、時雨堂さんの`Sora`を使わせて頂く
- 2つのWebサイトがあります
    - 映像配信用のWebサイト `upstream.html`
    - ウソ穴用のWebサイト `usoanaVer5TypeB.html`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/46157b76-2132-a782-9686-599ea2d224b3.png)


## ソース

ソースはgithubで公開しています。

[usoana-public/usoana5TypeB-shiguredo-sora](https://github.com/zgw426/usoana-public/tree/master/usoana5TypeB-shiguredo-sora)


## ウソ穴の構築方法

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

#### 構築概要

- 1. ラズパイのセットアップ
- 2. Nodejsで、HTTPS対応のWebサーバーを構築
- 3. 時雨堂 `sora` を実装
    - `upstream.html`完成
- 4. A-Frameでウソ穴用のWebサイトを実装
    - `usoanaVer5TypeB.html`完成

#### 1. Nodejsで、HTTPS対応のWebサーバーを構築

ラズパイに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接続など初期設定

#### 2. Nodejsで、HTTPS対応のWebサーバーを構築

HTTPS対応のWebサイトを構築します。
具体的には、Nodejsのインストールと、オレオレ証明書を作ってHTTPS対応のWebサイトを構築します。

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



#### 3. 時雨堂 Sora を実装

[Sora JavaScript SDKを使ってみた](https://qiita.com/zgw426/items/99524c75a2894d8a3ca7)を参考に、Soraを実装します。ここで作成した`upstream.html`は、ウソ穴の映像配信用のWebサイトとして利用します。


#### 4. A-Frameでウソ穴用のWebサイトを実装

[githubにあるウソ穴のソースファイル](https://github.com/zgw426/usoana-public/tree/master/usoana5TypeB-shiguredo-sora) を作成したHTTPS対応のWebサーバーに配置します。

配置した`usoanaVer5TypeB.html`の以下を時雨堂さんのサイト（ https://sora-labo.shiguredo.jp/ ）の情報に更新します。

```
const channelId = 'xxxxxxxxx@sora-labo';
const signalingUrl = 'wss://xxxxxxxxxxxxxxxx';
const metadata = {"signaling_key": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"};
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/c703e0d2-0f22-0d86-a5e4-58926f6e1be6.png)


#### Webサイト（ウソ穴 Ver 5 Type B / 時雨堂 Sora）の準備

[githubにあるウソ穴のソースファイル](https://github.com/zgw426/usoana-public/tree/master/usoana5TypeB-shiguredo-sora)は、画像データが不足しているので、追加します。

`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 B / 時雨堂 Sora`の準備ができました。
ファイル構造はこのようになります。

```console
$ tree
.
├── parts
│   ├── img
│   │   ├── (dummy)invisible.png.txt
│   │   ├── (dummy)tex001.jpg.txt
│   │   ├── invisible.png
│   │   └── tex001.jpg
│   └── js
│       └── sora.min.js
├── upstream.html
└── usoanaVer5TypeB.html
```

## ウソ穴 Ver 5 Type B / 時雨堂 Sora を動かす

#### Webサービスを開始する

以下コマンドでWebサービスを開始します。ポート3000はhttp通信（非暗号化通信）で、ポート3001はhttps通信（暗号化通信）です。ウソ穴は、https通信が必須なので3001番ポートを使います。

```console
$ pwd
/home/pi/nodejs/01
$ node app.js
        サーバがポート3000で起動しました。モード:development
        サーバがポート3001で起動しました。モード:development
```

![図4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/c6dfa037-5e34-edbe-d80d-8c53d575e5c9.png)


#### ブラウザで受信用のWebサイトを開く

ブラウザで以下のURLを開き、ストリーミングを開始します。

`https://{ラズパイのIPアドレス}:3001/.../upstream.html`

![図2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/8cce9d25-72cc-3acd-f054-3edbbea409db.png)



#### ブラウザでウソ穴用のWebサイトを開く

ブラウザで以下のURLを開くと、ウソ穴が動きます。（Win10のFirefox,Chrome と iPhone iOS13.x の Safari で動作実績あり）

`https://{ラズパイのIPアドレス}:3001/.../usoanaVer5TypeB.html`

![図3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/884e45a0-2cb5-01bd-573e-8f0a02014052.png)


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

今回は、これでおわり