video-canvas/dist/video-canvas.common-js.js

Paint video on canvas. Extra light.

/*! npm.im/video-canvas */
'use strict';

var intervalometer = require('intervalometer');

function index (video, opts) {
	if ( opts === void 0 ) opts = {};

	var canvas = opts.canvas || document.createElement('canvas');
	var ctx = canvas.getContext('2d');

	var drawCall = opts.drawCall || function () {
		ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
	};

	if (opts.updateSize !== false) {
		var updateSize = function () {
			canvas.width = video.videoWidth;
			canvas.height = video.videoHeight;
		};

		video.addEventListener('loadedmetadata', updateSize);
		updateSize();
	}

	var updater = intervalometer.frameIntervalometer(function () { return drawCall(ctx, video); });

	// 'playing' is consistently fired when the video resumes playing
	// after a pause, a stall, or a seek.
	video.addEventListener('playing', updater.start);

	// 'pause' is fired after a .pause(), on 'ended', or on 'seeking'.
	video.addEventListener('pause', updater.stop);

	// 'abort', 'error' and 'waiting' are network-related.
	video.addEventListener('abort', updater.stop);
	video.addEventListener('error', updater.stop);
	video.addEventListener('waiting', updater.stop);

	if (!video.paused) {
		updater.start();
	}

	return canvas;
};

module.exports = index;