Skip to content

CanvasRenderer

Generic renderer using ResponsiveCanvas

Generic Renderer utilizing ResponsiveCanvas. Refer to their documentation for more details. CanvasRenderer can have several layers and there’re two basic usage patterns. Use separate layers for video and scene and effectively render scene on top of the video stream. Advantage of this approach is that image and scene can be processed independently and one can apply different effects or postprocessing. This pattern is also easier to implement. Or one can use only one canvas layer and embed video stream into the scene as object via a texture or background component. This approach will have more complex implementation dependent on particular renderer. On the other hand, rendering effects affecting the whole scene will also apply to the video stream. This can improve performance and allows advanced rendering/postprocessing techniques to be used.

ResultT extends object = { }

Type of processing results

new CanvasRenderer<ResultT>(params): CanvasRenderer<ResultT>

Constructor

CanvasParams

Parameters of responsive canvas

CanvasRenderer<ResultT>

PluginRenderer.constructor

protected cameraAngle: number

Camera vertical angle in radians

PluginRenderer.cameraAngle


protected cameraRatio: number

Camera aspect ratio

PluginRenderer.cameraRatio


canvas: ResponsiveCanvas

Responsive canvas


protected loaded: boolean = false

Loaded state

PluginRenderer.loaded


protected padCtx: [null | CanvasRenderingContext2D, null | CanvasRenderingContext2D]

Drawing context of padding canvases


protected plugins: Plugin<ResultT>[] = []

Attached plugins

PluginRenderer.plugins


protected videoRatio: number

Aspect ratio of input video

PluginRenderer.videoRatio


protected videoSize: Size

Resolution of input video

PluginRenderer.videoSize

addListener<E>(event, listener): this

Adds the listener function to the end of the listeners array

E extends keyof RendererEvents

E

The name of the event

RendererEvents[E]

The callback function

this

This EventEmitter

PluginRenderer.addListener


addPlugin(plugin): Promise<void>

Add render plugin

Initializes the plugin if it’s not loaded yet but renderer is ready. Renderer takes ownership of the plugin instance meaning it will release it when plugin is detached or renderer is disposed itself.

Plugin<ResultT>

Promise<void>

PluginRenderer.addPlugin


dispose(): void

Dispose renderer object

Extended to dispose responsive canvas

void

PluginRenderer.dispose


emit<E>(event, …args): boolean

Synchronously calls each of the listeners registered for the event

E extends keyof RendererEvents

E

The name of the event

Args<RendererEvents[E]>

Arguments passed to the listeners

boolean

True if the event had listeners, False otherwise

PluginRenderer.emit


eventNames(): (string | symbol)[]

List of emitter’s events

(string | symbol)[]

List of emitter’s events

PluginRenderer.eventNames


getMaxListeners(): number

Maximum number of listeners per event

number

Maximum number of listeners per event

PluginRenderer.getMaxListeners


listenerCount<E>(event): number

The number of listeners listening to the event

E extends keyof RendererEvents

E

The name of the event

number

Number of listeners

PluginRenderer.listenerCount


listeners<E>(event): Function[]

Copy of the array of listeners for the event

E extends keyof RendererEvents

E

The name of the event

Function[]

Copy of the listeners array

PluginRenderer.listeners


load(): Promise<void>

Initialize renderer

Initializes all attached plugins.

Promise<void>

Promise resolving when initialization is finished

PluginRenderer.load


off<E>(event, listener): this

Removes the listener from the listener array for the event

E extends keyof RendererEvents

E

The name of the event

RendererEvents[E]

The callback function

this

This EventEmitter

PluginRenderer.off


on<E>(event, listener): this

Adds the listener function to the event

E extends keyof RendererEvents

E

The name of the event

RendererEvents[E]

The callback function

this

This EventEmitter

PluginRenderer.on


once<E>(event, listener): this

Adds a one-time listener function for the event

E extends keyof RendererEvents

E

The name of the event

RendererEvents[E]

The callback function

this

This EventEmitter

PluginRenderer.once


prependListener<E>(event, listener): this

Adds the listener function to the beginning of the listeners array

E extends keyof RendererEvents

E

The name of the event

RendererEvents[E]

The callback function

this

This EventEmitter

PluginRenderer.prependListener


prependOnceListener<E>(event, listener): this

Adds a one-time listener function to the beginning of the listeners array

E extends keyof RendererEvents

E

The name of the event

RendererEvents[E]

The callback function

this

PluginRenderer.prependOnceListener


rawListeners<E>(event): Function[]

Copy of the array of listeners for the event including wrappers

E extends keyof RendererEvents

E

The name of the event

Function[]

Copy of the listeners array

PluginRenderer.rawListeners


removeAllListeners<E>(event?): this

Removes all listeners, or those of the specified event

E extends keyof RendererEvents

E

The name of the event

this

This EventEmitter

PluginRenderer.removeAllListeners


removeAllPlugins(): void

Remove all render plugins

Renderer will dispose all plugins before detaching them.

void

PluginRenderer.removeAllPlugins


removeListener<E>(event, listener): this

Removes the specified listener from the listener array

E extends keyof RendererEvents

E

The name of the event

RendererEvents[E]

The callback function

this

This EventEmitter

PluginRenderer.removeListener


removePlugin(plugin): void

Remove render plugin

Renderer will dispose the plugin before detaching it.

Plugin<ResultT>

void

PluginRenderer.removePlugin


setMaxListeners(n): this

Sets maximum number of listeners per event

number

Maximum number of listeners

this

This EventEmitter

PluginRenderer.setMaxListeners


setMirror(mirror): void

Set mirror mode

CanvasRenderer sets mirror mode of ResponsiveCanvas.

boolean

Mirror the output

void


setMode(mode): void

Set fitting mode

CanvasRenderer sets fitting mode of ResponsiveCanvas.

CanvasMode

Fitting mode

void


setupCamera(ratio, angle): void

Set camera parameters

Callback sets up all attached plugins.

number

Camera aspect ratio

number

Camera vertical angle in radians

void

PluginRenderer.setupCamera


protected setupPadding(): void

Setup padding canvases

Callback sets up size of padding canvases.

void


setupVideo(size, ratio?): void

Set video parameters

Callback passes aspect ratio to responsive canvas.

Size

Resolution of input video

number

Aspect ration of input video

void

PluginRenderer.setupVideo


unload(): void

Reset renderer

Resets all attached plugins.

void

PluginRenderer.unload


update(result, stream): Promise<void>

Update the scene

Updates all attached plugins.

ResultT

Results of video processing

HTMLCanvasElement

Captured video frame

Promise<void>

Promise resolving when update is finished

PluginRenderer.update


protected updatePads(stream): void

Update padding canvases

Updates padding canvases using portions of video frame.

HTMLCanvasElement

Captured video frame

void


protected updatePlugins(result, stream): Promise<void>

Update attached plugins

Calls update() of all attached plugins.

ResultT

Results of video processing

HTMLCanvasElement

Captured video frame

Promise<void>

Promise resolving when update is finished

PluginRenderer.updatePlugins


protected updateScene(): void

Update and render the scene

Virtual method updating and rendering the scene. Overridden by implementation of derived renderer.

void

PluginRenderer.updateScene


protected updateVideo(stream): void

Update the video layer

Updates padding canvases using portions of video frame.

HTMLCanvasElement

Captured video frame

void

PluginRenderer.updateVideo