pgs.js

Feature

• HTML5 Canvas based PGS (Presentation Graphic Stream) rendering

Options

PGSController

export type PGSControllerOption = {
  renderOption: {
    preferHTMLCanvasElement: boolean; // preffer HTMLCanvasElement in Main Thread. (default: false, recommended firefox is true)
    webWorker: boolean; // use WebWorker for rendering (default: false)
  }
}

PGSSupFeeder/PGSAsyncSupFeeder

export type PGSSupFeederOption = {
  timeshift: number; // offset for time (default: 0)
  preload: 'none' | 'decode' | 'render' ; // prelodd rgba data (default: none)
}

Getting Started

Requirements: Wrapping Relative Element Needed!

<div style="position: relative; display: inline-block;"> <!-- This Relative Wrapping Needed! -->
  <video id="video"></video>
</div>

Work with SUP file (sync)

<script type="module">
  import { PGSController, PGSSupFeeder } from "pgs.js";
  const res = await fetch('./something.sup');
  const sup = await res.arrayBuffer();

  const video = document.getElementById('video');

  const controller = new PGSController();
  const feeder = new PGSSupFeeder(sup);

  controller.attachFeeder(feeder);
  controller.attachMedia(video)
</script>

Work with SUP file (async)

<script type="module">
  import { PGSController, PGSAsyncSupFeeder } from "pgs.js";
  const res = await fetch('./something.sup');

  const video = document.getElementById('video');

  const controller = new PGSController();
  const feeder = new PGSAsyncSupFeeder(res.body);
  // use `feeder.done` for wait loading

  controller.attachFeeder(feeder);
  controller.attachMedia(video)
</script>

Work with M2TS

<script type="module">
  import { PGSController, PGSMpegTsFeeder } from "pgs.js";
  const video = document.getElementById('video');

  const controller = new PGSController();
  const feeder = new PGSMpegTsFeeder();
  // call `feeder.feed(arraybuffer, pts, dts, timescale)` for insert PES

  controller.attachFeeder(feeder);
  controller.attachMedia(video)
</script>

Build

yarn
yarn build