SABRE.js: Substation Alpha suBtitles REnderer
A Gpu Accelerated Javascript Advanced Substation Alpha Subtitles Renderer.
What is SABRE.js?
SABRE.js is a full renderer for Substation Alpha Subtitles and Advanced Substation Alpha Subtitles. It allows you to draw styled/stylized subtitles over web video with multiple fonts, colors, animations and effects.
Other Similar software.
- Javascript-Subtitles-Octopus
- Libass
- XY-VSFilter
Gallery
A gallery of major milestones in the development process.
To view the gallery click here if you're using a decent browser or here if you like safari or internet explorer.
Folder Structure
- src/ -- Main sourcecode for the project (excluding src/__tests__)
- src/__tests__/ -- Test code for test driven development.
- include/ -- Browser API definitions and internal API definitions for the Closure Compiler (Files in this folder aren't compiled).
- bin/ -- Output directory for production code.
- debugbin/ -- Output directory for debug code.
- scripts/ -- Contains scripts that are run by the makefile.
- tbin/ -- Contains the Closure Compiler and other build tools.
- temp_files/ -- Temporary files.
- test/ -- Directory used when running the debug server.
Documentation
How to include the library (from the jsdelivr CDN, this cdn is recommended as they publish usage statistics for each package):
<script src="https://cdn.jsdelivr.net/npm/opentype.js@latest/dist/opentype.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@sabre-js/sabre@latest/dist/sabre.min.js"></script>How to include the library (from the unpkg CDN, for the more privacy minded):
<script src="https://unpkg.com/opentype.js@latest/dist/opentype.min.js"></script>
<script src="https://unpkg.com/@sabre-js/sabre@latest/dist/sabre.min.js"></script>You can retrieve an instance of the library by calling sabre.SABRERenderer like so from a load event handler:
let renderer;
window.addEventListener("load",() => {
let subs = "";
let fonts = [];
// load the contents of the subtitle file into subs.
// YOUR CODE HERE
// load the fonts using opentype.js and put them in
// the fonts array.
// YOUR CODE HERE
// pass the font parsing function to the renderer
renderer = sabre.SABRERenderer(parseFont);
renderer.loadSubtitles(subs,fonts);
renderer.setViewport(1280,720); // use the video player's dimensions.
// schedule your frame callback using either requestAnimationFrame or requestVideoFrameCallback
});and passing it a function that loads fonts using opentype.js as shown below:
function parseFont(data) {
return opentype.parse(data);
}You may then call loadSubtitles passing in a string containing the contents of the subtitle file and set the
viewport with setViewport as shown in the example above. Anytime the video or player is resized you should call
setViewport with the new dimensions of the player.
Each frame, before you call any of the rendering functions, first call checkReadyToRender to see if the library is ready
to render a frame of subtitles.
API
Functions
- loadSubtitles(subsText, fonts) ⇒
void Begins the process of parsing the passed subtitles in SSA/ASS format into subtitle events.
- setViewport(width, height) ⇒
void Updates the resolution at which the subtitles are rendered (if the player is resized, for example).
- checkReadyToRender() ⇒
boolean Checks if the renderer is ready to render a frame.
- getFrame(time) ⇒
ImageBitmap Fetches a rendered frame of subtitles as an ImageBitmap, returns null if ImageBitmap is unsupported.
- getFrameAsUri(time, callback) ⇒
void Fetches a rendered frame of subtitles as an object uri.
- drawFrame(time, canvas, [contextType]) ⇒
void Fetches a rendered frame of subtitles to a canvas.
loadSubtitles(subsText, fonts) ⇒ void
Begins the process of parsing the passed subtitles in SSA/ASS format into subtitle events.
Kind: global function
| Param | Type | Description |
|---|---|---|
| subsText | string |
the subtitle file's contents. |
| fonts | Array.<Font> |
preloaded fonts nessisary for this subtitle file (one of these MUST be Arial). |
setViewport(width, height) ⇒ void
Updates the resolution at which the subtitles are rendered (if the player is resized, for example).
Kind: global function
| Param | Type | Description |
|---|---|---|
| width | number |
the desired width of the resolution. |
| height | number |
the desired height of the resolution. |
checkReadyToRender() ⇒ boolean
Checks if the renderer is ready to render a frame.
Kind: global function
Returns: boolean - is the renderer ready?
getFrame(time) ⇒ ImageBitmap
Fetches a rendered frame of subtitles as an ImageBitmap, returns null if ImageBitmap is unsupported.
Kind: global function
| Param | Type | Description |
|---|---|---|
| time | number |
the time at which to draw subtitles. |
getFrameAsUri(time, callback) ⇒ void
Fetches a rendered frame of subtitles as an object uri.
Kind: global function
| Param | Type | Description |
|---|---|---|
| time | number |
the time at which to draw subtitles. |
| callback | function |
a callback that provides the URI for the image generated. |
drawFrame(time, canvas, [contextType]) ⇒ void
Fetches a rendered frame of subtitles to a canvas.
Kind: global function
| Param | Type | Description |
|---|---|---|
| time | number |
the time at which to draw subtitles. |
| canvas | HTMLCanvasElement | OffscreenCanvas |
the target canvas |
| [contextType] | string |
the context type to use (must be one of "bitmap" or "2d"), defaults to "bitmap" unless unsupported by the browser, in which case "2d" is the default. |
© 2012-2022 Patrick "ILOVEPIE" Rhodes Martin.