Amazon IVSを使ってみた

どうもバックエンドエンジニアの「ささやーま」です。
今回は、「Amazon IVS」を検証してみました。

Amazon IVSとは
料金
- 動画の入力
- 動画の出力
配信
- AWSコンソール
まとめ

Amazon IVSとは

Amazon Interactive Video Serviceの略で、AWS上で超簡単にライブ映像配信サーバーを構築できるサービスです。

Amazon Interactive Video Service

上記サイトの「仕組み」の図をみてください。なんですかこのシンプルな構成図！

上記サイトより抜粋ですが、以下が利点になります。

数回のクリックでライブストリームを作成および設定、数秒でストリーミングを開始できる
ライブ動画用に最適化された専用のグローバルインフラストラクチャでストリームを受信および配信することができる
超低レイテンシー（超低遅延）のライブ動画を「すぐに利用可能」な状態で提供できる
Amazon IVS プレイヤー SDK を使用して、iOS、Android、ウェブアプリケーションにライブストリームをすばやく簡単に取り込み可能

すばらしい利点、そして簡単に配信できて、超低遅延なライブ配信ができるなんて最高じゃないですかー！

料金

動画の入力、動画の出力に対して料金がかかります。

動画の入力

Amazon IVSへ送信する動画に対して１時間あたりの料金がかかり、チャネルタイプ（スタンダード、ベーシック）によって料金が変わります。

チャネルタイプ	１時間あたりの料金
スタンダード	2.00 USD
ベーシック	0.20 USD

スタンダードチャネル：元の入力からさまざまな品質の出力を生成し、デバイスとネットワークの状態に応じて、最高の品質を配信する。最大入力は 8.5 Mbps、解像度 1080p (フル HD)。
ベーシックチャネル：元の入力を視聴者に配信する。最大入力は、解像度 480p (SD) の場合は 1.5 Mbps、解像度 720p (HD) または 1080p (フル HD) の場合は 3.5Mbps。

※AWS新規ユーザは、12か月間以下の無料利用枠もあります。毎月ベーシックチャネルのライブ動画入力 5 時間無料。

動画の出力

視聴者に配信する動画に対して 1 時間あたりの料金がかかります。

出力料金は、グローバルに配信する場合は注意が必要です。

以下、AWSからの抜粋になりますが、視聴者の見る地域で最適な場所（リージョン）からの配信になり、配信リージョンによって料金が変わってきます。

1 時間あたりの出力レートの請求リージョンは、ストリームを視聴している視聴者の場所によって決まります。
Amazon IVS は、各視聴者に最適な場所からストリームの配信を試みて、ストリームのパフォーマンスを向上させ、レイテンシーを短縮します。
請求リージョンは、チャネル設定が行われる場所でも、ストリームが Amazon IVS に送信または取り込まれる場所でもありません。
例えば、ニューヨーク市の視聴者は北米の請求リージョンに対して請求されますが、サンパウロの視聴者はブラジルの請求リージョンに対して請求されます。

日本だけで視聴される場合（東京リージョン）の料金は以下です。

配信時間/月	動画配信１時間あたりの料金
最初の 10,000 時間 (SD解像度)	0.0650 USD
10,000 時間以上 (SD解像度)	0.0600 USD
10,000 時間以上 (HD解像度)	0.1300 USD
10,000 時間以上 (HD解像度)	0.1200 USD
10,000 時間以上 (フルHD解像度)	0.2600 USD
10,000 時間以上 (フルHD解像度)	0.2400 USD

※AWS新規ユーザは、12か月間以下の無料利用枠もあります。毎月SDライブ動画出力 100 時間無料。

配信

それでは、実際にライブ配信してみましょう！

AWSコンソール

AWSストリーミングサーバ作成

AWSコンソールにログインして、「Amazon IVS」のサービス画面を表示します。
画面から「開始する」を押下します。

チャネル名を入力します
カスタム設定を選択します（今回は無料枠を利用できるので、ベーシックを選ぶため）
チャネルタイプ：ベーシックを選択します（今回は無料枠を利用できるので、ベーシックを選択）
チャネル作成を押下

ストリームキー、取り込みサーバ、再生URLが発行されます。
配信サーバの設定はたったこれだけです！

OBS Studioの設定

本ブログでは、ライブ配信アプリはオープンソースの「OBS Studio」を利用します。

OBS Studio

OBSアプリの設定で、サービスカスタムを選択して、AWS IVSで発行された、取り込みサーバ、ストリームキーを設定します。

OBSアプリで配信開始ボタンを押下します。
これでライブ配信は開始されました。

ブラウザでライブを視聴しましょう！

HTMLに以下のコードを記述します。

<video id="video-player" controls playsinline></video>


<script src="https://player.live-video.net/1.13.0/amazon-ivs-player.min.js"></script>
<script>
(function (IVSPlayerPackage) {
  // First, check if the browser supports the IVS player.
  if (!IVSPlayerPackage.isPlayerSupported) {
    console.warn("The current browser does not support the IVS player.");
    return;
  }

  const PlayerState = IVSPlayerPackage.PlayerState;
  const PlayerEventType = IVSPlayerPackage.PlayerEventType;

  // Initialize player
  const player = IVSPlayerPackage.create();
  console.log("IVS Player version:", player.getVersion());
  player.attachHTMLVideoElement(document.getElementById("video-player"));

  // Attach event listeners
  player.addEventListener(PlayerState.PLAYING, function () {
    console.log("Player State - PLAYING");
  });
  player.addEventListener(PlayerState.ENDED, function () {
    console.log("Player State - ENDED");
  });
  player.addEventListener(PlayerState.READY, function () {
    console.log("Player State - READY");
  });
  player.addEventListener(PlayerEventType.ERROR, function (err) {
    console.warn("Player Event - ERROR:", err);
  });
  player.addEventListener(PlayerEventType.TEXT_METADATA_CUE, (cue) => {
    const metadataText = cue.text;
    const position = player.getPosition().toFixed(2);
    console.log(
    `PlayerEvent - TEXT_METADATA_CUE: "${metadataText}". Observed ${position}s after playback started.`
    );
  });

  // Setup stream and play
  player.setAutoplay(true);
  player.load(
    "https://xxxxxxxx.ap-northeast-1.playback.live-video.net/api/video/v1/ap-northeast-xxxxxxxx.channel.xxxx.m3u8"
  );
  player.setVolume(0.5);
})(window.IVSPlayer);
</script>

コードのplayer.load()にAWS IVSで発行された再生URL(https://xxxxxxxx.ap-xxxxxxxx.m3u8)を設定します。