fix: clean up

packages/hms-virtual-background/src/HMSEffectsPlugin.ts

@@ -15,10 +15,12 @@ export class HMSEffectsPlugin implements HMSMediaStreamPlugin {
   private initialised = false;
   private intervalId: NodeJS.Timer | null = null;
   private onInit;
+  private canvas: HTMLCanvasElement;
 
   constructor(effectsSDKKey: string, onInit?: () => void) {
     this.effects = new tsvb(effectsSDKKey);
     this.onInit = onInit;
+    this.canvas = document.createElement('canvas');
     this.effects.config({
       sdk_url: EFFECTS_SDK_ASSETS,
       models: {
@@ -140,15 +142,17 @@ export class HMSEffectsPlugin implements HMSMediaStreamPlugin {
     };
     this.effects.clear();
     const { height, width } = stream.getVideoTracks()[0].getSettings();
-    const canvas = document.createElement('canvas');
-    canvas.width = width!;
-    canvas.height = height!;
+    this.canvas.width = width!;
+    this.canvas.height = height!;
     this.effects.useStream(stream);
-    this.effects.toCanvas(canvas);
-    return canvas.captureStream(30) || stream;
+    this.effects.toCanvas(this.canvas);
+    return this.canvas.captureStream(30) || stream;
   }
 
   stop() {
+    if (this.canvas && this.canvas.parentNode) {
+      this.canvas.parentNode.removeChild(this.canvas);
+    }
     this.removeEffects();
     this.executeAfterInit(() => {
       this.effects.stop();