キャストレシーバーアプリのデバッグ

1. 概要

Google Cast のロゴ

この Codelab では、既存のカスタムウェブレシーバーアプリに Cast デバッグロガーを追加する方法を説明します。

Google Cast とは

Google Cast SDK を使用すると、Google Cast 対応デバイスでコンテンツを再生したり、再生を制御したりする機能をアプリに組み込むことができます。Google Cast デザインチェックリストに沿って、必要な UI コンポーネントを使用できます。

Google Cast デザインチェックリストは、サポートされているすべてのプラットフォームにわたって、Cast ユーザーエクスペリエンスをシンプルで予測可能なものにするために使用します。

達成目標

この Codelab を完了すると、キャストデバッグロガーと統合されたカスタムウェブレシーバーを作成できるようになります。

詳細については、Cast デバッグロガーガイドをご覧ください。

学習内容

ウェブレシーバー開発の環境を設定する方法。
Debug Logger を Cast レシーバーに統合する方法。

必要なもの

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

エクスペリエンス

以前に Cast を使用した経験があり、Cast ウェブレシーバの仕組みを理解している必要があります。
ウェブ開発の知識が必要です。
一般的なテレビの視聴経験も必要です。

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

通読するのみ

通読し、演習を行う

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

初心者

中級者

上級者

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

初心者

中級者

上級者

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

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

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

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

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

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

サーバーを実行する

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

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

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

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

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

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

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

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

[新しいカスタムレシーバ] ダイアログの [レシーバアプリケーション URL] フィールドに入力している画像

新しいレシーバーの詳細を入力します。前のセクションでメモしておいた URL を新しいレシーバーに割り当てられたアプリ ID をメモしておきます。

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

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

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

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

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

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

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

Google Chrome のロゴ

新しいウェブレシーバーをテストする準備ができるまで、完成したサンプルのウェブレシーバーアプリがどのようなものになるか見てみましょう。これから作成するレシーバーでは、アダプティブビットレートストリーミングを使用してメディアを再生できます。

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

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

デフォルトの CC1AD845 レシーバー ID を使用し、SET APP ID ボタンをクリックします。
左上のキャストアイコンをクリックして、Google Cast 対応デバイスを選択します。

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

上部の LOAD MEDIA タブに移動します。

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

リクエストタイプのラジオボタンを LOAD に変更します。
SEND REQUEST ボタンをクリックして、サンプル動画を再生します。
Google Cast 対応デバイスで動画の再生が開始し、デフォルトのレシーバーの基本的なレシーバー機能を確認できます。

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

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

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

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

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

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

アプリの設計

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

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

index.html

この HTML ファイルには、レシーバーアプリの UI がすべて含まれています。

receiver.js

このスクリプトは、レシーバーアプリのすべてのロジックを管理します。

よくある質問

7. CastDebugLogger API と統合する

Cast Receiver SDK では、CastDebugLogger API を使用してレシーバーアプリを簡単にデバッグできます。

詳細については、Cast デバッグロガーガイドをご覧ください。

初期化

index.html のウェブレシーバー 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 の後に、READY イベントリスナーで 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 を使用すると、Cast Web Receiver SDK によって呼び出されるプレーヤーのイベントを簡単にログに保存して、さまざまなロガーレベルでイベントデータを記録できます。loggerLevelByEvents を設定する際に、cast.framework.events.EventType と cast.framework.events.category を使用してログに記録するイベントを指定します。

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

...

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

各ログメソッドでは、1 番目のパラメータにカスタムタグを指定し、2 番目のパラメータにログメッセージを指定する必要があります。タグには、役に立つと思われる任意の文字列を指定できます。

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

playerManager.setMessageInterceptor(cast.framework.messages.MessageType.LOAD,
      loadRequestData => {
    // Listed in order from highest to lowest priority.
    castDebugLogger.error(LOG_TAG, 'Test error log');

    castDebugLogger.warn(LOG_TAG, 'Test warn log');

    castDebugLogger.info(LOG_TAG, 'Intercepting LOAD request', loadRequestData);

    castDebugLogger.debug(LOG_TAG, 'Test debug log');

    return loadRequestData;
  }
);

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

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

loggerLevelByEvents 呼び出しの下に以下を追加します。

...

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

...

8. デバッグオーバーレイの使用

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

レシーバーのデバッグオーバーレイをプレビューするには、READY イベントリスナーに次のコードを追加します。

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

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

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

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

9. コマンドアンドコントロール（CaC）ツールを使用する

概要

コマンドアンドコントロール（CaC）ツールは、ログを取得し、デバッグオーバーレイを制御します。

受信機を CaC ツールに接続する方法は 2 つあります。

新しい Cast 接続を開始します。

CaC ツールを開き、レシーバーのアプリ ID を設定して、キャストボタンをクリックしてレシーバーにキャストします。
同じレシーバーアプリ ID を使用して、別の 送信側アプリを同じデバイスにキャストします。
送信側アプリからメディアを読み込むと、ツールにログメッセージが表示されます。

既存のキャストセッションに参加する:

レシーバー SDK または送信者 SDK を使用して、実行中の Cast セッション ID を取得します。受信側で、次のコマンドを入力して Chrome リモートデバッガのコンソールでセッション ID を取得します。

cast.framework.CastReceiverContext.getInstance().getApplicationData().sessionId;

接続されたウェブ送信者からセッション ID を取得することもできます。次のメソッドを使用します。

cast.framework.CastContext.getInstance().getCurrentSession().getSessionId();

セッションを再開するためのコマンドアンドコントロール（CaC）ツールの [Cast Connect & Logger Controls] タブの画像

CaC ツールにセッション ID を入力し、RESUME ボタンをクリックします。
キャストボタンが接続され、ツールにログメッセージが表示され始めます。

お試しください

次に、CaC ツールを使用してサンプルレシーバーのログを確認します。

CaC ツールを開きます。