Error on 'Video Pixels' example on P5JS Reference Page

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!

Answers

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

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

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

  • 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).

  • edited December 2015

    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);
      }
    }
    
  • OK, thanks. Glad to know it's not just me.

  • 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... :(|)

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

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

  • Answer ✓

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

Sign In or Register to comment.