Amazon Interactive Video Service (IVS) と AWS Amplify を使って自分だけのオリジナル配信サイトを作る !

2021-07-05
デベロッパーのためのクラウド活用方法

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 の利用料

アーキテクチャ

今回のハンズオンで構築するアーキテクチャです。

img_amplify-ivs-streaming-website_01
  • Amplify Console を使い、 Nuxt.js で作成した静的ページをデプロイ・ホスティングします。
  • StreamYard という配信データを送信するWebサービスを使って、 Amazon IVS に対してPC上から動画データを送信します。
  • Webブラウザ側から、 amazon-ivs-player や、 Video.js といったライブラリを利用して、 Amazon IVS が提供する再生URLからストリーミングデータを取得して表示します。

また、参考として、JAWS DAYS 2021 re:Connect の配信サイトのアーキテクチャも紹介します。

img_amplify-ivs-streaming-website_02
  • Amazon EventBridge をトリガーにして AWS Lambda を実行し、 Amazon IVS の配信視聴者数を取得し、 Amazon DynamoDB に保存する機能を実装しました。
  • また、 Amazon IVS Timed Metadata という機能を利用して、上記の視聴者数も含めたリアルタイムなデータのクライアントへの反映や、アンケート機能などを実装しました。
  • AWS Amplify を利用して、配信に付随する各種データの管理ができる仕組みも構築しました。

ご注意

本記事で紹介する AWS サービスを起動する際には、料金がかかります。builders.flash メールメンバー特典の、クラウドレシピ向けクレジットコードプレゼントの入手をお勧めします。

*ハンズオン記事およびソースコードにおける免責事項 »


1. IVS の設定

1-1. AWS マネジメントコンソール にログイン

AWS マネジメントコンソール にアクセスします。

メールアドレスを入力して、次へ をクリックします。

img_amplify-ivs-streaming-website_03

クリックすると拡大します

パスワードを入力して、サインイン をクリックします。

img_amplify-ivs-streaming-website_05

クリックすると拡大します

1-2. IVS チャネルを作成

AWS マネジメントコンソールの検索ボックスで ivs と入力して、 Amazon Interactive Video Service をクリックします。

img_amplify-ivs-streaming-website_06

クリックすると拡大します

リージョンを 米国西部 (オレゴン) に変更 をクリックします。

img_amplify-ivs-streaming-website_07

クリックすると拡大します

チャネルの作成 をクリックします。

img_amplify-ivs-streaming-website_08

クリックすると拡大します

チャネル名に ivs-nuxt-1と入力し、チャネルの作成 をクリックします。

img_amplify-ivs-streaming-website_09

クリックすると拡大します

作成した ivs-nuxt-1 詳細ページの、ストリーム設定 の3点をコピーして控えます。

  • 取り込みサーバー
  • ストリームキー
  • 再生 URL
img_amplify-ivs-streaming-website_10

クリックすると拡大します


2. StreamYard の登録・設定

2-1. StreamYard に登録

StreamYard のトップページ  へアクセスします。

メールアドレスを入力して、 Get started をクリックします。

img_amplify-ivs-streaming-website_11

クリックすると拡大します

メールが送信されてくるので、6 桁の確認コードをコピーします。

img_amplify-ivs-streaming-website_12

クリックすると拡大します

確認コードを入力して、 Log in をクリックします。

img_amplify-ivs-streaming-website_13

クリックすると拡大します

Onward! をクリックします。

img_amplify-ivs-streaming-website_14

クリックすると拡大します

Upgrade をクリックします。

img_amplify-ivs-streaming-website_15

クリックすると拡大します

Basic の Upgrade now をクリックします。

img_amplify-ivs-streaming-website_16

クリックすると拡大します

カード情報を入力し、 monthly / annually を任意で選択し、 Purchase plan をクリックします  (注意: 料金が発生します)

img_amplify-ivs-streaming-website_17

クリックすると拡大します

Return to dashboard をクリックします。

img_amplify-ivs-streaming-website_18

クリックすると拡大します

Destinations をクリックしてから、 Add a destination をクリックします。

img_amplify-ivs-streaming-website_19

クリックすると拡大します

Custom RTMP をクリックします。

img_amplify-ivs-streaming-website_20

クリックすると拡大します

先ほど 1. IVS の設定 で最後に控えた下記2つを入力します。

  • 取り込みサーバー
  • ストリームキー

Nicknameivs-nuxt-1 と入力し、 Add RTMP server をクリックします。

img_amplify-ivs-streaming-website_21

クリックすると拡大します


3. Nuxt.js プロジェクトのセットアップ

今回ページを公開するための Nuxt.js のフロントエンドプロジェクトをセットアップします。

ハンズオンの中では具体的にコードの変更はしませんが、これ以降はこちらの環境で自由にカスタムしていただけます !

3-1. AWS Cloud9 環境の構築

こちら を参考に、 AWS Cloud9 環境を構築します。

Cloud9 の環境が整いました。 の箇所まで進めます。

*注意!! リージョンとインスタンスタイプの組み合わせによっては、うまく環境が立ち上がらない場合があります。こちらの手順はリージョンやインスタンスタイプに依存しないため、うまくいかない場合はリージョンやインスタンスタイプを変更していただいて構いません。

3-2. Nuxt.js プロジェクトのフォーク、クローン、セットアップ (これ以降は Cloud9 のターミナルで操作してください)

こちら のリポジトリにアクセスします。

Fork をクリックします。

img_amplify-ivs-streaming-website_22

クリックすると拡大します

GitHub からコードをクローンして、プロジェクトディレクトリに移動します。

※これ以降、プロジェクトリポジトリに移動しないとうまくコマンドが実行できませんのでお気をつけください。

git clone https://github.com/[自分のGitHubアカウントのキー]/ivs-nuxt.git
cd ivs-nuxt

npm パッケージをインストールします。

npm i

テスト起動します。

npm run dev

Preview をクリックしてから、 Preview Running Application をクリックします。

img_amplify-ivs-streaming-website_23

クリックすると拡大します

デモ用のストリーミング動画が表示されるのを確認します。

img_amplify-ivs-streaming-website_24

クリックすると拡大します

3-3. StreamYard で配信開始

Create a broadcast をクリックします。

img_amplify-ivs-streaming-website_25

クリックすると拡大します

アイコンをクリックし (マウスオーバーで、 ivs-nuxt-1 と表示されます)、任意のタイトルを入力して、 Create broadcast をクリックします。

img_amplify-ivs-streaming-website_26

クリックすると拡大します

Enter studio をクリックします。

img_amplify-ivs-streaming-website_27

クリックすると拡大します

左下の顔の表示にマウスオーバーすると、 Add to stream と表示されるので、クリックします。

img_amplify-ivs-streaming-website_28

クリックすると拡大します

Go live をクリックし、ダイアログからさらに Go live をクリックします。

img_amplify-ivs-streaming-website_29

クリックすると拡大します

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 から簡単なステップで公開できますので、その手順を解説します。

AWS マネジメントコンソールで検索フォームに amplify と入力します。

AWS Amplify が表示されたら、クリックします。

img_amplify-ivs-streaming-website_30

クリックすると拡大します

GET STARTED をクリックします。

img_amplify-ivs-streaming-website_31

クリックすると拡大します

Get started の下の右側のセクションの Get started ボタンをクリックします。

img_amplify-ivs-streaming-website_32

クリックすると拡大します

GitHub を選択し、 Continue をクリックします。

img_amplify-ivs-streaming-website_33

クリックすると拡大します

Authorize aws-amplify-console をクリックします。

img_amplify-ivs-streaming-website_34

クリックすると拡大します

リポジトリ から Fork したご自身の ivs-nuxt リポジトリを選択します。

main ブランチを選択して、 次へ をクリックします。

img_amplify-ivs-streaming-website_35

クリックすると拡大します

ビルド設定の追加の 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/**/*
img_amplify-ivs-streaming-website_36

クリックすると拡大します

保存してデプロイ をクリックします。

img_amplify-ivs-streaming-website_37

クリックすると拡大します

プログレスバーのステータスが検証になるのを待ちます。
その後、ドメイン の箇所に記載されているURLをクリックしてください。

配信ページが Cloud9 で実行したプレビューページ同様表示されれば OK です !

img_amplify-ivs-streaming-website_38

クリックすると拡大します


まとめ

いかがでしたでしょうか ?
こちらの配信サイトは JavaScript(Vue.js/Nuxt.js) ベースでできておりますので、もちろんこのリポジトリからカスタムしていただいて独自の機能を追加したり、思い思いのデザインにしていただくことが可能です !

例えば、カスタマイズの方向性としては下記などが考えられます。

  • Amazon IVSTimed Metadata を利用して、バックエンドとのインタラクションを活用した機能を構築する。
  • Amazon IVS の録画データの保存機能を有効化して、 Amazon S3 に配信動画を保存する。

ぜひ、色々とカスタムして遊んでみてください !!
Happy coding !


builders.flash メールメンバーへ登録することで
AWS のベストプラクティスを毎月無料でお試しいただけます

筆者プロフィール

photo_matsui_hidetoshi_2021

松井 英俊 (まつい ひでとし)

株式会社スタートアップテクノロジーでWeb開発業務に従事しながら、JAWS-UG 浜松支部の運営に関わる。
JAWS-DAYS 2021 re:Connect では実行委員を務め、配信サイトを構築した。
2021年6月、 AWS Serverless HERO に選ばれる。

AWS のベストプラクティスを毎月無料でお試しいただけます

さらに最新記事・デベロッパー向けイベントを検索

下記の項目で絞り込む
絞り込みを解除 ≫
フィルタ
フィルタ
1

AWS を無料でお試しいただけます

AWS 無料利用枠の詳細はこちら ≫
5 ステップでアカウント作成できます
無料サインアップ ≫
ご不明な点がおありですか?
日本担当チームへ相談する