Browse Source

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
master
Saúl Ibarra Corretgé 4 years ago
parent
commit
4fa47c8070

+ 4
- 4
react/features/stream-effects/virtual-background/JitsiStreamBackgroundEffect.js View File

26
     _segmentationMask: Object;
26
     _segmentationMask: Object;
27
     _segmentationMaskCanvas: Object;
27
     _segmentationMaskCanvas: Object;
28
     _renderMask: Function;
28
     _renderMask: Function;
29
+    _virtualImage: HTMLImageElement;
29
     isEnabled: Function;
30
     isEnabled: Function;
30
     startEffect: Function;
31
     startEffect: Function;
31
     stopEffect: Function;
32
     stopEffect: Function;
32
-    virtualImage: Image;
33
 
33
 
34
     /**
34
     /**
35
      * Represents a modified video MediaStream track.
35
      * Represents a modified video MediaStream track.
42
         this._options = options;
42
         this._options = options;
43
 
43
 
44
         if (this._options.virtualBackground.isVirtualBackground) {
44
         if (this._options.virtualBackground.isVirtualBackground) {
45
-            this.virtualImage = new Image();
46
-            this.virtualImage.src = this._options.virtualBackground.virtualSource;
45
+            this._virtualImage = document.createElement('img');
46
+            this._virtualImage.src = this._options.virtualBackground.virtualSource;
47
         }
47
         }
48
         this._model = model;
48
         this._model = model;
49
         this._options = options;
49
         this._options = options;
113
 
113
 
114
         this._outputCanvasCtx.globalCompositeOperation = 'destination-over';
114
         this._outputCanvasCtx.globalCompositeOperation = 'destination-over';
115
         if (this._options.virtualBackground.isVirtualBackground) {
115
         if (this._options.virtualBackground.isVirtualBackground) {
116
-            this._outputCanvasCtx.drawImage(this.virtualImage, 0, 0);
116
+            this._outputCanvasCtx.drawImage(this._virtualImage, 0, 0);
117
         } else {
117
         } else {
118
             this._outputCanvasCtx.filter = `blur(${blurValue})`;
118
             this._outputCanvasCtx.filter = `blur(${blurValue})`;
119
             this._outputCanvasCtx.drawImage(this._inputVideoElement, 0, 0);
119
             this._outputCanvasCtx.drawImage(this._inputVideoElement, 0, 0);

Loading…
Cancel
Save