このページは 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 を修了すると、Cast 対応デバイスで動画コンテンツを表示する独自のカスタムレシーバーとして機能する HTML5 アプリを作成できるようになります。

学習内容

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

必要なもの

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

テスト

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

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

通読するのみ

通読し、演習を行う

ウェブアプリの構築について評価してください。

初心者

中級者

上級者

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

初心者

中級

上級

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

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

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

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

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

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

サーバーを実行する

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

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

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

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

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

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

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

[Custom Receiver] を選択します。これが構築されます。

[受信者のアプリケーションの URL] 欄に入力している 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. サンプルアプリを実行する

Google Chrome のロゴ

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

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

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

CaC ツールが表示されます。
デフォルトの「CC1AD845」サンプルレシーバ ID を使用して、[アプリ ID を設定] ボタンをクリックします。
左上のキャストアイコンをクリックし、Google Cast デバイスを選択します。

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

上部にある [メディアの読み込み] タブに移動します。

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

[コンテンツによる読み込み] ボタンをクリックして、サンプル動画を再生します。
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 で定義されている 1 つのメインビューと、レシーバーを機能させるすべてのロジックを含む js/receiver.js という 1 つの JavaScript ファイルで構成されています。

index.html

この HTML ファイルには、レシーバアプリの UI が含まれています。現時点では空ですが、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>

receiver.js, を読み込む <footer> の前の index.html <body> に次のコードを追加して、追加したスクリプトで出荷されるデフォルトのレシーバー UI を表示するためのスペースをレシーバー SDK に提供します。

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

次に、js/receiver.js で SDK を初期化する必要があります。以下で構成されます。

Receiver SDK 全体へのメインのエントリポイントである CastReceiverContext への参照を取得します。
再生を処理するオブジェクトである 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 でアプリケーション固有のメディア識別子を使用します。レシーバーは、ID として contentId を使用して適切なバックエンド API 呼び出しを行い、実際のアセット URL を解決して MediaInfo.contentUrl. に設定します。レシーバーは、DRM ライセンスの取得や広告ブレークに関する情報の挿入などのタスクも処理します。

次のセクションでは、レシーバーを拡張して同様のことを行います。ここでは、キャストアイコンをクリックしてデバイスを選択し、レシーバーを開きます。

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

[Load Media] タブに移動し、[Load by Content] ボタンをクリックします。レシーバーがサンプルコンテンツの再生を開始します。

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

そのため、Receiver SDK ではすぐに次の処理が行われます。

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

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

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);
          }
        });
      });
    });

次のセクションでは、読み込みリクエストの DASH コンテンツ用の media プロパティを構成する方法の概要を説明します。

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

読み込みインターセプタの準備が完了したので、レシーバーにコンテンツタイプを指定します。この情報は、レシーバーにマスター再生リストの URL とストリームの MIME タイプを提供します。次のコードを、LOAD インターセプターの Promise() の js/receiver.js ファイルに追加します。

...
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';
            ...
          }
        });
      });
    });

この手順を完了したら、Test It Out に進んで DASH コンテンツでの読み込みを試行します。HLS コンテンツの読み込みをテストする場合は、次の手順をご確認ください。

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

サンプル API には、HLS コンテンツと DASH が含まれています。サンプル API の HLS URL を使用するには、前のステップで行った contentType の設定に加えて、いくつかの追加プロパティが必要です。HLS ストリームを再生するようにレシーバーが構成されている場合、想定されるデフォルトのコンテナタイプはトランスポートストリーム（TS）です。その結果、contentUrl プロパティのみが変更された場合、レシーバーはサンプル MP4 ストリームを TS 形式で開こうとします。読み込みリクエストでは、コンテンツが TS ではなく MP4 型であることを受信者が認識できるように、MediaInformation オブジェクトを追加のプロパティで変更する必要があります。次のコードを、読み込みインターセプタの 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;
            ...
          }
        });
      });
    });

試してみる

もう一度 Command and Control（CaC）ツールを開き、アプリ ID を受信側のアプリ ID に設定します。キャストボタンを使用してデバイスを選択

[Load Media] タブに移動します。今回は、[コンテンツ URL] フィールドの [コンテンツ別の読み込み] ボタンのテキストを削除します。これにより、アプリケーションはメディアの contentId 参照のみを含む LOAD リクエストを送信します。

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

レシーバの変更に問題がなかったとしても、インターセプタは、SDK が画面で再生できるものへと MediaInfo オブジェクトをシェーピングする必要があります。

[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 を使用してカスタマイズできます。touchControls の下の js/receiver.js ファイルに次のコードを追加して、コントロールの最初のスロットを設定します。

...

// 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 Receiver 機能です。これを実装するには、PlayerDataBinder を使用して BrowseContent UI を設定します。次に、表示するコンテンツに基づいて BrowseItems を設定できます。

閲覧コンテンツ

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

2 つの動画のサムネイル、3 分の 1 の一部を表示している 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 分の 1 の一部を表示している 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 とコンパニオン Command and Control（CaC）ツールを使用してログを取得することで、レシーバーアプリを簡単にデバッグするためのオプションが用意されています。

初期化

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

<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 を使用して、ログに記録するイベントを指定します。

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

// 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 デベロッパーガイドをご覧ください。

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

1. 概要

Google Cast とは

達成目標

学習内容

必要なもの

テスト

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

ウェブアプリの構築について評価してください。

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

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

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

サーバーを実行する

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

5. サンプルアプリを実行する

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

アプリの設計

index.html

Receiver.js

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

初期化

8. 「基本」の動画コンテンツのキャスト

メディアのキャスト

9. 外部 API との統合

サンプル API

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

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

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

試してみる

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

UI コントロールへのアクセス

動画の操作

オーディオ コントロール

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

コントロール ボタンのカスタマイズ

11. スマートディスプレイでのメディア ブラウジングの実装

閲覧コンテンツ

アスペクト比

BrowseItem

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

12. レシーバー アプリのデバッグ

初期化

プレーヤーのイベントを記録

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

オーバーレイをデバッグ

13. 完了

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

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

オーディオコントロール

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

コントロールボタンのカスタマイズ

11. スマートディスプレイでのメディアブラウジングの実装

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

12. レシーバーアプリのデバッグ