Amazon Interactive Video Service (IVS) と AWS Amplify を使って自分だけのオリジナル配信サイトを作る !
Author : 松井 英俊 (AWS Serverless HERO / JAWS-UG 浜松支部)
こんにちは！ 株式会社スタートアップテクノロジー 所属、そして先日、AWS Serverless HERO に選ばれました、JAWS-UG 浜松支部の松井です !
今回は AWS の各種マネージドサービスを活用した配信サイトの構築方法のお話をさせていただきます !
オンライン配信しようとした場合、 YouTube Live などを活用する方法が考えられますね。しかし、既存サービスを活用する場合カスタマイズが難しく、何かと不自由もあるかと思います。
そこで今回は、 AWS で提供されている Amazon Interactive Video Service (IVS) と AWS Amplify 、また StreamYard と言うライブストリームサービスを活用して、自分だけのオリジナル配信サイトを構築する方法をご紹介します !
必要要件
- 下記サービスの有効なアカウント
- AWS
- GitHub
- StreamYard の Basic プラン (本資料内で登録・設定方法をご案内します) 以上のアカウント
- 数十円程度の AWS 利用料および StreamYard の最低 $20/month の利用料
- 数十円程度の AWS 利用料および StreamYard の最低 $20/month の利用料
アーキテクチャ
今回のハンズオンで構築するアーキテクチャです。
- Amplify Console を使い、 Nuxt.js で作成した静的ページをデプロイ・ホスティングします。
- StreamYard という配信データを送信するWebサービスを使って、 Amazon IVS に対してPC上から動画データを送信します。
- Webブラウザ側から、 amazon-ivs-player や、 Video.js といったライブラリを利用して、 Amazon IVS が提供する再生URLからストリーミングデータを取得して表示します。
また、参考として、JAWS DAYS 2021 re:Connect の配信サイトのアーキテクチャも紹介します。
- Amazon EventBridge をトリガーにして AWS Lambda を実行し、 Amazon IVS の配信視聴者数を取得し、 Amazon DynamoDB に保存する機能を実装しました。
- また、 Amazon IVS の Timed Metadata という機能を利用して、上記の視聴者数も含めたリアルタイムなデータのクライアントへの反映や、アンケート機能などを実装しました。
- AWS Amplify を利用して、配信に付随する各種データの管理ができる仕組みも構築しました。
目次
ご注意
本記事で紹介する AWS サービスを起動する際には、料金がかかります。builders.flash メールメンバー特典の、クラウドレシピ向けクレジットコードプレゼントの入手をお勧めします。
このクラウドレシピ (ハンズオン記事) を無料でお試しいただけます »
毎月提供されるクラウドレシピのアップデート情報とともに、クレジットコードを受け取ることができます。
1. IVS の設定
1-1. AWS マネジメントコンソール にログイン
AWS マネジメントコンソール にアクセスします。
メールアドレスを入力して、次へ をクリックします。
クリックすると拡大します
パスワードを入力して、サインイン をクリックします。
クリックすると拡大します
1-2. IVS チャネルを作成
AWS マネジメントコンソールの検索ボックスで ivs と入力して、 Amazon Interactive Video Service をクリックします。
クリックすると拡大します
リージョンを 米国西部 (オレゴン) に変更 をクリックします。
クリックすると拡大します
チャネルの作成 をクリックします。
クリックすると拡大します
チャネル名に ivs-nuxt-1と入力し、チャネルの作成 をクリックします。
クリックすると拡大します
作成した ivs-nuxt-1 詳細ページの、ストリーム設定 の3点をコピーして控えます。
- 取り込みサーバー
- ストリームキー
- 再生 URL
クリックすると拡大します
2. StreamYard の登録・設定
2-1. StreamYard に登録
StreamYard のトップページ へアクセスします。
メールアドレスを入力して、 Get started をクリックします。
クリックすると拡大します
メールが送信されてくるので、6 桁の確認コードをコピーします。
クリックすると拡大します
確認コードを入力して、 Log in をクリックします。
クリックすると拡大します
Onward! をクリックします。
クリックすると拡大します
Upgrade をクリックします。
クリックすると拡大します
Basic の Upgrade now をクリックします。
クリックすると拡大します
カード情報を入力し、 monthly / annually を任意で選択し、 Purchase plan をクリックします (注意: 料金が発生します)。
クリックすると拡大します
Return to dashboard をクリックします。
クリックすると拡大します
Destinations をクリックしてから、 Add a destination をクリックします。
クリックすると拡大します
Custom RTMP をクリックします。
クリックすると拡大します
先ほど 1. IVS の設定 で最後に控えた下記2つを入力します。
- 取り込みサーバー
- ストリームキー
Nickname は ivs-nuxt-1 と入力し、 Add RTMP server をクリックします。
クリックすると拡大します
3. Nuxt.js プロジェクトのセットアップ
今回ページを公開するための Nuxt.js のフロントエンドプロジェクトをセットアップします。
ハンズオンの中では具体的にコードの変更はしませんが、これ以降はこちらの環境で自由にカスタムしていただけます !
3-1. AWS Cloud9 環境の構築
こちら を参考に、 AWS Cloud9 環境を構築します。
Cloud9 の環境が整いました。 の箇所まで進めます。
AWS Cloud9 が利用できない場合、こちらのブログ をご参考に AWS IDE Toolkits または AWS CloudShell をご利用ください。
*注意!! リージョンとインスタンスタイプの組み合わせによっては、うまく環境が立ち上がらない場合があります。こちらの手順はリージョンやインスタンスタイプに依存しないため、うまくいかない場合はリージョンやインスタンスタイプを変更していただいて構いません。
3-2. Nuxt.js プロジェクトのフォーク、クローン、セットアップ (これ以降は Cloud9 のターミナルで操作してください)
こちら のリポジトリにアクセスします。
Fork をクリックします。
クリックすると拡大します
GitHub からコードをクローンして、プロジェクトディレクトリに移動します。
※これ以降、プロジェクトリポジトリに移動しないとうまくコマンドが実行できませんのでお気をつけください。
git clone https://github.com/[自分のGitHubアカウントのキー]/ivs-nuxt.git
cd ivs-nuxtnpm パッケージをインストールします。
npm iテスト起動します。
npm run devPreview をクリックしてから、 Preview Running Application をクリックします。
クリックすると拡大します
デモ用のストリーミング動画が表示されるのを確認します。
クリックすると拡大します
3-3. StreamYard で配信開始
Create a broadcast をクリックします。
クリックすると拡大します
アイコンをクリックし (マウスオーバーで、 ivs-nuxt-1 と表示されます)、任意のタイトルを入力して、 Create broadcast をクリックします。
クリックすると拡大します
Enter studio をクリックします。
クリックすると拡大します
左下の顔の表示にマウスオーバーすると、 Add to stream と表示されるので、クリックします。
クリックすると拡大します
Go live をクリックし、ダイアログからさらに Go live をクリックします。
クリックすると拡大します
3-4. Nuxt.js プロジェクトに自分の 再生URL を設定
一度、起動している開発環境のサーバーを停止します (ターミナルで ctrl + c)。
ctrl + cターミナルで下記を実行し、こちら で控えた自分の 再生 URL を環境変数に設定します。
export IVS_NUXT_STREAM_URL="自分の再生URL"サーバーを再起動します。
npm run devPreview しているページを再読み込みして、自分の配信が再生されることを確認します。
4. Amplify Console でデプロイ
ここまでローカルでプロジェクトを進めてきましたが、いよいよ配信サイトを公開します !
AWS Amplify Console から簡単なステップで公開できますので、その手順を解説します。
AWS マネジメントコンソールで検索フォームに amplify と入力します。
AWS Amplify が表示されたら、クリックします。
クリックすると拡大します
GET STARTED をクリックします。
クリックすると拡大します
Get started の下の右側のセクションの Get started ボタンをクリックします。
クリックすると拡大します
GitHub を選択し、 Continue をクリックします。
クリックすると拡大します
Authorize aws-amplify-console をクリックします。
クリックすると拡大します
リポジトリ から Fork したご自身の ivs-nuxt リポジトリを選択します。
main ブランチを選択して、 次へ をクリックします。
クリックすると拡大します
ビルド設定の追加の Edit をクリックして、後述の amplify.yml 通り変更してください。
Advanced settings をクリックします。
環境変数 の Key に IVS_NUXT_STREAM_URL を、 Value に先ほど 1-2. IVS チャネルを作成 で控えた 再生URL を入力します。
次に、次へ をクリックしてください。
amplify.yml
version: 1
frontend:
phases:
preBuild:
commands:
- npm install
build:
commands:
- npm run build
- npm run generate
artifacts:
# IMPORTANT - Please verify your build output directory
baseDirectory: dist
files:
- '**/*'
cache:
paths:
- node_modules/**/*
クリックすると拡大します
保存してデプロイ をクリックします。
クリックすると拡大します
プログレスバーのステータスが検証になるのを待ちます。
その後、ドメイン の箇所に記載されているURLをクリックしてください。
配信ページが Cloud9 で実行したプレビューページ同様表示されれば OK です !
クリックすると拡大します
まとめ
いかがでしたでしょうか ?
こちらの配信サイトは JavaScript(Vue.js/Nuxt.js) ベースでできておりますので、もちろんこのリポジトリからカスタムしていただいて独自の機能を追加したり、思い思いのデザインにしていただくことが可能です !
例えば、カスタマイズの方向性としては下記などが考えられます。
- Amazon IVS の Timed Metadata を利用して、バックエンドとのインタラクションを活用した機能を構築する。
- Amazon IVS の録画データの保存機能を有効化して、 Amazon S3 に配信動画を保存する。
ぜひ、色々とカスタムして遊んでみてください !!
Happy coding !
筆者プロフィール
松井 英俊 (まつい ひでとし)
株式会社スタートアップテクノロジーでWeb開発業務に従事しながら、JAWS-UG 浜松支部の運営に関わる。
JAWS-DAYS 2021 re:Connect では実行委員を務め、配信サイトを構築した。
2021年6月、 AWS Serverless HERO に選ばれる。
さらに最新記事・デベロッパー向けイベントを検索
AWS を無料でお試しいただけます