P5js is a javascript library that enables media presentation, interactive drawing as well as user input in an area of a web page defined as the CANVAS.
I’ve gotten it to work with the jetson nano since it is javascript , but only as long as only primitive drawing functions are used. However, I cannot use the predefined constant, VIDEO, to access the camera.
The p5.js code I use works fine on a raspberry pi
Here is my html:
<!doctype html
<html
<head
<script src=“p5/p5.js” </script
<script src=“p5/addons/p5.dom.js” </script
<script src=“sketch.js” </script
</head
<body style=“margin: 0; overflow: hidden;”
</body
</html
(I had to leave off the ’ > ’ inf each line of html because the text would not render properly in this forum)
and here is my sketch.js
let capture;
function setup() {
createCanvas(390, 240);
capture = createCapture(VIDEO);
capture.size(320, 240);
capture.hide();
}
function draw() {
background(20);
image(capture, 0, 0, 320, 240);
filter(INVERT);
}
This puts up a grayscale video of what the camera is seeing.
However, it does not work on the jetson nano. All i see is a blank.
My camera on the nano is working fine.
This puts up a huge viewer that shows a live stream of what the camera sees
gst-launch-1.0 nvarguscamerasrc ! nvoverlaysink
When I run the code and look in the console , it shows this comment
p5.js says: createCapture() was expecting Function for parameter #1 (zero-based index), received an empty variable instead.
So clearly, the constant, VIDEO, is not pointing to the the video stream.
I tried replacing VIDEO with nvarguscamerasrc but the console says this is an undefined variable.
I looked in the file, p5.js, and found many classes of objects that use the constant, VIDEO.
The constant is defined in a separate file that is part of p5.js and is named p5.dom.js.
p5.prototype.VIDEO = 'video';
However, I cannot determine how VIDEO finds the proper hardware. nor do I know how to tell p5.js to look for the camera on the nano.
Can anyone shed light on this?