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 の利用料
アーキテクチャ
今回のハンズオンで構築するアーキテクチャです。
![](https://d1.awsstatic.com/Developer%20Marketing/jp/magazine/2021/img_amplify-ivs-streaming-website_01.84f9ad79f8fea0606927333e3a692467bb20f675.png)
- Amplify Console を使い、 Nuxt.js で作成した静的ページをデプロイ・ホスティングします。
- StreamYard という配信データを送信するWebサービスを使って、 Amazon IVS に対してPC上から動画データを送信します。
- Webブラウザ側から、 amazon-ivs-player や、 Video.js といったライブラリを利用して、 Amazon IVS が提供する再生URLからストリーミングデータを取得して表示します。
また、参考として、JAWS DAYS 2021 re:Connect の配信サイトのアーキテクチャも紹介します。
![](https://d1.awsstatic.com/Developer%20Marketing/jp/magazine/2021/img_amplify-ivs-streaming-website_02.544311f1eb0157bde7ef7f3094314db94f7df74c.png)
- Amazon EventBridge をトリガーにして AWS Lambda を実行し、 Amazon IVS の配信視聴者数を取得し、 Amazon DynamoDB に保存する機能を実装しました。
- また、 Amazon IVS の Timed Metadata という機能を利用して、上記の視聴者数も含めたリアルタイムなデータのクライアントへの反映や、アンケート機能などを実装しました。
- AWS Amplify を利用して、配信に付随する各種データの管理ができる仕組みも構築しました。
目次
ご注意
本記事で紹介する AWS サービスを起動する際には、料金がかかります。builders.flash メールメンバー特典の、クラウドレシピ向けクレジットコードプレゼントの入手をお勧めします。
![](https://d1.awsstatic.com/Digital%20Marketing/sitemerch/banners/reInvent19%20Midpage%20Banner/Site-Merch_Builders-Library_MidPage-Banner.348357fe27fe87372a78753be2f02bbaec7eb9a9.png)
このクラウドレシピ (ハンズオン記事) を無料でお試しいただけます »
毎月提供されるクラウドレシピのアップデート情報とともに、クレジットコードを受け取ることができます。
1. IVS の設定
1-1. AWS マネジメントコンソール にログイン
AWS マネジメントコンソール にアクセスします。
1-2. IVS チャネルを作成
2. StreamYard の登録・設定
2-1. StreamYard に登録
StreamYard のトップページ へアクセスします。
先ほど 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 のターミナルで操作してください)
こちら のリポジトリにアクセスします。
GitHub からコードをクローンして、プロジェクトディレクトリに移動します。
※これ以降、プロジェクトリポジトリに移動しないとうまくコマンドが実行できませんのでお気をつけください。
git clone https://github.com/[自分のGitHubアカウントのキー]/ivs-nuxt.git
cd ivs-nuxt
npm パッケージをインストールします。
npm i
テスト起動します。
npm run dev
3-3. StreamYard で配信開始
3-4. Nuxt.js プロジェクトに自分の 再生URL を設定
一度、起動している開発環境のサーバーを停止します (ターミナルで ctrl + c)。
ctrl + c
ターミナルで下記を実行し、こちら で控えた自分の 再生 URL を環境変数に設定します。
export IVS_NUXT_STREAM_URL="自分の再生URL"
サーバーを再起動します。
npm run dev
Preview しているページを再読み込みして、自分の配信が再生されることを確認します。
4. Amplify Console でデプロイ
ここまでローカルでプロジェクトを進めてきましたが、いよいよ配信サイトを公開します !
AWS Amplify Console から簡単なステップで公開できますので、その手順を解説します。
ビルド設定の追加の 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 !
筆者プロフィール
![](https://d1.awsstatic.com/Developer%20Marketing/jp/magazine/profile/photo_matsui_hidetoshi_2021.0ed9a0b15a0fa911262df1f927242cb55f20e06e.jpg)
松井 英俊 (まつい ひでとし)
株式会社スタートアップテクノロジーでWeb開発業務に従事しながら、JAWS-UG 浜松支部の運営に関わる。
JAWS-DAYS 2021 re:Connect では実行委員を務め、配信サイトを構築した。
2021年6月、 AWS Serverless HERO に選ばれる。
さらに最新記事・デベロッパー向けイベントを検索
AWS を無料でお試しいただけます