console
<html>
<head>
<style>
#c2 {
background-image: url(../../src/3.jpg);
background-size: 70% 70%;
background-repeat: no-repeat;
}
div {
float: left;
border :1px solid #444444;
margin: 10px;
background:#3B3B3B;
}
</style>
</head>
<body>
<div>
<video id="video" src="../../src/clickHand.mp4" controls="true"/>
</div>
<div>
<canvas id="c1" width="480" height="270"></canvas>
<canvas id="c2" width="480" height="270"></canvas>
</div>
<script type="text/javascript">
let processor = {
timerCallback: function() {
if (this.video.paused || this.video.ended) {
return;
}
this.computeFrame();
let self = this;
setTimeout(function () {
self.timerCallback();
}, 0);
},
doLoad: function() {
this.video = document.getElementById("video");
this.c1 = document.getElementById("c1");
this.ctx1 = this.c1.getContext("2d");
this.c2 = document.getElementById("c2");
this.ctx2 = this.c2.getContext("2d");
let self = this;
this.video.addEventListener("play", function() {
self.width = self.video.videoWidth / 4;
self.height = self.video.videoHeight / 4;
self.timerCallback();
}, false);
},
computeFrame: function() {
this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
let l = frame.data.length / 4;
for (let i = 0; i < l; i++) {
let r = frame.data[i * 4 + 0];
let g = frame.data[i * 4 + 1];
let b = frame.data[i * 4 + 2];
if (g > 100 && r < 50)
frame.data[i * 4 + 3] = 0;
}
this.ctx2.putImageData(frame, 0, 0);
return;
}
};
document.addEventListener("DOMContentLoaded", () => {
processor.doLoad();
});
</script>
</body>
</html>