canvas

The canvas plugin replaces the <video> element with a <canvas> element that can be manipulated.

See: HTMLCanvasElement, CanvasRenderingContext2D
Example 

// This function will invert the video frame and draw onto canvas
function drawInvertedFrame(canvas, context, video) {
    if (!canvas || !context || !video || !video.videoWidth || !video.videoHeight) {
        return;
    }

    // Draw the original video frame onto canvas
    context.drawImage(
        video,              // Source
        0,                  // Source X
        0,                  // Source Y
        video.videoWidth,   // Source Width
        video.videoHeight,  // Source Height
        0,                  // Destination X
        0,                  // Destination Y
        canvas.width,       // Destination Width
        canvas.height       // Destination Height
    );

    // Grab the original frame's image data
    var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
    var data = imageData.data;

    // Invert the pixels
    for (var i = 0; i < data.length; i += 4) {
        data[i]     = 255 - data[i];     // Red
        data[i + 1] = 255 - data[i + 1]; // Green
        data[i + 2] = 255 - data[i + 2]; // Blue
    }

    // Draw the inverted frame onto canvas
    context.putImageData(imageData, 0, 0);
}

if (player.canvas.isSupported()) {
    player.canvas.init({drawFrame: drawInvertedFrame});
} else {
    console.warn('Canvas plugin is not supported on current environment.');
}

Init Options

options : object

Initialization options for the canvas plugin.

options.autoResize : boolean
property

If true, canvas will automatically resize itself at runtime to video dimensions (which can change dynamically).
If true when viewportModeEnabled is also true, the canvas will be auto-resized to the viewport dimensions.

Default: true
Example 

// playerOptions.json
{
    "plugins": {
        "canvas": {
            "autoResize": false,
            "width": 1920,
            "height" 1080
        }
    }
}

options.width : number
property

The initial width of the canvas element.
Will be ignored if viewportModeEnabled is true.

Default: 1280
Example 

// playerOptions.json
{
    "plugins": {
        "canvas": {
            "autoResize": false,
            "width": 1920,
            "height" 1080
        }
    }
}

options.height : number
property

The initial height of the canvas element.
Will be ignored if viewportModeEnabled is true.

Default: 720
Example 

// playerOptions.json
{
    "plugins": {
        "canvas": {
            "autoResize": false,
            "width": 1920,
            "height" 1080
        }
    }
}

options.fps : number
property

The framerate of drawFrame invocations (frames per second).
This fps value will be used if no options.fps value given on init call.

Default: 40
Example 

// playerOptions.json
{
    "plugins": {
        "canvas": {
            "fps": 30
        }
    }
}

options.offscreenVideoCanvasEnabled : boolean
property

If true, will manage an offscreen canvas as a proxy to the video.
In many cases, this provides a performance improvement.
The offscreen canvas will be the 3rd argument to the drawFrame function.
Default value is dynamic (according to environment).

options.performanceOptimizationEnabled : boolean
property

If true, will optimize for quick canvas drawing.
Disables image smoothing and rounds all numbers on CanvasRenderingContext2D.drawImage() calls.

Default: true

options.drawFrame : drawFrame
property

A drawFrame callback function.
This function will be used if no options.drawFrame function given on init call.

Example 

player.initPlugin('canvas', {
    drawFrame: function(canvas, context, video) {
        if (!canvas || !context || !video || !video.videoWidth || !video.videoHeight) {
            return;
        }

        // Draw the original video frame onto canvas
        context.drawImage(
            video,              // Source
            0,                  // Source X
            0,                  // Source Y
            video.videoWidth,   // Source Width
            video.videoHeight,  // Source Height
            0,                  // Destination X
            0,                  // Destination Y
            canvas.width,       // Destination Width
            canvas.height       // Destination Height
        );
    }
});

options.viewportModeEnabled : boolean
property

If true, canvas size will be set to the viewport size (instead of the video size).
Would usually be used with autoResize set to true, and the following player options:

{
    "scaling": "noop",
    "VideoScaler": {
        "unboxEnabled": false
    }
}

Default: false

options.viewportModeMaxWidth : number
property

The maximum width of the canvas element in viewport mode.
If viewport size exceeds this value, canvas will be resized to this value while keeping the viewport’s aspect ratio.

Default: 1920
See: viewportModeEnabled

options.viewportModeMaxHeight : number
property

The maximum height of the canvas element in viewport mode.
If viewport size exceeds this value, canvas will be resized to this value while keeping the viewport’s aspect ratio.

Default: 1920
See: viewportModeEnabled

options.viewportModeMinWidth : number
property

The minimum width of the canvas element in viewport mode.
If viewport size is smaller than this value, canvas will be resized to this value while keeping the viewport’s aspect ratio.

Default: 500
See: viewportModeEnabled

options.viewportModeMinHeight : number
property

The minimum height of the canvas element in viewport mode.
If viewport size is smaller than this value, canvas will be resized to this value while keeping the viewport’s aspect ratio.

Default: 500
See: viewportModeEnabled

options.contextType : string
property

The contextType to be passed to getContext().
This will affect the type of context created on init.
Possible values are:

  • 2d - Default
  • webgl (or experimental-webgl)
  • webgl2 (or experimental-webgl2)
  • bitmaprenderer

Default: "2d"
See: context
Example 

// playerOptions.json
{
    "plugins": {
        "canvas": {
            "contextType": "webgl"
        }
    }
}

options.contextAttributes : object
property

The contextAttributes to be passed to getContext().
This will affect the properties/behavior of the context created on init.

Default: null
Example 

// playerOptions.json
{
    "plugins": {
        "canvas": {
            "contextType": "webgl",
            "contextAttributes": {
                "alpha": true
            }
        }
    }
}

Properties

player.canvas.canvas : HTMLCanvasElement
propertyreadonly

A getter for the <canvas> element.
Will be null if init was not called or canvas was disposed.

Example 

if (player.canvas.canvas) {
    console.log(`Canvas dimensions: ${player.canvas.canvas.width} x ${player.canvas.canvas.height}`);
}

player.canvas.context : RenderingContext
propertyreadonly

A getter for the rendering context associated with the canvas.
Will be null if init was not called or canvas was disposed.

See: CanvasRenderingContext2D

player.canvas.version : string
propertyreadonly

The canvas plugin’s version string.

Example 

console.log('The canvas plugin version is', player.canvas.version);

Methods

player.canvas.isSupported() ⇒ boolean
method

Checks whether the canvas plugin is supported on current environment and returns a boolean value.

Returns: boolean - True if plugin is supported on current environment/engine, false otherwise.
Example 

if (player.canvas.isSupported()) {
    player.canvas.init({drawFrame: myDrawFrameCallbackFunction});
} else {
    alert('No canvas plugin for you!');
}

player.canvas.init([options])
method

Initialize the canvas plugin by replacing the <video> element with a <canvas> element.

Param Type Description
[options] object An options object.
[options.drawFrame] drawFrame A draw frame function that will be invoked every frame. See drawFrame.
[options.fps] number Frequency of drawFrame invocations (number of frames per seconds). See fps.
[options.autoResize] boolean If true, canvas will automatically resize itself at runtime to video dimensions (which can change dynamically). See autoResize.
[options.width] number The initial width of the canvas element. Will be ignored if viewportModeEnabled is true. See width.
[options.height] number The initial height of the canvas element. Will be ignored if viewportModeEnabled is true. See height.
[options.viewportModeEnabled] boolean If true, canvas size will be set to the viewport size (instead of the video size). See viewportModeEnabled.
module:canvas~options.viewportModeMaxWidth number The maximum width of the canvas element in viewport mode. If viewport size exceeds this value, canvas will be resized to this value while keeping the viewport’s aspect ratio. See viewportModeMaxWidth.
module:canvas~options.viewportModeMaxHeight number The maximum height of the canvas element in viewport mode. If viewport size exceeds this value, canvas will be resized to this value while keeping the viewport’s aspect ratio. See viewportModeMaxHeight.
module:canvas~options.viewportModeMinWidth number The minimum width of the canvas element in viewport mode. If viewport size is smaller than this value, canvas will be resized to this value while keeping the viewport’s aspect ratio. See viewportModeMinWidth.
module:canvas~options.viewportModeMinHeight number The minimum height of the canvas element in viewport mode. If viewport size is smaller than this value, canvas will be resized to this value while keeping the viewport’s aspect ratio. See viewportModeMinHeight.
[options.contextType] string The contextType to be passed to getContext(). See contextType.
[options.contextAttributes] object The contextAttributes to be passed to getContext(). See contextAttributes.

Example 

player.canvas.init({
    fps: 30,
    contextType: '2d',
    drawFrame: function drawInvertedFrame(canvas, context, video) {
        if (!canvas || !context || !video || !video.videoWidth || !video.videoHeight) {
            return;
        }

        // Draw the original video frame onto canvas
        context.drawImage(
            video,              // Source
            0,                  // Source X
            0,                  // Source Y
            video.videoWidth,   // Source Width
            video.videoHeight,  // Source Height
            0,                  // Destination X
            0,                  // Destination Y
            canvas.width,       // Destination Width
            canvas.height       // Destination Height
        );

        // Grab the original frame's image data
        var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
        var data = imageData.data;

        // Invert the pixels
        for (var i = 0; i < data.length; i += 4) {
            data[i]     = 255 - data[i];     // Red
            data[i + 1] = 255 - data[i + 1]; // Green
            data[i + 2] = 255 - data[i + 2]; // Blue
        }

        // Draw the inverted frame onto canvas
        context.putImageData(imageData, 0, 0);
    }
});

player.canvas.dispose()
method

Dispose of the canvas and context, and restore the original <video> element.

Example 

player.canvas.dispose();

Callbacks

drawFrame : function
callback

A callback function that will be invoked on every frame.

Param Type Description
canvas HTMLCanvasElement The canvas object. Note that canvas size may change between invocations (canvas is resized according to video size, which is adaptive).
context RenderingContext The rendering context associated with canvas.
video HTMLVideoElement The source <video> object.

Example 

function(canvas, context, video) {
    if (!canvas || !context || !video || !video.videoWidth || !video.videoHeight) {
        return;
    }

    // Draw the original video frame onto canvas
    context.drawImage(
        video,              // Source
        0,                  // Source X
        0,                  // Source Y
        video.videoWidth,   // Source Width
        video.videoHeight,  // Source Height
        0,                  // Destination X
        0,                  // Destination Y
        canvas.width,       // Destination Width
        canvas.height       // Destination Height
    );
}
Rate this page:
☆ ☆ ☆ ☆ ☆
X
Tell us more!