はじめに
個人開発ウソ穴の作り方を紹介します。
ウソ穴とは
ウソ穴は、ライブ映像 or 動画とARを組み合わせて、壁に穴が空いた錯覚を作り出します。Webサイトなので、ユーザーはアプリのインストール無くウソ穴を使用できます。
ウソ穴 Ver 5 Type B / 時雨堂 Sora
- 時雨堂さんの
Soraをつかったウソ穴の作り方を紹介 - 時雨堂さんの
Soraは遅延がほとんどないストリーミング - 時雨堂さんの
Soraのおかげでウソ穴の"穴感"がよりリアルになる
時雨堂さんの技術力すげー
デモ映像
向かって左がウソ穴、右がホントの穴です。
ホントの穴と、ウソ穴 (ライブ映像とARで作った穴) の比較テスト。3Dオブジェクトの形状を工夫して、本物っぽい穴に近づけてみた。 #ウソ穴 #AR #時雨堂 #sora
— j4amountain (@zsipparu) February 24, 2020
間違えて動かないオモチャ買ったので obniz で回した。 pic.twitter.com/VWpbWeDr0J
参考
構成図
- ストリーミング機能に、時雨堂さんの
Soraを使わせて頂く - 2つのWebサイトがあります
- 映像配信用のWebサイト
upstream.html - ウソ穴用のWebサイト
usoanaVer5TypeB.html
- 映像配信用のWebサイト
ソース
ソースはgithubで公開しています。
usoana-public/usoana5TypeB-shiguredo-sora
ウソ穴の構築方法
ここから、ウソ穴 Ver 5 Type Bの構築方法を紹介します。
構築概要
-
- ラズパイのセットアップ
-
- Nodejsで、HTTPS対応のWebサーバーを構築
-
- 時雨堂
soraを実装
-
upstream.html完成
- 時雨堂
-
- A-Frameでウソ穴用のWebサイトを実装
-
usoanaVer5TypeB.html完成
1. Nodejsで、HTTPS対応のWebサーバーを構築
ラズパイにOSをインストールして、初期セットアップをします。
-
ラズパイOSインストール[2020年版]
- ラズパイOSのインストール
-
ラズビアン(Raspbian)初期設定
- Wi-Fi接続など初期設定
2. Nodejsで、HTTPS対応のWebサーバーを構築
HTTPS対応のWebサイトを構築します。
具体的には、Nodejsのインストールと、オレオレ証明書を作ってHTTPS対応のWebサイトを構築します。
3. 時雨堂 Sora を実装
Sora JavaScript SDKを使ってみたを参考に、Soraを実装します。ここで作成したupstream.htmlは、ウソ穴の映像配信用のWebサイトとして利用します。
4. A-Frameでウソ穴用のWebサイトを実装
githubにあるウソ穴のソースファイル を作成したHTTPS対応のWebサーバーに配置します。
配置したusoanaVer5TypeB.htmlの以下を時雨堂さんのサイト（ https://sora-labo.shiguredo.jp/ ）の情報に更新します。
const channelId = 'xxxxxxxxx@sora-labo';
const signalingUrl = 'wss://xxxxxxxxxxxxxxxx';
const metadata = {"signaling_key": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"};
Webサイト（ウソ穴 Ver 5 Type B / 時雨堂 Sora）の準備
githubにあるウソ穴のソースファイルは、画像データが不足しているので、追加します。
parts\img\tex001.jpg ※穴の側面を表現する画像ファイル
parts\img\invisible.png ※透過率100%の完全透明な画像ファイル
tex001.jpgのダウンロード
invisible.pngのダウンロード
これで、ウソ穴 Ver 5 Type B / 時雨堂 Soraの準備ができました。
ファイル構造はこのようになります。
$ 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番ポートを使います。
$ pwd
/home/pi/nodejs/01
$ node app.js
サーバがポート3000で起動しました。モード:development
サーバがポート3001で起動しました。モード:development
ブラウザで受信用のWebサイトを開く
ブラウザで以下のURLを開き、ストリーミングを開始します。
https://{ラズパイのIPアドレス}:3001/.../upstream.html
ブラウザでウソ穴用のWebサイトを開く
ブラウザで以下のURLを開くと、ウソ穴が動きます。（Win10のFirefox,Chrome と iPhone iOS13.x の Safari で動作実績あり）
https://{ラズパイのIPアドレス}:3001/.../usoanaVer5TypeB.html
今回は、これでおわり