Skip to content

Module: src/visualizer/AnalyserVideo

The AnalyserVideo component analyzes video frames to extract pixel-based data for visual processing and visualizations. It captures thumbnails of the current video frame, reduces them to a defined grid, and smooths color values over time. The component supports real-time analysis, debug output to canvas elements, and modular configuration. It is typically used to drive reactive UI elements or visualizers based on video content.

Version
1.0.0
Author
Frank Kudermann - alphanull
License
MIT
Requires
math
object
Looper
DomSmith
Source
AnalyserVideo.js, line 20

Constructor

new AnalyserVideo(player, config, apiKey)

Creates an instance of the AnalyserVideo component.

Parameters:
Name Type Description
player Player

Reference to the VisionPlayer instance.

config Object

Configuration object for the AnalyserAudio component. This is passed from the subclass.

apiKey symbol

Token for extended access to the player API.

Members

Holds the instance configuration for this component.

Properties
Name Type Attributes Default Description
gridSize number optional 3

The number of grid cells per row/column.

gridScale number optional 3

The scaling factor applied to the grid cells.

lerp number optional 0.6

The interpolation factor used for smoothing pixel values.

dim number optional 1

The dimming multiplier applied to pixel values.

debug boolean optional false

Enables debug mode with visual outputs.

analyseTimer number optional 250

Delay (in ms) between iterations of the analysis loop.

Type
Object
Source
AnalyserVideo.js, line 32

Reference to the main player instance.

Type
Player
Source
AnalyserVideo.js, line 38

Holds tokens of subscriptions (for this subclass only).

Type
Array<number>
Source
AnalyserVideo.js, line 44

Secret key only known to the player instance and initialized components. Used to be able to restrict access to API methods in conjunction with secure mode.

Type
symbol
Source
AnalyserVideo.js, line 51

Flag indicating whether the analyser is enabled.

Type
boolean
Source
AnalyserVideo.js, line 57

Canvas element for processing video frames.

Type
HTMLCanvasElement | OffscreenCanvas
Source
AnalyserVideo.js, line 63

2D Rendering Context of the canvas.

Type
CanvasRenderingContext2D
Source
AnalyserVideo.js, line 69

Debugging DOM elements created by DomSmith.

Type
DomSmith
Source
AnalyserVideo.js, line 75

Canvas element for input debugging.

Type
HTMLCanvasElement
Source
AnalyserVideo.js, line 81

2D Rendering Context for the input debugging canvas.

Type
CanvasRenderingContext2D
Source
AnalyserVideo.js, line 87

Canvas element for output debugging.

Type
HTMLCanvasElement
Source
AnalyserVideo.js, line 93

2D Rendering Context for the output debugging canvas.

Type
CanvasRenderingContext2D
Source
AnalyserVideo.js, line 99

Current pixel data after processing.

Type
ImageData | null
Source
AnalyserVideo.js, line 105

Previous pixel data for comparison and smoothing.

Type
Uint8ClampedArray
Source
AnalyserVideo.js, line 111

Analyse Loop Instance, used for updating the viedeo data.

Type
Looper
Source
AnalyserVideo.js, line 117

Id for the refresh delay.

Type
number | undefined
Source
AnalyserVideo.js, line 123

Methods

private #onDataReady(mediaItem)

Handles "data/ready" events to activate video analysis based on media type. Deactivated when media type is audio.

Parameters:
Name Type Description
mediaItem Data~mediaItem

Object containing media type info.

Parameters:
Name Type Description
mediaType string

Type of the media ('video' or 'audio').

Listens
data/ready
Source
AnalyserVideo.js, line 184

startLoop()

Starts the analysis loop by initiating the first iteration.

Listens
media/play
Source
AnalyserVideo.js, line 217

stopLoop()

Stops the ongoing analysis loop.

Listens
media/pause
Source
AnalyserVideo.js, line 227

analyseLoop() → ImageData

Performs one iteration of the analysis loop.

Returns

Calculated Image Data.

Type ImageData
Source
AnalyserVideo.js, line 237

private #getPixelData(lerpValopt) → boolean

Retrieves and processes pixel data from the video stream. Draws a thumbnail for pixel analysis, divides it into grid cells, averages color values, and applies linear interpolation for smoothing.

Parameters:
Name Type Attributes Description
lerpVal number optional

The interpolation value for smoothing.

Returns

True if pixel data was successfully retrieved and processed, false otherwise.

Type boolean
Source
AnalyserVideo.js, line 258

private #refreshBounce()

Refreshes the analysis loop after a short delay.

Source
AnalyserVideo.js, line 318

refresh() → ImageData

Refreshes the pixel data immediately, resetting the interpolation.

Listens
media/seeked
media/canplay
Returns

Calculated Image Data.

Type ImageData
Source
AnalyserVideo.js, line 331

enable()

Enables the analyser and restarts the analysis loop if playback is ongoing.

Source
AnalyserVideo.js, line 346

disable()

Disables the analyser.

Source
AnalyserVideo.js, line 357

destroy()

Removes all events, subscriptions and DOM nodes created by this component.

Source
AnalyserVideo.js, line 367