はじめに

AWS では、Amazon Chime SDK と呼ばれるサービスがあります。ビデオ・音声・画面共有といったリアルタイム通信機能を実現するためのサービスです。フロントエンド向けの SDK やバックエンドの Chime Media Services などが含まれています。

Chime SDK に含まれるコンテンツシェア機能で、手元のノートPC画面などの映像を共有することが出来ます。一方、ライブ配信で使われるような RTMP は Chime SDK では対応していません。

そこで、RTMP で映像を送信するために、Chime SDK と IVS を組み合わせた AWS Sample が公開されています。
https://github.com/aws-samples/amazon-ivs-chime-web-demo

RTMP の配信環境が既に存在しているような状況では、Chime SDK と IVS を組み合わせることで、いままでのやり方を活かすことが出来るはずです。この AWS Sample がどういったことが出来るのか確認をしてみたので、手順などを残しておきます。

できること

AWS Sample で独自に作成されている Web UI が提供されており、デモ上で簡単に Chime SDK と IVS を使った通話画面を利用できます。

名前やミーティングIDを入れて、Create room を押すと、、、

次の画面に切り替わり、Chime SDK によるカメラや音声での通話が出来ます。また、IVS によってRTMP で配信されている映像が確認できます。

それでは、この AWS Sample をデプロイする手順を紹介していきます。

デプロイするための環境準備

デプロイのために、いくつかツールが必要です。手元のノートPCや EC2 などで、以下のソフトウェアがインストールされている環境を準備します。

Git
SAM CLI
Node.js

Git Clone

以下の GitHub で公開されているデモ用のサンプルアプリを利用していきます。
https://github.com/aws-samples/amazon-ivs-chime-web-demo

git clone を実行して、手元の環境にクローンします。

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

S3 Bucket の作成

デプロイに SAM を使う関連で、デプロイ作業用の S3 Bucket を適当に準備します。

amazon-ivs-chime-web-demo-bucket01

REST API 部分の構成

SAM で Build

git clone してきた Repository の中から、serverless のディレクトリに移動します

cd serverless/

中身はこんな感じです。

> ls -la
total 24
drwxr-xr-x 3 ec2-user docker    76 Dec 21 00:06 .
drwxr-xr-x 5 ec2-user docker   207 Dec 21 00:06 ..
-rw-r--r-- 1 ec2-user docker    14 Dec 21 00:06 .gitignore
drwxr-xr-x 2 ec2-user docker    22 Dec 21 00:06 lambda
-rw-r--r-- 1 ec2-user docker  5422 Dec 21 00:06 README.md
-rw-r--r-- 1 ec2-user docker 10270 Dec 21 00:06 template.yaml

sam コマンドで Lambda Functions をビルドし、ビルド結果を指定の S3 Bucket に出力します。

sam package \
--template-file template.yaml \
--output-template-file packaged.yaml \
--s3-bucket amazon-ivs-chime-web-demo-bucket01

実行例

Uploading to fd0854eedb8135b45e47bd564bb56f37  3507 / 3507  (100.00%)
File with same data already exists at fd0854eedb8135b45e47bd564bb56f37, skipping upload
File with same data already exists at fd0854eedb8135b45e47bd564bb56f37, skipping upload
File with same data already exists at fd0854eedb8135b45e47bd564bb56f37, skipping upload
File with same data already exists at fd0854eedb8135b45e47bd564bb56f37, skipping upload
File with same data already exists at fd0854eedb8135b45e47bd564bb56f37, skipping upload
File with same data already exists at fd0854eedb8135b45e47bd564bb56f37, skipping upload
File with same data already exists at fd0854eedb8135b45e47bd564bb56f37, skipping upload
File with same data already exists at fd0854eedb8135b45e47bd564bb56f37, skipping upload

Successfully packaged artifacts and wrote output template to file packaged.yaml.
Execute the following command to deploy the packaged template
sam deploy --template-file /home/ec2-user/temp/amazon-ivs-chime-web-demo/serverless/packaged.yaml --stack-name <YOUR STACK NAME>


SAM CLI update available (1.36.0); (1.33.0 installed)
To download: https://docs.aws.amazon.com/serverless-application-model/latest/developerguide/serverless-sam-cli-install.html

S3 にビルドされたものが格納されていることがわかります。

SAM で Deploy

次のコマンドで、Lambda Function を Deploy します。

sam deploy \
--template-file packaged.yaml \
--stack-name amazon-ivs-chime-web-demo \
--capabilities CAPABILITY_IAM

自動作成されたもの

sam deploy コマンドで、AWS のリソースが各種自動生成されます。いくつか重要そうなものを抜粋します。

Lambda Function
API Gateway
DynamoDB

Lambda Function

Lambda Functions が 9 個自動生成されています。

9個の Lambda Function のソースコードはすべて同じです。各関数ごとに、呼び出される Handler の定義が異なっており、呼び出される関数によって挙動が変わる仕組みになっています。

API Gateway

API Gateway が2個作られています。REST と WebSocket で1個ずつ生成されています。

DynamoDB Table

3 個の DynamoDB Table が自動生成されています。参加者(Attendees) やミーティング(Meetings) などを管理しているように見えます。

CloudFormation の Output

SAM Deploy の裏側で CloudFormation が動いており、それぞれ API Gateway の URL が出力されています。後ほど使うためメモっておきます。

https://aecufl5u4a.execute-api.ap-northeast-1.amazonaws.com/Prod/
wss://ivbgk8ez24.execute-api.ap-northeast-1.amazonaws.com/Prod

WebUI 部分の構成

React で作成されたフロントエンド部分です。git clone でクローンしてきたディレクトリから amazon-ivs-chime-web-demo/web-ui に移動します。

cd web-ui/

npm install で必要なものをインストールします。

npm install

Web UI のフロントエンドから、API Gateway を呼びだすために、src/config.js ファイルを編集します。REST API 部分をデプロイしたときに、CloudFormation からメモっておいた文字列を持ってきます。下記の2個を編集します。それ以外はデフォルトのままです。

CHIME_ROOM_API
CHAT_WEBSOCKET

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://fcc3ddae59ed.us-west-2.playback.live-video.net/api/video/v1/us-west-2.893648527354.channel.DmumNckWFTqz.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;

余談ですが、DEFAULT_VIDEO_STREAM はデフォルトで既に準備されているプレイバックファイルの指定があります。おそらく、AWS Samples を作った側が準備したものだとおもいます。これを変更することで、自分たちで作った IVS を活用できます。

ここまでくると準備完了です。npm start で手元の環境で React を起動しましょう。

npm start

npm start が完了すると、次のURLで画面を表示できます。

ローカルで動作確認

画面が表示されるので、適当に名前とミーティング ID を入れて、Create Room を押します。

会議用の画面に切り替わり、デフォルトで用意されている映像を確認できます。独自の IVS に変更することで、このあたりも好きにカスタマイズできます。

まとめ

AWS Sample で公開されている、Chime SDK と IVS を組み合わせるサンプルを動かしてみました。Chime SDK によるカメラ・音声通話に加えて、IVS を使ったライブ配信を併用できます。RTMP を使った配信に慣れてる場合は、こちらのサンプルを参考にしつつ実装を進めてみると良いと思います。

参考URL