glitch.com

[stephanschulz]

This looks very promising.

I am trying to make any of your examples run on https://glitch.com but so far no luck. There is no info in the console to help figuring out why this is not loading.

I also downloaded your repo and tried running it locally but am not sure if i need to start a npm server.

I hope you have some guidance on how to make this work one way or an other.
Thank you very much.

[orgicus]

Hi @stephanschulz,

Thank you for the kind words.
I'm afraid this is still WIP and there is room for improvement at the moment.

In terms of running locally, yes you are correct, you can run a local node server.
For example, if you have http-server installed globally via npm, after you clone this repo, you can run http-server inside the folder and navigate to the examples folder from your browser.

Alternatively, you can try the experimental p5.js Processing mode:

1. make a new p5.js project and save it
2. copy opencv.js and p5.cv.min.js to the libraries folder
3. edit index.html to use the scripts:

<script language="javascript" type="text/javascript" src="libraries/opencv.js"></script>
<script language="javascript" type="text/javascript" src="libraries/p5.cv.min.js"></script>

Pressing play should launch a new http server for you and start the browser.

At this stage you should be able to paste sketch to test:

/**
 * Based on Processing Video Background Subtraction example
 * by Golan Levin.
 *
 * Detect the presence of people and objects in the frame using a simple
 * background-subtraction technique. To initialize the background, press a key.
 */

// p5.js Video capture
let myCapture;
// OpenCV capture helper
let myCVCapture;
// (RGBA) Mat to store the latest color camera frame
let myMat;
// RGB mat
let myMatRGB;
// one frame of background
let myBackgroundMat;
// foreground - background difference Mat
let differenceMat;


function setup() {
  createCanvas(320, 240);
  // setup p5 capture
  myCapture = createCapture(VIDEO);
  myCapture.size(320, 240);
  myCapture.hide();
  // wait for OpenCV to init
  p5.cv.onComplete = onOpenCVComplete;
}

function onOpenCVComplete() {
  // create a CV capture helper
  myCVCapture = p5.cv.getCvVideoCapture(myCapture);
  // create a CV Mat to read new color frames into
  myMat = p5.cv.getRGBAMat(320, 240);
  myMatRGB = p5.cv.getRGBMat(320, 240);
  // init background pixels
  myBackgroundMat = p5.cv.getRGBMat(320, 240);
  // init diff. pixels
  differenceMat = p5.cv.getRGBMat(320, 240);
}

function draw() {
  if (p5.cv.isReady) {
    // Difference between the current frame and the stored background
    let presenceSum = 0;
    // read from CV Capture into myMat
    myCVCapture.read(myMat);
    // convert to from RGBA to RGB
    p5.cv.convertColor(myMat, myMatRGB, cv.COLOR_RGBA2RGB);
    // Compute the absolute difference of the red, green, and blue channels
    // subtract myBackgroundMat from myMat and store result
    cv.absdiff(myMatRGB, myBackgroundMat, differenceMat);
    // display difference Mat
    p5.cv.drawMat(differenceMat, 0, 0);
    // Add these differences to the running tally
    presenceSum = p5.cv.sumData(differenceMat.data);
    // Print out the total amount of movement
    console.log(presenceSum / (differenceMat.total() * 255 * 3));
    // console.log('test');
  }
}

// When a key is pressed, capture the background image into the backgroundPixels
// buffer, by copying each of the current frame's pixels into it.
function keyPressed() {
  if (p5.cv.isReady) {
    p5.cv.copyRGB(myMatRGB, myBackgroundMat);
  }
}

A save and refresh should do the trick.

Alternatively there are Visual Studio Code plugins that allow live reloading the webpage which save plenty of time prototyping.

Hopefully this does the trick for you for the time being.
As previously mentioned, currently it's WIP so you might encounter some hiccups with webcam/movie loading and running OpenCV routines on top. It's not quite production ready yet, but hopefully ok to get started.

Thank you for your patience,
George

[stephanschulz]

Thank so much for the quick response. I will give all that a try.
In the meantime here is my non-functioning glitch.com project

https://glitch.com/edit/#!/join/1c145c5e-a336-4daf-b579-ee396c688005

[stephanschulz]

First step done. I was able to make it run locally using the Brackets app which also starts it's own server.
Thanks.

[orgicus]

I have looked at the example and tried making an example, however there is an issue with .isReady property and how webpack deals with that that prevents p5.cv.js from working as expected on glitch.

I will need more time to debug and fix this issue properly

[stephanschulz]

Thanks for looking in to this.
I can develop locally for now. And will try it next to run in on a private server online.