Calling .loadPixels() on a video freezes the feed?

p5.js Coding Questions
1

I have a sketch where I’m getting a video feed with createCapture(VIDEO), then toggling between states where I either see the straight feed or I pixelate the image.

Here’s what’s happening:

  • run the sketch, feed works fine
  • toggle to the pixelated version, works fine
  • toggle back to the video, and it’s frozen
  • toggle back to pixelated, works fine
  • toggle back to video, it’s frozen but on a new frame

It’s like calling .loadPixels() on the video feed somehow breaks the feed?

Any advice?

Thanks!

-j-

let vid;
let w = 160;
let h = 90;
let showVideo = true; 

function setup() {
  pixelDensity(1);
  vid = createCapture(VIDEO);
  vid.size(w, h);
  pSize = Math.floor(windowWidth / w);
  createCanvas(w * pSize, h * pSize);
  vid.hide();
  noStroke();
  textSize(32);
}

function draw() {
  background(255);

  // press "o" key to toggle the "showVideo" flag

  if (showVideo) {
    // show original video feed
    image(vid, 0, 0, width, height);
  } else {
    // show low-res pixelated version of video feed
    vid.loadPixels();
    for (let col = 0; col < w; col++) {
      for (let row = 0; row < h; row++) {
        const i = ((row * w) + col) * 4;
        fill(vid.pixels[i], vid.pixels[i + 1], vid.pixels[i + 2], vid.pixels[i + 3]);
        rect(col * pSize, row * pSize, pSize, pSize);
      }
    }
    vid.updatePixels();
  }
  // print the frame rate, for reference
  fill('orange');
  text(Math.floor(frameRate()), width / 2, height / 2);
}

function keyTyped() {
  if (key === 'f') {
    fullscreen(!fullscreen());
  } else if (key === 'o') {
    showVideo = !showVideo;
    console.log("showing video feed is now set to: " + showVideo);
  }
}

function windowResized() {
  pSize = Math.min(Math.floor(windowWidth / w), Math.floor(windowHeight / h));
  createCanvas(w * pSize, h * pSize);
}
2

Found the answer - if I want to see the plain video feed I simply added

vid.loadPixels()

before the line

image(vid, 0, 0, width, height)

I guess once .loadPixels() is called, it needs to be called whenever new video is required forever after?