From 4fa47c8070d90a5c9e6ccd24805285f18b31474b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sa=C3=BAl=20Ibarra=20Corretg=C3=A9?= <saghul@jitsi.org>
Date: Tue, 16 Mar 2021 10:03:56 +0100
Subject: [PATCH] fix(virtual-background) use a DOM element for storing the
 image

THis will reuse the previously cached image and obey the base href.

Ref:
https://stackoverflow.com/questions/6241716/is-there-a-difference-between-new-image-and-document-createelementimg
---
 .../virtual-background/JitsiStreamBackgroundEffect.js     | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/react/features/stream-effects/virtual-background/JitsiStreamBackgroundEffect.js b/react/features/stream-effects/virtual-background/JitsiStreamBackgroundEffect.js
index ac5586081..d394e2276 100644
--- a/react/features/stream-effects/virtual-background/JitsiStreamBackgroundEffect.js
+++ b/react/features/stream-effects/virtual-background/JitsiStreamBackgroundEffect.js
@@ -26,10 +26,10 @@ export default class JitsiStreamBackgroundEffect {
     _segmentationMask: Object;
     _segmentationMaskCanvas: Object;
     _renderMask: Function;
+    _virtualImage: HTMLImageElement;
     isEnabled: Function;
     startEffect: Function;
     stopEffect: Function;
-    virtualImage: Image;
 
     /**
      * Represents a modified video MediaStream track.
@@ -42,8 +42,8 @@ export default class JitsiStreamBackgroundEffect {
         this._options = options;
 
         if (this._options.virtualBackground.isVirtualBackground) {
-            this.virtualImage = new Image();
-            this.virtualImage.src = this._options.virtualBackground.virtualSource;
+            this._virtualImage = document.createElement('img');
+            this._virtualImage.src = this._options.virtualBackground.virtualSource;
         }
         this._model = model;
         this._options = options;
@@ -113,7 +113,7 @@ export default class JitsiStreamBackgroundEffect {
 
         this._outputCanvasCtx.globalCompositeOperation = 'destination-over';
         if (this._options.virtualBackground.isVirtualBackground) {
-            this._outputCanvasCtx.drawImage(this.virtualImage, 0, 0);
+            this._outputCanvasCtx.drawImage(this._virtualImage, 0, 0);
         } else {
             this._outputCanvasCtx.filter = `blur(${blurValue})`;
             this._outputCanvasCtx.drawImage(this._inputVideoElement, 0, 0);