video2canvas

Paint video on canvas. Extra light.

video-canvas will take care of painting a video on canvas for you. In the easiest of setups, you provide a video and you get a correctly-sized self-updating canvas ready to be used.

Features:

• It automatically starts and pauses painting with video.play() and video.pause().
• If the video is paused or in a background tab, nothing is painted.
• It automatically creates a canvas element from your video (optional).
• It automatically resizes the canvas to match your video (optional).

Install

npm install --save video2canvas

var video2Canvas = require('video2canvas');

import video2Canvas from 'video2canvas';

Usage

Simple usage:

const video = document.querySelector('video');
const canvas = video2Canvas(video); // returns the <canvas> element
document.body.appendChild(canvas)
video.play();
video.pause();

Provide your own canvas:

vide2Canvas(video, {
	canvas: document.querySelector('.your-own-canvas'),
});

By default, video-canvas will automatically match the canvas size to the video size, whenever that changes. If you want to prevent this behavior, pass updateSize: false

const canvas = video2Canvas(video, {
	updateSize: false
});

If you want to customize the draw call, pass your drawing function as drawCall

const canvas = video2Canvas(video, {
	drawCall: function (ctx, video) {
		ctx.drawImage(video, 0, 0, 100, 100)
	}
});

Dependencies

No dependencies.

License

MIT