canvas

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

See: external:HTMLCanvasElement, external: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).

Default: true
Example

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

options.width : number
property

The initial width of the canvas element.

Default: 1280
Example

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

options.height : number
property

The initial height of the canvas element.

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.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 : external: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 : external: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: external: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. See width.
[options.height] number The initial height of the canvas element. See height.
[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 external:HTMLCanvasElement The canvas object. Note that canvas size may change between invocations (canvas is resized according to video size, which is adaptive).
context external:RenderingContext The rendering context associated with canvas.
video external: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!