p5js white black

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
  <title>p5.js Black and White Video from Camera</title>
</head>
<body>
  <script>
    let video;
    let filteredVideo;

    function setup() {
      createCanvas(640, 480);
      video = createCapture(VIDEO);
      video.size(width, height);
      filteredVideo = createImage(width, height);
      // Hide the video element, and just show the canvas
      video.hide();
    }

    function draw() {
      // Capture the current video frame
      video.loadPixels();
      filteredVideo.loadPixels();

      // Apply black and white filter to the video frame
      for (let i = 0; i < video.pixels.length; i += 4) {
        let average = (video.pixels[i] + video.pixels[i + 1] + video.pixels[i + 2]) / 3;
        filteredVideo.pixels[i] = average;
        filteredVideo.pixels[i + 1] = average;
        filteredVideo.pixels[i + 2] = average;
        filteredVideo.pixels[i + 3] = 255;
      }

      // Update the filtered video pixels and draw it onto the canvas
      filteredVideo.updatePixels();
      image(filteredVideo, 0, 0, width, height);
    }
  </script>
</body>
</html>