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

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 を活用する Cast レシーバーが作成されます。

学習内容

Cast でライブ動画コンテンツを処理する方法。
Cast でサポートされているさまざまなライブストリーミングシナリオを構成する方法。
ライブ配信に番組データを追加する方法

必要なもの

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

エクスペリエンス

ウェブ開発の知識が必要です。
Cast 送信側アプリと受信側アプリの構築経験。

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

通読するのみ

通読し、演習を行う

ウェブアプリ作成のご経験についてお答えください。

初心者

中級者

上級者

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

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

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

3. ローカルでレシーバーを実装する

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

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

サーバーを実行する

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

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

4. Cast Developer Console でアプリを登録する

この Codelab で作成するカスタムレシーバーを Chromecast デバイスで実行できるようにするには、アプリの登録が必要です。アプリを登録すると、アプリ ID が発行されます。センダーアプリでの API 呼び出し（レシーバーアプリを起動するなど）には、この ID を使用する必要があります。

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

[Add new application]（新しいアプリを追加）をクリックします。

[カスタムレシーバ] オプションがハイライト表示された [New Receiver Application] 画面の画像

[Custom Receiver（カスタムレシーバー）] を選択します（これを今から作成します）。

[新しいカスタムレシーバ] 画面の画像。[レシーバアプリケーション URL] フィールドに URL が入力されている

新しいレシーバーの詳細を入力します。前のセクションでメモしておいた URL を

必ず指定してください。新しいレシーバーに割り当てられたアプリ ID をメモしておきます。

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

[Add New Device] ボタンがハイライト表示された Google Cast SDK Developer Console の画像

[Add new Device（新しいデバイスを追加）] をクリックします。

[Add Cast Receiver Device] ダイアログの画像

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

レシーバーとデバイスをテストする準備ができるまでには 5 ～ 15 分かかります。5 ～ 15 分待ってから、キャストデバイスを再起動します。

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

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

この Codelab を始める前に、ライブ API の概要を説明しているライブデベロッパーガイドを確認しておくとよいでしょう。

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

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

まず、Chrome で Cactool を開きます。Cast SDK Developer Console で取得したレシーバーアプリケーション ID を入力し、[設定] をクリックします。

再生するコンテンツがライブ配信であることをウェブレシーバーの Cast アプリケーションフレームワーク（CAF）に指示する必要があります。そのためには、次のコード行を使用してアプリケーションを変更します。receiver.js の読み込みインターセプタの本体に追加します。

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

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

receiver.js への変更を保存し、キャストアイコンをクリックしてターゲットのキャストデバイスを選択することで、Cactool でキャストセッションを開始します。ライブ配信がすぐに再生されます。

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

CAF のライブコンテンツのサポートに、受信側アプリと送信側アプリでの番組ガイドデータの表示のサポートが追加されました。コンテンツプロバイダは、エンドユーザーエクスペリエンスを向上させるため、特にテレビチャンネルなどの長時間実行されるライブストリームについては、レシーバーアプリケーションにプログラミングメタデータを含めることを強く推奨します。

CAF は、1 つのストリームで複数のプログラムのメタデータを設定することをサポートしています。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 ファイルに次のコードを追加して、Google のサービスからサンプルメタデータをダウンロードし、コンテナを 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 ではユーザーがこれらのセグメント内でシークできます。ウェブレシーバは、利用可能な API を呼び出すことでこれを指定できます。

ロードインターセプタで、SEEK 対応のメディアコマンドを削除します。これにより、すべてのモバイル送信者とタッチインターフェースでシークが無効になります。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 を使用してカスタムのレシーバーアプリを作成する方法は以上です。

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