Skip to main content

Class: CanvasRenderer<ResultT>

@geenee/armature.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.

Type parameters

NameTypeDescription
ResultTextends Object = Type of processing results

Hierarchy

Constructors

constructor

new CanvasRenderer<ResultT>(params)

Constructor

Type parameters

NameType
ResultTextends Object =

Parameters

NameTypeDescription
paramsCanvasParamsParameters of responsive canvas

Overrides

PluginRenderer.constructor

Properties

cameraAngle

Protected cameraAngle: number

Camera vertical angle in radians

Inherited from

PluginRenderer.cameraAngle


cameraRatio

Protected cameraRatio: number

Camera aspect ratio

Inherited from

PluginRenderer.cameraRatio


canvas

canvas: ResponsiveCanvas

Responsive canvas


loaded

Protected loaded: boolean = false

Loaded state

Inherited from

PluginRenderer.loaded


padCtx

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

Drawing context of padding canvases


plugins

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

Attached plugins

Inherited from

PluginRenderer.plugins


videoRatio

Protected videoRatio: number

Aspect ratio of input video

Inherited from

PluginRenderer.videoRatio


videoSize

Protected videoSize: Size

Resolution of input video

Inherited from

PluginRenderer.videoSize

Methods

addListener

addListener<E>(event, listener): CanvasRenderer<ResultT>

Adds the listener function to the end of the listeners array

Type parameters

NameType
Eextends keyof RendererEvents

Parameters

NameTypeDescription
eventEThe name of the event
listenerRendererEvents[E]The callback function

Returns

CanvasRenderer<ResultT>

This EventEmitter

Inherited from

PluginRenderer.addListener


addPlugin

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.

Parameters

NameType
pluginPlugin<ResultT>

Returns

Promise<void>

Inherited from

PluginRenderer.addPlugin


dispose

dispose(): void

Dispose renderer object

Extended to dispose responsive canvas

Returns

void

Overrides

PluginRenderer.dispose


emit

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

Synchronously calls each of the listeners registered for the event

Type parameters

NameType
Eextends keyof RendererEvents

Parameters

NameTypeDescription
eventEThe name of the event
...argsArgs<RendererEvents[E]>Arguments passed to the listeners

Returns

boolean

True if the event had listeners, False otherwise

Inherited from

PluginRenderer.emit


eventNames

eventNames(): (string | symbol)[]

List of emitter's events

Returns

(string | symbol)[]

List of emitter's events

Inherited from

PluginRenderer.eventNames


getMaxListeners

getMaxListeners(): number

Maximum number of listeners per event

Returns

number

Maximum number of listeners per event

Inherited from

PluginRenderer.getMaxListeners


listenerCount

listenerCount<E>(event): number

The number of listeners listening to the event

Type parameters

NameType
Eextends keyof RendererEvents

Parameters

NameTypeDescription
eventEThe name of the event

Returns

number

Number of listeners

Inherited from

PluginRenderer.listenerCount


listeners

listeners<E>(event): Function[]

Copy of the array of listeners for the event

Type parameters

NameType
Eextends keyof RendererEvents

Parameters

NameTypeDescription
eventEThe name of the event

Returns

Function[]

Copy of the listeners array

Inherited from

PluginRenderer.listeners


load

load(): Promise<void>

Initialize renderer

Initializes all attached plugins.

Returns

Promise<void>

Promise resolving when initialization is finished

Inherited from

PluginRenderer.load


off

off<E>(event, listener): CanvasRenderer<ResultT>

Removes the listener from the listener array for the event

Type parameters

NameType
Eextends keyof RendererEvents

Parameters

NameTypeDescription
eventEThe name of the event
listenerRendererEvents[E]The callback function

Returns

CanvasRenderer<ResultT>

This EventEmitter

Inherited from

PluginRenderer.off


on

on<E>(event, listener): CanvasRenderer<ResultT>

Adds the listener function to the event

Type parameters

NameType
Eextends keyof RendererEvents

Parameters

NameTypeDescription
eventEThe name of the event
listenerRendererEvents[E]The callback function

Returns

CanvasRenderer<ResultT>

This EventEmitter

Inherited from

PluginRenderer.on


once

once<E>(event, listener): CanvasRenderer<ResultT>

Adds a one-time listener function for the event

Type parameters

NameType
Eextends keyof RendererEvents

Parameters

NameTypeDescription
eventEThe name of the event
listenerRendererEvents[E]The callback function

Returns

CanvasRenderer<ResultT>

This EventEmitter

Inherited from

PluginRenderer.once


prependListener

prependListener<E>(event, listener): CanvasRenderer<ResultT>

Adds the listener function to the beginning of the listeners array

Type parameters

NameType
Eextends keyof RendererEvents

Parameters

NameTypeDescription
eventEThe name of the event
listenerRendererEvents[E]The callback function

Returns

CanvasRenderer<ResultT>

This EventEmitter

Inherited from

PluginRenderer.prependListener


prependOnceListener

prependOnceListener<E>(event, listener): CanvasRenderer<ResultT>

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

Type parameters

NameType
Eextends keyof RendererEvents

Parameters

NameTypeDescription
eventEThe name of the event
listenerRendererEvents[E]The callback function

Returns

CanvasRenderer<ResultT>

Inherited from

PluginRenderer.prependOnceListener


rawListeners

rawListeners<E>(event): Function[]

Copy of the array of listeners for the event including wrappers

Type parameters

NameType
Eextends keyof RendererEvents

Parameters

NameTypeDescription
eventEThe name of the event

Returns

Function[]

Copy of the listeners array

Inherited from

PluginRenderer.rawListeners


removeAllListeners

removeAllListeners<E>(event?): CanvasRenderer<ResultT>

Removes all listeners, or those of the specified event

Type parameters

NameType
Eextends keyof RendererEvents

Parameters

NameTypeDescription
event?EThe name of the event

Returns

CanvasRenderer<ResultT>

This EventEmitter

Inherited from

PluginRenderer.removeAllListeners


removeAllPlugins

removeAllPlugins(): void

Remove all render plugins

Renderer will dispose all plugins before detaching them.

Returns

void

Inherited from

PluginRenderer.removeAllPlugins


removeListener

removeListener<E>(event, listener): CanvasRenderer<ResultT>

Removes the specified listener from the listener array

Type parameters

NameType
Eextends keyof RendererEvents

Parameters

NameTypeDescription
eventEThe name of the event
listenerRendererEvents[E]The callback function

Returns

CanvasRenderer<ResultT>

This EventEmitter

Inherited from

PluginRenderer.removeListener


removePlugin

removePlugin(plugin): void

Remove render plugin

Renderer will dispose the plugin before detaching it.

Parameters

NameType
pluginPlugin<ResultT>

Returns

void

Inherited from

PluginRenderer.removePlugin


setMaxListeners

setMaxListeners(n): CanvasRenderer<ResultT>

Sets maximum number of listeners per event

Parameters

NameTypeDescription
nnumberMaximum number of listeners

Returns

CanvasRenderer<ResultT>

This EventEmitter

Inherited from

PluginRenderer.setMaxListeners


setMirror

setMirror(mirror): void

Set mirror mode

CanvasRenderer sets mirror mode of ResponsiveCanvas.

Parameters

NameTypeDescription
mirrorbooleanMirror the output

Returns

void


setMode

setMode(mode): void

Set fitting mode

CanvasRenderer sets fitting mode of ResponsiveCanvas.

Parameters

NameTypeDescription
modeCanvasModeFitting mode

Returns

void


setupCamera

setupCamera(ratio, angle): void

Set camera parameters

Callback sets up all attached plugins.

Parameters

NameTypeDescription
rationumberCamera aspect ratio
anglenumberCamera vertical angle in radians

Returns

void

Inherited from

PluginRenderer.setupCamera


setupPadding

Protected setupPadding(): void

Setup padding canvases

Callback sets up size of padding canvases.

Returns

void


setupVideo

setupVideo(size, ratio?): void

Set video parameters

Callback passes aspect ratio to responsive canvas.

Parameters

NameTypeDescription
sizeSizeResolution of input video
ratio?numberAspect ration of input video

Returns

void

Overrides

PluginRenderer.setupVideo


unload

unload(): void

Reset renderer

Resets all attached plugins.

Returns

void

Inherited from

PluginRenderer.unload


update

update(result, stream): Promise<void>

Update the scene

Updates all attached plugins.

Parameters

NameTypeDescription
resultResultTResults of video processing
streamHTMLCanvasElementCaptured video frame

Returns

Promise<void>

Promise resolving when update is finished

Inherited from

PluginRenderer.update


updatePads

Protected updatePads(stream): void

Update padding canvases

Updates padding canvases using portions of video frame.

Parameters

NameTypeDescription
streamHTMLCanvasElementCaptured video frame

Returns

void


updatePlugins

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

Update attached plugins

Calls update() of all attached plugins.

Parameters

NameTypeDescription
resultResultTResults of video processing
streamHTMLCanvasElementCaptured video frame

Returns

Promise<void>

Promise resolving when update is finished

Inherited from

PluginRenderer.updatePlugins


updateScene

Protected updateScene(): void

Update and render the scene

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

Returns

void

Inherited from

PluginRenderer.updateScene


updateVideo

Protected updateVideo(stream): void

Update the video layer

Updates padding canvases using portions of video frame.

Parameters

NameTypeDescription
streamHTMLCanvasElementCaptured video frame

Returns

void

Overrides

PluginRenderer.updateVideo