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

Switch to English

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

1. 概要

Google Cast ロゴ

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

Google Cast とは

Google Cast SDK を使用すると、Google Cast 対応デバイスでコンテンツの再生や再生のコントロールを行えます。Google Cast デザインチェックリストに基づいて、必要な UI コンポーネントが提供されます。

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

達成目標

この Codelab を完了すると、カスタムウェブレシーバーが Cast Debug Logger と統合されます。

詳しくは、キャストデバッグロガーガイドをご覧ください。

学習内容

Web Receiver 開発用に環境を設定する方法。
デバッグロガーをキャストレシーバーに統合する方法。

必要なもの

最新の 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 呼び出しを行うために使用する必要があります。

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

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

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

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

[New 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. サンプルアプリを実行する

Google Chrome のロゴ

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

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

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

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

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

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

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

リクエストタイプのラジオボタンを 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 で定義されている 1 つのメインビューと、レシーバーを機能させるすべてのロジックを含む js/receiver.js という 1 つの JavaScript ファイルで構成されています。

index.html

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

Receiver.js

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

よくある質問

7. CastDebugLogger API との統合

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

詳しくは、キャストデバッグロガーガイドをご覧ください。

初期化

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

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

...

// 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 つあります。

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

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

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

レシーバー SDK または送信者 SDK を使用して、実行中のキャストセッション ID を取得します。受信側から次のように入力して、Chrome Remote Debugger コンソールでセッション ID を取得します。

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

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

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

コマンドとコントロール（CaC）ツールの [キャスト接続とロガーの制御] タブのセッションを再開する画像

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

以下をお試しください

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

CaC ツールを開きます。