Webcam view is tiny

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 ? :slight_smile:


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

FRAG and VERT needed?