夜風のMixedReality

xRと出会って変わった人生と出会った技術を書き残すためのGeekなHoloRangerの居場所

MixedReality WebRTCを理解する その② sampleプロジェクトの作成

本日はMixedReality-WebRTCを学んでいきます。

MixedReality-WebRTCはMRTKと同様にMicrosoftによって提供されているパッケージでMixedRealityデバイスにおいてWebRTCを実装するためのパッケージになります。

redhologerbera.hatenablog.com

今回は以下のドキュメントにのっとってUnityプロジェクトを作成していきます。

microsoft.github.io

〇Unityプロジェクトの作成

①新規でUnityプロジェクトを作成します。(余談ですがUnityHub 3.0.1にアップデートしてUIが変わったため慣れるまで使いづらさを感じますね)

f:id:Holomoto-Sumire:20220206093252p:plain

 次にMRTKを導入します。 MRTKはMixedRealityFeatureToolsを使用することで一括で管理することができます。

②MixedRealityFeatureToolsを起動します。

f:id:Holomoto-Sumire:20220206093652p:plain

 MixedRealityFeatureToolsの使い方などは過去の記事を参考にしてください。

redhologerbera.hatenablog.com

③以下のツールを導入します。

・MixedRealityToolkit.Examples

・MixedRealityToolkit.Extentions

・MixedRealityToolkit.Faundations

・MixedRealityToolkit.Tools

・MixedReality OpenXR Plugin

・MixedReality-WebRTC

・MixedReality-WebRTC Examples

f:id:Holomoto-Sumire:20220206093857p:plain

このうち[MixedReality-WebRTC]がコアなパッケージです。

④最後にUnityのシーンでMRTKの設定を行います。

f:id:Holomoto-Sumire:20220206103006p:plain

〇ピアコネクションの作成

新規でゲームオブジェクトを作成し[PeerConnection]コンポーネントを加えます。ここでは[PeerConnection]という名前を付けました。

f:id:Holomoto-Sumire:20220206103255p:plain

〇Node-dssの導入実行

WebRTCは通常ブラウザを挟んで通信を行いますが今回はNode.jsを使用してサーバーを建てます。

Node.jsは以下のサイトから入手できます。

nodejs.org

ダウンロード後にインストーラーを実行します。

次にNode-dssを使用します。

Node-dssWebRCT用のツールです。筆者も詳しくは学べていないのですがNode.jsをWebRTCで利用しやすくするためのツールといったところでしょうか?

github.com

上記のリンクからリポジトリを入手します。

ダウンロードしたディレクトリから以下のコマンドを実行します。

set DEBUG=dss*
npm install
npm start

筆者はLinaxあまり理解していないのですがこちらはGitBushでも実行できます。

f:id:Holomoto-Sumire:20220206181800p:plain

コンソールウィンドウを閉じずにUnityへ戻ります。

〇シグナラーの作成

新規でゲームオブジェクトを作成し[NodeDssSignaler]コンポーネントを加えます。ここでは[Signaler]という名前を付けました。

f:id:Holomoto-Sumire:20220206103751p:plain

[NodeDssSignaler]コンポーネントの[PeerConnection]に[PeerConnection]オブジェクトをドラッグアンドドロップします。

f:id:Holomoto-Sumire:20220206104109p:plain

〇WebcamSourceを加える。

新規でゲームオブジェクトを作成し[WebcamSource]コンポーネントを加えます。ここでは[LocalVideoPlayer]という名前を付けました。

f:id:Holomoto-Sumire:20220206104727p:plain

〇マイク環境の設定

新規でゲームオブジェクトを作成し[MicrophoneSource *]コンポーネントを加えます。ここでは[LMicrophoneSource **]という名前を付けました。

f:id:Holomoto-Sumire:20220206104928p:plain

〇ビデオプレイヤーの追加

[LocalVideoPlayer]オブジェクトに[MeshRenderer]、[MeshFilter]コンポーネントを加え[MeshFilter]のMeshにはQuad、[MeshFilter]のmaterialには[YUVFeedMaterial]をアタッチします。

f:id:Holomoto-Sumire:20220206105315p:plain

[YUVFeedMaterial]マテリアルはMixedRealityFeatureToolsでツールをインポートした場合Package内に存在します。

次に[VideoRenderer]コンポーネントを配置します。

f:id:Holomoto-Sumire:20220206105757p:plain

この状態でプレイボタンを押すとWebカメラの映像が描画されるようになります。

以上でプロジェクトが完成しました。

次回実機で見ていきます。