Video Cropping - Teachable Machine

p5.js Libraries
1

So I created a model at https://teachablemachine.withgoogle.com/train/image. I generate the model, get the p5.js code, and it all works great. But there’s just one big problem.

I trained all of my data on a cropped video capture feed.

Is there a way to programatically crop the webcam feed in the code so that my input is the same as my training data set (cropped)?

If I can’t crop the feed accurately then it really defeats the whole purpose of this thing. I need the feed going into the analysis model to be cropped as well - not just what i see. I dont wan the model analyzing a giant uncropped feed.

Thanks!

2 
<div>Teachable Machine Image Model - p5.js and ml5.js</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
<script type="text/javascript">
  // Classifier Variable
  let classifier;
  // Model URL
  let imageModelURL = 'https://teachablemachine.withgoogle.com/models/MODELURL';
  
  // Video
  let video;
  
  // To store the classification
  let label = "";

  // Load the model first
  function preload() {
    classifier = ml5.imageClassifier(imageModelURL + 'model.json');
  }

  function setup() {
    createCanvas(320, 260);
    // Create the video
    video = createCapture(VIDEO);
    video.size(320, 260);
    video.hide();

    // Start classifying
    classifyVideo();
  }

  function draw() {
    background(0);
    // Draw the video
    image(video, 0, 0);

    // Draw the label
    fill(255);
    textSize(16);
    textAlign(CENTER);
    text(label, width / 2, height - 4);
  }

  // Get a prediction for the current video frame
  function classifyVideo() {
    classifier.classify(video, gotResult);
    video.remove();

  }

  // When we get a result
  function gotResult(error, results) {
    // If there is an error
    if (error) {
      console.error(error);
      return;
    }
    // The results are in an array ordered by confidence.
    // console.log(results[0]);
    label = results[0].label;
    // Classifiy again!
    classifyVideo();
  }
</script>```
3

not sure about p5 but in processing you can use get to pick a location to sample for an image. So given an image 720 x 360 you could say

PImage image = camFeed.get(10,10,200,200);

where the first parameter is x then y, then width, then height

actually it does exist in p5, heres the reference. Not sure what performance is like though.

https://p5js.org/reference/#/p5/get