MPEG transport stream frame extraction without ffmpeg

[RicardoSaikali]

My end goal is to extract a single frame from an MPEG transport stream video file (.ts) as a File object in typescript. The way I am trying to do so is by setting the file as the source for a video tag like the main example seen in the readme. I am trying to use hls.js to set the video as the source since the html video tag doesn't support .ts files. It has come to my attention that hls needs a .m3u8 file as an input. Is there a way I can achieve what I need without using ffmpeg to convert my .ts file to m3u8? Here is the base code I am using:

this.tsFile = file;
var videoSrc = URL.createObjectURL(this.tsFile)
this.videoElement = document.getElementById('video') as HTMLVideoElement;
if (Hls.isSupported()){
        this.hls = new Hls();
        this.hls.attachMedia(this.videoElement!);
        this.hls.on(Hls.Events.MEDIA_ATTACHED, function () {
          console.log('video and hls.js are now bound together !');
        });
        this.hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
          console.log(
            'manifest loaded, found ' + data.levels.length + ' quality level'
          );
        });
        this.hls.on(Hls.Events.ERROR, function (event, data) {
          console.error('HLS.js error:', data);
        });

        this.hls.loadSource(videoSrc);
}

[robwalch]

Hmmm... not with loadSource. HLS.js is an HLS client - loadSource only accept m3u8 URLs.

You could try faking a MANIFEST_PARSED event after attaching the media. Actually making an m3u8, loading and printing out the JSON for this and possibly other events would get you the events you need to bootstrap the player up to the point where it would load/parse/append your TS segment:

hls.trigger(Hls.Events.MANIFEST_PARSED, {
  levels:[{ /* fill in the missing properties */
    details: {  /* fill in the missing properties */
      fragments: {  /* fill in the missing properties */
        relurl: /* URL to your TS */
      }
    }
  }],
  audioTracks:[],
  subtitleTracks:[],
  sessionData: null,
  sessionKeys: null,
  firstLevel: 0,
  stats: /* fill in missing LoaderStats */,
  audio: false,
  video: true,
  altAudio: false,
});