Video Cropping - Teachable Machine

So I created a model at 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.


<div>Teachable Machine Image Model - p5.js and ml5.js</div>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script type="text/javascript">
  // Classifier Variable
  let classifier;
  // Model URL
  let imageModelURL = '';
  // 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);

    // Start classifying

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

    // Draw the label
    text(label, width / 2, height - 4);

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


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

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.