JAWS DAYS 2021 -RE:CONNECT- セッション配信サイトを構築しました

投稿者
松井英俊
JAWS DAYS 2021 -RE:CONNECT- セッション配信サイトを構築しました

こんにちは!開発部の松井です!
春の兆しが見えつつも、まだまだ寒い日も多く、なかなか体がついていかない日々が続いていますね😭
こんな時期は引きこもってコードを書くに限りますね!!

さて、このコロナ禍(2021/02現在)で、我々のWeb業界でも配信ストリーミングと言ったキーワードが非常に重要性を帯びてきています。

そのような中、私松井が JAWS DAYS 2021 -RE:CONNECT- というイベントの実行委員を務めることとなり、去年秋頃より準備を進めてまいりました!

まず、この JAWS DAYS 2021 -RE:CONNECT- ですが、どのようなイベントなのでしょうか。このご説明をするには、先にイベントの運営団体のJAWS-UGについてご説明する必要があります。

こちらに公式サイトでは下記のように説明されています。

JAWS-UGとは、AWS (Amazon Web Services) が提供するクラウドコンピューティングを利用する人々の集まり(コミュニティ)です。

上記の通り、AWSに関係するコミュニティなのですが、AWS Japanが直接運営しているコミュニティではなく、あくまでユーザー主体で運営しているコミュニティです。

AWSのユーザーが各地域や分野ごとに集まって、定期的に勉強会やイベントを開催して、AWSやそれにまつわる技術を勉強したり、ナレッジを共有したりしています。

そして、このJAWS-UGが年に一度の最大のイベントとして毎年開催しているのが、JAWS DAYSです!

例年、このJAWS DAYSには全国のJAWS-UGの運営に携わる有志のメンバーが実行委員として企画、運営をするのですが、この度の JAWS DAYS 2021 -RE:CONNECT- では私も実行委員として参画する運びとなり、

  • セッション配信サイトの設計/構築
  • JAWS-UG各支部との連絡/連携
  • イベントのPR活動

などを担当して活動しています。

今回は、この中の 配信サイトの設計/構築 において、主に Amazon Interactive Video Service (IVS)AWS Amplify を中心にいくつかのAWSのマネージドサービスを使用して、 サーバーレスアーキテクチャ の配信サイトを 実行委員メンバーで独自に構築 したので、その技術に関してお話ししようと思います!

配信サイトアーキテクチャ

jaws days 2021 streaming architecture

いくつか動作の流れがあるので、大まかに説明していきます

エンドユーザーへのセッション配信


  • 一番肝心なエンドユーザーへの配信の流れですが、配信担当者が OBS, Stream Yard といったソフトウェア/サービスを使用して、配信データを Amazon IVS へ送信します。
  • その配信データをクライアント(Webブラウザ)が再生できる様に、IVS がストリーミングエンドポイントを提供します。
  • クライアント側は、 Nuxt.js で作成した公開側サイトを、AWS Amplify Console で静的ビルド、デプロイ、ホスティングしています。このクライアント側で Video.js を使用して IVS からストリーミングされる動画と音声を再生します。

視聴者数の保存とリアルタイム表示


  • Amazon EventBridge をトリガーにして、 AWS Lambda を定期実行し、 IVS から配信視聴者数を取得し、 Amazon DynamoDB に保存します。
  • DynamoDB に保存された視聴者数データを別の Lambda 関数から取得し、 Amazon API Gateway でAPIとしてデプロイし、クライアント側から定期的に取得し、表示します。

配信メタデータの管理


  • IVS が提供する配信エンドポイント、クライアント側の詳細ページのSlug、セッションタイトル、概要と言った配信に付随するメタデータは、公開側サイトと同様 Amplify Console でデプロイした管理用サイトから更新可能にしています。
  • Amplify のAuthentication機能を利用して Amazon Cognito のユーザープールを作成し、管理者の登録・認証とAPIの認可を行います。
  • Amplify のAPI機能を利用して AWS AppSyncDynamoDB を作成し、 GraphQL インターフェースのAPIをデプロイし、認証ユーザーが管理ページから配信データの保存・更新を行います。
  • その DynamoDB に格納されたデータを取得する Lambda 関数を作成して、 API Gateway でAPIとしてデプロイし、公開側サイトからデータを取得し、メタデータを配信そのものに利用したり、表示したります。

工夫したポイント

配信プレイヤーモジュールのNuxt.jsへの組み込み


  • さまざまな配信視聴クライアントや通信環境への配慮として、ABR(Adaptive Bit Rate: 可変ビットレート) に対応し、視聴者がいくつかのビットレートから任意のものを選択できる様にしました。
  • 公式のIVS PlayerというSDKやVideo.jsを試していく中で、単純にCDNから読み込む形ならさほど難しくないものの、モジュール版の導入は一筋縄で動かず苦労しました。ビルド時にnode_modules内の必要なファイル(WASMバイナリ等)をコピーするなどの工夫によって導入できました。

Lambdaの同時実行数クオータの調整


  • こちらに関してはまだ調整中ですが、数千〜最大1万人規模の同時視聴を想定しているため、メタデータや視聴者数のクライアント側からのリクエスト数がかなりの数になることが想定され、 Lambda 関数の同時実行数の制限に抵触する可能性があり、クオータの拡張を調整しています。
  • Lambda 関数の割り当てメモリを調整するなどして、コストとパフォーマンスが最適化されるようにチューニングしました。

管理サイトの構築


  • 時系列順のセッション配信に必要なメタデータをどうしても動的に更新しなければならない状況で、 Amplify を使用して素早く動的データを扱える仕組みを構築することができました。
  • メタデータに関しては、データ数も更新の頻度も少なく、複雑なクエリを扱う必要がないため、KVSである DynamoDB を使用する場合もさほど考慮が必要なく、なおかつ Amplify から簡単に AppSync と統合したAPIを作成できるため、今回の要件に最適でした。

マネージドサービスのフル活用


  • リソースや構築期間が限られる中で、汎用的な仮想マシン(VM)を使用することなく、必要要件に特化したマネージドサービスをフル活用することで、短期間での構築ができました。
  • サーバーリソースを占有しない(サーバーレス)構成になっており、ほぼ100%オンデマンドの料金体系のみとなり、実稼働以外では今のところ最小限のコストで運用できています。
  • 上記の Lambda の同時実行クオータやバースト時のスロットリングの考慮などを除けば、構築時にほぼ考慮せずにワークロードに適合してスケールする仕組みを構築できました。

まとめ

JAWS DAYS 2021 -RE:CONNECT- 本番は 2021/03/20(土) 10:00-18:00 です!上記で解説した仕組みがちゃんと動くか、ドキがムネムネですね!w(冷汗)
こちら から参加申込いただけるので、皆様ぜひ奮ってご参加ください!

あと、やっぱり Amplify はイメージしたものをすぐに簡単に形にできて非常にいいですね!
IVSAmazon ChimeAmazon Kinesis Video Streams と言ったメディア系サービスはSDKも公開されているので、個人的にはそれらとの組み合わせがアツいと思っています!
今後も色々と作っていきたいです!

一緒にスタートアップを盛り上げませんか?
開発合宿第二弾!! 顔認証を使用した入退室管理を作った話
2020/07/29
Rails6.1から入ったActiveStorageのPublicAccessが良かった
2021/03/18