ZoomミーティングをAmazon IVSでライブ配信してみた

ZoomミーティングのもようをAWSインフラでライブ配信してみよう企画第二弾!!こんどは先日発表された新サービスAmazon Interactive Video Service (Amazon IVS)を使ってライブ配信してみました。
2020.07.31

はじめに

清水です。先ほどのエントリで、ZoomミーティングとMediaLiveを連携させてAWSインフラでライブ配信をしてみました。

AWSインフラはMediaLive + MediaPackage + CloudFrontという構成でしたが、AWSでライブ動画配信をする場合、先日発表された新サービス、Amazon Interactive Video Service (Amazon IVS)も検討できるかと思います。

本エントリではZoomミーティングとAmazon IVSを連携させてライブ配信をしてみたのでまとめてみます。

Zoom側の前提条件

まずZoom側の前提条件を確認しておきます。Zoomでミーティングを作成するアカウントについて、プロプラン以上が必要です。無料プランではライブ配信が行えません。今回はプロプランを契約しているアカウントで検証を行いました。

またZoom側の設定でミーティングのライブストリーミング配信を許可する必要があります。設定画面の「ミーティングにて(詳細」から「ミーティングのライブストリーム配信を許可」をonに変更、「カスタムライブストリーム配信サービス」にチェックをつけて保存します。

Amazon IVSの準備

IVS Channelの作成

続いてAWSインフラ側、Amazon IVSの準備を行います。マネジメントコンソールのAmazon IVSのページから、Get startedの[Create channel]ボタンから進めます。なおAmazon IVSは現在、東京リージョンには対応していません。今回はオレゴンリージョンを使用しました。

Channel nameを入力、Channel configurationはDefault configurationで進めます。[Create channel]でChannelを作成します。

Channelが作成できました!

配信ページの作成

続いて配信用のページも作成しておきます。(IVSからはm3u8のEndpointが払い出されるので、VideoJS HTTP Streamingなどでの動作確認もできると思いますが、せっかくなのでAmazon IVS Playerでページを準備してみます。)AWSドキュメントデモページを参考に、以下のようなhtmlファイルを作成しました。後述しますが、音声がデフォルトでミュートされるようで、ミュート解除のためにcontrolを表示させるようにしました。その代わりにライブ配信では不要なシークバーが表示されて見てくれが少し微妙になります。ここら辺はコーディングの仕方として改善の余地があるかと思います。(とはいえ私がコーディング不得手のため、とりあえずはこれで検証を進めてみます。)

IVSではChannelごとにPlayback URLが払い出されますので、これをPLAYBACK_URLに指定します。

zoom-ivs-livestreaming.html

<html>
  <head>
    <title>zoom-meeting-livestream-with-amazon-ivs</title>
    <style>
      video {
          height: 100%;
          width: 100%;
          left: 0;
          top: 0;
          position: fixed;
      }
    </style>
  </head>
  <body>
    <video id="video-player" playsinline controls></video>
    <script src="https://player.live-video.net/1.0.0/amazon-ivs-player.min.js"></script>
    <script>
      var PLAYBACK_URL = "https://XXXXXXXXXXXX.us-west-2.playback.live-video.net/api/video/v1/us-west-2.XXXXXXXXXXXX.channel.XXXXXXXXXXXX.m3u8";
      if (IVSPlayer.isPlayerSupported) {
          const player = IVSPlayer.create();
          player.attachHTMLVideoElement(document.getElementById('video-player'));
          player.load(PLAYBACK_URL);
          player.play();
      }
    </script>
  </body>
</html>

このhtmlファイルをWebサイトホスティングで公開設定したS3バケットに配置、以下のようなURLで再生ページが表示できるようにしておきます。(こちらのS3バケットは東京リージョンのものですが、強い意図はありません。とりあえずホスティングできるS3バケットが東京リージョンにあったので使っているぐあいです。)

  • https://my-s3-bucket.s3-ap-northeast-1.amazonaws.com/zoom-ivs-livestreaming.html

Zoomミーティングの作成

Amazon IVSのChannel作成が完了したら、続いてミーティングを作成します。ミーティング作成後、該当ミーティングの管理画面でライブストリーム配信設定箇所があります。カスタムライブストリーム配信サービスのところの「ライブストリーム設定」の文字列のリンクをクリックします。

「ライブストリームサービスを追加」のダイアログが現れますので、必要な情報を入力します。

この情報は、先ほど作成したIVS ChannelのStream configurationの項目などから入力します。

  • ストリーム配信のURL
    • Ingest serverの項目を入力します
  • ストリーミングキー
    • Stream Keyの項目を入力します
  • ライブストリーム配信ページのURL
    • ライブ配信視聴用のページのURLを入力します
    • 今回は作成した配信ページのURLを入力しました
      • https://my-s3-bucket.s3-ap-northeast-1.amazonaws.com/zoom-ivs-livestreaming.html

保存したのが以下の状態になります。

ミーティングならびにライブ配信の開始

準備ができたので、実際にミーティングとライブ配信を開始していきます。まずはZoomでミーティングを開始します。画面下部の「詳細」メニューから「ライブ中 カスタムライブストリーム配信サービス」をクリックします。

Zoomからライブストリームが開始され、配信ページで指定したURLへ遷移します。

配信ページURLへの遷移後、すぐにZoomミーティングの映像の視聴が開始されました。(以下は参加者がカメラをoffしているので文字だけですが……)

このときのIVS側の状況も確認しておきましょう。マネジメントコンソールのLive channelのページでライブ配信されている状況であることが確認できます。

文字だけだと寂しいので、画面共有しつつPCのカメラ映像も写してみました。

配信ページの作成の箇所で簡単に述べましたが、デフォルトでは音声がPlayer側でミュートされている状態なので、音声を確認するためにはミュート解除する必要があります。

ミーティングとライブ配信の終了

Zoomのミーティングを終了するとライブ配信も終了します。またミーティングは継続するがライブ配信だけ終了したい、などの場合はZoom側からライブストリーミングのみを終了させます。

まとめ

Zoomミーティングの外部動画配信サービス連携機能を使って、ミーティングのもようをAmazon Interactive Video Service (Amazon IVS)でライブ配信してみました。先のエントリで行ったMediaLiveと連携してライブ配信する方法と比べると、AWSインフラ側の準備は非常にシンプルになっているかと思います。またデフォルト設定ながら遅延も少ない印象でした。MediaLiveなどと連携した場合と比べて、Amazon IVSでは実現できことに制限がある(MediaLiveほどの自由度がない)、デフォルトでの同時視聴者数が3,000まで(Amazon IVS Service Quotas)など注意事項はありますが、要件にマッチする場合はAmazon IVSが非常に強力だと思いました。