Skip to Content
AWS（Amazon Web Services）中級b-02 ライブ配信アプリを作る（Amazon IVS・Chat・Cognito）ステップ1: ライブ配信基盤の構築

ステップ1：Amazon IVSによるライブ配信基盤の構築

今回のステップの概要とライブ配信アプリとの関連について

このステップでは、ライブ配信アプリケーションの基盤となる**Amazon IVS（Interactive Video Service）**を使用して、基本的な配信・視聴機能を構築します。具体的には、IVSチャンネルの作成、S3バケットの準備、基本的な視聴画面の実装を行います。

ライブ配信アプリケーションにとって、Amazon IVSは「テレビ局の放送設備」のような役割を果たします。テレビ局が番組を全国に放送するために放送設備が必要なように、ライブ配信アプリも視聴者に映像を届けるための配信インフラが必要です。Amazon IVSは、この配信インフラを簡単に構築できるAWSのマネージドサービスです。

このステップで学ぶこと

リソースの関わりと構成説明

ステップ1で作成するリソースは、ライブ配信アプリケーションの基盤機能を構築するものです。それぞれのリソースがライブ配信アプリケーションにどのように関わるのかを説明します。

Amazon IVSとライブ配信アプリの関わり

Amazon IVS「ライブ配信チャンネル」は、ライブ配信アプリケーションの「放送局」のような役割を果たします。配信者が映像・音声を送信すると、IVSがそれを世界中の視聴者に低遅延（5秒以下）で配信します。これにより、リアルタイムでの双方向コミュニケーションが可能になります。

Amazon S3とライブ配信アプリの関わり

Amazon S3「メタデータ保存バケット」は、ライブ配信アプリケーションの「資料保管庫」のような役割を果たします。配信に関連するサムネイル画像、配信情報、録画データなどを安全に保存します。これにより、配信履歴の管理や配信品質の向上が実現できます。

IVS Player SDKとライブ配信アプリの関わり

IVS Player SDK「視聴画面」は、ライブ配信アプリケーションの「テレビ受信機」のような役割を果たします。視聴者のデバイス（PC、スマートフォン、タブレット）で配信を再生し、高品質な視聴体験を提供します。これにより、視聴者は快適にライブ配信を楽しむことができます。

実際の手順

実際の手順では、たくさんの設定値を入力することになります。 本文中に設定値が指定されていない場合は、デフォルト値のまま作業を進めてください。

1. Amazon IVSチャンネルの作成

ライブ配信の基盤となるIVSチャンネルを作成します。

Note

AWSでの役割

Amazon IVSは、ライブ配信に特化したマネージドサービスです。

特徴:

  • 低遅延配信（5秒以下）を実現
  • 世界規模のグローバル配信インフラを提供
  • 自動スケーリングで同時視聴者数の急増に対応
  • 配信品質の自動最適化機能を搭載

オンプレミスでの対応

オンプレミス環境では「RTMP配信サーバー + CDN」が対応します。

  • Nginx RTMP Module等での配信サーバー構築
  • 複数のCDNプロバイダーとの契約・設定
  • 負荷分散とスケーリングの手動管理

1-1. IVSチャンネルの基本設定

  1. Amazon IVSコンソール を開きます

  2. 右上のGet startedボックスでCreate Channelを選択します

  3. Channel configurationで以下を行います：

    • Default configurationを受け入れます
    • オプションでChannel nameを指定します（例：live-streaming-channel）

    チャンネル名は一意である必要はありませんが、チャンネルARN以外でチャンネルを区別する方法を提供します

注意: Custom configurationを使用すると、チャンネルタイプやRTMP（RTMPSの代わり）取り込みなど、デフォルト以外の値を指定できます。

  1. 今回は録画を無効にするため、録画設定はスキップして次の「最終的なチャンネル作成」に進みます

IVSチャンネル作成画面

Tip

【解説】遅延モードの選択について

IVSでは「低遅延」と「標準」の2つの遅延モードを選択できます。低遅延モードでは3-5秒の遅延で配信でき、視聴者とのリアルタイム交流が可能になります。

標準モードは10-30秒の遅延がありますが、より安定した配信が可能です。ライブコマースやゲーム実況など、視聴者との即座な反応が重要な場合は低遅延モードを選択しましょう。

今回は視聴者とのリアルタイム交流を重視するため、低遅延モードを選択します。

1-2. 最終的なチャンネル作成と配信キーの取得

  1. Create channelウィンドウの下部でCreate channelをクリックし、一意のARNを持つ新しいチャンネルを作成します

  2. チャンネル詳細を表示するには、Detailsを展開します

    （注：録画を有効にしていない場合、Auto-record to S3はDisabledに設定され、Recording configurationセクションは表示されません）

  3. 重要：以下の情報をメモしてください：

    Stream configurationエリアで：

    • Ingest server（取り込みサーバー）
    • Stream key（ストリームキー）

    これらは次のステップで配信設定に使用します。

    Playback configurationエリアで：

    • Playback URL（再生URL）

    これは後で配信の再生に使用します。

セキュリティ注意: ストリームキーは秘密情報として扱い、安全に保管してください。このキーを持つ人は誰でもあなたのチャンネルに配信できます。

補足: SRT値（エンドポイントとパスフレーズ）を確認するには、Stream configurationエリアのOther ingest optionsを展開してください。

# 取得する情報の例
取り込みサーバー: rtmps://a1b2c3d4e5f6.global-contribute.live-video.net/live/
ストリームキー: sk_us-west-2_XXXXXXXXXX_YYYYYYYYYYY
再生URL: https://a1b2c3d4e5f6.us-west-2.playback.live-video.net/api/video/v1/us-west-2.123456789012.channel.XXXXXXXXXX.m3u8

2. Amazon S3バケットの作成（オプション）

注意: このセクションは、将来的に配信の録画やメタデータ保存を行う場合のためのものです。今すぐ必要ない場合はスキップして、「3. 基本的な視聴画面の実装」に進んでください。

配信関連データを保存するS3バケットを作成します。

2-1. S3バケットの基本設定

  1. Amazon S3コンソール を開きます

  2. バケットを作成ボタンをクリックします

  3. 以下の設定を行います：

    • バケット名: live-streaming-metadata-[ランダムな一意の文字列]（例：live-streaming-metadata-20240101xyz）
    • AWS リージョン: IVSチャンネルと同じリージョンを選択
    • パブリックアクセスをすべてブロック: チェックを入れたまま（セキュリティのため推奨）

  4. その他の設定はデフォルトのまま、バケットを作成をクリックします

2-2. バケットポリシーの設定（IVS録画を使用する場合）

  1. 作成したバケットを選択し、アクセス許可タブを開きます

  2. バケットポリシーセクションで編集をクリックします

  3. 以下のポリシーを入力します（[YOUR-BUCKET-NAME]を実際のバケット名に置き換えてください）：

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowIVSAccess",
            "Effect": "Allow",
            "Principal": {
                "Service": "ivs.amazonaws.com"
            },
            "Action": [
                "s3:PutObject",
                "s3:GetObject"
            ],
            "Resource": "arn:aws:s3:::YOUR-BUCKET-NAME/*"
        }
    ]
}
  1. 変更を保存をクリックします

3. 基本的な視聴画面の実装

IVS Player SDKを使用して、配信を視聴できる基本的なWebページを作成します。

3-1. HTML構造の作成

  1. ローカル環境で新しいHTMLファイルviewer.htmlを作成します

  2. 以下のコードを記述します：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ライブ配信視聴画面</title>
    <!-- Amazon IVS Player SDKの読み込み（最新バージョン1.46.0） -->
    <script src="https://player.live-video.net/1.46.0/amazon-ivs-player.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f0f0f0;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        #video-player {
            width: 100%;
            height: 450px;
            background-color: #000;
            border-radius: 8px;
        }
        .status {
            margin-top: 20px;
            padding: 10px;
            border-radius: 4px;
            font-weight: bold;
        }
        .live { background-color: #d4edda; color: #155724; }
        .offline { background-color: #f8d7da; color: #721c24; }
    </style>
</head>
<body>
    <div class="container">
        <h1>ライブ配信視聴画面</h1>
        <div id="video-player"></div>
        <div id="status" class="status offline">配信は開始されていません</div>
    </div>
 
    <script>
        // ブラウザがIVS Playerをサポートしているか確認
        if (IVSPlayer.isPlayerSupported) {
            // IVSプレイヤーインスタンスの作成
            const player = IVSPlayer.create();
 
            // HTML video要素にプレイヤーをアタッチ
            player.attachHTMLVideoElement(document.getElementById('video-player'));
 
            // 再生URL（先ほど取得したPlayback URLに置き換えてください）
            const playbackUrl = 'YOUR_PLAYBACK_URL_HERE';
 
            // 配信状態の監視
            player.addEventListener(IVSPlayer.PlayerEventType.STATE_CHANGED, function(event) {
                const statusElement = document.getElementById('status');
                if (event.state === IVSPlayer.PlayerState.PLAYING) {
                    statusElement.textContent = '🔴 ライブ配信中';
                    statusElement.className = 'status live';
                } else if (event.state === IVSPlayer.PlayerState.IDLE) {
                    statusElement.textContent = '配信は開始されていません';
                    statusElement.className = 'status offline';
                }
            });
 
            // 配信の読み込みと再生
            player.load(playbackUrl);
            player.play();
        } else {
            alert('このブラウザはAmazon IVS Playerをサポートしていません');
        }
    </script>
</body>
</html>

3-2. Playback URLの設定

  1. 作成したviewer.htmlの以下の行を編集します：
const playbackUrl = 'YOUR_PLAYBACK_URL_HERE';
  1. YOUR_PLAYBACK_URL_HEREを、ステップ1-2で取得した実際のPlayback URLに置き換えます

例：

const playbackUrl = 'https://a1b2c3d4e5f6.us-west-2.playback.live-video.net/api/video/v1/us-west-2.123456789012.channel.XXXXXXXXXX.m3u8';

3-3. 配信テストの実行

  1. OBS Studio等の配信ソフトウェアを起動します（OBS Studioダウンロード ）

  2. OBS Studioで配信設定を行います：

    • 設定 → 配信 → サービス: カスタム... を選択
    • サーバー: ステップ1-2で取得したIngest server URL
    • ストリームキー: ステップ1-2で取得したStream key

  3. OBS Studioで配信開始をクリックします

  4. Webブラウザで作成したviewer.htmlを開きます（ローカルサーバーまたはfile://経由）

  5. 配信が正常に表示されることを確認します（遅延は通常3-5秒程度）

Tip

【解説】配信ソフトウェアの設定について

OBS Studioは無料で使用できる配信ソフトウェアです。IVSとの連携では、「設定」→「配信」で「カスタム」を選択し、サーバーとストリームキーを入力します。

配信品質は「出力」設定で調整できます。初回テストでは720p、30fps、2500kbps程度の設定から始めることをおすすめします。

配信が開始されると、視聴画面で3-5秒の遅延で映像が表示されます。

このステップで何をしたのか

このステップでは、Amazon IVSを使用してライブ配信の基盤システムを構築しました。具体的には、低遅延配信が可能なIVSチャンネルの作成、配信データ保存用のS3バケットの準備、IVS Player SDKを使用した基本的な視聴画面の実装を行いました。また、実際の配信テストを通じて、配信から視聴までの一連の流れを確認しました。

ライブ配信アプリでどのような影響があるのか

この構成により、ライブ配信アプリケーションは全世界の視聴者に対して低遅延（3-5秒）でのライブ配信が可能になりました。Amazon IVSの自動スケーリング機能により、視聴者数が急増しても安定した配信を維持できます。また、グローバル配信インフラを活用することで、世界中の視聴者に高品質な配信を提供できます。これは、テレビ局が全国ネットワークを通じて番組を放送するのと同様の効果を、個人や小規模な組織でも実現できることを意味します。

技術比較まとめ表

技術領域AWSオンプレミス
配信インフラAmazon IVS
マネージドサービスで自動運用		RTMP配信サーバー
手動構築・運用が必要
グローバル配信IVSの内蔵エッジネットワーク
世界規模で自動最適化		複数CDNプロバイダー
契約・設定・管理が複雑
スケーリング自動スケーリング
視聴者数に応じて自動調整		手動スケーリング
事前の容量計画が必要

学習において重要な技術的違い

1. 配信遅延の管理

  • AWS：IVSの低遅延モードで3-5秒の遅延を自動実現
  • オンプレミス：RTMPサーバーの設定とCDNの最適化で10-30秒の遅延

2. インフラの運用負荷

  • AWS：マネージドサービスで運用作業が最小限
  • オンプレミス：サーバー管理、ネットワーク設定、障害対応が必要

3. 配信品質の保証

  • AWS：IVSが自動的に配信品質を最適化
  • オンプレミス：エンコーダー設定とネットワーク帯域の手動調整

4. コスト構造

  • AWS：使用した分だけの従量課金（配信時間・視聴時間ベース）
  • オンプレミス：初期投資が大きく、利用量に関わらず固定費が発生

実践チェック：画面キャプチャで証明しよう

下記のチェック項目について、実際にAWSマネジメントコンソールで設定ができていることを確認し、各項目ごとに該当画面のスクリーンショットを撮影して提出してください。

  • Amazon IVSチャンネルが正常に作成され、「アクティブ」状態になっている

  • IVSチャンネルの詳細画面で、取り込みサーバーURL、ストリームキー、再生URLが表示されている

  • S3バケットが作成され、適切な命名規則（live-streaming-metadata-[ランダム文字列]）で設定されている

  • S3バケットのバケットポリシーが正しく設定され、IVSサービスからのアクセスが許可されている

  • 配信ソフトウェア（OBS Studio等）でIVSチャンネルに接続し、配信が開始できている

  • 作成した視聴画面（viewer.html）でライブ配信が正常に再生されている

提出方法： 各項目ごとにスクリーンショットを撮影し、まとめて提出してください。 ファイル名やコメントで「どの項目か」が分かるようにしてください。

構成図による理解度チェック

このステップで作成したリソースの構成図を作成し、ライブ配信の流れを理解しましょう。

なぜ構成図を作成するのか？

ライブ配信システムでは、配信者から視聴者まで複数のコンポーネントが連携して動作します。構成図を作成することで、データの流れや各コンポーネントの役割を視覚的に理解できます。また、トラブルが発生した際に、どの部分で問題が起きているかを特定しやすくなります。

  • 配信の流れの理解: 配信者のデバイスから視聴者のデバイスまでのデータの流れ
  • コンポーネント間の関係: IVS、S3、Player SDKの相互関係
  • トラブルシューティング: 問題発生時の原因特定ポイント

構成図の書き方

以下のコンポーネントとその関係を図示してみましょう。

  1. 配信者（OBS Studio）: 映像・音声データの送信元
  2. Amazon IVS: 配信データの受信・処理・配信
  3. Amazon S3: メタデータ・サムネイルの保存
  4. 視聴者（Webブラウザ）: IVS Player SDKによる配信再生
  5. データフロー: RTMPによる取り込み、HLSによる配信

💡 ヒント: 配信者から視聴者への一方向の流れと、各AWSサービスがどの段階で関与するかを明確に表現しましょう。

理解度チェック：なぜ？を考えてみよう

AWSの各リソースや設計には、必ず”理由”や”目的”があります。 下記の「なぜ？」という問いに自分なりの言葉で答えてみてみましょう。 仕組みや設計意図を自分で説明できることが、真の理解につながります。 ぜひ、単なる暗記ではなく「なぜそうなっているのか？」を意識して考えてみてください。

Q. なぜAmazon IVSでは「低遅延モード」と「標準モード」の2つの遅延設定が用意されているのでしょうか？それぞれどのような用途に適しているか説明してください。

Q. なぜライブ配信にはRTMP（取り込み）とHLS（配信）という異なるプロトコルを使用するのでしょうか？それぞれのプロトコルの特徴と役割を説明してください。

Q. なぜS3バケットにバケットポリシーを設定してIVSサービスからのアクセスを許可する必要があるのでしょうか？セキュリティの観点から説明してください。

今回のステップで利用したAWSサービス名一覧

  • Amazon IVS：ライブ配信に特化したマネージドサービス、低遅延配信とグローバル配信インフラを提供
  • Amazon S3：配信関連データの保存、メタデータとサムネイル画像の管理
  • IVS Player SDK：Webブラウザでの配信再生、視聴者向けの配信プレイヤー機能
Last updated on
学習手順ステップ2: リアルタイムチャット機能