Web Receiver SDK には、デベロッパーが Web Receiver アプリを簡単にデバッグできる CastDebugLogger API と、ログを取得するための関連する Command and Control(CaC)ツールが用意されています。
初期化
CastDebugLogger API を使用するには、Web Receiver SDK スクリプトの直後の Web Receiver アプリに次のスクリプトを追加します。
<!-- Web Receiver SDK -->
<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>
CastDebugLogger
オブジェクトを作成し、ロガーを有効にします。
const castDebugLogger = cast.debug.CastDebugLogger.getInstance();
const context = cast.framework.CastReceiverContext.getInstance();
context.addEventListener(cast.framework.system.EventType.READY, () => {
if (!castDebugLogger.debugOverlayElement_) {
// Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
castDebugLogger.setEnabled(true);
}
});
デバッグロガーを有効にすると、デバッグモードを示すオーバーレイがレシーバに表示されます。
プレーヤー イベントをロギングする
CastDebugLogger
を使用すると、Web Receiver SDK によって配信されたプレーヤー イベントを簡単にロギングし、さまざまなロガーレベルを使用してイベントデータをロギングできます。loggerLevelByEvents
の構成では、cast.framework.events.EventType
と cast.framework.events.category
を使用して、ログに記録するイベントを指定します。
たとえば、プレーヤーの CORE
イベントがトリガーされたタイミングや mediaStatus
の変更がブロードキャストされたときに通知するには、次の構成を使用してイベントをロギングします。
castDebugLogger.loggerLevelByEvents = {
'cast.framework.events.category.CORE': cast.framework.LoggerLevel.INFO,
'cast.framework.events.EventType.MEDIA_STATUS': cast.framework.LoggerLevel.DEBUG
}
カスタムタグを使用してカスタム メッセージをログに記録する
CastDebugLogger API を使用すると、Web Receiver デバッグ オーバーレイに表示されるさまざまな色のログ メッセージを作成できます。以下のログメソッドを、優先度の高いものから順にリストします。
castDebugLogger.error(custom_tag, message);
castDebugLogger.warn(custom_tag, message);
castDebugLogger.info(custom_tag, message);
castDebugLogger.debug(custom_tag, message);
ログメソッドごとに、最初のパラメータはカスタムタグ、2 番目のパラメータはログメッセージです。任意の文字列を指定できます。
LOAD
インターセプタでデバッグ ロガーを使用する例を次に示します。
const LOG_TAG = 'MyReceiverApp';
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.LOAD,
request => {
castDebugLogger.debug(LOG_TAG, 'Intercepting LOAD request');
return new Promise((resolve, reject) => {
fetchMediaAsset(request.media.contentId).then(
data => {
let item = data[request.media.contentId];
if (!item) {
castDebugLogger.error(LOG_TAG, 'Content not found');
reject();
} else {
request.media.contentUrl = item.stream.hls;
castDebugLogger.info(LOG_TAG,
'Playable URL:', request.media.contentUrl);
resolve(request);
}
}
);
});
}
);
カスタム タグごとにログレベルを loggerLevelByTags
に設定することにより、デバッグ オーバーレイに表示されるメッセージを制御できます。たとえば、ログレベルが cast.framework.LoggerLevel.DEBUG
のカスタムタグを有効にすると、エラー、警告、情報、デバッグのログ メッセージとともに追加されたすべてのメッセージが表示されます。また、WARNING
レベルでカスタムタグを有効にすると、エラーのみが表示され、ログメッセージが警告されることもあります。
loggerLevelByTags
の構成は省略可能です。カスタムタグがロガーレベルで設定されていない場合、すべてのログメッセージがデバッグ オーバーレイに表示されます。
const LOG_TAG1 = 'Tag1';
const LOG_TAG2 = 'Tag2';
// Set verbosity level for custom tags
castDebugLogger.loggerLevelByTags = {
[LOG_TAG1]: cast.framework.LoggerLevel.WARNING,
[LOG_TAG2]: cast.framework.LoggerLevel.DEBUG,
};
castDebugLogger.debug(LOG_TAG1, 'debug log from tag1');
castDebugLogger.info(LOG_TAG1, 'info log from tag1');
castDebugLogger.warn(LOG_TAG1, 'warn log from tag1');
castDebugLogger.error(LOG_TAG1, 'error log from tag1');
castDebugLogger.debug(LOG_TAG2, 'debug log from tag2');
castDebugLogger.info(LOG_TAG2, 'info log from tag2');
castDebugLogger.warn(LOG_TAG2, 'warn log from tag2');
castDebugLogger.error(LOG_TAG2, 'error log from tag2');
// example outputs:
// [Tag1] [WARN] warn log from tag1
// [Tag1] [ERROR] error log from tag1
// [Tag2] [DEBUG] debug log from tag2
// [Tag2] [INFO] info log from tag2
// [Tag2] [WARN] warn log from tag2
// [Tag2] [ERROR] error log from tag2
オーバーレイをデバッグ
Cast Debug Logger はウェブ レシーバーにデバッグ オーバーレイを提供し、カスタム ログメッセージを表示します。デバッグ オーバーレイを切り替えるには showDebugLogs
を使用し、オーバーレイのログメッセージを消去するには clearDebugLogs
を使用します。
注: castDebugLogger が有効になったら、showDebugLogs
と clearDebugLogs
を使用します。
const context = cast.framework.CastReceiverContext.getInstance();
context.addEventListener(cast.framework.system.EventType.READY, () => {
if (!castDebugLogger.debugOverlayElement_) {
// Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
castDebugLogger.setEnabled(true);
// Show debug overlay
castDebugLogger.showDebugLogs(true);
// Clear log messages on debug overlay
castDebugLogger.clearDebugLogs();
}
});