キャスト デバッグロガー

Web Receiver SDK には、デベロッパーが簡単に Web Receiver アプリとコンパニオンアプリをデバッグする キャプチャするコマンド&コントロール（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);
  }
});

デバッグロガーが有効になっている場合は、[DEBUG MODE] と表示されているオーバーレイが 受信側に表示されます。

プレーヤー イベントをログに記録する

CastDebugLogger を使用すると、API によって呼び出されるプレーヤー イベントを簡単にログに記録できます。 さまざまなロガーレベルを使用してイベントデータをログに記録します。 loggerLevelByEvents 構成は cast.framework.events.EventType を取ります。 および cast.framework.events.category ログに記録するイベントを指定します。

たとえば、プレーヤーの CORE イベントがトリガーされたタイミングを知りたい場合などです。 mediaStatus の変更がブロードキャストされた場合は、次の構成を使用して、 events:

castDebugLogger.loggerLevelByEvents = {
  'cast.framework.events.category.CORE': cast.framework.LoggerLevel.INFO,
  'cast.framework.events.EventType.MEDIA_STATUS': cast.framework.LoggerLevel.DEBUG
}

カスタムタグを使用したカスタム メッセージの記録

CastDebugLogger API を使用すると、Google Cloud のサイトやアプリで さまざまな色の 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 のカスタムタグは次のように表示されます。 error、warn、info、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 デバッグロガーでは、Web Receiver 上にデバッグ オーバーレイが表示され、 表示されます。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();
  }
});