VideoRenderer

Generic video renderer

VideoRenderer is based on CanvasRenderer and uses two canvas layers: one for video stream and another to render 3D scene on top of it. This usage pattern is the easiest to implement, but more limited as video is not embedded into the scene and e.g. renderer’s postprocess effects or advanced techniques can’t be applied to video. It’s possible to draw on top of the video stream using 2d canvas context, for example to add simple 2d effects. Effects can be encapsulated in a form of render plugins. Plugins are levels of abstraction allowing to single out ready-made helpers that are used as atomic building blocks.

Extends

• CanvasRenderer<ResultT>

Type Parameters

• ResultT extends object = object

Type of processing results

Constructors

new VideoRenderer()

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

Constructor

Parameters

• params: CanvasParams

Parameters of responsive canvas

Returns

VideoRenderer<ResultT>

Overrides

CanvasRenderer.constructor

Properties

cameraAngle

protected cameraAngle: number

Camera vertical angle in radians

Inherited from

CanvasRenderer.cameraAngle

---

cameraRatio

protected cameraRatio: number

Camera aspect ratio

Inherited from

CanvasRenderer.cameraRatio

---

canvas

canvas: ResponsiveCanvas

Responsive canvas

Inherited from

CanvasRenderer.canvas

---

loaded

protected loaded: boolean = false

Loaded state

Inherited from

CanvasRenderer.loaded

---

padCtx

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

Drawing context of padding canvases

Inherited from

CanvasRenderer.padCtx

---

plugins

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

Attached plugins

Inherited from

CanvasRenderer.plugins

---

videoCtx

videoCtx: null | CanvasRenderingContext2D = null

Drawing context of video canvas layer

---

videoRatio

protected videoRatio: number

Aspect ratio of input video

Inherited from

CanvasRenderer.videoRatio

---

videoSize

protected videoSize: Size

Resolution of input video

Inherited from

CanvasRenderer.videoSize

Methods

addListener()

addListener<E>(event, listener): this

Adds the listener function to the end of the listeners array

Type Parameters

• E extends keyof RendererEvents

Parameters

• event: E

The name of the event

• listener: RendererEvents[E]

The callback function

Returns

this

This EventEmitter

Inherited from

CanvasRenderer.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

• plugin: Plugin<ResultT>

Returns

Promise<void>

Inherited from

CanvasRenderer.addPlugin

---

dispose()

dispose(): void

Dispose renderer object

Extended to dispose responsive canvas

Returns

void

Inherited from

CanvasRenderer.dispose

---

emit()

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

Synchronously calls each of the listeners registered for the event

Type Parameters

• E extends keyof RendererEvents

Parameters

• event: E

The name of the event

• …args: Args<RendererEvents[E]>

Arguments passed to the listeners

Returns

boolean

True if the event had listeners, False otherwise

Inherited from

CanvasRenderer.emit

---

eventNames()

eventNames(): (string | symbol)[]

List of emitter’s events

Returns

(string | symbol)[]

List of emitter’s events

Inherited from

CanvasRenderer.eventNames

---

getMaxListeners()

getMaxListeners(): number

Maximum number of listeners per event

Returns

number

Maximum number of listeners per event

Inherited from

CanvasRenderer.getMaxListeners

---

listenerCount()

listenerCount<E>(event): number

The number of listeners listening to the event

Type Parameters

• E extends keyof RendererEvents

Parameters

• event: E

The name of the event

Returns

number

Number of listeners

Inherited from

CanvasRenderer.listenerCount

---

listeners()

listeners<E>(event): Function[]

Copy of the array of listeners for the event

Type Parameters

• E extends keyof RendererEvents

Parameters

• event: E

The name of the event

Returns

Function[]

Copy of the listeners array

Inherited from

CanvasRenderer.listeners

---

load()

load(): Promise<void>

Initialize renderer

Initializes all attached plugins.

Returns

Promise<void>

Promise resolving when initialization is finished

Inherited from

CanvasRenderer.load

---

off()

off<E>(event, listener): this

Removes the listener from the listener array for the event

Type Parameters

• E extends keyof RendererEvents

Parameters

• event: E

The name of the event

• listener: RendererEvents[E]

The callback function

Returns

this

This EventEmitter

Inherited from

CanvasRenderer.off

---

on()

on<E>(event, listener): this

Adds the listener function to the event

Type Parameters

• E extends keyof RendererEvents

Parameters

• event: E

The name of the event

• listener: RendererEvents[E]

The callback function

Returns

this

This EventEmitter

Inherited from

CanvasRenderer.on

---

once()

once<E>(event, listener): this

Adds a one-time listener function for the event

Type Parameters

• E extends keyof RendererEvents

Parameters

• event: E

The name of the event

• listener: RendererEvents[E]

The callback function

Returns

this

This EventEmitter

Inherited from

CanvasRenderer.once

---

prependListener()

prependListener<E>(event, listener): this

Adds the listener function to the beginning of the listeners array

Type Parameters

• E extends keyof RendererEvents

Parameters

• event: E

The name of the event

• listener: RendererEvents[E]

The callback function

Returns

this

This EventEmitter

Inherited from

CanvasRenderer.prependListener

---

prependOnceListener()

prependOnceListener<E>(event, listener): this

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

Type Parameters

• E extends keyof RendererEvents

Parameters

• event: E

The name of the event

• listener: RendererEvents[E]

The callback function

Returns

this

Inherited from

CanvasRenderer.prependOnceListener

---

rawListeners()

rawListeners<E>(event): Function[]

Copy of the array of listeners for the event including wrappers

Type Parameters

• E extends keyof RendererEvents

Parameters

• event: E

The name of the event

Returns

Function[]

Copy of the listeners array

Inherited from

CanvasRenderer.rawListeners

---

removeAllListeners()

removeAllListeners<E>(event?): this

Removes all listeners, or those of the specified event

Type Parameters

• E extends keyof RendererEvents

Parameters

• event?: E

The name of the event

Returns

this

This EventEmitter

Inherited from

CanvasRenderer.removeAllListeners

---

removeAllPlugins()

removeAllPlugins(): void

Remove all render plugins

Renderer will dispose all plugins before detaching them.

Returns

void

Inherited from

CanvasRenderer.removeAllPlugins

---

removeListener()

removeListener<E>(event, listener): this

Removes the specified listener from the listener array

Type Parameters

• E extends keyof RendererEvents

Parameters

• event: E

The name of the event

• listener: RendererEvents[E]

The callback function

Returns

this

This EventEmitter

Inherited from

CanvasRenderer.removeListener

---

removePlugin()

removePlugin(plugin): void

Remove render plugin

Renderer will dispose the plugin before detaching it.

Parameters

• plugin: Plugin<ResultT>

Returns

void

Inherited from

CanvasRenderer.removePlugin

---

setMaxListeners()

setMaxListeners(n): this

Sets maximum number of listeners per event

Parameters

• n: number

Maximum number of listeners

Returns

this

This EventEmitter

Inherited from

CanvasRenderer.setMaxListeners

---

setMirror()

setMirror(mirror): void

Set mirror mode

CanvasRenderer sets mirror mode of ResponsiveCanvas.

Parameters

• mirror: boolean

Mirror the output

Returns

void

Inherited from

CanvasRenderer.setMirror

---

setMode()

setMode(mode): void

Set fitting mode

CanvasRenderer sets fitting mode of ResponsiveCanvas.

Parameters

• mode: CanvasMode

Fitting mode

Returns

void

Inherited from

CanvasRenderer.setMode

---

setupCamera()

setupCamera(ratio, angle): void

Set camera parameters

Callback sets up all attached plugins.

Parameters

• ratio: number

Camera aspect ratio

• angle: number

Camera vertical angle in radians

Returns

void

Inherited from

CanvasRenderer.setupCamera

---

setupPadding()

protected setupPadding(): void

Setup padding canvases

Callback sets up size of padding canvases.

Returns

void

Inherited from

CanvasRenderer.setupPadding

---

setupVideo()

setupVideo(size, ratio?): void

Set video parameters

Callback sets up size of video canvas layer.

Parameters

• size: Size

Resolution of input video

• ratio?: number

Aspect ration of input video

Returns

void

Overrides

CanvasRenderer.setupVideo

---

unload()

unload(): void

Reset renderer

Resets all attached plugins.

Returns

void

Inherited from

CanvasRenderer.unload

---

update()

update(result, stream): Promise<void>

Update the scene

Updates all attached plugins.

Parameters

• result: ResultT

Results of video processing

• stream: HTMLCanvasElement

Captured video frame

Returns

Promise<void>

Promise resolving when update is finished

Inherited from

CanvasRenderer.update

---

updatePads()

protected updatePads(stream): void

Update padding canvases

Updates padding canvases using portions of video frame.

Parameters

• stream: HTMLCanvasElement

Captured video frame

Returns

void

Inherited from

CanvasRenderer.updatePads

---

updatePlugins()

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

Update attached plugins

Calls update() of all attached plugins.

Parameters

• result: ResultT

Results of video processing

• stream: HTMLCanvasElement

Captured video frame

Returns

Promise<void>

Promise resolving when update is finished

Inherited from

CanvasRenderer.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

CanvasRenderer.updateScene

---

updateVideo()

protected updateVideo(stream): void

Update the video layer

Draws input video frame on corresponding canvas layer.

Parameters

• stream: HTMLCanvasElement

Captured video frame

Returns

void

Overrides

CanvasRenderer.updateVideo