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

カスタムのウェブレシーバーを作成する

1. 概要

Google Cast のロゴ

この Codelab では、キャスト対応デバイスでコンテンツを再生するカスタムウェブレシーバーアプリを作成する方法について説明します。

Google Cast とは

Google Cast では、ユーザーはモバイルデバイスからテレビにコンテンツをキャストできます。モバイルデバイスやパソコンの Chrome ブラウザをリモコンとして使い、テレビでのメディア再生を操作できます。

Google Cast SDK を使用すると、Google Cast 対応デバイス（テレビやサウンドシステムなど）の操作機能をアプリに組み込むことができます。Cast SDK では、Google Cast デザインチェックリストに沿って、必要な UI コンポーネントを使用できます。

Google Cast デザインチェックリストは、サポートされているすべてのプラットフォームで、キャストの操作をシンプルで予測可能なものにするために設けられています。詳しくはこちらをご覧ください。

達成目標

この Codelab を完了すると、キャスト対応デバイスに動画コンテンツを表示できる独自のカスタムレシーバーとして機能する HTML5 アプリを作成できるようになります。

学習内容

レシーバー開発のセットアップ方法
Cast Application Framework に基づくキャスト対応レシーバーの基本。
キャストされた動画を受け取る方法
Debug Logger の統合方法。
スマートディスプレイ向けにレシーバーを最適化する方法。

必要なもの

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

エクスペリエンス

ウェブ開発に関する知識が必要です。
一般的なテレビの視聴経験も必要です。

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

通読するのみ

通読し、演習を行う

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

初心者

中級者

上級者

テレビ視聴のご経験についてお答えください。

初心者

中級者

上級者

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

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

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

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

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

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

サーバーを実行する

目的のサービスが設定されたら、app-start に移動してサーバーを起動します。

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

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

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

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

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

[Custom Receiver] オプションが強調表示された [New Receiver Application] 画面の画像

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

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

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

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

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

[新しいデバイスを追加] ボタンがハイライト表示された Google Cast SDK Developer Console の画像

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

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

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

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

5. サンプルアプリを実行します。

Google Chrome のロゴ

新しいレシーバアプリケーションのテストの準備が整うまで待つ間、完成したレシーバアプリがどのようなものになるか見てみましょう。これから構築するレシーバーでは、アダプティブビットレートストリーミングを使用してメディアを再生できるようにします（今回は Dynamic Adaptive Streaming over HTTP（DASH）用にエンコードされたサンプルコンテンツを使用します）。

ブラウザでコマンドアンドコントロール（CaC）ツールを開きます。

コマンドアンドコントロール（CaC）ツールの [Cast Connect & Logger Controls] タブの画像

CaC ツールが開きます。
デフォルトのサンプルレシーバー ID「CC1AD845」を使用し、[Set App ID（アプリ ID を設定）] をクリックします。
左上のキャストアイコンをクリックし、Google Cast デバイスを選択します。

レシーバーアプリに接続されていることを示す、コマンドアンドコントロール（CaC）ツールの [Cast Connect & Logger Controls] タブの画像

上部の [Load Media（メディアの読み込み）] タブを選択します。

コマンドアンドコントロール（CaC）ツールの [メディアを読み込む] タブの画像

[Load by Content（コンテンツ別に読み込む）] ボタンをクリックすると、サンプル動画を再生できます。
Google Cast デバイスで動画の再生が開始し、デフォルトのレシーバーの基本的なレシーバー機能を確認できます。

6. 開始プロジェクトを準備する

ダウンロードした開始用アプリに Google Cast のサポートを追加する必要があります。この Codelab で使用する Google Cast の用語は以下のとおりです。

送信側アプリはモバイルデバイスやノートパソコンで動作します。
レシーバー アプリは Google Cast デバイスで動作します。

お好きなテキストエディタを使用して、開始用プロジェクトを基に作業する準備を行います。

ダウンロードしたサンプルコードの app-start ディレクトリを選択します。
js/receiver.js と index.html を開く

この Codelab の作業を進めていくと、http-server に変更が自動的に適用されます。変更が適用されない場合は、http-server を強制終了して再起動してみてください。

アプリの設計

レシーバーアプリは、キャストセッションを初期化して、センダーから LOAD リクエスト（メディアの再生コマンド）を受け取るまで待機します。

アプリは、index.html で定義されるメインビューと、レシーバーを機能させるためのすべてのロジックを定義した js/receiver.js という JavaScript ファイルで構成されます。

index.html

レシーバーアプリの UI を定義する HTML ファイルです。今の時点では空ですが、この Codelab の演習を通じてコードを追加していきます。

receiver.js

レシーバーアプリのすべてのロジックを管理するスクリプトです。今の時点では空のファイルですが、次のセクションで、コードを数行だけ追加して、完全に機能するキャストレシーバーを定義します。

7. 基本的なキャストレシーバー

基本的なキャストレシーバーは、起動時にキャストセッションを初期化します。これは、接続されているすべての送信アプリケーションに、レシーバの起動が成功したことを通知するために必要です。なお、新しい SDK は、DASH、HLS、スムーズストリーミングを使用したアダプティブビットレートストリーミングメディアや通常の MP4 ファイルを処理できるよう最初から設定されています。試してみましょう。

初期化

index.html のヘッダーに次のコードを追加します。

<head>
  ...

  <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
</head>

index.html の <body> で、receiver.js, を読み込む <footer> の前に次のコードを追加します。これにより、上で追加したスクリプトで表示されるデフォルトのレシーバー UI のスペースが Receiver SDK で確保されます。

<cast-media-player></cast-media-player>

次に、以下の処理を行って、js/receiver.js で SDK を初期化する必要があります。

CastReceiverContext（Receiver SDK 全体へのメインのエントリポイント）への参照を取得する
PlayerManager（再生を処理し、独自のロジックのプラグインに必要なすべてのフックを提供するオブジェクト）への参照を格納する
CastReceiverContext で start() を呼び出して SDK を初期化する

js/receiver.js に次のコードを追加します。

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();

context.start();

8. 「基本的な」動画コンテンツをキャストする

この Codelab では、CaC ツールを使用して新しいレシーバーをテストします。

ウェブブラウザで、コマンドアンドコントロール（CaC）ツールを開きます。

コマンドアンドコントロール（CaC）ツールの [Cast Connect & Logger Controls] タブの画像

先ほどフィールドで登録したご自身のアプリ ID を必ず置き換えて、[アプリ ID を設定] をクリックしてください。これにより、キャストセッションを開始するときに、ご自身のレシーバーが使用されるようになります。

メディアのキャスト

大まかに説明すると、キャストデバイスでメディアを再生するプロセスは、次のようになります。

センダー: Cast SDK を使用して、メディアアイテムをモデル化する MediaInfo JSON オブジェクトを作成します。
センダー: キャストデバイスに接続して、レシーバーアプリを起動します。
レシーバー: LOAD リクエストを介して MediaInfo オブジェクトを読み込み、コンテンツを再生します。
レシーバー: メディアのステータスをモニタリングして追跡します。
センダーはレシーバに再生コマンドを送信し、センダーアプリでのユーザー操作に基づいて再生を制御します。

ます、最初の基本的な作業として、再生可能なアセット URL（MediaInfo.contentUrl に格納）を MediaInfo に入力します。

実際のセンダーでは、MediaInfo.contentId のアプリ固有のメディア識別子が使用されます。レシーバーは contentId を ID として使用して適切なバックエンド API 呼び出しを行い、実際のアセット URL を解決し、MediaInfo.contentUrl. に設定します。このレシーバーは、DRM ライセンスの取得やミッドロール挿入点に関する情報の挿入などのタスクも処理します。

レシーバーを拡張して、そうした処理を実装する手順は次のセクションで行います。まずは、キャストアイコンをクリックし、お使いのデバイスを選択してレシーバーを開きます。

レシーバーアプリに接続されていることを示す、コマンドアンドコントロール（CaC）ツールの [Cast Connect & Logger Controls] タブの画像

[メディアの読み込み] タブに移動して、[コンテンツ別に読み込む] ボタンをクリックします。レシーバーでサンプルコンテンツの再生が開始します。

コマンドアンドコントロール（CaC）ツールの [メディアを読み込む] タブの画像

Receiver SDK は、次の処理を行えるよう最初から設定されています。

キャストセッションを初期化する
センダーから受信した、再生可能なアセットを含む LOAD リクエストを処理する
大画面での表示に対応した基本的なプレーヤー UI を提供する

次のセクションに進む前に、CaC ツールとそのコードを確認してみてください。次のセクションでは、レシーバーを拡張してシンプルなサンプル API と通信し、送信者からの受信 LOAD リクエストを処理します。

9. 外部 API と統合する

今回は、実際のアプリで一般的なキャストレシーバーのユースケースに沿って、再生可能なアセット URL を送信する代わりに、API キーによって目的のメディアコンテンツを参照する LOAD リクエストを処理するようレシーバーを調整します。

この方法が一般的なのは、次の理由によります。

センダーがコンテンツの URL を知らない可能性がある。
レシーバー側で認証やその他のビジネスロジック、API 呼び出しを直接処理するようキャストアプリが設計されている。

この機能は主に PlayerManager の setMessageInterceptor() メソッドで実装されています。これにより、受信したメッセージをタイプに応じてインターセプトし、SDK の内部メッセージハンドラに到達する前に変更を加えることができます。このセクションでは、LOAD リクエストに対して次の処理を行います。

受信した LOAD リクエストとそのカスタム contentId を読み取る。
API への GET 呼び出しを行い、contentId でストリーミング可能なアセットを検索します。
LOAD リクエストを変更して、ストリームの URL を指定する。
MediaInformation オブジェクトを変更して、ストリームタイプパラメータを設定する。
再生のためにリクエストを SDK に渡すか、リクエストされたメディアを検索できない場合はコマンドを拒否します。

提供されているサンプル API は、一般的なレシーバタスクをカスタマイズするための SDK のフックを紹介しながらも、ほぼそのままですぐに使用できます。

サンプル API

ブラウザで https://storage.googleapis.com/cpe-sample-media/content.json にアクセスして、サンプル動画のカタログを表示します。コンテンツには、PNG 形式のポスター画像の URL と、DASH ストリームと HLS ストリームの両方が含まれます。DASH 形式と HLS 形式のストリームは、断片化された mp4 コンテナに格納されている分離済みの動画ソースと音声ソースを参照しています。

{
  "bbb": {
    "author": "The Blender Project",
    "description": "Grumpy Bunny is grumpy",
    "poster": "https://[...]/[...]/BigBuckBunny/images/screenshot1.png",
    "stream": {
      "dash": "https://[...]/[...]/BigBuckBunny/BigBuckBunny_master.mpd",
      "hls": "https://[...]/[...]/BigBuckBunny/BigBuckBunny_master.m3u8",
    "title": "Big Buck Bunny"
  },
  "fbb_ad": {
    "author": "Google Inc.",
    "description": "Introducing Chromecast. The easiest way to enjoy [...]",
    "poster": "https://[...]/[...]/ForBiggerBlazes/images/screenshot8.png",
    "stream": {
      "dash": "https://[...]/[...]/ForBiggerBlazes/ForBiggerBlazes.mpd",
      "hls": "https://[...]/[...]/ForBiggerBlazes/ForBiggerBlazes.m3u8",
    "title": "For Bigger Blazes"
  },

  [...]

}

次のステップでは、LOAD リクエストでレシーバーが呼び出された後、各エントリのキー（bbb, fbb_ad など）をストリームの URL にマッピングします。

LOAD リクエストをインターセプトする

この手順では、ホストされている JSON ファイルに対して XHR リクエストを行う関数を使用して、読み込みのインターセプタを作成します。JSON ファイルを取得したら、コンテンツを解析してメタデータを設定します。以降のセクションでは、MediaInformation パラメータをカスタマイズして、コンテンツタイプを指定します。

js/receiver.js ファイルで、context.start() を呼び出す直前に次のコードを追加します。

function makeRequest (method, url) {
  return new Promise(function (resolve, reject) {
    let xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.onload = function () {
      if (this.status >= 200 && this.status < 300) {
        resolve(JSON.parse(xhr.response));
      } else {
        reject({
          status: this.status,
          statusText: xhr.statusText
        });
      }
    };
    xhr.onerror = function () {
      reject({
        status: this.status,
        statusText: xhr.statusText
      });
    };
    xhr.send();
  });
}

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      return new Promise((resolve, reject) => {
        // Fetch content repository by requested contentId
        makeRequest('GET', 'https://storage.googleapis.com/cpe-sample-media/content.json').then(function (data) {
          let item = data[request.media.contentId];
          if(!item) {
            // Content could not be found in repository
            reject();
          } else {
            // Add metadata
            let metadata = new
               cast.framework.messages.GenericMediaMetadata();
            metadata.title = item.title;
            metadata.subtitle = item.author;

            request.media.metadata = metadata;

            // Resolve request
            resolve(request);
          }
        });
      });
    });

次のセクションでは、読み込みリクエストの media プロパティを DASH コンテンツ向けに設定する方法について説明します。

サンプル API の DASH コンテンツを使用する

読み込みのインターセプタを作成したら、コンテンツタイプをレシーバーに通知します。これにより、レシーバーはマスター再生リストの URL とストリームの MIME タイプを取得できます。js/receiver.js ファイルで、LOAD インターセプタの Promise() に次のコードを追加します。

...
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      return new Promise((resolve, reject) => {
          ...
          } else {
            // Adjusting request to make requested content playable
            request.media.contentUrl = item.stream.dash;
            request.media.contentType = 'application/dash+xml';
            ...
          }
        });
      });
    });

この手順を完了したら、「テストする」に進んで、DASH コンテンツの読み込みをテストできます。HLS コンテンツの読み込みをテストする場合は、次の手順に進んでください。

サンプル API の HLS コンテンツを使用する

サンプル API には、HLS コンテンツと DASH が含まれています。サンプル API の HLS URL を使用するには、前の手順と同様の contentType の設定に加えて、いくつかのプロパティを読み込みリクエストに追加する必要があります。HLS ストリームを再生するようレシーバーを設定した場合、想定されるデフォルトのコンテナタイプはトランスポートストリーム（TS）になります。その結果、レシーバーは、contentUrl プロパティのみが変更されている場合に、TS 形式のサンプル MP4 ストリームを開こうとします。読み込みリクエストで MediaInformation オブジェクトを修正し、追加のプロパティを使用して、コンテンツのタイプが TS ではなく MP4 であることをレシーバーが認識できるようにする必要があります。js/receiver.js ファイルで、読み込みのインターセプタに次のコードを追加して、contentUrl プロパティと contentType プロパティを変更します。さらに、HlsSegmentFormat プロパティと HlsVideoSegmentFormat プロパティを追加します。

...
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      return new Promise((resolve, reject) => {
          ...
          } else {
            // Adjusting request to make requested content playable
            request.media.contentUrl = item.stream.hls;
            request.media.contentType = 'application/x-mpegurl';
            request.media.hlsSegmentFormat = cast.framework.messages.HlsSegmentFormat.FMP4;
            request.media.hlsVideoSegmentFormat = cast.framework.messages.HlsVideoSegmentFormat.FMP4;
            ...
          }
        });
      });
    });

テストする

もう一度、コマンド&コントロール（CaC）ツールを開き、アプリ ID をレシーバーのアプリ ID に設定します。キャストアイコンをクリックしてデバイスを選択します。

[Load Media（メディアの読み込み）] タブに移動します。ここでは、[Load by Content（指定したコンテンツを読み込む）] の近くにある [Content URL（コンテンツ URL）] 欄のテキストを削除します。これにより、メディアの contentId の参照のみを含む LOAD リクエストがアプリから送信されます。

Command and Control（CaC）ツールの [Load Media]タブの画像

レシーバーに加えた変更に問題がなければ、インターセプタによって MediaInfo オブジェクトが処理され、SDK により画面上で再生可能なコンテンツに変換されます。

[Load by Content（指定したコンテンツを読み込む）] をクリックして、メディアが適切に再生されるか確認してください。Content ID を content.json ファイルの別の ID に変更してみることもおすすめします。

10. スマートディスプレイ向けに最適化する

スマートディスプレイはタッチ操作が可能なデバイスです。レシーバーアプリをタッチ操作に対応させると、こうしたデバイスでも使用できるようになります。

このセクションでは、スマートディスプレイでの起動時にレシーバーアプリを最適化する方法と、プレーヤーコントロールをカスタマイズする方法について説明します。

UI コントロールにアクセスする

スマートディスプレイの UI コントロールオブジェクトにアクセスするには、cast.framework.ui.Controls.GetInstance() を使用します。js/receiver.js ファイルで、context.start() の前に次のコードを追加します。

...

// Optimizing for smart displays
const touchControls = cast.framework.ui.Controls.getInstance();

context.start();

<cast-media-player> 要素を使用しない場合は、CastReceiverOptions で touchScreenOptimizedApp を設定する必要があります。この Codelab では、<cast-media-player> 要素を使用します。

context.start({ touchScreenOptimizedApp: true });

デフォルトのコントロールボタンは、MetadataType と MediaStatus.supportedMediaCommands に基づいて各スロットに割り当てられます。

動画のコントロール

MetadataType.MOVIE、MetadataType.TV_SHOW、MetadataType.GENERIC の場合、スマートディスプレイの UI コントロールオブジェクトは次の例のように表示されます。

UI コントロールが重ねて表示された再生中の動画の画像

--playback-logo-image
MediaMetadata.subtitle
MediaMetadata.title
MediaStatus.currentTime
MediaInformation.duration
ControlsSlot.SLOT_SECONDARY_1: ControlsButton.QUEUE_PREV
ControlsSlot.SLOT_PRIMARY_1: ControlsButton.SEEK_BACKWARD_30
PLAY/PAUSE
ControlsSlot.SLOT_PRIMARY_2: ControlsButton.SEEK_FORWARD_30
ControlsSlot.SLOT_SECONDARY_2: ControlsButton.QUEUE_NEXT

音声のコントロール

MetadataType.MUSIC_TRACK の場合、スマートディスプレイの UI コントロールオブジェクトは次のように表示されます。

音楽再生中の画像に UI コントロールが重ねて表示されている

--playback-logo-image
MusicTrackMediaMetadata.albumName
MusicTrackMediaMetadata.title
MusicTrackMediaMetadata.albumArtist
MusicTrackMediaMetadata.images[0]
MediaStatus.currentTime
MediaInformation.duration
ControlsSlot.SLOT_SECONDARY_1: ControlsButton.NO_BUTTON
ControlsSlot.SLOT_PRIMARY_1: ControlsButton.QUEUE_PREV
PLAY/PAUSE
ControlsSlot.SLOT_PRIMARY_2: ControlsButton.QUEUE_NEXT
ControlsSlot.SLOT_SECONDARY_2: ControlsButton.NO_BUTTON

サポートされているメディアコマンドの更新

UI コントロールオブジェクトは、MediaStatus.supportedMediaCommands に基づいて ControlsButton を表示するかどうかも決定します。

supportedMediaCommands の値が ALL_BASIC_MEDIA の場合、デフォルトのコントロールレイアウトは次のようになります。

メディアプレーヤーのコントロールの画像: 進行状況バー、有効な [再生] ボタン、[早送り] ボタン、[早戻し] ボタン

supportedMediaCommands の値が ALL_BASIC_MEDIA | QUEUE_PREV | QUEUE_NEXT の場合、デフォルトのコントロールレイアウトは次のようになります。

メディアプレーヤーのコントロールの画像: 進行状況バー、[再生] ボタン、[早送り] ボタン、[早戻し] ボタン、[キューに追加（前）] ボタン、[キューに追加（次）] ボタンが有効になっている

supportedMediaCommands の値が PAUSE | QUEUE_PREV | QUEUE_NEXT の場合、デフォルトのコントロールレイアウトは次のようになります。

メディアプレーヤーのコントロールの画像: 進行状況バー、[再生] ボタン、有効な [キューに追加（前）] ボタンと [キューに追加（次）] ボタン

テキストトラックを使用できる場合は、字幕ボタンが常に SLOT_1 に表示されます。

メディアプレーヤーのコントロールの画像: 進行状況バー、[再生] ボタン、[早送り] ボタンと [早戻し] ボタン、[キューに追加（前）] ボタンと [キューに追加（次）] ボタン、[字幕] ボタンが有効になっている

レシーバー関連要素の開始後に supportedMediaCommands の値を動的に変更する場合は、PlayerManager.setSupportedMediaCommands を呼び出して値をオーバーライドできます。また、addSupportedMediaCommands を使用して新しいコマンドを追加したり、removeSupportedMediaCommands を使用して既存のコマンドを削除したりすることもできます。

コントロールボタンをカスタマイズする

コントロールをカスタマイズするには、PlayerDataBinder を使用します。js/receiver.js ファイルで、touchControls の後に次のコードを追加して、コントロールの最初のスロットを設定します。

...

// Optimizing for smart displays
const touchControls = cast.framework.ui.Controls.getInstance();
const playerData = new cast.framework.ui.PlayerData();
const playerDataBinder = new cast.framework.ui.PlayerDataBinder(playerData);

playerDataBinder.addEventListener(
  cast.framework.ui.PlayerDataEventType.MEDIA_CHANGED,
  (e) => {
    if (!e.value) return;

    // Clear default buttons and re-assign
    touchControls.clearDefaultSlotAssignments();
    touchControls.assignButton(
      cast.framework.ui.ControlsSlot.SLOT_PRIMARY_1,
      cast.framework.ui.ControlsButton.SEEK_BACKWARD_30
    );
  });

context.start();

11. スマートディスプレイにメディアブラウズを実装する

メディアブラウズは CAF レシーバー機能の一つで、タッチデバイスで他のコンテンツを探索できます。実装するには、PlayerDataBinder を使用して BrowseContent UI を設定します。表示するコンテンツに基づいて BrowseItems を入力できます。

BrowseContent

次に BrowseContent UI とそのプロパティの例を示します。

2 つの動画サムネイルと 3 つ目の動画の一部が表示された BrowseContent UI の画像

BrowseContent.title
BrowseContent.items

アスペクト比

targetAspectRatio property を使って、画像アセットに最適なアスペクト比を選択します。CAF Receiver SDK では、SQUARE_1_TO_1、PORTRAIT_2_TO_3、LANDSCAPE_16_TO_9 の 3 つのアスペクト比がサポートされています。

BrowseItem

各アイテムのタイトル、サブタイトル、再生時間、画像を表示するには、BrowseItem を使用します。

2 つの動画のサムネイルと 3 つ目のサムネイルの一部が表示されている BrowseContent UI の画像

BrowseItem.image
BrowseItem.duration
BrowseItem.title
BrowseItem.subtitle

メディアブラウズデータを設定する

ブラウジングするメディアコンテンツのリストを取得するには、setBrowseContent を呼び出します。js/receiver.js ファイルで、playerDataBinder の後の MEDIA_CHANGED イベントリスナー内に次のコードを追加して、ブラウズアイテムのタイトルを「Up Next」に設定します。

// Optimizing for smart displays
const touchControls = cast.framework.ui.Controls.getInstance();
const playerData = new cast.framework.ui.PlayerData();
const playerDataBinder = new cast.framework.ui.PlayerDataBinder(playerData);

...

let browseItems = getBrowseItems();

function getBrowseItems() {
  let browseItems = [];
  makeRequest('GET', 'https://storage.googleapis.com/cpe-sample-media/content.json')
  .then(function (data) {
    for (let key in data) {
      let item = new cast.framework.ui.BrowseItem();
      item.entity = key;
      item.title = data[key].title;
      item.subtitle = data[key].description;
      item.image = new cast.framework.messages.Image(data[key].poster);
      item.imageType = cast.framework.ui.BrowseImageType.MOVIE;
      browseItems.push(item);
    }
  });
  return browseItems;
}

let browseContent = new cast.framework.ui.BrowseContent();
browseContent.title = 'Up Next';
browseContent.items = browseItems;
browseContent.targetAspectRatio = cast.framework.ui.BrowseImageAspectRatio.LANDSCAPE_16_TO_9;

playerDataBinder.addEventListener(
  cast.framework.ui.PlayerDataEventType.MEDIA_CHANGED,
  (e) => {
    if (!e.value) return;

    ....

    // Media browse
    touchControls.setBrowseContent(browseContent);
  });

メディアブラウズアイテムがクリックされると、LOAD インターセプタがトリガーされます。LOAD インターセプタに次のコードを追加して、request.media.contentId をメディアブラウズアイテムの request.media.entity にマッピングします。

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      ...

      // Map contentId to entity
      if (request.media && request.media.entity) {
        request.media.contentId = request.media.entity;
      }

      return new Promise((resolve, reject) => {
            ...
        });
    });

BrowseContent オブジェクトを null に設定して、メディアブラウズ UI を削除することもできます。

12. レシーバーアプリをデバッグする

Cast Receiver SDK では、CastDebugLogger API とコマンドアンドコントロール（CaC）ツールを使用してログを取得することで、レシーバーアプリを簡単にデバッグできます。

初期化

API を組み込むには、index.html ファイルに CastDebugLogger ソーススクリプトを追加します。このソースは、<head> タグ内の Cast Receiver SDK の宣言の後で宣言する必要があります。

<head>
  ...
  <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
  <!-- Cast Debug Logger -->
  <script src="//www.gstatic.com/cast/sdk/libs/devtools/debug_layer/caf_receiver_logger.js"></script>
</head>

js/receiver.js ファイルの先頭の playerManager の後に次のコードを追加して、CastDebugLogger インスタンスを取得し、ロガーを有効にします。

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();

// Debug Logger
const castDebugLogger = cast.debug.CastDebugLogger.getInstance();
const LOG_TAG = 'MyAPP.LOG';

// Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
context.addEventListener(cast.framework.system.EventType.READY, () => {
  if (!castDebugLogger.debugOverlayElement_) {
      castDebugLogger.setEnabled(true);
  }
});

デバッグロガーが有効になっている場合は、DEBUG MODE というテキストのオーバーレイがレシーバーに表示されます。

フレームの左上に赤い背景で「DEBUG MODE」というメッセージが表示された状態で再生中の動画の画像

プレーヤーのイベントをログに記録する

CastDebugLogger を使用すると、CAF Receiver SDK によって呼び出されるプレーヤーイベントを簡単にロギングし、さまざまなロガーレベルを使用してイベントデータをロギングできます。loggerLevelByEvents を設定する際に、cast.framework.events.EventType と cast.framework.events.category を使用してログに記録するイベントを指定します。

castDebugLogger の宣言の後に次のコードを追加して、プレーヤーの CORE イベントがトリガーされたときや mediaStatus の変更がブロードキャストされたときにログに記録するよう設定します。

// Debug Logger
const castDebugLogger = cast.debug.CastDebugLogger.getInstance();

// Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
context.addEventListener(cast.framework.system.EventType.READY, () => {
  if (!castDebugLogger.debugOverlayElement_) {
      castDebugLogger.setEnabled(true);
  }
});

// Set verbosity level for Core events.
castDebugLogger.loggerLevelByEvents = {
  'cast.framework.events.category.CORE': cast.framework.LoggerLevel.INFO,
  'cast.framework.events.EventType.MEDIA_STATUS': cast.framework.LoggerLevel.DEBUG
}

ログメッセージとカスタムタグ

CastDebugLogger API では、レシーバーのデバッグオーバーレイに表示するログメッセージをさまざまな色で作成できます。使用できるログメソッドを優先度の高い順に示します。

castDebugLogger.error(custom_tag, message);
castDebugLogger.warn(custom_tag, message);
castDebugLogger.info(custom_tag, message);
castDebugLogger.debug(custom_tag, message);

各ログメソッドの最初のパラメータはカスタムタグです。意味があると思われる任意の識別文字列を指定できます。CastDebugLogger は、タグを使用してログをフィルタします。タグの使用方法については、後で詳しく説明します。2 つ目のパラメータはログメッセージです。

実際のログを表示するには、LOAD インターセプタにログを追加します。

playerManager.setMessageInterceptor(
  cast.framework.messages.MessageType.LOAD,
  request => {
    castDebugLogger.info(LOG_TAG, 'Intercepting LOAD request');

    // Map contentId to entity
    if (request.media && request.media.entity) {
      request.media.contentId = request.media.entity;
    }

    return new Promise((resolve, reject) => {
      // Fetch content repository by requested contentId
      makeRequest('GET', 'https://storage.googleapis.com/cpe-sample-media/content.json')
        .then(function (data) {
          let item = data[request.media.contentId];
          if(!item) {
            // Content could not be found in repository
            castDebugLogger.error(LOG_TAG, 'Content not found');
            reject();
          } else {
            // Adjusting request to make requested content playable
            request.media.contentUrl = item.stream.dash;
            request.media.contentType = 'application/dash+xml';
            castDebugLogger.warn(LOG_TAG, 'Playable URL:', request.media.contentUrl);

            // Add metadata
            let metadata = new cast.framework.messages.MovieMediaMetadata();
            metadata.metadataType = cast.framework.messages.MetadataType.MOVIE;
            metadata.title = item.title;
            metadata.subtitle = item.author;

            request.media.metadata = metadata;

            // Resolve request
            resolve(request);
          }
      });
    });
  });

デバッグオーバーレイにどのメッセージを表示するかは、各カスタムタグの loggerLevelByTags でログレベルを設定して制御します。たとえば、カスタムタグでログレベル cast.framework.LoggerLevel.DEBUG を有効にした場合は、エラー、警告、情報、デバッグのすべてのログメッセージが表示されます。WARNING レベルでカスタムタグを有効にすると、エラーと警告のログメッセージのみが表示されます。

loggerLevelByTags の設定は省略できます。カスタムタグがロガーレベルで設定されていない場合、すべてのログメッセージがデバッグオーバーレイに表示されます。

CORE イベントロガーの下に次のコードを追加します。

// Set verbosity level for Core events.
castDebugLogger.loggerLevelByEvents = {
  'cast.framework.events.category.CORE': cast.framework.LoggerLevel.INFO,
  'cast.framework.events.EventType.MEDIA_STATUS': cast.framework.LoggerLevel.DEBUG
}

// Set verbosity level for custom tags.
castDebugLogger.loggerLevelByTags = {
    [LOG_TAG]: cast.framework.LoggerLevel.DEBUG,
};

デバッグオーバーレイ

Cast Debug Logger では、レシーバーにデバッグオーバーレイを提供して、キャストデバイスにカスタムのログメッセージを表示します。デバッグオーバーレイを切り替えるには、showDebugLogs を使用します。オーバーレイ上のログメッセージを消去するには、clearDebugLogs を使用します。

レシーバーのデバッグオーバーレイをプレビューするには、次のコードを追加します。

context.addEventListener(cast.framework.system.EventType.READY, () => {
  if (!castDebugLogger.debugOverlayElement_) {
      // Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
      castDebugLogger.setEnabled(true);

      // Show debug overlay
      castDebugLogger.showDebugLogs(true);

      // Clear log messages on debug overlay
      castDebugLogger.clearDebugLogs();
  }
});

デバッグオーバーレイ（動画フレームの上に半透明の背景でデバッグログメッセージのリストが表示されている）を示す画像

13. 完了

Cast Web Receiver SDK を使用してカスタムウェブレシーバーアプリを作成する方法は以上です。

詳しくは、Web Receiver デベロッパーガイドをご覧ください。