Error on 'Video Pixels' example on P5JS Reference Page

edhebert

Hi-

I'm trying to better understand video manipulation, and think that an example in the P5JS Reference Guide can help me visualize what I need. However, this example is throwing an error to the console. i'm getting the JS error:

Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0.

Can someone help me understand why this code isn't working?

Thanks!

GoToLoop

You should at least mention which are those links? ~:>

edhebert

::facepalm:: I'm so sorry I omitted that tiny detail. :D Thanks for proofreading!

http://p5js.org/examples/examples/Dom_Video_Pixels.php

blindfish

createVideo supports a callback that should probably be used in order to ensure the video asset is loaded before trying to do anything with it; but hasn't been in the demo... That could be the issue ("source width is 0" would suggest the file hasn't loaded) though when I try and amend the test page it still throws an error (though the video does appear for an instant).

GoToLoop

Video doesn't show up due to fingers.hide();, of course. :>
I did some tweaks here but no good. Seems very buggy to me: :-&

var fingers;

function preload() {
  fingers = createVideo(['assets/fingers.mov', 'assets/fingers.webm']);
}

function setup() {
  createCanvas(320, 240);
  ellipseMode(CENTER).fill(0).noStroke();

  fingers.loop();
  //fingers.hide();
}

function draw() {
  background(0xff);
  //fingers.loadPixels();

  const frame = fingers.get();
  if (!frame.loadPixels)  return;
  frame.loadPixels();

  const step = round(constrain(mouseX>>3, 6, 32));
  var idx, darkness, radius;
  var x, y;

  for (y = 0; y < height; y += step)  for (x = 0; x < width; x += step) {
    idx = y*width + x;
    darkness = (0xff - frame.pixels[idx<<2]) / 0xff;
    radius = step * darkness;

    ellipse(x, y, radius, radius);
  }
}

edhebert

OK, thanks. Glad to know it's not just me.

blindfish

It's weird: if you wait for the video to load and console.info(fingers.width) it returns the correct width; but running console.info(fingers) and inspecting the object appears to show conflicting property values (in Chrome):

var fingers;

function setup() {
  createCanvas(320, 240);
  // specify multiple formats for different browsers
  fingers = createVideo(['assets/fingers.mov',
                         'assets/fingers.webm'], function() {
                           // the Object 'preview' shows correct width
                           // but expand the mediaElement object
                           // and the width and height propeties are still listed as 0
                           console.info(fingers);
                           console.info(fingers.width);
                         });
  fingers.loop();
  fingers.hide();
  noStroke();
  fill(0);
}

function draw() {
  background(255);
  fingers.loadPixels();
  var stepSize = round(constrain(mouseX / 8, 6, 32));
  for (var y=0; y<height; y+=stepSize) {
    for (var x=0; x<width; x+=stepSize) {
      var i = y * width + x;
      var darkness = (255 - fingers.pixels[i*4]) / 255;
      var radius = stepSize * darkness;
      ellipse(x, y, radius, radius);
    }
  }
}

Odd :/

Could be a browser bug; but if the behaviour is consistent on all browsers then maybe not... :(|)

edhebert

Yeah. I agree it's odd/buggy. I pulled the code down to a local server, and it ran OK in Chrome and FF (with one of my own webm/mp4 videos). Gremlin in the works somewhere.

blindfish

Possibly the video file then. I'd have to dig out the details, but there's a snippet in video files that includes data on length etc. Some encoders dump this at the end of the file where it's no use to anyone: you have to wait for the full file to load before you can do anything with it...

brig

+1 on this problem. loadPixels errors out every time. i've tried a variety of video formats. wonder how/why it's working on the demo??