このページは 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 Nest Hub

経験

ウェブ開発に関する知識が必要です。
Cast センダーの構築経験と受信します。

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

通読するのみ

通読し、演習を行う

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

<ph type="x-smartling-placeholder"></ph> 初心者

中級

上達

をご覧ください。

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

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

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

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

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

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

サーバーを実行する

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

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

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

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

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

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

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

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

「新しいカスタムのレシーバー」の画像[Receiver Application URL] に URL が入力されていることを示す画面フィールド

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

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

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

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

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

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

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

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

5. シンプルなライブ配信のキャスト

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

この Codelab を開始する前に、ライブ API の概要について説明しているライブデベロッパーガイドを確認することをおすすめします。

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

レシーバーは 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 では、サンプルのメタデータサービスを使用してライブ配信のメタデータを提供します。番組メタデータのリストを作成するには、containerを作成します。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 サポートされているメディアコマンドを削除します。これにより、モバイルデバイスのすべての送信者とタッチインターフェースでシークが無効になります。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 を使用してカスタムレシーバーアプリを作成する方法を学びました。

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