1. 概要
この 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 呼び出しを行うために使用する必要があります。
[新しいアプリケーションを追加] をクリックします。
[Custom Receiver] を選択します。これが構築されます。
新しいレシーバーの詳細を入力し、最後のセクションの URL を使用します。新しいレシーバーに割り当てられたアプリケーション ID をメモします。
また、公開前にレシーバー アプリにアクセスできるように、Google Cast デバイスを登録する必要があります。レシーバー アプリを公開すると、すべての Google Cast デバイスで使用できるようになります。この Codelab では、非公開レシーバ アプリケーションを操作することをおすすめします。
[Add new Device](新しいデバイスを追加)をクリックします。
キャスト デバイスの背面に印字されているシリアル番号を入力し、わかりやすい名前を付けます。シリアル番号は、Google Cast SDK Developer Console にアクセスする際に 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
という 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
のオーバーレイが表示されます。
プレーヤーのイベントを記録
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 ツールにセッション ID を入力し、[
RESUME
] ボタンをクリックします。 - キャスト アイコンが接続され、ツールにログメッセージの表示が開始されます。
以下をお試しください
次に、CaC ツールを使用してサンプル レシーバーのログを確認します。
- CaC ツールを開きます。
- サンプルアプリのレシーバ アプリ ID を入力し、[
SET APP ID
] ボタンをクリックします。 - 左上のキャスト アイコンをクリックし、Google Cast 対応デバイスを選択してレシーバーを開きます。
- 上部の [
LOAD MEDIA
] タブに移動します。
- リクエスト タイプのラジオボタンを
LOAD
に変更します。 SEND REQUEST
ボタンをクリックして、サンプル動画を再生します。
- これで、デバイスでサンプル動画が再生されます。前のステップのログが、ツールの下部にある [ログメッセージ] タブに表示されます。
ログを調べてレシーバを制御するには、次の機能をお試しください。
- [
MEDIA INFO
] タブまたは [MEDIA STATUS
] タブをクリックして、メディア情報とメディアのステータスを確認します。 SHOW OVERLAY
ボタンをクリックすると、レシーバーのデバッグ オーバーレイが表示されます。CLEAR CACHE AND STOP
ボタンを使用して、レシーバー アプリを再読み込みして再度キャストします。
10. 完了
最新の Cast Receiver SDK を使用して Cast Debug Web Receiver アプリに Cast Debug Logger を追加する方法を学習しました。
詳しくは、キャスト デバッグ ロガーとコマンド アンド コントロール(CaC)ツールのデベロッパー ガイドをご覧ください。