From 98160e5214637243875c8207a878ede3b2817e49 Mon Sep 17 00:00:00 2001 From: Kakashi786 Date: Sun, 19 Oct 2025 13:35:37 +0530 Subject: [PATCH 1/3] Fix: use instance renderer in p5.MediaElement.loadPixels to support module contexts --- src/dom/dom.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/dom/dom.js b/src/dom/dom.js index a5e1c54a5c..37da56fdac 100644 --- a/src/dom/dom.js +++ b/src/dom/dom.js @@ -4956,10 +4956,21 @@ class MediaElement extends p5.Element { this._frameOnCanvas = this._pInst.frameCount; } } - loadPixels(...args) { - this._ensureCanvas(); + loadPixels(...args) { + this._ensureCanvas(); + + // ✅ use the current p5 instance’s renderer instead of global p5 + if (this._pInst && this._pInst._renderer) { + return this._pInst._renderer.loadPixels(...args); + } + + // fallback for old global mode (just in case) + if (typeof p5 !== 'undefined' && p5.Renderer2D && p5.Renderer2D.prototype) { return p5.Renderer2D.prototype.loadPixels.apply(this, args); } + + throw new Error('p5 instance or renderer not available in MediaElement.loadPixels()'); +} updatePixels(x, y, w, h) { if (this.loadedmetadata) { // wait for metadata From c4dcb8ffb58a2e392628d5ad31f5aa48221706d5 Mon Sep 17 00:00:00 2001 From: Kakashi786 Date: Wed, 22 Oct 2025 12:47:09 +0530 Subject: [PATCH 2/3] fix the lint/test issue --- src/dom/dom.js | 33 +++++++++++++++++---------------- 1 file changed, 17 insertions(+), 16 deletions(-) diff --git a/src/dom/dom.js b/src/dom/dom.js index 37da56fdac..57108bf7b5 100644 --- a/src/dom/dom.js +++ b/src/dom/dom.js @@ -2303,7 +2303,7 @@ if (navigator.mediaDevices.getUserMedia === undefined) { * * The first parameter, `type`, is optional. It sets the type of capture to * use. By default, `createCapture()` captures both audio and video. If `VIDEO` - * is passed, as in `createCapture(VIDEO)`, only video will be captured. + * is passed, as in `createCapture(VIDEO)`, only video will be cshould work with tintaptured. * If `AUDIO` is passed, as in `createCapture(AUDIO)`, only audio will be * captured. A constraints object can also be passed to customize the stream. * See the @@ -4955,22 +4955,23 @@ class MediaElement extends p5.Element { this.setModified(true); this._frameOnCanvas = this._pInst.frameCount; } + } loadPixels(...args) { + this._ensureCanvas(); + let renderer = null; + // Use the current p5 instance’s renderer if available + if (this._pInst && this._pInst._renderer) { + renderer = this._pInst._renderer; + } else if (typeof p5 !== 'undefined' && p5.instance && p5.instance._renderer) { + // Fallback for global mode + renderer = p5.instance._renderer; + } if (!renderer || typeof renderer.loadPixels !== 'function') { + throw new Error( + 'p5 renderer not available in MediaElement.loadPixels()' + ); + } + // Call renderer.loadPixels() but do NOT return anything + renderer.loadPixels(...args); } - loadPixels(...args) { - this._ensureCanvas(); - - // ✅ use the current p5 instance’s renderer instead of global p5 - if (this._pInst && this._pInst._renderer) { - return this._pInst._renderer.loadPixels(...args); - } - - // fallback for old global mode (just in case) - if (typeof p5 !== 'undefined' && p5.Renderer2D && p5.Renderer2D.prototype) { - return p5.Renderer2D.prototype.loadPixels.apply(this, args); - } - - throw new Error('p5 instance or renderer not available in MediaElement.loadPixels()'); -} updatePixels(x, y, w, h) { if (this.loadedmetadata) { // wait for metadata From de7fae00f7d04ebab572fbd6fa1b949d942e0441 Mon Sep 17 00:00:00 2001 From: Kakashi786 Date: Thu, 23 Oct 2025 14:28:45 +0530 Subject: [PATCH 3/3] Fix MediaElement pixel methods to use p5 instance parameter --- src/dom/dom.js | 44 ++++++++++++++++++++++++++------------------ 1 file changed, 26 insertions(+), 18 deletions(-) diff --git a/src/dom/dom.js b/src/dom/dom.js index 57108bf7b5..ecd5bae524 100644 --- a/src/dom/dom.js +++ b/src/dom/dom.js @@ -4955,24 +4955,7 @@ class MediaElement extends p5.Element { this.setModified(true); this._frameOnCanvas = this._pInst.frameCount; } - } loadPixels(...args) { - this._ensureCanvas(); - let renderer = null; - // Use the current p5 instance’s renderer if available - if (this._pInst && this._pInst._renderer) { - renderer = this._pInst._renderer; - } else if (typeof p5 !== 'undefined' && p5.instance && p5.instance._renderer) { - // Fallback for global mode - renderer = p5.instance._renderer; - } if (!renderer || typeof renderer.loadPixels !== 'function') { - throw new Error( - 'p5 renderer not available in MediaElement.loadPixels()' - ); - } - // Call renderer.loadPixels() but do NOT return anything - renderer.loadPixels(...args); - } - updatePixels(x, y, w, h) { + }updatePixels(x, y, w, h) { if (this.loadedmetadata) { // wait for metadata this._ensureCanvas(); @@ -5490,6 +5473,28 @@ class MediaElement extends p5.Element { } p5.MediaElement = MediaElement; +// Fix for MediaElement.loadPixels renderer reference per instance +function attachMediaElementPixelMethods(p5Inst) { + p5Inst.MediaElement.prototype.loadPixels = function (...args) { + this._ensureCanvas(); + // Use the 2D renderer prototype method directly on the MediaElement + // MediaElement acts as its own 2D renderer context + return p5Inst.Renderer2D.prototype.loadPixels.apply(this, args); + }; + + p5Inst.MediaElement.prototype.updatePixels = function (x, y, w, h) { + this._ensureCanvas(); + // Use the 2D renderer prototype method directly on the MediaElement + return p5Inst.Renderer2D.prototype.updatePixels.apply(this, x, y, w, h); + }; +} + +// Attach to current instance if available +if (typeof p5 !== 'undefined') { + attachMediaElementPixelMethods(p5); +} + + /** * A class to describe a file. @@ -5854,6 +5859,9 @@ class File { } + + + p5.File = File; export default p5;