Can't read pixels from capture


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);

	capture = createCapture(VIDEO);

function draw() {
	background(0, 0, 0);

	if (capture.loadedmetadata) {

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

	<div id="canvas"></div>

Thanks for taking a look!

1 Like

This appears to be a bug with the version of p5js I was using (/*! p5.js v0.9.0 July 01, 2019 */). I found a video example here: and used the same p5js import and things started working.

1 Like

Your code works fine for me with v0.9.0 on linux in firefox. I know there was a bug in 0.7.2 that should have been fixed in 0.8.0.

Looks like it might be worth filing an issue. If the problem is in the latest version (0.9.0).

1 Like