https://github.com/monyone/pgs.js

PGS (Presentation Graphic Stream) Subtitle For Media Playback
https://github.com/monyone/pgs.js

pgs subtitle

Last synced: 3 months ago
JSON representation

PGS (Presentation Graphic Stream) Subtitle For Media Playback

• Host: GitHub
• URL: https://github.com/monyone/pgs.js
• Owner: monyone
• License: mit
• Created: 2024-07-21T06:20:27.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-09-26T22:57:44.000Z (3 months ago)
• Last Synced: 2024-09-26T23:04:38.312Z (3 months ago)
• Topics: pgs, subtitle
• Language: TypeScript
• Homepage:
• Size: 131 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# pgs.js

## Feature

* HTML5 Canvas based PGS (Presentation Graphic Stream) rendering

## Options

### PGSController

```ts

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

```ts

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!

```html

 

  



```


### Work with SUP file (sync)

```html

  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)

```

### Work with SUP file (async)

```html

  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)

```

### Work with M2TS

```html

  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)

```

## Build

```bash

yarn

yarn build

```