# Background/mask over webcam feed

**URL:** <https://discourse.processing.org/t/background-mask-over-webcam-feed/31753>\
**Category:** Libraries\
**Created:** [August 16, 2021, 6:13pm UTC](https://discourse.processing.org/t/background-mask-over-webcam-feed/31753 "2021-08-16T18:13:45Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![maroslan](https://avatars.discourse-cdn.com/v4/letter/m/13edae/32.png) [@maroslan](https://discourse.processing.org/u/maroslan)\
**Post date:** [August 16, 2021, 6:13pm UTC](https://discourse.processing.org/t/background-mask-over-webcam-feed/31753/1 "2021-08-16T18:13:45Z")

</div>

Hi to whoever is reading this!

I am trying to create an overlay over a webcam feed. I am using the webcam to capture the darkest points in its vision, where it will draw a circle. However, in the end result I don’t want to see the actual webcam live feed. Just a white background, and the circles that are being drawn. Just setting the background to 255 in the setup doesn’t work. So I tried to use a mask with a white background image. But that doesn’t work as well. Obviously I don’t want to put anything in the draw function, because then I would lose the drawed circles. I feel like I am missing a clear solution here! I hope anyone can help me with this.

My code:

```auto
import processing.video.*;
import gab.opencv.*;

Capture cam;
OpenCV opencv;
PVector prevLoc;
PImage maskImage;

void setup() {
  size(1920, 1080);
  background(255); // so this doesn't work lol
  maskImage = loadImage("background.png"); //doesn't work as well
  noStroke();
  opencv = new OpenCV(this, 1920, 1080);
  
  String[] cameras = Capture.list();
  
  if (cameras.length == 0) {
    println("There are no cameras available for capture.");
    exit();
  } else {
    println("Available cameras:");
    for (int i = 0; i < cameras.length; i++) {
      println(cameras[i]);
    }
    cam = new Capture(this, 1920, 1080, cameras[1]);
    cam.start(); 
    cam.mask(maskImage); //I put the other line of the mask here, after I called the cam
    prevLoc = new PVector(0, width/2);
    frameRate(24);
  }
}

void captureEvent(Capture cam) {
  if (cam.available() == true) {
    cam.read();
  }
  image(cam, 0, 0);
}

void draw() {
  opencv.loadImage(cam);
  PVector loc = opencv.min();
  ellipse(loc.x, loc.y, 50, 50);
  fill(random(255), random(255), random(255));
  prevLoc = loc;
}

void keyPressed() {
  if (key == ' ') {
    background(255);
  }
}

```

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [August 16, 2021, 7:07pm UTC](https://discourse.processing.org/t/background-mask-over-webcam-feed/31753/2 "2021-08-16T19:07:11Z")

</div>

> [@maroslan](#):
>
> ` image(cam, 0, 0);`

this line in `captureEvent` seemed to be called and end up drawn on the window. And you want to move `background` in `draw` so that it will wipe out everything from the previous frame.

edit: also! as written in the guideline, if you post on other forums, please link to them so people don’t have to duplicate effort [Reddit - Dive into anything](https://www.reddit.com/r/processing/comments/p5lqvt/using_a_background_or_mask_to_cover_a_webcam_feed/)

---

<div class="post-metadata">

**Author:** ![maroslan](https://avatars.discourse-cdn.com/v4/letter/m/13edae/32.png) [@maroslan](https://discourse.processing.org/u/maroslan)\
**Post date:** [August 16, 2021, 8:14pm UTC](https://discourse.processing.org/t/background-mask-over-webcam-feed/31753/3 "2021-08-16T20:14:15Z")

</div>

Deleting the image(cam, 0, 0); line helped 😃 I’m so grateful, thank you so much!

I will delete the other post because you solved it, so it’s not needed anymore. I will keep it in mind for my next topics though 🙂