Fix MediaElement.copy

[pearmini]

Resolves ml5js/ml5-next-gen#258

Changes:

I'm currently working on updating ml5 to support p5.js version 2.0. However, the following example breaks during inspection:

let bodySegmentation;
let video;
let segmentation;

let options = {
  maskType: "background",
};

function preload() {
  bodySegmentation = ml5.bodySegmentation("SelfieSegmentation", options);
}

function setup() {
  createCanvas(640, 480);
  // Create the video
  video = createCapture(VIDEO);
  video.size(640, 480);
  video.hide();

  bodySegmentation.detectStart(video, gotResults);
}

function draw() {
  background(0, 0, 255);
  if (segmentation) {
    video.mask(segmentation.mask);
    image(video, 0, 0);
  }
}

// callback function for body segmentation
function gotResults(result) {
  segmentation = result;
}

After debugging, I found that video.mask(segmentation.mask) throws the following error:

ReferenceError: fn is not defined

So I updated fn to p5.prototype to fix it, based on the reference from the source code in the main branch.

p5.js/src/dom/dom.js

Line 4991 in eadd761

p5.prototype.copy.apply(this, args);

Screenshots of the change:

PR Checklist

• npm run lint passes
• Inline reference is included / updated
• Unit tests are included / updated

[ksen0]

It looks good to me, tagging also @limzykenneth

[limzykenneth]

A reference to global p5 is not always guaranteed (eg. when using ESM) so this is not quite general enough. Two possible options are either to duplicate the implementation in src/image/pixels.js or to make the implementation exportable and import into relevant place. The second option is preferable but we need to be careful to see if it introduces cyclic dependencies and if so extract that out into its own helper module.

[pearmini]

@limzykenneth Thanks for the review!

Just out of curiosity — I noticed that other MediaElement methods, such as mask, also reference the global p5 object:

mask(...args) {
  this.loadPixels();
  this.setModified(true);
  p5.Image.prototype.mask.apply(this, args);
}

Do these methods have the same issue, or are they handled differently?

[limzykenneth]

@pearmini Good spot, I think they should have the same issue as well.

[pearmini]

@limzykenneth Since the other methods have the same issue, would it make sense to address them all in a separate PR? I suspect similar problems might exist elsewhere in the p5 codebase as well.

For this PR specifically, would it be possible to merge it as-is? At least, this change ensures that MediaElement.copy works correctly when using the UMD format. Although I can still import and use the copy method to fix this one, I’m not sure I’ll have time to fix all the related issues right now. What approach would you prefer?

[limzykenneth]

@pearmini If you need a release soon with a temp fix we can merge this for now and see when we'll cut a patch release? @ksen0

[pearmini]

@limzykenneth That would be great! We're planning to release support for p5's async setup soon!