Photon Voiceを試してみる

:::note warn
この記事は2021年8月18日に弊社ブログにて公開されたものを移植したものです。
古い情報が含まれている可能性がありますのでご注意ください。
:::

## アプリ実行環境
* Unityバージョン　2020.3.14f1(LTS)
* Photon Realtime
* Photon Voice v2

## Photon側での準備
1. 必要なアプリケーションを作成する
1. アプリケーションIDの取得

以上の2点となります。早速スクリーンショットと共に、手順を紹介していきます。

### アカウント作成
Photonを利用するためにまずアカウントを作成します。メールアドレスを入力し、登録ボタンを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3904804/0950ea91-3d74-4048-1751-79b4898b96a0.png)

入力したメールアドレスに確認メールが届いているので、リンクをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3904804/95a47ebf-7823-bef1-94fe-f1e972a935ef.png)

パスワード設定を求められるので、設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3904804/d8eed0a4-3547-62f4-39e2-0717b6591d84.png)

### アプリケーションの作成
アカウント作成が終わると作成完了画面になるので、ダッシュボードを開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3904804/a4c84bee-c08d-7802-252d-d760b88838cb.png)

「新しくアプリを作成する」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3904804/0fdb6c89-66b4-b9bb-ec35-103307a2fdce.png)

Photonの種別をPhotonRealtimeに設定します。アプリケーション名を入力し、作成するを押下します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3904804/dfebc2ac-7b98-528e-61d6-aefd512c0610.png)

もう一度、新しいアプリケーション作成を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3904804/97befb29-25ea-a6ce-457c-01b244e28d8b.png)

Photonの種別をPhotonVoiceにします。アプリケーション名を入力し、作成するを押下します。
作成したREALTIMEとVOICEのアプリケーションが表示されています。Unityでの設定でアプリケーションID使用するため、それぞれのIDをメモ帳に控えておきます。
以上でPhoton側での準備は終了です。

## Unity側での準備
Photon側での準備が整った所で、次はUnity側の準備に入ります。ここからはPhotonVoiceのチュートリアルに沿って進めていきますので、同時にご確認ください。

### プロジェクトの作成
最初にプロジェクトを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3904804/d674e95a-5cda-797b-f382-2a598346f123.png)

テンプレートは3Dを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3904804/ab60dcdb-3c54-1adb-a2e4-e7efb416206b.png)


### Unityアセットストアからインポート
[Unityアセットストア](https://assetstore.unity.com/)にログインをし、[Photon Voice 2](https://assetstore.unity.com/packages/tools/audio/photon-voice-2-130518)を入手します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3904804/9911a4ea-ead2-3716-4815-a92248428dd5.png)

:::note warn
アセットストアには前バージョンである[Photon Voice Classic](https://assetstore.unity.com/packages/tools/audio/photon-voice-classic-45848)が存在します。今回はPhoton Voice2を利用するので、間違えないようにしてください。
前バージョンのチュートリアルを確認したい方は[こちら](https://doc.photonengine.com/ja-jp/voice/v1/tutorials/pun-voice-demo)をご覧ください。
:::

OpenUnityボタンを押下し、Unityのprojectへ移動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3904804/7579c2c2-01e9-daef-5a03-e375bfbcaacc.png)

PackageManagerが表示されるので、右下のImportを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3904804/69648609-6ffa-de26-9332-64451f1fea11.png)

すべてにチェックが入っていることを確認してInportを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3904804/a6e0ac41-6416-456f-436f-4f4a464ba7e6.png)

先ほどメモしていたRuntimeのアプリケーションIDを入力し、SetupProjectを押下しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3904804/ede77721-87ed-9c8c-334e-25289805332b.png)

無事にセットアップされたら閉じます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3904804/775c7196-1d1f-461e-97ba-e69d53c89014.png)

### デモシーンの設定
今インポートした中に、Photon Voice 2のデモシーンがあるので開きます。
Assets>Photon>PhotonVoice>Demos>DemoVoicePun-Scene　がデモシーンです。
デモシーンが開けたら、PhotonServerSettingsの設定をします。
Windowsタブの【Photon Unity Networking】→【Highlight Server Settings】を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3904804/0ad6811e-7417-6ded-8a07-5875e6d9102d.png)
InspecterのServer/Cloud settingを開きます。

App ID PUNにRealtimeのアプリケーションIDを、App ID VoiceにVoiceのアプリケーションIDを入力します。App ID PUNには先ほど入力したIDが入力されているはずなので、されていない場合のみ入力で問題ありません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3904804/78f0b5b8-6ad3-6f46-0943-296f9084b557.png)

### アプリケーションのビルド
以上でUnityでの設定が終わりました、ここからはビルドをしていきます。Fileタブの【Build settinngs】を開きます。Buildを押下し、ビルド先のフォルダを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3904804/38be4a5b-69b7-3661-d848-421b893e82f2.png)

### アプリケーションの実行
ビルド後、選択したフォルダにexeファイルができているのを確認し、実行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3904804/7f55fa58-b6ba-ba72-1c50-0aef60363d00.png)

実行後、以下のような画面が出てきたら無事にビルドされています。それでは実際にボイスチャットを体験してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3904804/e15d9e24-8eee-590b-1116-779d764756f5.png)
アプリを複数人で実行すれば会話ができますが、今回は一人しかいないため **DebugEcho** にチェックを入れます。

DebugEchoは以下の機能となっています。
> DebugEcho: この設定は、クライアントが1人でVoiceアプリケーションをテストする場合に便利です。 オンにした場合、サーバーからオーディオストリームが元の送信者に送り返されます。 デバッグ目的でのみの使用となります。
-- <cite>[設定](https://doc.photonengine.com/ja-jp/voice/current/tutorials/pun-voice-demo#section-4)</cite>

自分の声がサーバーを通し自分に返ってくるため、設定が問題なくできているかが確認できます。スピーカーアイコンと、吹き出しアイコン(黄色四角)が両方表示されていると、録音と再生ができています。
またデバックモード(青四角)にチェックを入れると様々な情報を確認することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3904804/ee2f99ba-427a-0df6-0b90-956aee0ef65b.png)
デバックモードの内容は下記のとおりです。
> デバッグモード
> DebugVoice切り替えがオンの場合は、Debug Modeが有効化されます。
> このモードでは、画面左上の隅に次の追加情報が表示されます：
> 
> ・PUNクライアントの状態
> ・Voiceクライアントの状態
> ・ボイスの振幅の平均とピーク
> ・使用可能なマイク端末のリストおよび、使用可能なマイクがない場合は警告 一般的には、ほとんどの端末にマイクが1つ搭載されています。
-- <cite>[デバッグモード](https://doc.photonengine.com/ja-jp/voice/current/tutorials/pun-voice-demo#section-10)</cite>



## 感想
無事にデモシーンからアプリをビルドし、ボイスチャットを体験することができました。気になるノイズや大きな遅延もありませんでした。
ボイスチャットの沼は深そうなのでどんどん沈んで学んでいこうと思います。