chrome://webrtc-internals のしくみ

Overview

• ひたすら関数やクラス定義が続いててエントリーが見つけにくい
  • 2700行目くらいにある`initialize()`ってやつがそう
• コード自体はES5時代っぽく、`class`ではなく`prototype`を作ってる懐かしい感じ
• タブ表示やグラフ表示などUI的なことを管理するクラスもあるし
  • グラフは`canvas`なのでそのあたりも
• 時系列で溜まっていくstatsデータを管理するクラスもある
  • `getStats()`のデータを抽象化してるやつとか
• Dumpをダウンロードする機能とかもここ

順に読んでいく。

initialize()

function initialize() {
  dumpCreator = new DumpCreator($("content-root"));
  $("content-root").appendChild(createStatsSelectionOptionElements());

  tabView = new TabView($("content-root"));
  ssrcInfoManager = new SsrcInfoManager();
  peerConnectionUpdateTable = new PeerConnectionUpdateTable();
  statsTable = new StatsTable(ssrcInfoManager);

  chrome.send("finishedDOMLoad");

  // Requests stats from all peer connections every second.
  window.setInterval(requestStats, 1000);
}
document.addEventListener("DOMContentLoaded", initialize);

ここからはじまる。
さっそくさっきみた`util.js`の`$()`が使われてる！

やってることとしては、

• Create Dumpの機能
• 各種タブのUI初期化
• PeerConnectionとStatsのViewのセットアップ
• 1秒ごとにStatsデータを要求

って感じ。

リアルタイムに・・とかではなく、愚直に1秒ごとのタイマーが頑張ってたんですね。

データはどこからくるのか

`getUserMedia()`したこととか、`RTCPeerConnection`が作られたこととか、そういう情報の出どころはどこか？

`initialize()`で呼んでる1秒ごとの`requestStats()`が何してるかを追えばわかるはず・・・。

function requestStats() {
  if (currentGetStatsMethod == OPTION_GETSTATS_STANDARD) {
    requestStandardStats();
  } else if (currentGetStatsMethod == OPTION_GETSTATS_LEGACY) {
    requestLegacyStats();
  }
}

/**
 * Sends a request to the browser to get peer connection statistics from the
 * standard getStats() API (promise-based).
 */
function requestStandardStats() {
  if (Object.keys(peerConnectionDataStore).length > 0) {
    chrome.send("getStandardStats");
  }
}

はい。

`getStats()`は`Promise`ベースかそうでないかで返り値が変わる仕様変更があった。
なのでそれをオプションで選べるようになってて、どちらにせよ「`getStats()`のデータをください」っていってる。

`chrome.send("getStandardStats")`すると、きっとどこかで待ち受けてる関数にそのデータが放り込まれてくるっぽい。

次はその受け口を探す。

横道: これが使えるなら

`chrome.send("getStandardStats")`が自由に使えるなら、どんなページでも`getStats()`し放題なのでは？！捗るのでは？！

って思ったけど、まぁできませんでした。

Chromeの場合、`chrome`オブジェクトが`window`にだいたい生えてるんですが、通常のWebページをブラウジングしてるときは肝心の`chrome.send()`がありません。

どうやら`chrome://`配下のページでだけ使えるものらしい。

Accessing `chrome.send()` method in chrome web browser out of chrome's internal pages - Stack Overflow

残念。

続・データはどこからくるのか

`chrome.send()`に対応したイベントハンドラみたいなやつが見当たらないので、きっとグローバルに見えてる関数のどれかがおもむろに叩かれるはず。（これは勘）

怪しい関数ないかなーと見てたら見つけたこの2つのグローバル変数。

• `userMediaRequests = []`
• `peerConnectionDataStore = {}`

実際データがある状態でコンソールから見てもそれらしい値が入ってたので、ここがすべてだと見てよさそう。

ちなみに、`userMediaRequests`に入ってるのはこんなオブジェクト。

const userMediaRequests = [
  {
    origin: "https://conf.webrtc.ecl.ntt.com",
    pid: 41455,
    rid: 659,
    timestamp: 1576114434316.34,
    video: "{deviceId: {exact: ["02c4f48cf9bfd27aa15f8d7b1483cb3aefdbed87f8b4a189e9814774316f8723"]}}"
  },
]

実際にinternalsで見れるのとほぼ一緒でおもしろみはない。

`pid`ごとに背景の色を変えるとかしてほしいなといつも思ってる。
`rid`はリクエストIDかね？

`addGetUserMedia()`というグローバル関数がこの配列に値を入れてるので、ブレークポイント貼ってコールスタックたどればわかると思ったら、まさかのてっぺんだった・・。

ということは。

StatsRatesCalculator

`getStats()`のデータはだいたい前のデータと最新のデータを比較することが多いけど、正にそういうことをやってるやつがいた。

class StatsRatesCalculator {
  constructor() {
    this.previousReport = null;
    this.currentReport = null;
  }

  addStatsReport(report) {
    this.previousReport = this.currentReport;
    this.currentReport = report;
    this.updateCalculatedMetrics_();
  }

  // Updates all "calculated metrics", which are metrics derived from standard
  // values, such as converting total counters (e.g. bytesSent) to rates (e.g.
  // bytesSent/s).
  updateCalculatedMetrics_() {
    const statsCalculators = [
      {
        type: "data-channel",
        metricCalculators: {
          messagesSent: new RateCalculator("messagesSent", "timestamp"),
          messagesReceived: new RateCalculator("messagesReceived", "timestamp"),
          bytesSent: new RateCalculator("bytesSent", "timestamp"),
          bytesReceived: new RateCalculator("bytesReceived", "timestamp")
        }
      },
      {
        type: "media-source",
        metricCalculators: {
          totalAudioEnergy: new AudioLevelRmsCalculator()
        }
      },
      {
        type: "track",
        metricCalculators: {
          framesSent: new RateCalculator("framesSent", "timestamp"),
          framesReceived: [
            new RateCalculator("framesReceived", "timestamp"),
            new DifferenceCalculator("framesReceived", "framesDecoded")
          ],
          totalAudioEnergy: new AudioLevelRmsCalculator(),
          jitterBufferDelay: new RateCalculator(
            "jitterBufferDelay",
            "jitterBufferEmittedCount",
            CalculatorModifier.kMillisecondsFromSeconds
          )
        }
      },
      {
        type: "outbound-rtp",
        metricCalculators: {
          bytesSent: new RateCalculator("bytesSent", "timestamp"),
          packetsSent: new RateCalculator("packetsSent", "timestamp"),
          totalPacketSendDelay: new RateCalculator(
            "totalPacketSendDelay",
            "packetsSent",
            CalculatorModifier.kMillisecondsFromSeconds
          ),
          framesEncoded: new RateCalculator("framesEncoded", "timestamp"),
          totalEncodedBytesTarget: new RateCalculator(
            "totalEncodedBytesTarget",
            "timestamp"
          ),
          totalEncodeTime: new RateCalculator(
            "totalEncodeTime",
            "framesEncoded",
            CalculatorModifier.kMillisecondsFromSeconds
          ),
          qpSum: new RateCalculator("qpSum", "framesEncoded"),
          codecId: new CodecCalculator()
        }
      },
      {
        type: "inbound-rtp",
        metricCalculators: {
          bytesReceived: new RateCalculator("bytesReceived", "timestamp"),
          packetsReceived: new RateCalculator("packetsReceived", "timestamp"),
          framesDecoded: new RateCalculator("framesDecoded", "timestamp"),
          totalDecodeTime: new RateCalculator(
            "totalDecodeTime",
            "framesDecoded",
            CalculatorModifier.kMillisecondsFromSeconds
          ),
          qpSum: new RateCalculator("qpSum", "framesDecoded"),
          codecId: new CodecCalculator()
        }
      },
      {
        type: "transport",
        metricCalculators: {
          bytesSent: new RateCalculator("bytesSent", "timestamp"),
          bytesReceived: new RateCalculator("bytesReceived", "timestamp")
          // TODO(https://crbug.com/webrtc/10568): Add packetsSent and
          // packetsReceived once implemented.
        }
      },
      {
        type: "candidate-pair",
        metricCalculators: {
          bytesSent: new RateCalculator("bytesSent", "timestamp"),
          bytesReceived: new RateCalculator("bytesReceived", "timestamp"),
          // TODO(https://crbug.com/webrtc/10569): Add packetsSent and
          // packetsReceived once implemented.
          requestsSent: new RateCalculator("requestsSent", "timestamp"),
          requestsReceived: new RateCalculator("requestsReceived", "timestamp"),
          responsesSent: new RateCalculator("responsesSent", "timestamp"),
          responsesReceived: new RateCalculator(
            "responsesReceived",
            "timestamp"
          ),
          consentRequestsSent: new RateCalculator(
            "consentRequestsSent",
            "timestamp"
          ),
          consentRequestsReceived: new RateCalculator(
            "consentRequestsReceived",
            "timestamp"
          ),
          totalRoundTripTime: new RateCalculator(
            "totalRoundTripTime",
            "responsesReceived",
            CalculatorModifier.kMillisecondsFromSeconds
          )
        }
      }
    ];

    statsCalculators.forEach(statsCalculator => {
      this.currentReport.getByType(statsCalculator.type).forEach(stats => {
        Object.keys(statsCalculator.metricCalculators).forEach(
          originalMetric => {
            let metricCalculators =
              statsCalculator.metricCalculators[originalMetric];
            if (!Array.isArray(metricCalculators)) {
              metricCalculators = [metricCalculators];
            }
            metricCalculators.forEach(metricCalculator => {
              this.currentReport.addCalculatedMetric(
                stats.id,
                originalMetric,
                metricCalculator.getCalculatedMetricName(),
                metricCalculator.calculate(
                  stats.id,
                  this.previousReport,
                  this.currentReport
                )
              );
            });
          }
        );
      });
    });
  }
}

• `RTCStartsReport`の`type`ごとに
• どういうメトリクスを取りたいかを定義して
• その計算をした情報をアップデートする

ここに載せてる以外に依存してる`XxxCalculator`のコードもあわせれば、誰でもwebrtc-internalsで見れる情報をシュッと表示するrtcstats-wrapperが作れる！

まあかなり玄人向けの情報ではあるので、いい感じに訳すならだいたい自作するかなーって感じではあるけど、とても参考になるコードなはず。

TimelineGraphView

あのグラフを描画してるクラス。

実装もそのまんまで、`canvas`に対していい感じにデータを時系列でプロットするだけ。

縦軸の目盛りの単位をデータに応じてアップデートする処理とか参考になりますね。

DumpCreator.onDownloadData_

ダンプファイルのダウンロードのロジック。

ただやってることはなんてことなくて、貯めてたオブジェクトを`JSON.stringify()`して`Blob`にして`a`要素でダウンロードさせてるだけ。

onDownloadData_: function() {
  var dump_object = {
    getUserMedia: userMediaRequests,
    PeerConnections: peerConnectionDataStore,
    UserAgent: navigator.userAgent
  };
  var textBlob = new Blob([JSON.stringify(dump_object, null, " ")], {
    type: "octet/stream"
  });
  var URL = window.URL.createObjectURL(textBlob);

  var anchor = this.root_.getElementsByTagName("a")[0];
  anchor.href = URL;
  anchor.download = "webrtc_internals_dump.txt";
  // The default action of the anchor will download the URL.
},

これと同じ形式でダンプファイルを作れば、自分たちのSDKからダンプファイルが出力できる。

オーディオとパケットのダンプ機能は、`chrome.send()`してるだけだったので、どうやらブラウザ側でやってる模様。