aribb24.js

NOTE: v1 README is here

ARIB STD-B24 Captione Renderer

Feature

• ARIB STD-B24 Caption Rendering
  • Caption (A Profile)
  • Superimpose (A Profile)
• Support various broadcast specification
  • ARIB STD-B24 (TR-B14, TR-B15)
  • STTVD ABNT NBR 15606-1
• Support various streaming protocol embedded ARIB STD-B24
  • MPEG-TS (xqq/mpegts.js):
    • Private Stream: Specified by ARIB STD-B24
    • ID3 Timed Metadata: Sent by xtne6f/tsreadex
  • HLS:
    • ID3 Timed Metadata: above MPEG-TS ID3 Timed Metadata

Special Thanks

• Use glyph data from 和田研中丸ゴシック2004ARIB for ARIB additional symbol rendering.
  • aribb24-embedded.js utilizes embedded glyph data exported from the font which is released under public domain license.
• Inspired by b24.js.
  • The pioneer of ARIB caption rendering on Web.
• Influenced by TVCaptionMod2.
  • Got lots of feedback form the project author and heavily inspired by it.

Options

Feeder

type FeederOption = Partial<{
  timeshift: number; // shift caption time
  recieve: {
    association: 'ARIB' | 'SBTVD' | null; // null is AutoDetect
    type: 'Caption' | 'Superimpose';
    language: number | string; // index or iso language code
  },
  tokenizer: {
    pua: boolean; // use PUA for ARIB NON-STANDARD CHARACTER
  };
}>;

Renderer

CanvasRenderer

type CanvasRendererOption = Partial<{
  font: {
    normal: string;
    arib: string;
  },
  replace: {
    half: boolean, // default: true
    small: boolean // default: true
    drcs: Map<string, string>,
    glyph: Map<string, PathElement>,
  }
  color: {
    stroke: string | null,
    foreground: string | null,
    background: string | null,
  },
  resize: {
    target: 'video' | 'container'
    objectFit: 'contain' | 'none'
  }
}>;

Getting Started

mpegts.js

<script src="mpegts.js"></script>
<script type="module">
    import { Controller, MPEGTSFeeder, CanvasWebWorkerRenderer, CanvasMainThreadRenderer } from "./aribb24.mjs";
    const video = document.getElementById('video');

    const controller = new Controller();
    const feeder = new MPEGTSFeeder();
    const renderer = new CanvasWebWorkerRenderer();

    controller.attachFeeder(feeder);
    controller.attachRenderer(renderer);
    controller.attachMedia(video);

    player.on(mpegts.Events.PES_PRIVATE_DATA_ARRIVED, (data) => {
        feeder.feedB24(new Uint8Array(data.data).buffer, (data.pts ?? data.nearest_pts) / 1000, (data.dts  ?? data.nearest_pts) / 1000);
    });
    player.on(mpegts.Events.TIMED_ID3_METADATA_ARRIVED, (data) => {
        feeder.feedID3(new Uint8Array(data.data).buffer, (data.pts ?? data.nearest_pts) / 1000, (data.dts  ?? data.nearest_pts) / 1000);
    });
</script>