Amazon IVSとAmazon Chime SDKでライブストリーミングチャットアプリケーションを作る方法

低遅延のライブストリーミングの構築やチャット機能の実装は、インタラクティブな体験を求めるお客様からの共通の要望です。例えば、UGC（ユーザー生成コンテンツ）を使ったライブ配信アプリを構築したいと考えているお客様は、ユーザー間の交流を深めるためにチャットを求めています。ライブコマースサービスでは、販売者はライブストリーミング中の製品チャットの問い合わせに対応する必要があり、教育分野では、教師が仮想教室でQ&Aを通じて学生と交流したいと思うかもしれません。

Amazon Chime SDKにAmazon Interactive Video Service (Amazon IVS)を統合することで、お客様は、フルマネージドで低遅延の、チャットを組み込んだインタラクティブなライブ放送イベントを構築することができます。

Amazon IVSは、低遅延でインタラクティブなライブストリーミング体験を迅速に構築するのに役立ちます。Twitchの技術をベースにしたAmazon IVSチャンネルは、完全に管理された低遅延のライブストリームであり、時間指定のメタデータAPIを使用して視聴者の体験を向上させます。

Amazon Chime SDKは、ライブストリーミング用に強化されたチャット体験の構築をサポートします。メッセージング機能であるAmazon Chime SDK for messagingのリリース以来、お客様は非同期、スケーラブル、永続的、インタラクティブなチャット体験やチャット機能を従量課金で構築できるようになりました。

このブログでは、Amazon IVSとAmazon Chime SDKのメッセージングが、ライブイベントのシナリオでどのように使用できるかを探ります。

ソリューション概要

このデモではAmazon IVSとAmazon Chime SDKを使って、インタラクティブ性のある魅力的なライブストリーミング体験を構築する方法を紹介しています。このデモは教育目的のみであり、本番での使用はできません。

このデモではホストが迅速にIVSチャンネルを動的にスピンアップし、ライブストリーミングを開始する方法を示しています。視聴者はライブストリーミングを視聴し、スケーラブルなチャットを使って他の視聴者と対話することができます。

注：このデモをデプロイしこの記事で作成したデモからのトラフィックを受信すると、AWSの料金が発生する可能性があります。

このソリューションには次の3つのコンポーネントが含まれます。

このデモは開発者がスケーラブルなフルスタックWebおよびモバイルアプリケーションを構築するために使用できるサービスであるAWS Amplifyを使用して構築されています。フロントエンドは、ユーザーインターフェイスを構築するためのJavascriptライブラリであるReactフレームワークを使用して構築され、AmazonIVSプレーヤーSDKおよびメッセージング用のAmazonChimeSDKと統合されます。バックエンドは、Amazon API Gateway、サーバーレスアプリケーション用のAWS Lambda、認証機能用のAmazon Cognito、データベース用のAWSAppSyncで構成されています。
Amazon IVSは、事前ウォーミングやスピンアップ時間を使用せずに、低遅延でグローバル規模のライブチャネルを作成するために使用されます。さらにタイムドメタデータにより、ストリームの待ち時間や地理的な場所に関係なく、すべての視聴者がビデオストリームで同時にメタデータペイロードを受信することが保証されます。
このデモではAmazon Chime SDKを使用して、開発者がユーザーのコミュニティをスケーラブルで永続的なメッセージングで接続できるようにします。ユーザーはAmazon Chime SDKを使用して、メッセージの送信、メッセージ履歴の取得、メッセージの編集、メッセージの削除、保存されたメッセージの保持ポリシーの設定、チャットのストリーミングエクスポートなどのさまざまなアクションを実行できます。

ソリューションウォークスルー

前提条件

このウォークスルーを始める前に、以下の準備を行ってください。

管理者ユーザー権限のあるAWS アカウント
AWS Cloud9 環境
OBS studioのダウンロードとインストール

デモアプリケーションのデプロイ

このセクションでは、デモアプリケーションをご利用のアカウントでセットアップする方法を提供します。
大まかなステップは次の通りです。

AWS CloudFormationテンプレートでAmazon IVS、Amazon Cognito、Amazon Chime Appを使ったバックエンドリソースをセットアップします。
AWS Amplify デモアプリケーションのデプロイ
デモアプリケーションの機能を確認

Step 1. バックエンドのデプロイ

AWS CloudFormationテンプレートを使って、バックエンドリソースのデプロイを行います。

AWS Management Consoleでメインのアカウントへログインし、リージョンをus-east-1 (N. Virginia)に変更
右のボタン”Launch Stack”をクリック
次の情報を入力
– Stack name : CloudFormation スタックのユニーク名
– ChimeRegion : us-east-1
– DemoName : output resourcesのユニーク名：例 IVSChatDemoApp
– IVSRegion : us-east-1
注: CloudFormationをデプロイする前に、Amazon IVSとAmazon Chime SDK for messagingが利用可能なリージョンか確認してください。
スタックオプションの設定のページでNextを選択
レビューページで「I acknowledge that AWS CloudFormation might create IAM resources」 にチェックし「Create」をクリック
次の7つのoutputが生成されることを確認 – IvsCreateApiEndpoint, IvsDeleteApiEndpoint, IvsMetaInputApiEndpoint, appInstanceArn, cognitoAppClientId, cognitoIdentityPoolId, cognitoUserPoolId. 注: これらのoutputは、次のステップでデモアプリの設定で利用します。Note these values for the demo app configuration in the next step.

Step 2. プロビジョンされたバックエンドでデモアプリを設定する

AWS AmplifyでバックエンドリソースをReactデモアプリケーションに自動実行します。

AWS Management Consoleへログイン
Cloud9環境で Open IDEをクリック
GitHubからプロジェクトをクローン
git clone https://github.com/aws-samples/amazon-ivs-chime-messaging-ugc-demo.git
src/config/apiConfig.js を開き、CloudFormationスタックのアウトプットからIvsCreateApiEndpoint, IvsDeleteApiEndpoint, IvsMetaInputApiEndpoint 値をペースト
src/config/chimeConfig.jsを開き、CloudFormationスタックのアウトプットからappInstanceArn値をペースト

Step 3. AWS Amplifyのインストールと設定

AWS Amplifyは、ウェブアプリケーションを迅速かつ効率的に設定およびデプロイするのに役立ちます。 AWS Amplifyを使用してバックエンドリソースをインポートおよび管理することも可能です。

Cloud9ターミナルで:

ソースのルートフォルダへ移動
次のコマンドでAmplify CLIをインストール : $ npm install -g @aws-amplify/cli
次のコマンドでAmplify CLIの設定を開始 : $ amplify configure
ガイドに従い、設定を完了する
次のAmplify CLIコマンドで依存関係をインストールし、プロジェクトを初期化する : $ amplify init
ガイドに従い、設定を完了する
次のAmplify CLIコマンドでAmazon CognitoをAmplify プロジェクトにインポートする : $ amplify import auth
次の設定を行う
– 「Cognito User Pool and Identity Pool」を選択
– 「us-east-1」を選択
AWS AppSync を既存のスキーマで設定 : $ amplify add api
次の設定を行う
– GraphQLを選択
– API名を入力し、Amazon Cognito Poolを選択
– 「No, I’m Done」を選択し、「Yes」を入力
– ./src/config/schema.graphql に記入
AmplifyリソースをAWSアカウントにプッシュし、ローカルでAWS AppSyncコードを生成　: $ amplify push
次の設定を行う
– Yes を入力し、次の進む
– Yes を入力し、GraphQL APIを生成
– JavaScript を選択
– Yes を選択し、全てのセクションで「press Enter」を選択

デモアプリケーションを実行

上述で設定した環境でデモアプリケーションを実行します。

次のコマンドで依存関係をインストール : $ npm install
次のコマンドでデモをローカルで実行 : $ npm start
Cloud9メニューバーで「Preview > Preview Running Application」を選択し、ブラウザでアプリケーションを実行
ホームページでデモアプリケーション用のユーザーを登録し、サインインする
メインメニューで全てのチャンネルのリスト、新規チャンネルの作成が可能
「Create My Channel」を選択し新規チャンネルを作成。チャンネルタイトルを入力しその他はデフォルトのままに
チャンネル生成ご、リストされているか確認
My Channels > Channel Infoで、INGEST ENDPOINT とChannel STREAM KEYを取得
OBSアプリケーションからライブストリーミングを開始する
settings > Stream tabから「service as Custom..」を選択しINGEST ENDPOINT 、Channel STREAM KEY を入力する
「Start Streaming」をクリックしストリーミングを開始
注: Amazon IVS向けのOBSの設定は、こちらのblogも参照ください。
チャンネルメニューへ戻り、「START」ボタンをクリックし、ユーザーのチャンネルへ参加を開始
これでライブストリーミングを行いながら、参加ユーザーとチャットをできる環境ができました。

クリーンナップ

このデモを今後ご利用されない場合は、以下の手順で作成された全てのAWSリソースを削除することで、追加費用の発生を防ぐことができます。

デモアプリケーション内の全てのチャンネルを削除
CloudFormationスタックを削除
Cloud9環境を削除

おわりに

このブログではライブストリーミングとチャットを使用するアプリケーションの構築方法を紹介しました。Amazon Chime SDKのメッセージング機能とAmazon IVSを使えば、お客様は低遅延のライブストリーミングチャンネルを作成したり、スケーラブルなチャットをアプリケーションに組み込むことができます。Amazon Chime SDKのメッセージング機能の使用方法については、以下のリンクを参照してください。

参考リンク

AWS Media Services
AWS Media & Entertainment Blog　(日本語)
AWS Media & Entertainment Blog　(英語)

AWSのメディアチームの問い合わせ先: awsmedia@amazon.co.jp
※ 毎月のメルマガをはじめました。最新のニュースやイベント情報を発信していきます。購読希望は上記宛先にご連絡ください。

翻訳は BD山口、SA小林が担当しました。原文はこちらをご覧ください。

Amazon Web Services ブログ