HW3: mastery check changes

hw3/Claudio_Maggioni/scripts/app.js

@@ -56,11 +56,22 @@ class App {
 
       const player = document.createElement('video');
       player.addEventListener('loadeddata', () => {
+        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);
+
+          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', () => {
@@ -69,6 +80,7 @@ class App {
           });
 
           player.srcObject.getVideoTracks().forEach(track => track.stop());
+        }, 100);
       });
 
       const button = document.createElement('button');