キャスト レシーバーにライブサポートを追加する

1. 概要

Google Cast ロゴ

この Codelab では、Cast Live Breaks API を使用するカスタム ウェブ レシーバー アプリの作成方法について説明します。

Google Cast とは

Google Cast では、ユーザーはモバイル デバイスからテレビにコンテンツをキャストできます。ユーザーは自分のモバイル デバイスをリモコンとして使い、テレビでのメディア再生を行うことが可能です。

Google Cast SDK を使うと、アプリを拡張してテレビやサウンド システムを制御できます。Cast SDK を使用すると、Google Cast デザイン チェックリストに基づいて、必要な UI コンポーネントを追加できます。

Google Cast デザイン チェックリストは、サポートされているすべてのプラットフォームにわたって、Cast ユーザー エクスペリエンスをシンプルで予測可能なものにするために使用します。

達成目標

この Codelab を修了すると、Live API を利用するキャスト レシーバーが完成します。

学習内容

  • キャストでライブ動画コンテンツを処理する方法
  • キャストでサポートされているさまざまなライブ配信のシナリオを設定する方法。
  • ライブ配信に番組データを追加する方法

必要なもの

  • 最新の Google Chrome ブラウザ
  • HTTPS ホスティング サービス（Firebase Hosting、ngrok など）
  • インターネットにアクセスできる Google Cast デバイス（Chromecast や Android TV など）。
  • HDMI 入力対応のテレビまたはモニター、または Google Home Hub

エクスペリエンス

  • ウェブ開発についての予備知識が必要です。
  • キャスト センダー アプリとキャスト レシーバー アプリの作成経験がある。

このチュートリアルの利用方法をお選びください。

通読するのみ 通読し、演習を行う

ウェブアプリの構築経験をどのように評価されますか。

初心者 中級者 上級者

2. サンプルコードを取得する

サンプルコードはすべてパソコンにダウンロードできます。

ダウンロードした ZIP ファイルを解凍します。

3. レシーバーをローカルでデプロイする

キャスト デバイスでウェブ レシーバーを使用するには、キャスト デバイスからアクセスできる場所にホストする必要があります。https 対応のサーバーがすでにある場合は、以降の手順をスキップして、URL をメモします。これは次のセクションで必要になります。

使用できるサーバーがない場合は、Firebase Hosting または ngrok を使用できます。

サーバーを実行する

選択したサービスを設定したら、app-start に移動してサーバーを起動します。

ホストされているレシーバーの URL をメモします。これは次のセクションで使用します。

4. Cast のデベロッパー コンソールでアプリを登録する

この Codelab に組み込まれているカスタム レシーバーを Chromecast デバイスで実行できるようにするには、アプリを登録する必要があります。アプリケーションを登録すると、送信側アプリケーションが API 呼び出し（受信側アプリケーションの起動など）を行うために使用する必要のあるアプリケーション ID が届きます。

[Add New Application] ボタンがハイライト表示されている Google Cast SDK デベロッパー コンソールの画像

[新しいアプリケーションを追加] をクリックします

[Custom Receiver] オプションがハイライト表示された [New Receiver Application] 画面の画像

[カスタム レシーバー] を選択します。これが開発中です。

[Receiver Application URL] フィールドに URL を入力している [New Custom Receiver] 画面の画像

新しいレシーバーの詳細を入力します。その際、

示しています。新しい受信者に割り当てられたアプリケーション ID をメモします。

また、Google Cast デバイスを登録して、公開前にレシーバー アプリにアクセスできるようにする必要があります。レシーバー アプリを公開すると、すべての Google Cast デバイスで利用できるようになります。この Codelab では、非公開のレシーバー アプリを使用することをおすすめします。

[新しいデバイスを追加] ボタンがハイライト表示されている Google Cast SDK デベロッパー コンソールの画像

[Add new Device] をクリックします。

[キャスト レシーバー デバイスの追加] ダイアログの画像

キャスト デバイスの背面に記載されているシリアル番号を入力し、わかりやすい名前を付けます。シリアル番号は、Google Cast SDK デベロッパー コンソールにアクセスする際に Chrome で画面をキャストして確認することもできます。

レシーバーとデバイスをテストできるようになるまでに 5 ～ 15 分かかります。5 ～ 15 分待ってから、キャスト デバイスを再起動する必要があります。

5. シンプルなライブ ストリームをキャストする

動画を再生している Android スマートフォンの画像。下部の動画プレーヤー コントロールのすぐ上に「リビングにキャスト」というメッセージが表示されています同じ動画を再生しているフルサイズ画面の画像

この Codelab を始める前に、公開中の API の概要が記載された 公開中のデベロッパー ガイドを確認することをおすすめします。

送信者に対しては、Cactool を使用してキャスト セッションを開始します。レシーバーは、自動的にライブ配信の再生を開始するように設計されています。

レシーバーは 3 つのファイルで構成されています。receiver.html という基本的な html ファイル。アプリのメイン構造が含まれています。このファイルを変更する必要はありません。receiver.js というファイルもあり、レシーバー用のロジックがすべて含まれています。最後に、この Codelab の後半で番組ガイドデータの取得をシミュレートするために使用する metadata_service.js もあります。

まず、Chrome で Cactool を開きます。Cast SDK のデベロッパー コンソールで入手したレシーバー アプリケーション ID を入力し、[設定] をクリックします。

再生するコンテンツがライブストリームであることを、Web Receiver Cast Application Framework（CAF）に指示する必要があります。これを行うには、次のコード行でアプリケーションを変更します。receiver.js の負荷インターセプタのメイン本文に追加します。

request.media.streamType = cast.framework.messages.StreamType.LIVE;

ストリーム タイプを LIVE に設定すると、CAF のライブ UI が有効になります。Web Receiver SDK は自動的にストリームのライブエッジにジャンプします。ライブ番組ガイドのデータがまだ追加されていないため、スクラブバーはストリームのシーク可能範囲全体を表します。

キャストボタンをクリックして対象のキャスト デバイスを選択し、receiver.js に変更を保存して Cactool でキャスト セッションを開始します。ライブ配信の再生がすぐに開始します。

6. 番組ガイドのデータを追加する

ライブ コンテンツに対する CAF のサポートにより、受信側と送信側のアプリケーションで番組ガイド データを表示することができるようになりました。コンテンツ プロバイダは、エンドユーザー エクスペリエンスを向上させるために、レシーバー アプリケーションに番組のメタデータを含めることが強く推奨されます（特にテレビ チャンネルのような長時間にわたるライブ配信の場合）。

CAF では、複数の番組のメタデータを単一のストリームで設定できます。MediaMetadata オブジェクトに開始のタイムスタンプと時間を設定することで、レシーバーはストリーム内のプレーヤーの現在位置に基づいて、送信者に表示されるメタデータとオーバーレイを自動的に更新します。以下に、API のサンプルとその一般的な使用例を示します。

// A sample metadata object for a single tv show
const currentShow = new cast.framework.messages.TvShowMediaMetadata();
currentShow.episode = 15;
currentShow.seriesTitle = 'The Odyssey';
currentShow.title = 'Scylla and Charybdis';
currentShow.sectionStartAbsoluteTime = toUnixTimestamp('9:00 PM');
currentShow.sectionDuration = HOUR_IN_SECONDS;

この Codelab では、サンプルのメタデータ サービスを使用してライブ配信のメタデータを提供します。プログラムのメタデータのリストを作成するために、コンテナを作成します。ContainerMetadata は、単一のメディア ストリームの MediaMetadata オブジェクトのリストを保持します。各 MediaMetadata オブジェクトは、コンテナ内の 1 つのセクションを表します。プレイヘッドが所定のセクションの境界内にある場合、そのメタデータは自動的にメディア ステータスにコピーされます。次のコードを receiver.js ファイルに追加して、サービスからサンプル メタデータをダウンロードし、コンテナを CAF に提供します。

/**
 *   Gets the current program guide data from the sample MetadataService. Once
 *   obtained, the guide information is added using QueueManager.
 */
async function loadGuideData() {
  const data = await MetadataService.fetchLiveMetadata();
  const containerMetadata = new cast.framework.messages.ContainerMetadata();
  containerMetadata.sections = data;

  playerManager.getQueueManager().setContainerMetadata(containerMetadata);
}

さらに、読み込みインターセプタにガイドデータを読み込む関数の呼び出しを追加します。

loadGuideData();

receiver.js ファイルを保存してキャスト セッションを開始します。番組の開始時間、終了時間、タイトルがすべて画面に表示されます。

プレイヘッドがコンテナ内の新しいセクションに移行すると、センダー アプリが UI を更新できるように、新しいメディア ステータス メッセージがレシーバーからすべてのセンダーに送信されます。受信側アプリケーションは、メディア ステータス インターセプタのコンテナ メタデータを更新して、送信側アプリケーションに番組情報を引き続きフィードすることをおすすめします。このサンプル サービスでは、現在の番組メタデータと、次の 2 つの番組のメタデータを返します。ストリームのメタデータを更新するには、前の例と同様に新しいコンテナを作成し、setContainerMetadata を呼び出します。

7. シークの無効化

ほとんどの動画ストリームは、複数の動画フレームを保持するセグメントで構成されます。特に指定のない限り、CAF ではユーザーがこれらのセグメント内を移動できます。Web Receiver では、利用可能な API を呼び出すことで、この値を指定できます。

読み込みインターセプタで、SEEK supported media コマンドを削除します。これにより、すべてのモバイル センダー インターフェースとタッチ インターフェースでのシークが無効になります。receiver.js の SDK インスタンス変数の定義の後に、次のコードを追加します。

// Disable seeking
playerManager.removeSupportedMediaCommands(
    cast.framework.messages.Command.SEEK, true);

アシスタントの音声コマンド（「OK Google, 60 秒巻き戻して」など）を無効にするには、シーク インターセプターを使用する必要があります。このインターセプタは、シーク リクエストが行われるたびに呼び出されます。SEEK 対応のメディア コマンドが無効になっている場合、インターセプタはシーク リクエストを拒否します。receiver.js ファイルに次のコード スニペットを追加します。

/**
 * A seek interceptor is called whenever CAF receives a request to seek to
 * a different location in media. This interceptor can be used to modify that
 * seek request or disable seeking completely.
 */
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.SEEK, (seekRequestData) => {
      // if the SEEK supported media command is disabled, block seeking
      if (!(playerManager.getSupportedMediaCommands() &
            cast.framework.messages.Command.SEEK)) {
        castDebugLogger.info(TAG, 'Seek blocked.');
        return null;
      }

      return seekRequestData;
    });

receiver.js ファイルを保存してキャスト セッションを開始します。ライブ配信内で移動することはできなくなりました。

8. 完了

ここでは、最新の Cast Receiver SDK を使用してカスタム レシーバー アプリを作成する方法を学習しました。

詳しくは、ライブ配信のデベロッパー ガイドをご覧ください。