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

1. 概要

Google Cast ロゴ

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

Google Cast とは

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

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

達成目標

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

詳しくは、Cast デバッグ ロガーのガイドをご覧ください。

学習内容

  • Web Receiver 開発用の環境を設定する方法
  • デバッグロガーを Cast Receiver に統合する方法

必要なもの

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

経験

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

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

通読するのみ 通読し、演習を行う

ウェブアプリの作成経験をどのように評価されますか。

初心者 中級者 上級者

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

<ph type="x-smartling-placeholder"></ph> 初心者 中級 上達 をご覧ください。

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

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

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

3. レシーバーのローカルでのデプロイ

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

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

サーバーを実行する

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

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

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

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

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

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

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

[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 アプリのサンプルがどのようなものか見てみましょう。これから作成するレシーバーでは、アダプティブ ビットレート ストリーミングを使用してメディアを再生できるようにします。

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

「Cast Connect とロガーコントロールCommand and Control（CaC）ツールの

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

「Cast Connect とロガーコントロールReceiver App に接続されていることを示す Command and Control（CaC）ツールのタブ

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

[Load Media] オプションの画像Command and Control（CaC）ツールの

  1. リクエスト タイプのラジオボタンを LOAD に変更します。
  2. SEND REQUEST ボタンをクリックすると、サンプル動画を再生できます。
  3. Google Cast 対応デバイスで動画の再生が開始され、デフォルトのレシーバーを使用した基本的なレシーバー機能が表示されます。

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

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

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

これで、任意のテキスト エディタを使用してスターター プロジェクトを基にして開発を行う準備ができました。

  1. ダウンロードしたサンプルコードから フォルダ アイコンapp-start ディレクトリを選択します。
  2. 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 を使用してレシーバー アプリを簡単にデバッグできるもう一つのオプションが用意されています。

詳しくは、Cast デバッグ ロガーのガイドをご覧ください。

初期化

index.html の Web 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 インスタンスを取得し、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 のオーバーレイが表示されます。

「デバッグモード」で再生している動画の画像フレームの左上隅の赤い背景に表示されるメッセージ

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

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. Command and Control（CaC）ツールの使用

概要

コマンド&コントロール（CaC）ツールはログをキャプチャし、デバッグ オーバーレイを制御します。

レシーバーを CaC ツールに接続するには、次の 2 つの方法があります。

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

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

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

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

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

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

「Cast Connect とロガーコントロールTab キーを押してセッションを再開します。

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

おすすめ

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

  1. CaC ツールを開きます。

「Cast Connect とロガーコントロールCommand and Control（CaC）ツールの

  1. サンプルアプリのレシーバー アプリ ID を入力し、[SET APP ID] ボタンをクリックします。
  2. 左上のキャスト アイコンをクリックし、Google Cast 対応デバイスを選択してレシーバーを開きます。

「Cast Connect とロガーコントロールReceiver App に接続されていることを示す Command and Control（CaC）ツールのタブ

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

[Load Media] オプションの画像Command and Control（CaC）ツールの

  1. リクエスト タイプのラジオボタンを LOAD に変更します。
  2. SEND REQUEST ボタンをクリックすると、サンプル動画を再生できます。

「Cast Connect とロガーコントロール下部ペインにログメッセージが入力されている Command and Control（CaC）ツールのタブ

  1. デバイスでサンプル動画が再生されます。前のステップで作成したログが [ログ メッセージ] に表示されるようになります。タブを使用します。

ログを調査し、レシーバーを制御するには、次の機能を試してみてください。

  • [MEDIA INFO] タブまたは [MEDIA STATUS] タブをクリックして、メディア情報とメディア ステータスを表示します。
  • SHOW OVERLAY ボタンをクリックすると、レシーバにデバッグ オーバーレイが表示されます。
  • CLEAR CACHE AND STOP ボタンを使用してレシーバー アプリを再読み込みし、もう一度キャストします。

10.完了

最新の Cast Receiver SDK を使って Cast 対応ウェブ レシーバー アプリに Cast デバッグ ロガーを追加する方法をマスターしました。

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