🌎

AWSとNetworked-Aframeでメタバース会議を実装する！

2023/05/14に公開

はじめに

AWSのEC2を使って、Networked-AframeでマルチユーザでのWebメタバースを実装していきます。AWS、A-Frameそれぞれの初心者向けに画像多めで解説します。Networked-Aframeはマルチユーザでのメタバース体験を作れるWebRTCのフレームワークです。open-easyrtcというWebRTCライブラリなどを使い、リアルタイムな共有体験を実現しています。

Networked-Aframeの技術要素

メタバース表現のコア技術であるA-Frameはメタバース空間をHTMLとjavascriptのみで記述できるWebフレームワークです。数行のHTMLでメタバース空間を作れたり、3Dモデルのアニメーションを動かしたりなど、HTMLだけで幅広いメタバース表現ができます。

A-Frame公式
https://aframe.io/

A-Frameの公式example集
https://aframe.io/aframe/examples/

通信のコア技術であるWebRTCとはPeer to Peer 通信(P2P)を実現する方法の一つです。サーバ経由ではなく各端末間で通信が行われるためサーバの負担が小さいのが特徴です。
WebRTCではシグナリングサーバというサーバを用意する必要があります。シグナリングサーバーとは「通信相手に関する情報を教える」のが役割です。各端末がP2P通信を開始するためにデータの送信先情報などを教えます。

HTMLで書けるメタバースであるA-FrameとWebRTC技術を組み合わせて、複数のユーザがメタバース空間をリアルタイム共有できるようにしたのがNetworked-Aframeです。

できること・できないこと

アバターの位置や向きの共有
音声の共有
カメラによる顔の共有
チャットなどテキストボックスでの文字の共有
clickなどのHTMLイベントの共有
画面共有は技術としては実装してあるが、画面共有中に他のユーザが入ってくると、そのユーザからは画面共有が見えないといった問題がありほぼ使えない(2023/05/14時点で未解決のissue)

画面共有が十分でないのは残念ですが、紙芝居的に画像をめくったりすることはできます。会社全体でのキックオフ会議など、盛り上がりや新しさが欲しい場で使うと効果がありそうです。

実装の流れ

サーバセットアップ① AWSでEC2を立ち上げる(シグナリングサーバ)
サーバセットアップ② Networked-Aframeをインストール&動作確認
サーバセットアップ③ PM2でNode.jsサーバを永続化
HTTPSセットアップ① Route53でドメイン取得
HTTPSセットアップ② ACMで証明書取得
HTTPSセットアップ③ LBを作成し証明書を設定
HTTPSセットアップ④ Route53で通信経路の設定

「サーバセットアップ」の手順までやると、HTTPでアクセスできる共有メタバース空間ができます。HTTPS化まで実施しないとモーションセンサーや音声やカメラが使えません。「音声とかは共有できなくても、ユーザの位置や向きが共有されているのを見れればいい」などNetworked-Aframeのだいたいの手触り感だけ知りたい方はHTTPSセットアップの手順はやらなくても大丈夫です！

HTTPS化しない場合
AWS費用：数十円 ~ 数百円
EC2のt2.microサイズのみ。

HTTPS化する場合
AWS費用：1000円 ~ 3000円
EC2 + ドメイン取得料 + LB代
LBをこまめに削除すれば安く済みます。

手順

サーバセットアップ① AWSでEC2を立ち上げる(シグナリングサーバ)

AWSのメニューからEC2サービス画面に遷移します。左メニューから「インスタンス」を選択し、遷移後の画面右上から「インスタンスを起動」します。

設定名	設定値
名前	NAFserver（任意でいいです）
アプリケーションおよびOSイメージ	AmazonLinux2023
インスタンスタイプ	t2.micro。このサイズで事足ります。
キーペア	新規作成するか既存のものを選択
ネットワーク設定	SSH、HTTPS、HTTPを許可
他の設定	デフォルト

設定値を入れたら「インスタンスを起動」でEC2が立ち上がります。OSやインスタンスタイプは使い慣れてる物や用途に応じたサイズを選んでもらうのが一番いいですが、本記事では上記のOSとしてセットアップを進めます。

サーバセットアップ② Networked-Aframeをインストール&動作確認

TeratermからEC2にSSHでログインします。ホスト名はインスタンス概要のパブリック IPv4 DNSを入力します。ユーザー名はec2-user、SSHキーはEC2作成時に指定したキーファイルを指定します。

注：AmazonLinux2023のOSでは、Tera Term 5 RC 5.0 beta1のバージョンでしかアクセスできなません。古いバージョンのTerataemを使っている場合はアップデートが必要です。

最終的にHTTPサーバを立ち上げるため、rootユーザで操作します。

sudo -i

git のインストール

yum update
yum install git

Node.jsのインストール

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
. ~/.nvm/nvm.sh
nvm install --lts

インストール後確認

node -e "console.log('Running Node.js ' + process.version)"

Running Node.js v18.16.0 のようなバージョン表示されればOK

Networked-Aframeのインストール

git clone https://github.com/networked-aframe/networked-aframe.git 
cd networked-aframe
npm install

最低限のパッケージがインストールできました。動作確認していきます。
networked-aframeディレクトリで以下のコマンドを実行してください

npm run dev

これで開発サーバが起動するのでTeratermでSSH転送を設定し、アクセスしていきます。

Teraterm上部バーの設定(S) > SSH転送 > 追加から以下の設定を行います。

設定名	設定値
ローカルのポート	8080
リモート側ホスト	127.0.0.1
ポート	8080

設定できたらブラウザで http://localhost:8080 にアクセスします。以下のような画面が表示されたら成功です。

このExamplesページだけでも様々なメタバース部屋のサンプルが用意されており、Networked-Aframeの機能を触ることができます。

Basic: プレイヤーのアバターの位置や回転が共有される。
Video Streaming：アバターの顔の部分がカメラ映像になる。
Persistent sphere：3Dオブジェクトの色の共有ができる。
Multi Streams：カメラ映像や画面共有ができまる。

Basicの部屋を複数のブラウザで開くとこんな感じになります。アバターの動きや向いてる方向がリアルタイム共有されます。

サーバセットアップ③ PM2でNode.jsサーバを永続化

Networked-Aframeが動いていることが確認出来たら、今度はインターネットからアクセスできるようにします。Ctrl + Cで実行中の開発サーバを停止したら、次はPM2を使ってNode.jsサーバを立ち上げていきます。

PM2をインストール

npm install pm2 -g

PM2でHTTPサーバを起動

PORT=80 pm2 start server/easyrtc-server.js

PM2で起動することにより、EC2からログアウトしてもサーバが起動し続けてくれます。EC2のパブリック IPv4 DNSにブラウザでアクセスします。以下の画面が出れば成功です。

アクセスできない場合、HTTPであることを、http://xxxのようにURL内で明示的に指定しているか、EC2のセキュリティグループでHTTPアクセスを許可しているか、などを確認してみてください。

Networked-Aframeの手触り感を見てみたい、という方はここで終了です。いろんなルームに入ってみたり、他の人に入ってもらうなどすると、どんなことができそうかイメージが掴めます。

実用に向けて音声やカメラの共有までしたい場合は次のHTTPS化まで必要です。

HTTPSセットアップ① Route53でドメイン取得

AWSのメニューからRoute53のサービス画面に遷移します。左メニューのドメイン > 登録済みドメインから「ドメインの登録」をします。

任意のドメイン名を入力し、ドメインを購入します。購入確定してから有効になるまでしばらくかかります。

HTTPSセットアップ② ACMで証明書取得

AWSのメニューからCertificate Managerのサービス画面に遷移します。左メニューの「証明書をリクエスト」のメニューに遷移し、「パブリック証明書をリクエスト」を選択した状態で「次へ」を押します。

設定名	設定値
完全修飾ドメイン名	Route53で購入したドメイン名
検証方法	DNS検証
キーアルゴリズム	RSA 2048
タグ	任意

を設定し「リクエスト」すると、証明書が発行されます。

ACMの「証明書一覧」からステータスを確認し、「発行済み」になるまで待ちます。

HTTPSセットアップ③ LBを作成し証明書を設定する

最初にロードバランサー用のターゲットグループを作成します。ロードバランサーが通信を振り分けるための宛先の集合です。

AWSのメニューからEC2のサービス画面に遷移します。左メニューの「ロードバランシング」>「ターゲットグループ」のメニューに遷移し、「Create target group」をクリックします。

設定名	設定値
Choose a target type	Instances
Target group name	任意
Protocol	HTTP
Port	80
他の項目	特に変更しない

「Next」を押し、次の画面でNAFServerを選択し、「Ports for the selected instances」が80であることを確認し、「Include as pending below」をクリックします。

ターゲットグループが作成できたらロードバランサーを作っていきます。

AWSのメニューからEC2のサービス画面に遷移します。左メニューの「ロードバランシング」>「ロードバランサー」のメニューに遷移し、「Create load balancer」をクリックし、次の画面で「Application Load Balancer」を選択します。

設定名	設定値
Load balancer name	任意
Scheme	Internet-facing
IP address type	IPv4
VPC	EC2が配置されているVPC（EC2の概要から見ることができます）
Mappings	EC2が配置されているAZ 調べるのが面倒であれば全部チェックでもOK
Security groups	EC2作成時に作ったHTTP, HTTPSアクセスを許可したセキュリティグループ
Listeners and routing	Protocol HTTPS, Port 443, さっき作ったターゲットグループ
Secure listener settings Default SSL/TLS certificate	「From ACM」の右のプルダウンからCertificate Managerで発行したパブリック証明書を選択

上記の設定をしたら「Create load balancer」をクリックしALBを作ります。

HTTPSセットアップ④ Route53で通信経路の設定

ドメインへの通信をロードバランサーにルーティングします。

AWSのメニューからRoute53のサービス画面に遷移します。左メニューの「ホストゾーン」に遷移し、先ほど取得した「ドメイン名」をクリックします。

「レコードを作成」をクリックし、以下の設定でレコードを作成します。

設定名	設定値
レコード名	空白
レコードタイプ	A
エイリアス	トグルボタンを有効化（すると次のプルダウンメニューがでる）
トラフィックのルーティング先	Application Load Balancer と Classic Load Balancer へのエイリアス
リージョンを選択	ALBのあるリージョンを指定
ロードバランサーを選択	さっき作ったALBを指定

ドメインにHTTPSでアクセスし、Networked-Aframeのトップページが出れば終了です。ここまでやれば、メタバース空間内で他の人と音声やカメラを使って会話できます！

みんなで入ってみた

デフォルトで用意されている「Video Streaming」の部屋に入るとこんな感じです。アバターの顔がカメラ映像になります。

最後に

ここまで読んでいただきありがとうございました！また、実際に作ってみた方はお疲れ様でした。長めの手順記事を書くのに慣れていないためわかりづらかったらスミマセン。メタバースの分野は技術的にもアイデア的にもまだまだ伸びしろがありそうだなと感じています。

個人的には参加者がボタンを押すと発表者の周りで花火が上がる、などのインタラクティブなメタバースミーティングを実装できたらいいなと考えています。また何か面白いことができるようになったら記事にします。