Cast デバッグ ロガー

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.EventTypecast.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 が有効になったら、showDebugLogsclearDebugLogs を使用します。

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();
  }
});