p5.js phone camera not fullscreen-CodePudding

So I am trying to get the mobile camera working with p5.js covering fullscreen. I set the with and height with displayWidth and displayHeight but it still looks like this when i simulate it on my iPhone.

My question is how can i get the camera covering the full screen.

Thanks already for the help!

    var capture;
    let label = "Waiting..";
    let classifier;
    
    function preload(){
        classifier = ml5.imageClassifier('https://teachablemachine.withgoogle.com/models/UO8AXdEl9/');
    }
    
    function setup() {
      createCanvas(displayWidth, displayHeight);
      var constraints = {
        audio: false,
        video: {
          facingMode: {
            exact: "environment"
          }
        }    
        //video: {
          //facingMode: "user"
        //} 
      };
      capture = createCapture(constraints);
      
      capture.hide();
      classifyVideo();
    }
    function classifyVideo(){
        classifier.classify(capture, gotResults);
    }
    function gotResults(error, results){
        if(error){
            console.error(error);
            return;
        }
      console.log(results[0]); 
        label = results[0].label;
        console.log(label);
        classifyVideo();
    }
    
    
    function draw() {
     image(capture, 0, 0, displayWidth, displayHeight); 
      // background(3, 133, 126);
        text(label, 10, 50);
        fill(255);
        // textSize(52);
    }

CodePudding user response：

You should be calling the image() function in both setup() and draw() functions.

function setup() {
  // your existing code

  image(capture, 0, 0, displayWidth, displayHeight);
}

On your draw() function you should clear the canvas before calling image().

function draw() {
  background(3, 133, 126);
  image(capture, 0, 0, displayWidth, displayHeight);

  // the rest of your code
}

CodePudding user response：

DisplayWidth is not working for these things so now I used window.innerWidth and it works great.

var w = window.innerWidth;
var h = window.innerHeight;

Used this i found on the internet. https://editor.p5js.org/lf/sketches/Sy5vDEXnW.

My code now looks like this.

var capture;
let label = "Starting..";
let classifier;


var w = window.innerWidth;
var h = window.innerHeight;  

function preload(){
    classifier = ml5.imageClassifier('https://teachablemachine.withgoogle.com/models/NEnOxMXLx/');
}

function setup() {
  createCanvas(w, h);
  var constraints = {
    audio: false,
    video: {
      facingMode: {
        exact: "environment"
      }
    }    
    //video: {
      //facingMode: "user"
    //} 
  };
  capture = createCapture(constraints);
  
  capture.hide();
  classifyVideo();
  image(capture, 0, 0);
}
function classifyVideo(){
    classifier.classify(capture, gotResults);
}
function gotResults(error, results){
    if(error){
        console.error(error);
        return;
    }
  console.log(results[0]); 
    label = results[0].label;
    console.log(label);
    classifyVideo();
}


function draw() {
  background(3, 133, 126);
  image(capture, 0, 0, w, h);
    text(label, 10, 50);
    fill(255);
    textSize(52);