var video;
var ctx1;
var ctx2;
var width;
var height;
function timerCallback() {
if (video.paused || video.ended) {
return;
}
generateFrame();
setTimeout(function () {
timerCallback();
}, 0);
}
function handlePageLoad() {
video = document.getElementById("video");
var c1 = document.getElementById("c1");
ctx1 = this.c1.getContext("2d");
var c2 = document.getElementById("c2");
ctx2 = this.c2.getContext("2d");
video.addEventListener("play", function () {
width = this.videoWidth;
height = this.videoHeight;
timerCallback();
}, false);
}
function generateFrame() {
ctx2.drawImage(video, 0, 0, width, height);
var frame = ctx2.getImageData(0, 0, width, height);
var len = frame.data.length / 4;
for (var i = 0; i < len; i++) {
var r = frame.data[i * 4 + 0];
var g = frame.data[i * 4 + 1];
var b = frame.data[i * 4 + 2];
if (g < 10 && r < 10 && b < 10) {
frame.data[i * 4 + 3] = 0;
}
}
ctx1.putImageData(frame, 0, 0);
return;
}