diff --git a/hw3/Claudio_Maggioni/scripts/app.js b/hw3/Claudio_Maggioni/scripts/app.js index 5277860..4eb8819 100644 --- a/hw3/Claudio_Maggioni/scripts/app.js +++ b/hw3/Claudio_Maggioni/scripts/app.js @@ -56,19 +56,31 @@ class App { const player = document.createElement('video'); player.addEventListener('loadeddata', () => { - const imgCanvas = document.createElement('canvas'); - imgCanvas.width = this.canvas.width; - imgCanvas.height = this.canvas.height; - const imgCtx = imgCanvas.getContext('2d'); - imgCtx.drawImage(player, 0, 0, canvas.width, canvas.height); - const img = document.createElement('img'); - img.src = imgCanvas.toDataURL(); - img.addEventListener('load', () => { - this.background = img; - this.redrawAll(); - }); + player.play(); + setTimeout(() => { + const imgCanvas = document.createElement('canvas'); + imgCanvas.width = this.canvas.width; + imgCanvas.height = this.canvas.height; + const imgCtx = imgCanvas.getContext('2d'); + imgCtx.drawImage(player, 0, 0, canvas.width, canvas.height); + const imgData = imgCtx.getImageData(0, 0, imgCanvas.width, + imgCanvas.height); - player.srcObject.getVideoTracks().forEach(track => track.stop()); + for (let i = 0; i < data.length; i += 4) { + const pixel = (data[i] + 2 * data[i+1] + data[i+2]) / 4; + data[i] = data[i+1] = data[i+2] = pixel; + } + imgCtx.putImageData(imgData, 0, 0); + + const img = document.createElement('img'); + img.src = imgCanvas.toDataURL(); + img.addEventListener('load', () => { + this.background = img; + this.redrawAll(); + }); + + player.srcObject.getVideoTracks().forEach(track => track.stop()); + }, 100); }); const button = document.createElement('button');