# Webcam view is tiny

**URL:** <https://discourse.processing.org/t/webcam-view-is-tiny/43870>\
**Category:** Coding Questions\
**Created:** [February 9, 2024, 9:33pm UTC](https://discourse.processing.org/t/webcam-view-is-tiny/43870 "2024-02-09T21:33:10Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Infi](https://avatars.discourse-cdn.com/v4/letter/i/34f0e0/32.png) [@Infi](https://discourse.processing.org/u/Infi)\
**Post date:** [February 9, 2024, 9:33pm UTC](https://discourse.processing.org/t/webcam-view-is-tiny/43870/1 "2024-02-09T21:33:10Z")

</div>

Hello!

I am in a desperate need of simple app that can be used as a camera color filter, e.g. shows only red values while rest is 0. I have been doing this with shaders. The effect itself works but the problem is that this cam is very tiny and probably has some huge margins around it? I literally cannot find a reason for it.  
I need the cam to cover the screen width.

Second problem is that the cam is rotated. Any tilt, rotate, doesn’t help. I checked on a phone and other PC, same effect.

Any help please ? 🙂

```auto

let theShader;
let cam;
let currentFilter = 0;

let inverse = 1;

function preload(){
  theShader = loadShader('assets/webcam.vert', 'assets/webcam.frag');
}
function setup() {
  cam = createCapture(VIDEO, () => {
    cam.size(innerWidth, innerWidth / (cam.width / cam.height));
    cam.hide();
  });

  createCanvas(innerWidth, innerWidth / (cam.width / cam.height), WEBGL);
  noStroke();

  let buttonContainer = createDiv();
  buttonContainer.style('text-align', 'center'); 

  createButtonInContainer(buttonContainer, 'Original', () => {
    currentFilter = 0;
  });
  createButtonInContainer(buttonContainer, 'Red Filter', () => {
    currentFilter = 1;
  });
  createButtonInContainer(buttonContainer, 'Green Filter', () => {
    currentFilter = 2;
  });
  createButtonInContainer(buttonContainer, 'Blue Filter', () => {
    currentFilter = 3;
  });
  createButtonInContainer(buttonContainer, 'Inverse', () => {
    inverse *= -1;
  });
}

function createButtonInContainer(container, label, callback) {
  let button = createButton(label);
  button.mousePressed(callback);
  button.parent(container);
}

function createButtonInContainer(container, label, callback) {
  let button = createButton(label);
  button.mousePressed(callback);
  button.parent(container);
}
function draw() {
  shader(theShader);

  theShader.setUniform('tex0', cam);

  theShader.setUniform('inverse',inverse);
  switch(currentFilter) {
    case 0: // Original
      theShader.setUniform('filterType', 0);
      break;
    case 1: // Red Filter
      theShader.setUniform('filterType', 1);
      break;
    case 2: // Green Filter
      theShader.setUniform('filterType', 2);
      break;
    case 3: // Blue Filter
      theShader.setUniform('filterType', 3);
      break;
  }

  rect(0,0,width,height);
}

```

 ![browserview](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/3/5/353703f0b9cbf8b30337de738b636ca31deb9a62.png)

FRAG and VERT needed?