Amazon Web Services ブログ

Amazon Interactive Video Service – アプリとウェブサイトへのライブ動画の追加

今日は、アプリとウェブサイトにライブ動画を直接追加できる新しい Amazon Interactive Video Service をご紹介できるのをとても嬉しく思っています。皆さんが私と同じような考えを持っているならば、AWS チームがインタラクティブで低レイテンシーのライブ動画のアプリケーションへの統合をいかにシンプルにしたかに驚かされるでしょう。

このサービスは、Amazon Interactive Video Service (IVS) コンソールまたは API のどちらかを使用してチャネルを作成することを可能にします。作成後、標準的なストリーミングソフトウェアを使って動画をこのチャネルにストリーミングします。世界中のあらゆる視聴者にライブ動画を提供するために必要となる作業は、すべてサービスが実行します。サービスには、ウェブ、iOS、または Android プロジェクトへのライブ動画の統合を容易にするプレーヤー SDK が含まれています。

私はこのサービスの機能がこれだけだったとしても感動していたと思いますが、チームはもうひと頑張りして、このサービスをユニークなものとする 2 つの主要機能を追加しました。

1 つ目は、動画が低レイテンシーであることです。これは、動画をブロードキャストしてから視聴者の画面に表示されるまでの時間が 2~3 秒まで短縮できることを意味します。このサービスはインタラクティブなリアルタイムアプリケーションの構築を支援することを目的としているため、低レイテンシーは必要不可欠です。これは、遅延を最低限に抑えることによってのみ可能になります。

2 つ目は、ライブ配信の決定的な瞬間にイベントを発生させることができるように、チームが動画と共に時間指定メタデータを送信する機能を追加したことです。たとえば、ライブ投票が開始されたことを伝えるイベントを送信することが可能で、アプリケーションはそれに応答し、ライブ動画と並行して視聴者が投票できるようにします。

これら 2 つの機能の組み合わせは、ユーザーが独自のウェブサイトとアプリケーションで視聴者とより価値のある関係を生み出すエクスペリエンスを構築できることを意味します。たとえば、製品ローンチのライブ配信を行っている場合、追加の製品情報を同期させて、動画に新しい製品が表示されると同時にその情報が表示されるようにすることができます。「今すぐ購入」ボタンを表示させて、視聴者がライブ配信で見ている製品をその場で購入できるようにすることも可能です。

この数か月間、私は Twitch.tv でライブクイズを配信しているのですが、このサービスの登場で、さらにパーソナライズされた統合バージョンをウェブサイトで直接構築できるのではないかと考えるようになりました。では、Amazon IVS コンソールに移動し、チャネルを作成することでこのようなウェブサイトやアプリケーションを作成する方法をご紹介しましょう。

Amazon IVS コンソールの最初の画面に [チャネルの作成] というボタンが表示されるので、これをクリックしてチャネルの作成を開始します。

チャネルに名前を付けてデフォルト設定 (フル HD で動画を配信し、低レイテンシーが必要) を選択します。それから、画面最後の [チャネルの作成] ボタンをクリックします。

数秒後、[チャネルが正常に作成されました。] というメッセージを受け取ります。画面には、動画の配信に使用するコンピューターまたはデバイスの設定方法を説明する [開始する] セクションがあります。

ストリーム設定情報も同じ画面にあります。取り込みサーバーストリームキーは、サービスへの動画の送信を開始するために必要となる 2 つの情報です。

私はすべてのオンラインストリーミングに XSplit Broadcaster と呼ばれるソフトウェアパッケージを使用しますが、次の数ステップは、使用するブロードキャストソフトウェアに関わらず、同様のステップとなります。新しい出力をセットアップして、[カスタム RTMP] を選択します。

新しい RTMP 出力のプロパティ画面で、名前と説明を追加します。コンソールのストリーム設定セクションからコピーした RTMPS URL を追加します。Stream Name テキストボックス (これはソフトウェアによって呼び方が異なるため、ストリームキーを追加する場所についてお使いのブロードキャストソフトウェアのドキュメントをチェックするようにしてください) にストリームキーも追加します。

出力を設定したところで、新しいカスタム RTMPS 出力をブロードキャストできるようになりました。裏舞台で、ソフトウェアが Amazon Interactive Video Service への動画と音声の.ストリーミングを開始します。

コンソールに戻ってライブ配信セクションを見ると、コンソールにライブ動画が表示されているのがわかります。私の経験では、動画のストリーミングが開始されるまでに数秒かかりました。

ライブ動画をウェブサイトに追加するには、プレーヤー SDK を使用する必要があります。コンソールのプレーヤー設定セクションにはプレイバック URL があります。私の動画を再生するようにプレーヤーを設定するには、この URL が必要になります。

このサービスを構築したチームは、Codepen で素晴らしいプロジェクト例を作成しています。今回はこれを変更して動画をテストし、クイズを作成します。この例では JavaScript のプレーヤー SDK が使用されており、動画を再生するために実行する必要があるのは、新しく作成されたプレイバック URL をポイントするように playbackUrl 変数を設定することだけです。これが完了したら、ウェブページに私の動画配信が表示されます。

このプロジェクト例には、先ほどお話しした時間指定メタデータ機能を処理するコードがあります。基本的に、メタデータをこのサービスに送信すると、サービスがこれをイベントとしてプレーヤー SDK に渡します。その後、このイベントを処理し、これを使って楽しいことを実行できるようになります。この例では、PlayerEventType.TEXT_METADATA_CUE イベントをリッスンするためのイベントリスナーを追加してから、ユーザーが投票できるようにするオンスクリーン HTML ボタンを表示するための関数に渡される cue オブジェクトを使用します。

player.addEventListener(PlayerEventType.TEXT_METADATA_CUE, function (cue) {
    metadataText = cue.text;
    triggerQuiz(metadataText);
});

ブロードキャスト中の任意の時点で、PutMetadata API を使ってチャネルにメタデータを送信できます。一例として、AWS CLI を使って以下のコマンドを送信すると、データがサービスに送信され、数秒後に JavaScript コードで PlayerEventType.TEXT_METADATA_CUE イベントが発生します。

payload='{"question": "In which year did Jeff Barr Start a blog at Amazon?","answers": [ "1992", "2004", "2008", "2015"],"correctIndex": 1}'

aws ivs put-metadata --channel-arn arn:aws:ivs:us-west-2:365489315573:channel/XBoZcusef81m --metadata "$payload" --region us-west-2

以下のように、ポーリング HTML エレメントがライブ動画上のオーバーレイとして表示され、ユーザーはそれを使って投票できます。

Amazon Interactive Video Service (Amazon IVS) は、Amazon IVS への動画入力の合計時間と、視聴者に配信された動画出力の合計時間に基づいた従量制料金を採用しています。一般的なコストの詳細については、製品ページの料金セクションをご覧ください。

Amazon IVS コンソールと API は、本日から欧州 (アイルランド)米国東部 (バージニア北部)、および米国西部 (オレゴン) の各リージョンでご利用いただけます。チャネルの作成と変更にはこれらのリージョンのいずれかを使用する必要がありますが、動画の取り込みと配信は、ライブ動画用に最適化されたインフラストラクチャのマネージドネットワークを通じて全世界でご利用いただけます。サービスのグローバルカバレッジに関する詳細については、「よくあるご質問」をご覧ください。

私と同様に、皆さんにもこのサービスをお楽しみいただけますように。皆さんがこのサービスで何を構築するのかを目にするのが待ち遠しくてたまりません。

ハッピーストリーミング!

– Martin