fix: use canvas stream in effects plugin

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: {
@@ -114,6 +116,7 @@ export class HMSEffectsPlugin implements HMSMediaStreamPlugin {
       this.effects.setBackground(this.background);
     });
   }
+
   getBlurAmount() {
     return this.blurAmount;
   }
@@ -138,9 +141,12 @@ export class HMSEffectsPlugin implements HMSMediaStreamPlugin {
       }
     };
     this.effects.clear();
+    const { height, width } = stream.getVideoTracks()[0].getSettings();
+    this.canvas.width = width!;
+    this.canvas.height = height!;
     this.effects.useStream(stream);
-    // getStream potentially returns null
-    return this.effects.getStream() || stream;
+    this.effects.toCanvas(this.canvas);
+    return this.canvas.captureStream(30) || stream;
   }
 
   stop() {