# webchimera-renderer

> renderer for WebChimera.js

Latest version **1.0.1** (published 2024-01-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install webchimera-renderer
pnpm add webchimera-renderer
yarn add webchimera-renderer
bun add webchimera-renderer
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2024-01-17 |
| First published | 2024-01-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 13.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Chris Chung |
| Maintainers | chrischungcloud |
| Keywords | video, renderer, webchimera, webchimera.js, vlc, libvlc |

## Links

- npm: https://www.npmjs.com/package/webchimera-renderer
- Repository: https://github.com/ChrisChung/WebChimera-renderer
- Homepage: https://github.com/ChrisChung/WebChimera-renderer#readme
- Issues: https://github.com/ChrisChung/WebChimera-renderer/issues
- npm.io page: https://npm.io/package/webchimera-renderer

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2024-01-17

## README

# <img alt="WebChimera.js Renderer" src="https://raw.githubusercontent.com/jaruba/wcjs-logos/master/logos/small/wcjs-renderer.png">
Renderer for WebChimera.js

### Prerequisites
* [WebChimera.js prerequisites](https://github.com/RSATom/WebChimera.js#build-prerequisites)

### Install

``
npm install webchimera-renderer
``

### Usage example

HTML:
```HTML
<canvas id="canvas"/>
```
JS:
```JavaScript
var renderer = require("webchimera-renderer");
var vlc = require("wcjs-prebuilt").createPlayer();
var options = { /* Add renderer options here */ }
renderer.bind(document.getElementById("canvas"), vlc, options);
vlc.play("http://archive.org/download/CartoonClassics/Krazy_Kat_-_Keeping_Up_With_Krazy.mp4");
```

### JavaScript API

- `bind(canvas, vlc options)`: bind the Webchimera VLC player to a canvas element:
    - `canvas` can be a DOM node or selector (mandatory) 
    - `vlc` is a VLC player created with WebChimera.js (mandatory)
    - `options`:
        - `fallbackRenderer` is a boolean mentioning if the fallback non-WebGL renderer should be used (optional, defaults to false),
        - `preserveDrawingBuffer` is a boolean mentioning if we should preserve the drawing buffer (optional, defaults to false),
        - `fileMode` is a boolean mentioning if we should fill canvas without re (optional, defaults to false),
        - `onFrameSetup` will be called when VLC's `onFrameSetup` callback is called, with the same arguments, after the canvas has been setup.
        - `onFrameReady` will be called when VLC's `onFrameReady` callback is called, with the same arguments, after the frame has been rendered to the canvas.
        - `onFrameCleanup` will be called when VLC's `onFrameCleanup` callback is called, with the same arguments, after the frame was cleaned up.

- `clear(canvas)`: draws a single black frame on a canvas element (it's recommended to clear the canvas when the `Media Changed` and `Ended` events are triggered)

- `getFps(function)`: returns int in callback, the number of frames that wore rendered in 1 seconds after the request was made (useful for performance tests and getting the current fps of a live stream as it normally returns as `0` with the WebChimera.js native method, to note: even when playback is paused it still renders at 10 fps)

---
_Source: https://npm.io/package/webchimera-renderer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._