このページは Cloud Translation API によって翻訳されました。

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

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

必要なもの

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

エクスペリエンス

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

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

通読するのみ

通読し、演習を行う

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

初心者

中級者

上級者

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

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

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

3. レシーバのローカルへのデプロイ

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

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

サーバーを実行する

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

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

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

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

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

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

[カスタムレシーバー] オプションがハイライト表示された [新しいレシーバーアプリケーション] 画面の画像

[Custom Receiver] を選択します。これが構築中のレシーバです。

[受信アプリケーションの URL] フィールドに URL を入力しているユーザーを示す [新しいカスタム受信機] 画面の画像

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

確認しました。新しいレシーバーに割り当てられたアプリ ID をメモしておきます。

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

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

[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 を入力し、[設定] をクリックします。

再生するコンテンツがライブ配信であることをウェブレシーバーキャストアプリケーションフレームワーク（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 ではユーザーがこれらのセグメント内でシークできます。ウェブレシーバーは、利用可能ないくつかの 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 を使用してカスタムのレシーバーアプリを作成する方法は以上です。

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