diff --git a/src/dom/p5.MediaElement.js b/src/dom/p5.MediaElement.js index d9b0eba781..815b83fbf7 100644 --- a/src/dom/p5.MediaElement.js +++ b/src/dom/p5.MediaElement.js @@ -713,6 +713,13 @@ class MediaElement extends Element { duration() { return this.elt.duration; } + _checkIfTextureNeedsUpdate() { + const needsUpdate = this._frameOnTexture !== this._pInst.frameCount; + if (needsUpdate) { + this.setModified(true); + this._frameOnTexture = this._pInst.frameCount; + } + } _ensureCanvas() { if (!this.canvas) { this.canvas = document.createElement('canvas'); @@ -1647,13 +1654,13 @@ function media(p5, fn){ if (domElement.width) { videoEl.width = domElement.width; videoEl.height = domElement.height; - if (flipped) { - videoEl.elt.style.transform = 'scaleX(-1)'; - } } else { videoEl.width = videoEl.elt.width = domElement.videoWidth; videoEl.height = videoEl.elt.height = domElement.videoHeight; } + if (flipped) { + videoEl.elt.style.transform = 'scaleX(-1)'; + } videoEl.loadedmetadata = true; if (callback) callback(domElement.srcObject); diff --git a/src/webgl/p5.Texture.js b/src/webgl/p5.Texture.js index b211ed200f..7441ae5139 100644 --- a/src/webgl/p5.Texture.js +++ b/src/webgl/p5.Texture.js @@ -102,11 +102,18 @@ class Texture { this.isSrcMediaElement || this.isSrcHTMLElement ) { - // if param is a video HTML element - if (this.src._ensureCanvas) { + // createCapture elements that are flipped need + // to go through a canvas + if (this.isSrcMediaElement && this.src.flipped) { this.src._ensureCanvas(); + textureData = this.src.canvas; + } else { + // if param is a video HTML element + if (this.src._checkIfTextureNeedsUpdate) { + this.src._checkIfTextureNeedsUpdate(); + } + textureData = this.src.elt; } - textureData = this.src.elt; } else if (this.isSrcP5Graphics || this.isSrcP5Renderer) { textureData = this.src.canvas; } else if (this.isImageData) {