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
This commit is contained in:
Saúl Ibarra Corretgé 2021-03-16 10:03:56 +01:00 committed by Saúl Ibarra Corretgé
parent 0dcb8a025b
commit 4fa47c8070
1 changed files with 4 additions and 4 deletions

View File

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