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

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

1. 概要

Google Cast のロゴ

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

Google Cast とは

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

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

達成目標

この Codelab を完了すると、Cast デバッグロガーと統合されたカスタムウェブレシーバーが作成されます。

詳細とその他の情報については、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 デバイスで実行できるようにするには、アプリの登録が必要です。アプリを登録すると、送信側のアプリが API 呼び出し（受信側のアプリの起動など）を実行する際に使用するアプリケーション ID が届きます。

[新しいアプリを追加] ボタンがハイライト表示された Cast Developer Console の画像

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

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

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

入力中の [New Custom Receiver] ダイアログの [Receiver Application 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 のロゴ

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

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

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

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

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

上部の 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

レシーバーアプリの UI を定義する HTML ファイルです。

receiver.js

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

よくある質問

7. CastDebugLogger API と統合する

Cast Receiver SDK には、デベロッパーが CastDebugLogger API を使用してレシーバーアプリを簡単にデバッグできるもう一つのオプションが用意されています。

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

初期化

レシーバーアプリの <head> タグに、Web Receiver SDK スクリプトの直後、index.html に次のスクリプトを含めます。

<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 インスタンスを取得し、READY イベントリスナーでロガーを有効にします。

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

各ログメソッドの最初のパラメータはカスタムタグで、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 つの方法があります。

新しいキャスト接続を開始します。

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

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

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

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

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

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

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

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

10.完了

最新の Cast Receiver SDK を使用して、Cast 対応のウェブレシーバーアプリに Cast デバッグロガーを追加する方法は以上です。

詳しくは、Cast デバッグロガーとコマンドアンドコントロール（CaC）ツールのデベロッパーガイドをご覧ください。