From 9605dd9768a000fbee19a73041539513fdc39395 Mon Sep 17 00:00:00 2001 From: Kaustubh Kumar Date: Wed, 22 May 2024 18:14:15 +0530 Subject: [PATCH] fix: use canvas stream in effects plugin --- .../hms-virtual-background/src/HMSEffectsPlugin.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/hms-virtual-background/src/HMSEffectsPlugin.ts b/packages/hms-virtual-background/src/HMSEffectsPlugin.ts index 846033dd5d..0b5b53b6c0 100644 --- a/packages/hms-virtual-background/src/HMSEffectsPlugin.ts +++ b/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() {