feat: reduce no. of worker creation for vb

packages/hms-video-store/src/plugins/video/HMSVideoPluginsManager.ts

@@ -6,7 +6,7 @@ import { HMSAction } from '../../error/HMSAction';
 import { EventBus } from '../../events/EventBus';
 import { HMSLocalVideoTrack } from '../../media/tracks';
 import HMSLogger from '../../utils/logger';
-import { workerSleep } from '../../utils/timer-utils';
+import { reusableWorker, workerSleep } from '../../utils/timer-utils';
 import { HMSPluginUnsupportedTypes } from '../audio';
 
 const DEFAULT_FRAME_RATE = 24;
@@ -57,6 +57,7 @@ export class HMSVideoPluginsManager {
   private pluginNumFramesToSkip: Record<string, number>;
   private pluginNumFramesSkipped: Record<string, number>;
   private canvases: Array<CanvasElement>; //array of canvases to store intermediate result
+  private reusableWorker = reusableWorker();
 
   constructor(track: HMSLocalVideoTrack, eventBus: EventBus) {
     this.hmsTrack = track;
@@ -288,7 +289,7 @@ export class HMSVideoPluginsManager {
           this.resetCanvases();
         }
         this.pluginsLoopState = 'paused';
-        await workerSleep(sleepTimeMs);
+        await this.reusableWorker.sleep(sleepTimeMs);
         continue;
       }
       let processingTime = 0;
@@ -306,7 +307,7 @@ export class HMSVideoPluginsManager {
       }
       this.pluginsLoopState = 'running';
       // take into account processing time to decide time to wait for the next loop
-      await workerSleep(sleepTimeMs - processingTime);
+      await this.reusableWorker.sleep(sleepTimeMs - processingTime);
     }
   }
 

packages/hms-video-store/src/utils/timer-utils.ts

@@ -1,4 +1,4 @@
-export const worker = `(function metronomeWorkerSetup() {
+export const worker = `(function workerSetup() {
   function ticker() {
     self.postMessage('tick');
   }
@@ -47,6 +47,27 @@ export function workerSleep(ms: number): Promise<void> {
   });
 }
 
+export function reusableWorker() {
+  if (typeof Worker === 'undefined') {
+    return {
+      sleep: (ms: number) => sleep(ms),
+    };
+  }
+  const WorkerThread = new Worker(URL.createObjectURL(new Blob([worker], { type: 'application/javascript' })));
+  return {
+    sleep: (ms: number) => {
+      WorkerThread.postMessage(['start', ms]);
+      return new Promise<void>(resolve => {
+        WorkerThread.onmessage = event => {
+          if (event.data === 'tick') {
+            resolve();
+          }
+        };
+      });
+    },
+  };
+}
+
 /**
  * Debounce Fn - Function to limit the number of executions of the passed in
  * function in a given time duration