31:T4dc,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 = h.querySelector("video#video"); this.c1 = h.querySelector("canvas#c1"); this.ctx1 = this.c1.getContext("2d"); this.c2 = h.querySelector("canvas#c2"); this.ctx2 = this.c2.getContext("2d"); let self = this; this.video.addEventListener( "play", function() { self.width = self.video.videoWidth / 2; self.height = self.video.videoHeight / 2; self.timerCallback(); }, false ); }, computeFrame: function() { console.log('drawing'); 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 > 100 && b < 43) frame.data[i * 4 + 3] = 0; } this.ctx2.putImageData(frame, 0, 0); return; } }.doLoad())32:[] 2f:{"title":"Manipulating video using canvas (MDN tutorial)","cells":[{"id":0,"value":"md`# Manipulating video using canvas (MDN tutorial)\n\nSee https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"h = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"css = html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"md`---\n\n## Credits\n\nDeveloped for the [LIRIS M2i project](https://projet.liris.cnrs.fr/mi2/) by Sylvain Lesage.\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}