v0.14.7にて説明します。適時最新版にするなり、所望のバージョンで確認をお願いします。

hls.jsのデバッグログを出力する

Hlsオブジェクトを生成する際に引数にconfigを渡す。そのconfigのdebug変数にtrueを代入すれば良い。

config.debug = true;

そうすると、JS consoleにログが出力されるようになる

JS consoleはchromeであればdeveloper toolsから確認できる

詳細は以下を参照のこと

hls.js/API.md at v0.14.17 · video-dev/hls.js · GitHub

hls.jsのデバッグログを読み解く

logを有効にしても意味がわからないと理解できない。

結論から先に書くとhls.js/API.md at v0.14.17 · video-dev/hls.js · GitHub を読むこと

以下は、調べた際の途中経過。

source codeをgrepするとlogの出力箇所を探すことができるが、なんとなくしかわからない

例えば以下のようなログを調べる場合について説明する

[log] > Parsed video,PTS:[3.985,4.985],DTS:[2.985/3.985],nb:30,dropped:0

まず使用しているリビジョンのsource codeを取得し、Parsedでgrepする。そうすると、何個か引っかかるが、今回はhttps://github.com/video-dev/hls.js/blob/v0.14.17/src/controller/stream-controller.js#L1019

class StreamController extends BaseStreamController {

...

  onFragParsingData (data) {
    const fragCurrent = this.fragCurrent;
    const fragNew = data.frag;
...
      if (data.hasVideo === true) {
        frag.addElementaryStream(ElementaryStreamTypes.VIDEO);
      }

      logger.log(`Parsed ${data.type},PTS:[${data.startPTS.toFixed(3)},${data.endPTS.toFixed(3)}],DTS:[${data.startDTS.toFixed(3)}/${data.endDTS.toFixed(3)}],nb:${data.nb},dropped:${data.dropped || 0}`);

      // Detect gaps in a fragment  and try to fix it by finding a keyframe in the previous fragment (see _findFragments)
      if (data.type === 'video') {
        frag.dropped = data.dropped;

onFragParsingDataといった関数で呼ばれているため、この関数名でgrepをする。しかし見つからない。

???

onFragParsingDataといった関数はStreamController classで定義されている。このclassのコンストラクタにおいてEvent.FRAG_PARSING_DATAというそれっぽいのが宣言されている。

class StreamController extends BaseStreamController {
  constructor (hls, fragmentTracker) {
    super(hls,
      Event.MEDIA_ATTACHED,
      Event.MEDIA_DETACHING,
      Event.MANIFEST_LOADING,
      Event.MANIFEST_PARSED,
      Event.LEVEL_LOADED,
      Event.LEVELS_UPDATED,
      Event.KEY_LOADED,
      Event.FRAG_LOADED,
      Event.FRAG_LOAD_EMERGENCY_ABORTED,
      Event.FRAG_PARSING_INIT_SEGMENT,
      Event.FRAG_PARSING_DATA, //☆
      Event.FRAG_PARSED,
      Event.ERROR,
      Event.AUDIO_TRACK_SWITCHING,
      Event.AUDIO_TRACK_SWITCHED,
      Event.BUFFER_CREATED,
      Event.BUFFER_APPENDED,
      Event.BUFFER_FLUSHED);

この定義は events.js https://github.com/video-dev/hls.js/blob/v0.14.17/src/events.js#L93にて定義されている。そしていつ起こるかのがきちんと書いてある

  FRAG_PARSING_DATA: 'hlsFragParsingData',
  // fired when fragment parsing is completed - data: { id : demuxer id, frag: fragment object }

ここまで書いてAPI.mdのruntimeの章にきちんといつ起こるかが書いてあるため参照すると良い hls.js/API.md at v0.14.17 · video-dev/hls.js · GitHub

参考までに調べようとしていたFRAG_PARSING_DATAの説明は以下のようになっている

Hls.Events.FRAG_PARSING_DATA - fired when moof/mdat have been extracted from fragment

    data: { id: demuxer id, frag : fragment object, moof : moof MP4 box, mdat : mdat MP4 box, startPTS : PTS of first sample, endPTS : PTS of last sample, startDTS : DTS of first sample, endDTS : DTS of last sample, type : stream type (audio or video), nb : number of samples }

moof/mdatがfragramentから取り出されたときに起きることがわかる

さらにPTS:[3.985,4.985]は[startPTS,endPTS], nb:はサンプル数ということがわかる

未来は楽しいにきまっている

hls.jsのログ解析

hls.jsのデバッグログを出力する

hls.jsのデバッグログを読み解く