如何利用Hlsjs中HlsEventsFRAG_PARSING_METADATA回调解析视屏帧的SEI信息

1. 首先，需要在Hls.js的配置中开启metadata处理功能。在Hls.js初始化时，设置metadata的处理函数：

var hls = new Hls({
  // ...
  enableWorker: true,
  fragLoadingLoopThreshold: Infinity,
  manifestLoadingTimeOut: 10000,
  metadata: {
    customParsers: {
      // 注册一个名为‘sei’的metadata解析器，
      // 解析函数为parseSEIData，后面会定义
      sei: parseSEIData
    }
  }
});

2. 在parseSEIData中解析SEI数据。Hls.js中提供了一个回调函数Hls.Events.FRAG_PARSING_METADATA，此回调函数会在每个metadata解析完成后被调用。在回调函数中可以获取到metadata内容，然后进行解析。

function parseSEIData(event, data) {
  // 获取SEI数据
  var seiData = data.samples[0].data;

  // 解析SEI数据
  // TODO: 解析SEI数据
}

3. 解析SEI数据。SEI数据是嵌在视频帧中的附加信息，可以通过解析视频帧的AVC格式获取到。在Hls.js中，可以通过Hls.Events.FRAG_PARSING_DATA事件获取到视频帧的AVC数据。在AVC数据中，SEI数据的类型为6，长度为16 bits。可以根据这个信息定位到SEI数据的起始位置，然后解析SEI数据。

hls.on(Hls.Events.FRAG_PARSING_DATA, function(event, data) {
  // 获取AVC数据
  var avcData = new Uint8Array(data.payload);

  // 定位SEI数据
  var seiStart = -1;
  for (var i = 0; i < avcData.length - 5; i++) {
    if (avcData[i] == 0 && avcData[i+1] == 0 && avcData[i+2] == 0 && avcData[i+3] == 1) {
      var nalType = avcData[i+4] & 0x1F;
      if (nalType == 6) {
        // 定位到SEI数据
        seiStart = i + 5;
        break;
      }
    }
  }

  if (seiStart != -1) {
    // 解析SEI数据
    var seiData = avcData.subarray(seiStart);
    // TODO: 解析SEI数据
  }
});