Skip to content

Latest commit

 

History

History
409 lines (242 loc) · 17.9 KB

README.md

File metadata and controls

409 lines (242 loc) · 17.9 KB
Raw

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

こんにちは！ 株式会社スタートアップテクノロジー 所属、
そして先日、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 の利用料

アーキテクチャ

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

ivs-nuxt (1)

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

JAWS-DAYS-2021-STREAMING-V2 (5)

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

目次

  1. IVS の設定
  2. StreamYard の登録・設定
  3. Nuxt.js プロジェクトのセットアップ
  4. Amplify Console でデプロイ

1. IVS の設定

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

スクリーンショット 2021-05-22 21 55 41

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

スクリーンショット 2021-05-22 22 03 06

  • セキュリティチェックを入力して、送信をクリックします。

スクリーンショット 2021-05-22 22 18 01

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

IVS チャネルを作成

スクリーンショット 2021-05-22 22 30 10

  • ivs と入力して、 Amazon Interactive Video Service をクリックします。

スクリーンショット 2021-05-22 22 44 26

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

スクリーンショット 2021-05-22 22 51 13

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

スクリーンショット 2021-05-22 23 00 16

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

スクリーンショット 2021-05-22 23 07 58

  • 作成した ivs-nuxt-1 詳細ページの、ストリーム設定の3点をコピーして控えます。
    • 取り込みサーバー
    • ストリームキー
    • 再生URL

2. StreamYard の登録・設定

StreamYard に登録

streamyard_email

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

streamyard_confirmation

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

スクリーンショット 2021-05-22 21 30 25

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

スクリーンショット 2021-05-22 21 33 12

  • Onward! をクリックします。

スクリーンショット 2021-05-22 23 25 33

  • Upgrade をクリックします。

スクリーンショット 2021-05-22 23 28 08

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

スクリーンショット 2021-05-22 23 30 15

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

スクリーンショット 2021-05-22 23 36 16

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

スクリーンショット 2021-05-22 23 19 08

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

スクリーンショット 2021-05-22 23 23 02

  • Custom RTMP をクリック

スクリーンショット 2021-05-22 23 51 50

  • 先ほど 1. IVS の設定 で最後に控えた下記2つを入力します。
    • 取り込みサーバー
    • ストリームキー
  • Nickname は ivs-nuxt-1 と入力し、 Add RTMP server をクリックします。

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

  • 今回ページを公開するための Nuxt.js のフロントエンドプロジェクトをセットアップします。
  • ハンズオンの中では具体的にコードの変更はしませんが、これ以降はこちらの環境で自由にカスタムしていただけます！

AWS Cloud9 環境の構築

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

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

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

スクリーンショット 2021-06-12 23 36 44

  • Fork をクリックします。
  • GitHub からコードをクローンして、プロジェクトディレクトリに移動します。
  • ※これ以降、プロジェクトリポジトリに移動しないとうまくコマンドが実行できませんのでお気をつけください。
git clone https://github.com/[自分のGitHubアカウントのキー]/ivs-nuxt.git
cd ivs-nuxt
  • npm パッケージをインストールします。
npm i
  • テスト起動します。
npm run dev

スクリーンショット 2021-07-04 15 05 30

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

スクリーンショット 2021-06-12 22 28 07

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

StreamYard で配信開始

スクリーンショット 2021-06-12 22 48 35

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

スクリーンショット 2021-06-12 22 56 15

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

スクリーンショット 2021-06-12 23 00 46

  • Enter studio をクリックします。

スクリーンショット 2021-06-12 23 06 06

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

スクリーンショット 2021-06-12 23 53 31

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

Nuxt.js プロジェクトに自分の 再生URL を設定

  • 一度、起動している開発環境のサーバーを停止します(ターミナルで ctrl + c)。
ctrl + c
  • ターミナルで下記を実行し、こちらで控えた自分の 再生URL を環境変数に設定します。
export IVS_NUXT_STREAM_URL="自分の再生URL"
  • サーバーを再起動します。
npm run dev
  • Preview しているページを再読み込みして、自分の配信が再生されることを確認します。

4. Amplify Console でデプロイ

  • ここまでローカルでプロジェクトを進めてきましたが、いよいよ配信サイトを公開します！
  • AWS Amplify Console から簡単なステップで公開できますので、その手順を解説します。

スクリーンショット 2021-06-13 0 18 08

  • AWS マネジメントコンソールで検索フォームにamplifyと入力します。
  • AWS Amplify が表示されたら、クリックします。

スクリーンショット 2021-06-13 0 21 00

  • GET STARTED をクリックします。

スクリーンショット 2021-06-13 0 21 59

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

スクリーンショット 2021-06-13 0 23 27

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

スクリーンショット 2021-06-13 0 27 25

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

スクリーンショット 2021-06-13 0 28 40

  • リポジトリからForkしたご自身の ivs-nuxt リポジトリを選択します。
  • main ブランチを選択して、 次へ をクリックします。

スクリーンショット 2021-06-14 15 48 52

  • ビルド設定の追加の 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/**/*

スクリーンショット 2021-06-13 19 08 23

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

スクリーンショット 2021-06-13 19 12 38

  • プログレスバーのステータスが検証になるのを待ちます。
  • その後、ドメインの箇所に記載されているURLをクリックしてください。
  • 配信ページが Cloud9 で実行したプレビューページ同様表示されればOKです！

まとめ

いかがでしたでしょうか？
こちらの配信サイトは JavaScript(Vue.js/Nuxt.js) ベースでできておりますので、
もちろんこのリポジトリからカスタムしていただいて独自の機能を追加したり、思い思いのデザインにしていただくことが可能です！
例えば、カスタマイズの方向性としては下記などが考えられます。

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

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