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

1. 概要

Google Cast ロゴ

この Codelab では、既存のカスタム Web Receiver アプリに Cast Debug Logger を追加する方法について説明します。

Google Cast とは

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

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

達成目標

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

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

学習内容

  • Web Receiver 開発用の環境を設定する方法
  • Debug Logger をキャスト レシーバーに統合する方法

必要なもの

  • 最新の Google Chrome ブラウザ
  • HTTPS ホスティング サービス(Firebase Hostingngrok など)
  • インターネットにアクセスできる Google Cast デバイス(ChromecastAndroid TV など)。
  • HDMI 入力対応のテレビまたはモニター

エクスペリエンス

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

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

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

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

初心者 中級者 上級者

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

初心者 中級者 上級者

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

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

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

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

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

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

サーバーを実行する

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

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

4. Cast のデベロッパー コンソールでアプリを登録する

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

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

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

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

[カスタム レシーバー] を選択します。これが開発中です。

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

新しいレシーバーの詳細を入力します。必ず最後のセクションの URL を使用してください。新しい受信者に割り当てられたアプリケーション ID をメモします。

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

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

[Add new Device] をクリックします。

[キャスト レシーバー デバイスの追加] ダイアログの画像

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

レシーバーとデバイスをテストできるようになるまでに 5 ~ 15 分かかります。5 ~ 15 分待ってから、キャスト デバイスを再起動する必要があります。

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

Google Chrome のロゴ

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

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

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

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

レシーバー アプリに接続されているコマンド アンド コントロール(CaC)ツールの [Cast Connect & Logger Controls] タブの画像

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

コマンド アンド コントロール(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.jsindex.html を開く

この Codelab の学習を進めると、http-server は加えた変更を受け取るようになります。オンにならない場合は、http-server を停止してから再起動してみてください。

アプリの設計

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

このアプリは、index.html で定義された 1 つのメインビューと、レシーバを機能させるためのすべてのロジックを含む js/receiver.js という 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 のオーバーレイがレシーバーに表示されます。

フレームの左上隅の赤い背景に「DEBUG MODE」というメッセージが表示されている再生中の動画の画像

動画プレーヤー イベント

CastDebugLogger を使用すると、Cast Web Receiver SDK によって発生したプレーヤー イベントを簡単にログに記録でき、さまざまなロガーレベルでイベントデータを記録できます。loggerLevelByEvents 構成は、cast.framework.events.EventTypecast.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 のカスタムタグを有効にすると、追加されたすべてのメッセージに error、warn、info、デバッグのログメッセージが表示されます。もう 1 つの例は、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 つあります。

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

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

既存のキャスト セッションに参加します。

  1. レシーバー SDK またはセンダー SDK を使用して、実行中のキャスト セッション ID を取得します。受信側から、次のコマンドを入力して Chrome リモート デバッガのコンソールでセッション ID を取得します。
cast.framework.CastReceiverContext.getInstance().getApplicationData().sessionId;

または、次の方法で、接続済みのウェブの送信者からセッション ID を取得できます。

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

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

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

できること

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

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

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

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

レシーバー アプリに接続されているコマンド アンド コントロール(CaC)ツールの [Cast Connect & Logger Controls] タブの画像

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

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

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

下部ペインにログ メッセージが表示された、コマンド アンド コントロール(CaC)ツールの [Cast Connect & Logger Controls] タブの画像

  1. お使いのデバイスでサンプル動画が再生されているはずです。ツールの下部にある [Log Messages] タブに、前のステップからのログが表示されるようになりました。

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

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

10.完了

最新の Cast Receiver SDK を使用して、Cast 対応ウェブ レシーバー アプリに Cast Debug Logger を追加する方法を確認しました。

詳しくは、Cast デバッグ ロガーコマンド&コントロール(CaC)ツールに関するデベロッパー ガイドをご覧ください。