Get image from webcam capture

p5.js Coding Questions
1

I’m trying to follow “coding train’s” example of capturing images from a webcam for a “photo booth”.
It was working great up until I go to the for loop to capture the images.
When I use “get()” on the createCapture() object, it returns an image with no pixels in it. (I tested this but removed that code).

What am I doing wrong? Or is there an easier way to do this?
I’m writing a lesson for students on how to create a greenscreen from a webcam and fill the background.

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

function setup() {
  createCanvas(160,120);
  //snapped = createCanvas(160, 120);
  //snapped.background(0);
  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() {
  //image(snapped, 0, 0);
  for(var i = 0; i < pics.length; i++) {
     image(pics[i], 0, 0);
  }
}
1 Like
2

@SenseiJae were you able to resolve this issue with createCapture?

3

Not in a way I was happy with. Essentially I needed to change the size of the camera settings. I was hoping there was a simpler solution.

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

let videoWidth = 160;
let videoHeight = 120;

function setup() {
  
  createCanvas( videoWidth, videoHeight );
  
  let constraints = {
    video: {
      mandatory: {
        maxWidth: videoWidth,
        maxHeight: videoHeight
      }
    },
    audio: false
  };
  
  video = createCapture( constraints );
  button = createButton( 'shoot pic' );
  button.mousePressed( shoot );
  
}

function shoot() {
  if ( video.loadedmetadata ) {
    let img = video.get( 0, 0, videoWidth, videoHeight );
    pics.push( img );
    
  }
}

function draw() {
  background( 200 );
  fix();
}

function fix() {
  if ( pics.length > 0 ){
    
    image( pics[idx], 0, 0, videoWidth, videoHeight );
    if ( frameCount%30 == 0 ) idx += 1;
    if ( idx == pics.length ) idx = 0;
  }
}