fix: fps when tab in background with vb

packages/hms-video-store/jest.config.js

@@ -6,5 +6,6 @@ module.exports = {
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
   collectCoverageFrom: ['src/**/*.{ts,tsx,js,jsx}'],
   testMatch: ['<rootDir>/src/**/*.(test).{ts,tsx,js,jsx}'],
+  setupFiles: ['jsdom-worker'],
   testEnvironment: 'jsdom',
 };

packages/hms-video-web/jest.config.js

@@ -6,6 +6,6 @@ module.exports = {
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
   collectCoverageFrom: ['src/**/*.{ts,tsx,js,jsx}'],
   testMatch: ['<rootDir>/src/**/*.(test).{ts,tsx,js,jsx}'],
-  setupFiles: ['jest-canvas-mock'],
+  setupFiles: ['jest-canvas-mock', 'jsdom-worker'],
   testEnvironment: 'jsdom',
 };

packages/hms-video-web/src/connection/subscribe/subscribeConnection.ts

@@ -9,7 +9,7 @@ import { ISignal } from '../../signal/ISignal';
 import { API_DATA_CHANNEL } from '../../utils/constants';
 import HMSLogger from '../../utils/logger';
 import { getSdpTrackIdForMid } from '../../utils/session-description';
-import { sleep } from '../../utils/timer-utils';
+import { workerSleep } from '../../utils/timer-utils';
 import { PreferAudioLayerParams, PreferLayerResponse, PreferVideoLayerParams } from '../channel-messages';
 import HMSConnection from '../HMSConnection';
 import HMSDataChannel from '../HMSDataChannel';
@@ -189,7 +189,7 @@ export default class HMSSubscribeConnection extends HMSConnection {
           throw Error(`code=${error.code}, message=${error.message}`);
         }
         const delay = (2 + Math.random() * 2) * 1000;
-        await sleep(delay);
+        await workerSleep(delay);
       } else {
         break;
       }

packages/hms-video-web/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 { sleep } from '../../utils/timer-utils';
+import { workerSleep } from '../../utils/timer-utils';
 import { HMSPluginUnsupportedTypes } from '../audio';
 
 const DEFAULT_FRAME_RATE = 24;
@@ -216,7 +216,7 @@ export class HMSVideoPluginsManager {
       return;
     }
     while (this.pluginsLoopState === 'paused') {
-      await sleep(100);
+      await workerSleep(100);
     }
   }
 
@@ -288,7 +288,7 @@ export class HMSVideoPluginsManager {
           this.resetCanvases();
         }
         this.pluginsLoopState = 'paused';
-        await sleep(sleepTimeMs);
+        await workerSleep(sleepTimeMs);
         continue;
       }
       let processingTime = 0;
@@ -306,7 +306,7 @@ export class HMSVideoPluginsManager {
       }
       this.pluginsLoopState = 'running';
       // take into account processing time to decide time to wait for the next loop
-      await sleep(sleepTimeMs - processingTime);
+      await workerSleep(sleepTimeMs - processingTime);
     }
   }
 

packages/hms-video-web/src/signal/jsonrpc/index.ts

@@ -15,7 +15,7 @@ import HMSLogger from '../../utils/logger';
 import { PromiseCallbacks } from '../../utils/promise';
 import { Queue } from '../../utils/queue';
 import { isPageHidden } from '../../utils/support';
-import { sleep } from '../../utils/timer-utils';
+import { workerSleep } from '../../utils/timer-utils';
 import {
   AcceptRoleChangeParams,
   BroadcastResponse,
@@ -601,7 +601,7 @@ export default class JsonRpcSignal implements ISignal {
         }
 
         const delay = (2 + Math.random() * 2) * 1000;
-        await sleep(delay);
+        await workerSleep(delay);
       }
     }
     HMSLogger.e(`Sending ${method} over WS failed after ${Math.min(retry, MAX_RETRIES)} retries`, {

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

@@ -1,3 +1,21 @@
+export const worker = `(function metronomeWorkerSetup() {
+  function ticker() {
+    self.postMessage('tick');
+  }
+  self.onmessage = function (event) {
+    const [data, time] = event.data;
+    switch (data) {
+      case 'start':
+        setTimeout(ticker, time);
+        break;
+      default:
+        break;
+    }
+  };
+})()`;
+
+const WorkerThread = new Worker(URL.createObjectURL(new Blob([worker], { type: 'application/javascript' })));
+
 /**
  * Delay for a @see ms amount of time
  * @param ms -- time in milliseconds
@@ -6,7 +24,25 @@ export function sleep(ms: number): Promise<void> {
   if (ms < 0) {
     throw Error('`ms` should be a positive integer');
   }
-  return new Promise(resolve => setTimeout(resolve, ms));
+
+  return new Promise(resolve => {
+    setTimeout(resolve, ms);
+  });
+}
+
+export function workerSleep(ms: number): Promise<void> {
+  if (ms < 0) {
+    throw Error('`ms` should be a positive integer');
+  }
+  // const buffer = new ArrayBuffer(8);
+  WorkerThread.postMessage(['start', ms]);
+  return new Promise(resolve => {
+    WorkerThread.onmessage = event => {
+      if (event.data === 'tick') {
+        resolve();
+      }
+    };
+  });
 }
 
 /**

yarn.lock

@@ -12161,6 +12161,14 @@ jscodeshift@^0.14.0:
     temp "^0.8.4"
     write-file-atomic "^2.3.0"
 
+jsdom-worker@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/jsdom-worker/-/jsdom-worker-0.3.0.tgz#aff32ec089d17f56a5a344a426b6fb2f56e7de54"
+  integrity sha512-nlPmN0i93+e6vxzov8xqLMR+MBs/TAYeSviehivzqovHH0AgooVx9pQ/otrygASppPvdR+V9Jqx5SMe8+FcADg==
+  dependencies:
+    mitt "^3.0.0"
+    uuid-v4 "^0.1.0"
+
 jsdom@^16.4.0:
   version "16.7.0"
   resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-16.7.0.tgz#918ae71965424b197c819f8183a754e18977b710"
@@ -17408,6 +17416,11 @@ utils-merge@1.0.1:
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
   integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==
 
+uuid-v4@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/uuid-v4/-/uuid-v4-0.1.0.tgz#62d7b310406f6cecfea1528c69f1e8e0bcec5a3a"
+  integrity sha512-m11RYDtowtAIihBXMoGajOEKpAXrKbpKlpmxqyztMYQNGSY5nZAZ/oYch/w2HNS1RMA4WLGcZvuD8/wFMuCEzA==
+
 uuid@^8.3.0, uuid@^8.3.2:
   version "8.3.2"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"