p5.js extracting images from createCapture() feed

user_2012489 0
Viewed 1400

I was trying to follow the Coding Train p5 video on image processing but I can't get the images to show up (only video feed draws). I can get an image to display correctly without the loop, but when I put it in the loop the captured images do not display.

The webcam video feed works in both scenarios.

let video;
let pics = [];
var button;
var idx = 0;

function setup() {
  createCanvas(160,120);
  background(255);
  video = createCapture(VIDEO);
  video.size(160,120);
  button = createButton('shoot pic');
  button.mousePressed(shoot);
}

function shoot() {
  let img = video.get(0,0,160,120);
  pics.push(img);
}

function draw() {
  for(var i = 0; i < pics.length; i++) {
     image(pics[i], 0, 0);
  }
}
p5.js video-capture processing
1 Answers

I've updated your code into this working example here; https://editor.p5js.org/EthanHermsey/sketches/yjqWDF5FA


The main problem is the line:

video.size( 160, 120 );

This line causes the video element to not set it's ready state and the .get() function doesn't work. You are supposed to define the width/height in a constraint object, like written below. That is specified here: https://p5js.org/reference/#/p5/createCapture

let constraints = {
    video: {
      mandatory: {
        maxWidth: videoWidth,
        maxHeight: videoHeight
      }
    },
    audio: false
  };

  video = createCapture( constraints );
user_122482320
Related