1. 概要
この 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 Hosting、ngrok など)
- インターネットにアクセスできる Google Cast デバイス(Chromecast や Android TV など)。
- HDMI 入力対応のテレビまたはモニター
エクスペリエンス
- キャストの利用経験があり、キャスト ウェブ レシーバーの仕組みを理解している必要があります。
- ウェブ開発についての予備知識が必要です。
- 一般的なテレビの視聴経験も必要です。
このチュートリアルの利用方法をお選びください。
ウェブアプリの構築経験をどのように評価されますか。
テレビ視聴のご経験についてお答えください。
2. サンプルコードを取得する
サンプルコードはすべてパソコンにダウンロードできます。
ダウンロードした ZIP ファイルを解凍します。
3. レシーバーをローカルでデプロイする
キャスト デバイスでウェブ レシーバーを使用するには、キャスト デバイスからアクセスできる場所にホストする必要があります。https 対応のサーバーがすでにある場合は、以降の手順をスキップして、URL をメモします。これは次のセクションで必要になります。
使用できるサーバーがない場合は、Firebase Hosting または ngrok を使用できます。
サーバーを実行する
選択したサービスを設定したら、app-start
に移動してサーバーを起動します。
ホストされているレシーバーの URL をメモします。これは次のセクションで使用します。
4. Cast のデベロッパー コンソールでアプリを登録する
この Codelab で作成するカスタムのウェブ レシーバーを Chromecast デバイスで実行できるようにするには、アプリを登録する必要があります。アプリケーションを登録すると、送信側アプリケーションが API 呼び出し(受信側アプリケーションの起動など)を行うために使用する必要のあるアプリケーション ID が届きます。
[新しいアプリケーションを追加] をクリックします
[カスタム レシーバー] を選択します。これが開発中です。
新しいレシーバーの詳細を入力します。必ず最後のセクションの URL を使用してください。新しい受信者に割り当てられたアプリケーション ID をメモします。
また、Google Cast デバイスを登録して、公開前にレシーバー アプリにアクセスできるようにする必要があります。レシーバー アプリを公開すると、すべての Google Cast デバイスで利用できるようになります。この Codelab では、非公開のレシーバー アプリを使用することをおすすめします。
[Add new Device] をクリックします。
キャスト デバイスの背面に記載されているシリアル番号を入力し、わかりやすい名前を付けます。シリアル番号は、Google Cast SDK デベロッパー コンソールにアクセスする際に Chrome で画面をキャストして確認することもできます。
レシーバーとデバイスをテストできるようになるまでに 5 ~ 15 分かかります。5 ~ 15 分待ってから、キャスト デバイスを再起動する必要があります。
5. サンプルアプリを実行する
新しい Web Receiver をテストできる準備が整うまで、完成した Web Receiver アプリのサンプルを見てみましょう。これから作成するレシーバーでは、アダプティブ ビットレート ストリーミングを使用してメディアを再生できるようになります。
- ブラウザで、コマンド アンド コントロール(CaC)ツールを開きます。
- デフォルトの
CC1AD845
レシーバー ID を使用し、[SET APP ID
] ボタンをクリックします。 - 左上のキャスト アイコンをクリックし、Google Cast 対応デバイスを選択します。
- 上部の [
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
という 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
を受け取って、ログに記録するイベントを指定します。
プレーヤーの 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 つあります。
新しいキャスト接続を開始します。
- CaC ツールを開き、レシーバーのアプリ ID を設定し、キャスト アイコンをクリックしてレシーバーにキャストします。
- 同じレシーバー アプリ ID を持つ別のセンダーアプリを同じデバイスにキャストする。
- 送信側アプリからメディアを読み込み、ツールにログメッセージが表示されます。
既存のキャスト セッションに参加します。
- レシーバー SDK またはセンダー SDK を使用して、実行中のキャスト セッション ID を取得します。受信側から、次のコマンドを入力して Chrome リモート デバッガのコンソールでセッション ID を取得します。
cast.framework.CastReceiverContext.getInstance().getApplicationData().sessionId;
または、次の方法で、接続済みのウェブの送信者からセッション ID を取得できます。
cast.framework.CastContext.getInstance().getCurrentSession().getSessionId();
- CaC ツールでセッション ID を入力し、[
RESUME
] ボタンをクリックします。 - キャスト アイコンが接続され、ツールにログメッセージが表示されるようになります。
できること
次に、CaC ツールを使用してサンプル レシーバーでログを確認します。
- CaC ツールを開きます。
- サンプルアプリのレシーバー アプリ ID を入力し、[
SET APP ID
] ボタンをクリックします。 - 左上のキャスト アイコンをクリックし、Google Cast 対応デバイスを選択してレシーバーを開きます。
- 上部の [
LOAD MEDIA
] タブに移動します。
- リクエスト タイプのラジオボタンを
LOAD
に変更します。 SEND REQUEST
ボタンをクリックしてサンプル動画を再生します。
- お使いのデバイスでサンプル動画が再生されているはずです。ツールの下部にある [Log Messages] タブに、前のステップからのログが表示されるようになりました。
ログを調査してレシーバーを制御するために、次の機能を試してみてください。
- メディア情報とメディア ステータスを確認するには、[
MEDIA INFO
] タブまたは [MEDIA STATUS
] タブをクリックします。 SHOW OVERLAY
ボタンをクリックして、レシーバーにデバッグ オーバーレイを表示します。CLEAR CACHE AND STOP
ボタンを使用してレシーバー アプリを再読み込みし、再度キャストします。
10.完了
最新の Cast Receiver SDK を使用して、Cast 対応ウェブ レシーバー アプリに Cast Debug Logger を追加する方法を確認しました。
詳しくは、Cast デバッグ ロガーとコマンド&コントロール(CaC)ツールに関するデベロッパー ガイドをご覧ください。