ライブ配信を支える技術

　2019年10月4日(金)〜6日(日)開催の「水曜どうでしょう祭2019」では＜昼の部＞の有料ライブ配信を実施。その技術サイドのお話をいたします。社内外の多くの方のご協力があってほぼほぼ内製で構築することができました。今回の構築をざっくりですが、残しておきたいと思います。

全体のざっくり構成図

1. 会場からクラウドにあげるまで
2. Media Services
3. API橋渡し(DRM)(決済・認証)
4. ネットワーク
5. フロントエンド
6. プロジェクト管理

1.会場からクラウドにあげるまで

• テレビ中継車から会場のビジョンに出しているものを中継します。
• 今回はHTB本社で放送用に受けた映像を分岐してもらいました。
• この映像をSDIからHDMIに変換してLiveShellPro2台を用いてRTMPでAWSであげます。
• AWSまではNTT東日本さんのCloudGateway Applipackageを使用しました。これでAWSと閉域接続を行います。

2.AWS Media Services

• 放送業界くらいしか使ってないんじゃなかと思いきや最近他業種でも広がりを見せているMedia Services。
• 閉域から来たRTMPをDirectConnectからVPCに接続します。
• MediaLiveのVPC Inputを用いて映像を入力します。
• MediaLiveからの映像をMediaPackageで変換します。
  • HLSとMPEG-DASHでそれぞれABR(720/480/240)で出力します。
• 今回は出演者の権利保護、違法ダウンロード対策としてDRMを施しています
  • ここではNEXTSCAPEさんのMulti DRM Kitを使用しました。
  • SaaS型のDRMです。(widevine/playready/fiarplay streaming に対応)
• このMediaPackageをオリジンとしてCDNとしてCloudFrontを接続します。

3.API橋渡し(DRM)(決済・認証)

• 前述のDRMの処理はLambdaとAPI Gatewayを用いてproxyとして使っています。
  • widevineから帰ってくるのがバイナリデータだったりして厄介でした。
  • この部分はNEXTSCAPEさんに大変お世話になりました。
• 後述する認証系サービス「Auth0」と「Stripe」に関わるやりとりを同様の構成で実現しています。
  • 各種鍵の保管にAWS Secrets Managerを使用します。

4.ネットワーク

• ドメイン取得とDNSはRoute53を使用
• httpsを実現するための証明書をAmazon Certificate Managerで取得
• 後述するフロント側が入っているS3をオリジンとしてCloudFrontに接続します。
• httpやネイキッドドメインのをすべてhttps://www.htb-videos.jpにリダイレクトするようにS3とCloudFrontをもう１つ用意しています。

5.フロントエンド

• S3とCloudFrontを使って構築しています。
• Nuxt.jsを用いてのSPAとして構築しました。
• 決済系は「Stripe」を採用しました。
  • Elementsでクレジットカードのフォームを作成して埋め込み。
  • 開催期間それぞれのチケットとして3つの商品をskuを分けて設定
  • 前述のLambdaを経由して処理を行います。
• 認証系は「Auth0」を採用しました
  • Lockでログイン画面を作成
  • ソーシャルログインで以下のSNSと連携
    • Facebook
    • Google
    • LINE
    • Twitter
  • 各ユーザのデータに購入完了時の情報を格納
• 動画プレイヤーはTHEO Playerを採用
  • MediaPackageで暗号化されているものをここで復号化しています。

6.プロジェクト管理

• CI/CD と git リモートリポジトリとしてGitLabを採用しました。
• gitクライアントはSourcetreeを採用しました
• 開発チーム内のやりとりはChatworkを使っています。
• 今回 QA/コンサルとして入っていただいたclassmethodさんとのやりとりにはbacklogを使いました。

構築してみて

　開発期間が1ヶ月と少なかったため、「いかにやらないことを増やすか」 を念頭に考えました。結果的にサーバレス・各種SaaSとの連携、積極的なフルマネージドサービスの採用をすることで事前検討や実作業を大きく減らすことができたと思います。

さいごに

　社内外含め、多くの方にご協力をいただいて今回の構築をすることができました。特に各種IT勉強会コミュニティで色々なサービスに触れる機会がなければ、このような構成を考えつかなかったと思います。私が多くの人のアウトプットから学んだように、私のアウトプットも誰かのヒントになれば幸いです。