Problems with the video.size (number1, number2) function;

p5.js Coding Questions
1

Now in 2019, for reasons of some update of P5.JS or browsers, the video.size function (number1, number2);
Does not work, breaking or code.

Here is the error:
undefined
p5.js: 61127 Uncaught IndexSizeError: Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D’: The source width is 0.
p5.js: 68816 Uncaught TypeError: Cannot assign to read only property ‘videoWidth’ of object '# ’
about: srcdoc: 36 Uncaught TypeError: Cannot read property ‘split’ of undefined

I am using the P5.JS editor.

Here is the same code, if uncommenting video.size will not work, giving the errors mentioned. You can also test on my own algorithm in the P5.JS editor: https://editor.p5js.org/willianxz/full/6Jeo9ogMk

var video;
var x = 0;
function setup () {
createCanvas (500, 400);
pixelDensity (1);
video = createCapture (VIDEO);
//video.size(400,400);
background (51);
}

function draw () {
video.loadPixels ();
var w = video.width;
var h = video.height;

copy (video, w / 2, 0, 1, h, x, 0, 1, h);
x ++;
if (x> width) {x = 0;}
}

//Greetings from Brazil!

2

You could give a go using resize instead of size. But keep in mind that i have no idea if it also works with videos.

3

Its dont work :confused:

4

Hmm, well, i‘m not good with p5.js and Videos, so i can‘t help much here, sorry :sweat_smile:

Tried getting anything to work, but i couldn‘t even load the video correctly :sweat_smile:

5

https://editor.p5js.org/kll/sketches/GcnV9seRs

shows the 2 ways
USB cam

  • to HTML
  • to CANVAS

both work

6

Hello my friend!

This is a way around the problem, but there are algorithms made where you need to use this video.size function.

To solve this question, I found a way around it better, it does not solve the problem that is actually a bug, but with this solution we can at least use this function.

As I understand it, somehow at the time of setup the video is not loaded, so I tried to load the video in preload function to finally use the video.size (size1, size2) function; However, this also does not work.

So I ran into a callback function technique and applied it to that question, so it was resolved.

function setup () {
createCanvas (640, 480);
background (0);
pixelDensity (1);
// Put the callback function when creating the video.
video = createCapture (VIDEO, callbackgo);
}

// It is only possible to change the size of the video when it is ready, so there is this callback function.
var go = false;
function callbackgo () {
go = true;
}

function draw () {
background (0);
// When the video is prepared, finally call the video.size function
if (go) {
video.size (320, 240);
}

// continue with your codes
//You can see an algorithm I made running like this:
//https://editor.p5js.org/willianxz/full/o5N5KY3fm
//Greetings from Brazil!
}

7

very good,
nevertheless could you check out this
preload version i try, can’t say if it would work your way.

var video;
var vscale = 16;
var particles = [];
var govideo = false;
var slider;
var w=640,h=480;

function preload() {
  video = createCapture(VIDEO, () => {
    video.size(w/vscale,h/vscale)
  })
}

function setup() {
  createCanvas(w,h);
  pixelDensity(1);
  frameRate(10);
  //video = createCapture(VIDEO, callbackgo);
  for(let i = 0; i < 200; i++){    
   particles[i] = new Particle(random(width), random(height));
  }
  slider = createSlider(0, 255, 127);
  background(51);
}

//function callbackgo(){
// govideo = true;
//}

function draw() {
  
 // if(govideo){    
 //  video.size(width / vscale, height / vscale);
  //}
  
  video.loadPixels();  
  for(let particle of particles){
    particle.update();
    particle.show(); 
  }
  
}
3 Likes
8

That’s it my friend, you understand me!

Your version is even better !, it worked that is a beauty!
We solved this question then ^^
I tested with this simple code:
See running at: https://editor.p5js.org/willianxz/full/DDaUUxAL9

var video;  
//WORKING:
function preload() {
  video = createCapture(VIDEO, () => {
    video.size(400,400);
  });
}

function setup() {
  createCanvas(400, 400);
  background(51);
  //NOT WORK:
  //video = createCapture(VIDEO);
  //video.size(400, 400);
}

function draw() {
  image(video, 0, 0);
}
3 Likes