こんにちは！ 株式会社スタートアップテクノロジー 所属、
そして先日、AWS Serverless HEROに選ばれました、JAWS-UG 浜松支部の松井です！
今回は AWS の各種マネージドサービスを活用した配信サイトの構築方法のお話をさせていただきます！
オンライン配信しようとした場合、 YouTube Live などを活用する方法が考えられますね。
しかし、既存サービスを活用する場合カスタマイズが難しく、何かと不自由もあるかと思います。
そこで今回は、 AWS で提供されている Amazon Interactive Video Service (IVS) と AWS Amplify 、
また OBS と言うライブストリームアプリケーションを活用して、自分だけのオリジナル配信サイトを構築する方法をご紹介します！
- 下記サービスの有効なアカウント
- AWS
- GitHub
- 数十円程度の AWS 利用料
- ストリーミングアプリケーションの OBS のインストール
- 今回のハンズオンで構築するアーキテクチャです。
- Amplify Console を使い、 Nuxt.js で作成した静的ページをデプロイ・ホスティングします。
- OBS という配信データを送信するアプリケーションを使って、 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 を利用して、配信に付随する各種データの管理ができる仕組みも構築しました。
- IVS の設定
- OBS のインストール・設定
- Nuxt.js プロジェクトのセットアップ
- Amplify Console でデプロイ
- AWS マネジメントコンソールにアクセスします。
- メールアドレスを入力して、次へをクリックします。
- セキュリティチェックを入力して、送信をクリックします。
- パスワードを入力して、サインインをクリックします。
- ivs と入力して、 Amazon Interactive Video Service をクリックします。
- リージョンを 米国西部（オレゴン）に変更 をクリックします。
- チャネルの作成をクリックします。
- チャネル名にivs-nuxt-1と入力し、チャネルの作成をクリックします。
- 作成した ivs-nuxt-1 詳細ページの、ストリーム設定の3点をコピーして控えます。
- 取り込みサーバー
- ストリームキー
- 再生URL
- OBS のインストールサイト へアクセスします。
- Windows, Mac OS, Linux の内、該当するものをクリックします（ダウンロードが始まります)。
- ダウンロードが完了したら、画像の通りの箇所をクリックします。
- 画像のような表示になるので、左から右へドラッグ&ドロップします。
- アプリケーションとしてメニューから選択できるようになっていればOKです。
- OBS を起動します。
- 設定ウィザードが立ち上がるので、 配信のために最適化し、録画は二次的なものとする を選択して、 次へ をクリックする。
- 次の画面では、そのまま 次へ をクリックします。
- 1. IVS の設定 で控えた、下記の情報をそれぞれのフォームに入力し、 次へ をクリックします。
- サーバー: IVS の、 rtmps://6468fb1f4abe.global-contribute.live-video.net:443/app/
- ストリームキー: IVS の、 ストリームキー
- はい をクリックします。
- テストが実行されるので、完了するまで待ちます（数分程度)。
- テストが完了したら、 設定を適用 をクリックします。
- 引き続き OBS を使っていくので、このままアプリケーションを開いた状態にしておきます。
- 今回ページを公開するための Nuxt.js のフロントエンドプロジェクトをセットアップします。
- ハンズオンの中では具体的にコードの変更はしませんが、これ以降はこちらの環境で自由にカスタムしていただけます！
- こちらを参考に、 AWS Cloud9 環境を構築します。
-
Cloud9 の環境が整いました。 の箇所まで進めます。
-
注意!!: リージョンとインスタンスタイプの組み合わせによっては、うまく環境が立ち上がらない場合があります。こちらの手順はリージョンやインスタンスタイプに依存しないため、うまくいかない場合はリージョンやインスタンスタイプを変更していただいて構いません。
-
参考: 東京、バージニア北部、オレゴンのリージョンでインスタンスタイプを
t3.smallにした場合、現時点（2021年 7月12日 現在）では問題なく環境が立ち上がることが確認できています。
-
- こちらのリポジトリにアクセスします。
- Fork をクリックします。
- GitHub からコードをクローンして、プロジェクトディレクトリに移動します。
- ※これ以降、プロジェクトリポジトリに移動しないとうまくコマンドが実行できませんのでお気をつけください。
git clone https://github.com/[自分のGitHubアカウントのキー]/ivs-nuxt.git
cd ivs-nuxt
- npm パッケージをインストールします。
npm i
- テスト起動します。
npm run dev
- Preview をクリックしてから、 Preview Running Application をクリックします。
- デモ用のストリーミング動画が表示されるのを確認します。
- ストリーミングデータのソースを追加するために、画像の + をクリックします。
- 映像キャプチャデバイス を選択します。
- デフォルトのまま、 OK をクリックします。
- デバイス に、各自の環境の有効なカメラデバイス(例では Snap Camera, Mac のデフォルトの場合、 FaceTime HDカメラ (内臓))を選択し、 OK をクリックします。
- ウィンドウサイズをドラッグ&ドロップで合わせます。
- 配信開始 をクリックします。
- 一度、起動している開発環境のサーバーを停止します(ターミナルで
ctrl + c)。
ctrl + c
- ターミナルで下記を実行し、こちらで控えた自分の 再生URL を環境変数に設定します。
export IVS_NUXT_STREAM_URL="自分の再生URL"
- サーバーを再起動します。
npm run dev
- Preview しているページを再読み込みして、自分の配信が再生されることを確認します。
- ここまでローカルでプロジェクトを進めてきましたが、いよいよ配信サイトを公開します！
- 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 に先ほどこちらで控えた 再生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!