Chime SDK と IVS を組み合わせたサンプルを、Amplify Console でホスティング・独自IVSに変更してみた

# はじめに

[前回の記事](https://qiita.com/sugimount-a/items/5ea0cb12e9e6007bd35a) では、Chime SDK と IVS を組み合わせた AWS Sample をローカル環境上で動かしました。今回の記事では、この AWS Sample を少し発展させて次の2点を行う手順を紹介します。

- Amplify Console で Web UI をホスティング
- 独自に作成した IVS を利用



# Amplify Console でホスティングする

Amplify Console と呼ばれる、静的なウェブサイトをホスティングしてくれるサービスがあります。ホスティング機能のほかに、GitHub や CodeCommit にプッシュしたことをトリガーに自動デプロイしてくれる、パイプラインが提供されているのが特徴的です。パイプラインを自分で作る必要がなく、負担を軽減できます。

前回の記事ではローカル環境で Web UI を動かしていたので、Amplify Console でホスティングしていきます。前回 git clone した中に含まれる`/web-ui` のディレクトリを、そのまま GitHub に Push します。

```
cd project/web-ui
cp -r * ../../amazon-ivs-chime-web-demo-webui-amplify-console/
```



GitHub に Push する

```
git init
git add -A 
git commit -m "first commit"
git add origin https://github.com/Sugi275/amazon-ivs-chime-web-demo-webui-amplify-console.git
git push
```



Push が終わったあとに、マネージメントコンソールの Amplify ページで Host web app を選択します。

![image-20211224212848864.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1002774/d896f495-cf99-21c3-70cc-f541b69ff5e7.png)



今回は、GitHub を使ったので、GitHub を選択して Continue を押します。

![image-20211224212926582.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1002774/d9fef3e2-5e13-8d1d-6f67-7f5f769b014e.png)



GitHub 上の 自分の Repository を選択します。

![image-20211224213004314.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1002774/d3423fac-c17e-4547-c01a-c9b8abdc7094.png)



このまま Next

![image-20211224213044661.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1002774/459defdb-3303-7ce6-f115-cba7e8299b54.png)



Save and deploy を押します。

![image-20211224213104596.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1002774/15a2f4c7-301c-a313-278a-b0b53760ce8c.png)



自動 Deploy が走ります。一定時間まちます。

![image-20211224213133464.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1002774/d753342a-b7ac-21c4-0a1a-03273a3987c2.png)



一定時間後、Deploy が完了になります。URL をクリックすると、

![image-20211224213410936.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1002774/49bb65e9-8a5e-6e60-4282-89aa18e29e72.png)



React で作成された Web UI が表示されます。

![image-20211224213508426.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1002774/f79234c4-3ebb-6dc2-ad82-de0e29c4045a.png)



# IVS の Channel を作成

自分で作った IVS の画面を組み込みたいため、IVS Channel を作成します。Create Channel を押します。

![image-20211224221318702.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1002774/66571bea-9859-2da9-991b-9a2be3114187.png)



適当な名前を入れます

![image-20211224221557979.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1002774/d60e50f9-94e3-8bb3-7197-568048d7417f.png)



このまま Create Channel を押します

![image-20211224221619103.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1002774/8487a440-2182-8420-a713-2f11483ee858.png)



Channel が作成されました

![image-20211224222632498.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1002774/487fc034-af00-f95c-376f-d97c112e2375.png)



Web UI の Repository に含まれている`src/config.js` を編集します。

- DEFAULT_VIDEO_STREAM : 作成した IVS の `Playback URL` を指定

```
export const BASE_HREF = '';

// API endpoint for retrieving the attendees list, joining the room, and ending the room
export const CHIME_ROOM_API = 'https://aecufl5u4a.execute-api.ap-northeast-1.amazonaws.com/Prod/';

// Chime-SDK allows up to 16 attendee videos
export const CHIME_ROOM_MAX_ATTENDEE = 16;

// Default video stream to play inside the video player
export const DEFAULT_VIDEO_STREAM =
  'https://4d1c106fb53f.us-west-2.playback.live-video.net/api/video/v1/us-west-2.xxxxxxxxxxxx.channel.3Lw9chothhUi.m3u8';

// Default Chat websocket link
export const CHAT_WEBSOCKET = 'wss://ivbgk8ez24.execute-api.ap-northeast-1.amazonaws.com/Prod';

// Chime-SDK logging level: INFO, WARN, ERROR, DEBUG
export const CHIME_LOG_LEVEL = 'WARN';

// Chime-Web UI debugging logging: true / false
export const DEBUG = false;
```



Amplify に Push すると、反映されます。



# OBS

自分で作成した IVS に RTMP に OBS で配信をしてみます。設定を押します。

![image-20211224222922000.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1002774/968bbb1d-366e-6bd7-430d-1e48a5243493.png)



IVS Channel の詳細画面に表示されている、Ingest Server と Streaming Key を指定します。

![image-20211224223030467.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1002774/18528282-7752-9a3d-de5c-a17bc3979c58.png)



適当に時計画面を配信するように設定して、配信開始を押します。

![image-20211224223145252.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1002774/42818381-82c7-a0e0-52e9-806445885341.png)



右下がグリーンになっているので、配信できていることがわかります。

![image-20211224223227188.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1002774/4449a0fe-1a9d-e19b-327a-211c81e2298b.png)



# 動作確認

Amplify Console でホスティングしている Web UI にアクセスします。

![image-20211224223248129.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1002774/c15c15d7-eb30-971f-d2a8-a90c547cdb8d.png)



すると、Chime SDK を使った通話画面に、独自の IVS Channel を表示することが出来ました。

![image-20211224223421447.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1002774/952cfd5f-27b8-a0b9-46d3-9ecd4397e414.png)



# 参考URL

https://github.com/aws-samples/amazon-ivs-chime-web-demo