ReactとAmazon IVSを使用して魅力的な動画フィードアプリを構築する方法

はじめに

ライブ動画配信は人々を魅了するコンテンツとしての新しいスタンダードになりましたが、動画の専門知識を持たない開発者はいざ配信を開始する際にしばしば苦労していると聞きます。ライブ動画の取り込み、処理、パッケージング、配信、再生を、優れたユーザーエクスペリエンスで管理することは大変な作業です。

Amazon Interactive Video Service (Amazon IVS)は視聴者の場所に関わらず、低レイテンシーのライブ動画を配信する際の複雑な技術的課題に対応できるよう設計されています。Amazon IVSを使用すると人々を魅了するようなインタラクティブな動画エクスペリエンスを作り出すことに集中できます。

この記事では、自動再生するライブ動画ストリームの最新のスクロールフィードを、Amazon IVSとReact (ユーザーインターフェイスを構築するためのJavascriptライブラリ)を使用して作成する方法について説明します。この実装では、人気ソーシャルメディアアプリのようなトレンドの先端を行くインターフェースを確認できるかと思います。

こちらからこのプロジェクトのライブデモを見ることができます。さあ始めましょう！

この記事では、以下をカバーします：

React Webアプリケーションの設定 (所要時間: 15分程度)
あなたのAmazon IVSストリームを利用する方法 (所要時間: 5分程度)

始める前に

このデモウェブアプリケーションは、Amazon IVSを使用して、どのようにしたら自動再生するライブストリームを人々を魅了するソーシャルフィードエクスペリエンスにできるか、その構築方法について示しています。このプロジェクトは、教育を目的としており、本番環境での使用には適していません。このデモコードは参照用に使用して頂き、本番環境のベストプラクティスに従ってください。

現在本番環境がない場合、またはベストプラクティスから知識を得たい場合でも、このガイドを参照して頂き、AWS AmplifyでフルスタックのReactアプリケーションを構築することができます。

前提条件

Node.js (Node.jsのインストール)
Yarn (Yarnのインストール)
オプション: AWS Command Line Interface (AWS CLI version 2のインストール)

以下の手順ではmacOSでのプロセスを説明しますが、前提条件をサポートするその他のオペレーティングシステムでもこの手順を完了することができます。

チュートリアル

ステップ1: リポジトリのクローンを作成

まず、任意の方法でGitHubにアクセスし、Amazon IVS Reactフィードアプリデモのソースコードのクローンを作成します。以下の手順では、macOSのターミナルアプリを使用して作成する方法を説明します。

ターミナルアプリを開きます。
アプリコードがあるディレクトリに移動します。例：cd ~/git.
デモコードリポジトリのクローンを作成します。:

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

次に、ディレクトリを変更します

cd amazon-ivs-feed-web-demo

ステップ2: Yarnを使用してWebアプリケーションを準備

このチュートリアルでは、yarnを使用して全てのパッケージをダウンロードし、デモをローカルで実行します。

ターミナルセッションで次のコマンドを実行します: yarn

Command Line Interface using the “git clone” command for this project’s GitHub repository

注：すべての依存関係をダウンロードするには時間がかかることがあります。

ステップ3: Yarnを使用してWebアプリケーションをローカルで実行

これで全ての依存関係をダウンロードしました。Yarnを使用してローカルでデモを実行することができます。

yarn start

Yarnでブラウザタブを開きます。開けない場合http://localhost:3000に移動します

Web browser showing a large active video player above an inactive video player

これで完了です！次のセクションではこの動画視聴体験をカスタマイズします。

あなたのAmazon IVSストリームを使用しよう

Reactウェブアプリケーションでデフォルトのストリームを正常に使用することができたので、これらのサンプルストリームをあなたのものに置き換えることができます。既にご自身のアカウントでAmazon IVSチャンネルを利用している場合は、ステップ1を飛ばして、ステップ2より始めて頂いても構いません。

ステップ1: Amazon IVSチャンネルとストリームを作成

このデモには、いくつかのサンプルストリームが付属しています。ご自身のコンテンツを使用することで、どのような動画視聴となるか体験できるので、ご自身でお持ちのコンテンツの使用をお勧めします。以下のドキュメントを使用して、新しいAmazon IVSチャンネルを作成し、ストリーミングしてみてください。

チャンネルを作成: https://docs.aws.amazon.com/ivs/latest/userguide/getting-started-create-channel.html
ストリーミングソフトをセットアップ: https://docs.aws.amazon.com/ivs/latest/userguide/getting-started-set-up-streaming.html

ヒント: FFmpegを使用してローカルマシンまたはリモートのAmazon EC2インスタンスから動画ファイルをストリーミングする場合は、このスクリプトを使用し、ファイルの先頭にある変数をあなた自身のストリーム設定に変更します。スクリプトのFFmpegパラメータは、コスト削減のために「ベーシック」チャンネルタイプを使用するように設定されています。「Channel Type」セクションで、Amazon IVSチャンネルを「Basic」に必ず設定してください。ただしBasicチャンネルでは最大1.5Mbpsのビットレートと480pの解像度までしか使用できないことに注意してください。品質と解像度を高めたい場合はStandardチャンネルタイプを使用します。

ステップ2：アカウントでアクティブストリームを検索

再生URLはAmazon IVSコンソールで確認できます。「Live channels」ページに移動します。ライブチャンネルをクリックしてチャンネルの詳細ページに移動し、「再生設定」セクションを探します。そこでは「再生URL」を取得し、ステップ2で playbackUrl 変数を置き換えることができます。

Amazon IVS Console referencing a Channel’s Playback URL

オプション：必要な情報をすべてプログラムで入力する場合は、awscli ユーティリティを使用して、JSONのスニペットをpublic/feeds.jsonファイルにエクスポートします。

注：次のコマンドを実行して、正しいAWSアカウントを使用していることを確認します（または必要に応じて設定してください）
aws configure

設定に関するその他のヘルプについてはhttps://docs.aws.amazon.com/cli/latest/userguide/cli-chap-configure.htmlを参照してください。

次のコマンドを使用します:

aws ivs list-streams
使用するチャンネルのChannelArnをコピーします。それを--channel-arnで使用します。
aws ivs get-stream —channel-arn “<ARN from Step 1>” —output json

Command Line Interface showing the results of the AWS CLI list-streams and get-stream for IVS

ステップ3：feeds.jsonファイルを更新

次のように「Playback URL」を更新するか、オプションのawscli出力メソッドから“stream”: { … }をpublic/feeds.json ドキュメントにコピーします。

Code editor displaying a JSON document and highlighting the stream variable

「metadata」セクション内の変数を変更したり、エクスペリエンスをさらにカスタマイズしたりできます。

ステップ4: ファイルを保存して監視

ファイルを保存するとブラウザは自動的にリフレッシュされます。そうならない場合はブラウザを手動でリフレッシュしてください。

Web browser showing a large active video player above an inactive video player

ステップ5: 同様の設定を繰り返して、他のストリームも試してみる

他にもストリームがある場合はfeeds.jsonファイル内で他のストリームを置き換えることができます。3つのストリームに限定されているわけではないので、他にいくつか試してみてください。有効なJSON形式を維持するために、すべてユニークIDであることを確認してください。

クリーンアップ

Yarnセッションを終了するには、ターミナルでctrl + cコマンドを使用して、実行中のプロセスを終了します。

Amazon IVSライブストリームが不要になった場合は、追加コストが発生しないようにストリームを停止してください。

アドベンチャーを継続しよう

あなたお持ちのコンテンツを使用してWebアプリケーションをカスタマイズしたので、コードを改良して、その他様々なエクスペリエンスを体験ください。さらなるインスピレーションのためのいくつかのアイデアを共有します。

サーバーレスバックエンドを使用して feeds.json を動的にアップデートします。PlaybackURL、StartTime、 ViewerCountなど、JSONファイルで使用される一部の情報は、Amazon IVS ListStreams APIを介して入手できます。
Timed Metadata APIを使用して、次のような操作を行います。
- アンケート(synchronized poll)機能を追加して、ユーザーとのエンゲージメントを高めます。
- ❤️ ボタンを有効にし誰かがクリックした際、他の視聴者に表示します。
- 関連する製品情報を表示することで、このデモに最新のeコマースエクスペリエンスを追加します。
ユーザーがスクロールを停止した際、動画の横に簡易チャットを表示して、視聴者がストリーマーと直接やり取りできるようにします。

Amazon IVSについて

Amazon Interactive Video Service (Amazon IVS) は、素早く簡単にセットアップできるマネージド型のライブストリーミングソリューションであり、インタラクティブな動画エクスペリエンスの作成に最適です。ライブストリームをAmazon IVSに送信するだけで、世界中からライブ動画を低レイテンシーで視聴するために必要な機能を、このサービスで提供します。そのため、お客様はライブ動画を活用したインタラクティブなエクスペリエンスの構築に集中できます。もっと詳しく学びましょう！

AWS Media & Entertainment 参考コンテンツ

AWSのメディアチームの問い合わせ先: awsmedia@amazon.co.jp

※毎月のメルマガをはじめました。最新のニュースやイベント情報を発信していきます。購読希望は上記宛先にご連絡ください。

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

Amazon Web Services ブログ