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

8550 ワード
ウソ穴 AR JavaScript A-Frame JavaScript テキストリンク

はじめに

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

ウソ穴とは

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

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

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

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

デモ映像

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

参考

構成図

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

ソース

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

usoana-public/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をインストールして、初期セットアップをします。

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

今回は、これでおわり