Hi,
I’m obviously missing something foundational. But at the moment I’m trying to simply get the pixels array from a video capture. My code sample follows, note this is on up-to-date versions Chrome and MacOS.
let capture;
function setup() {
let canvas = createCanvas(1024, 1024);
canvas.parent('canvas');
capture = createCapture(VIDEO);
capture.hide();
}
function draw() {
background(0, 0, 0);
if (capture.loadedmetadata) {
capture.loadPixels();
console.log(capture.pixels);
}
}
I get the following error in my console after a couple beats on reload:
p5.min.js:3 Uncaught TypeError: Cannot read property '_pixelsDirty' of undefined
at p5.MediaElement.c.Renderer2D.loadPixels (p5.min.js:3)
at p5.MediaElement.loadPixels (p5.dom.js:2566)
at draw (webcam.js:17)
at h.i.redraw (p5.min.js:3)
at h.<anonymous> (p5.min.js:3)
I’ve tried a bunch of variants of the above (largely borrowed from this example on the docs as well as the more basic createCapture example.) All I want is the pixels in an array so I can play with them. Any help would be greatly appreciated.
Here’s my (extremely minimal) html just for completeness. The code above is in webcam.js. The local versions of p5…js are up to date downloads from the website as of today.
<!doctype html>
<html>
<head>
<title>webcam</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="p5.min.js"></script>
<script src="p5.dom.js"></script>
<script src="webcam.js"></script>
</head>
<body>
<div id="canvas"></div>
</body>
</html>
Thanks for taking a look!