# Video Cropping - Teachable Machine

**URL:** <https://discourse.processing.org/t/video-cropping-teachable-machine/23805>\
**Category:** Libraries\
**Created:** [September 11, 2020, 9:25pm UTC](https://discourse.processing.org/t/video-cropping-teachable-machine/23805 "2020-09-11T21:25:00Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ergoego](https://avatars.discourse-cdn.com/v4/letter/e/df788c/32.png) [@ergoego](https://discourse.processing.org/u/ergoego)\
**Post date:** [September 11, 2020, 9:25pm UTC](https://discourse.processing.org/t/video-cropping-teachable-machine/23805/1 "2020-09-11T21:25:01Z")

</div>

So I created a model at [https://teachablemachine.withgoogle.com/train/image](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!

---

<div class="post-metadata">

**Author:** ![ergoego](https://avatars.discourse-cdn.com/v4/letter/e/df788c/32.png) [@ergoego](https://discourse.processing.org/u/ergoego)\
**Post date:** [September 11, 2020, 9:28pm UTC](https://discourse.processing.org/t/video-cropping-teachable-machine/23805/2 "2020-09-11T21:28:00Z")

</div>

````auto
<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>```
````

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [September 12, 2020, 11:37pm UTC](https://discourse.processing.org/t/video-cropping-teachable-machine/23805/3 "2020-09-12T23:37:00Z")

</div>

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](https://p5js.org/reference/#/p5/get)