# Get image from webcam capture

**URL:** <https://discourse.processing.org/t/get-image-from-webcam-capture/19381>\
**Category:** Coding Questions\
**Created:** [April 4, 2020, 6:39am UTC](https://discourse.processing.org/t/get-image-from-webcam-capture/19381 "2020-04-04T06:39:30Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![SenseiJae](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/senseijae/32/8640_2.png) [@SenseiJae](https://discourse.processing.org/u/SenseiJae)\
**Post date:** [April 4, 2020, 6:39am UTC](https://discourse.processing.org/t/get-image-from-webcam-capture/19381/1 "2020-04-04T06:39:30Z")

</div>

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.

```auto
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);
  }
}

```

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [April 18, 2020, 10:56pm UTC](https://discourse.processing.org/t/get-image-from-webcam-capture/19381/2 "2020-04-18T22:56:17Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![SenseiJae](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/senseijae/32/8640_2.png) [@SenseiJae](https://discourse.processing.org/u/SenseiJae)\
**Post date:** [April 19, 2020, 11:18pm UTC](https://discourse.processing.org/t/get-image-from-webcam-capture/19381/3 "2020-04-19T23:18:24Z")

</div>

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.

```auto
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;
  }
}

```