@100mslive/roomkit-react 0.3.8-alpha.4 → 0.3.9-alpha.0

package/dist/index.js

@@ -62,7 +62,7 @@ import {
   theme,
   useBorderAudioLevel,
   useTheme
-} from "./chunk-KRTJ2T7F.js";
+} from "./chunk-BKAJ6YG4.js";
 export {
   Accordion,
   AudioLevel,

package/dist/meta.cjs.json

@@ -1322,8 +1322,39 @@
       ],
       "format": "esm"
     },
+    "src/Stats/useQoE.ts": {
+      "bytes": 3123,
+      "imports": [
+        {
+          "path": "react",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "react-use",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "@100mslive/react-sdk",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "<define:process.env>",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "<runtime>",
+          "kind": "import-statement",
+          "external": true
+        }
+      ],
+      "format": "esm"
+    },
     "src/Stats/Stats.tsx": {
-      "bytes": 8227,
+      "bytes": 8401,
       "imports": [
         {
           "path": "react",
@@ -1350,6 +1381,11 @@
           "kind": "import-statement",
           "original": "./StyledStats"
         },
+        {
+          "path": "src/Stats/useQoE.ts",
+          "kind": "import-statement",
+          "original": "./useQoE"
+        },
         {
           "path": "<define:process.env>",
           "kind": "import-statement",
@@ -4742,7 +4778,7 @@
       "format": "cjs"
     },
     "../hms-video-store/dist/index.js": {
-      "bytes": 332228,
+      "bytes": 332801,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -13907,7 +13943,7 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3323904
+      "bytes": 3329809
     },
     "dist/index.cjs.js": {
       "imports": [
@@ -14101,6 +14137,21 @@
           "kind": "require-call",
           "external": true
         },
+        {
+          "path": "react-use",
+          "kind": "require-call",
+          "external": true
+        },
+        {
+          "path": "@100mslive/react-sdk",
+          "kind": "require-call",
+          "external": true
+        },
+        {
+          "path": "react",
+          "kind": "require-call",
+          "external": true
+        },
         {
           "path": "@100mslive/react-sdk",
           "kind": "require-call",
@@ -16886,7 +16937,7 @@
       "entryPoint": "src/index.ts",
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18287
+          "bytesInOutput": 18307
         },
         "src/Theme/base.config.ts": {
           "bytesInOutput": 6104
@@ -17068,8 +17119,11 @@
         "src/Stats/StyledStats.tsx": {
           "bytesInOutput": 1004
         },
+        "src/Stats/useQoE.ts": {
+          "bytesInOutput": 3576
+        },
         "src/Stats/Stats.tsx": {
-          "bytesInOutput": 9531
+          "bytesInOutput": 9732
         },
         "src/Stats/index.tsx": {
           "bytesInOutput": 129
@@ -17150,7 +17204,7 @@
           "bytesInOutput": 1443
         },
         "src/Prebuilt/components/hooks/useUserPreferences.jsx": {
-          "bytesInOutput": 1087
+          "bytesInOutput": 1090
         },
         "src/Prebuilt/components/AppData/useUISettings.js": {
           "bytesInOutput": 7316
@@ -17180,7 +17234,7 @@
           "bytesInOutput": 3003
         },
         "src/Prebuilt/components/AppData/useSidepane.js": {
-          "bytesInOutput": 3258
+          "bytesInOutput": 3269
         },
         "src/Prebuilt/components/AppData/AppData.tsx": {
           "bytesInOutput": 6705
@@ -17399,7 +17453,7 @@
           "bytesInOutput": 4158
         },
         "src/Prebuilt/components/MoreSettings/ChangeNameModal.tsx": {
-          "bytesInOutput": 2839
+          "bytesInOutput": 2842
         },
         "src/Prebuilt/components/AppData/useSheet.ts": {
           "bytesInOutput": 1099
@@ -17483,7 +17537,7 @@
           "bytesInOutput": 1729
         },
         "src/Prebuilt/components/Footer/Footer.tsx": {
-          "bytesInOutput": 4509
+          "bytesInOutput": 4537
         },
         "src/Prebuilt/components/Notifications/HLSFailureModal.tsx": {
           "bytesInOutput": 2825
@@ -17702,7 +17756,7 @@
           "bytesInOutput": 1620
         },
         "src/Prebuilt/components/hooks/useTileLayout.tsx": {
-          "bytesInOutput": 4482
+          "bytesInOutput": 4486
         },
         "src/Prebuilt/components/VideoLayouts/EqualProminence.tsx": {
           "bytesInOutput": 2453
@@ -17807,7 +17861,7 @@
           "bytesInOutput": 2886
         },
         "src/Prebuilt/layouts/HLSView.jsx": {
-          "bytesInOutput": 33634
+          "bytesInOutput": 33658
         },
         "src/Prebuilt/layouts/VideoStreamingSection.tsx": {
           "bytesInOutput": 4705
@@ -17945,7 +17999,7 @@
           "bytesInOutput": 2980
         }
       },
-      "bytes": 1583357
+      "bytes": 1587273
     }
   }
 }

package/dist/meta.esbuild.json

@@ -1322,8 +1322,39 @@
       ],
       "format": "esm"
     },
+    "src/Stats/useQoE.ts": {
+      "bytes": 3123,
+      "imports": [
+        {
+          "path": "react",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "react-use",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "@100mslive/react-sdk",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "<define:process.env>",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "<runtime>",
+          "kind": "import-statement",
+          "external": true
+        }
+      ],
+      "format": "esm"
+    },
     "src/Stats/Stats.tsx": {
-      "bytes": 8227,
+      "bytes": 8401,
       "imports": [
         {
           "path": "react",
@@ -1350,6 +1381,11 @@
           "kind": "import-statement",
           "original": "./StyledStats"
         },
+        {
+          "path": "src/Stats/useQoE.ts",
+          "kind": "import-statement",
+          "original": "./useQoE"
+        },
         {
           "path": "<define:process.env>",
           "kind": "import-statement",
@@ -4742,7 +4778,7 @@
       "format": "cjs"
     },
     "../hms-video-store/dist/index.js": {
-      "bytes": 332228,
+      "bytes": 332801,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -13912,7 +13948,7 @@
     "dist/index.js": {
       "imports": [
         {
-          "path": "dist/chunk-KRTJ2T7F.js",
+          "path": "dist/chunk-BKAJ6YG4.js",
           "kind": "import-statement"
         }
       ],
@@ -13985,16 +14021,16 @@
       "inputs": {},
       "bytes": 1822
     },
-    "dist/HLSView-KESSHZG2.js.map": {
+    "dist/HLSView-SZL2TSWE.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 100708
     },
-    "dist/HLSView-KESSHZG2.js": {
+    "dist/HLSView-SZL2TSWE.js": {
       "imports": [
         {
-          "path": "dist/chunk-KRTJ2T7F.js",
+          "path": "dist/chunk-BKAJ6YG4.js",
           "kind": "import-statement"
         },
         {
@@ -14230,13 +14266,13 @@
       },
       "bytes": 61939
     },
-    "dist/chunk-KRTJ2T7F.js.map": {
+    "dist/chunk-BKAJ6YG4.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3219240
+      "bytes": 3225135
     },
-    "dist/chunk-KRTJ2T7F.js": {
+    "dist/chunk-BKAJ6YG4.js": {
       "imports": [
         {
           "path": "react",
@@ -14433,6 +14469,21 @@
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "react",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "react-use",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "@100mslive/react-sdk",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "@radix-ui/react-checkbox",
           "kind": "import-statement",
@@ -16654,7 +16705,7 @@
           "external": true
         },
         {
-          "path": "dist/HLSView-KESSHZG2.js",
+          "path": "dist/HLSView-SZL2TSWE.js",
           "kind": "dynamic-import"
         },
         {
@@ -17135,7 +17186,7 @@
       ],
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18287
+          "bytesInOutput": 18307
         },
         "../../node_modules/lodash/lodash.js": {
           "bytesInOutput": 224310
@@ -17330,7 +17381,7 @@
           "bytesInOutput": 27
         },
         "src/Stats/Stats.tsx": {
-          "bytesInOutput": 8364
+          "bytesInOutput": 8580
         },
         "src/Stats/formatBytes.ts": {
           "bytesInOutput": 471
@@ -17338,6 +17389,9 @@
         "src/Stats/StyledStats.tsx": {
           "bytesInOutput": 708
         },
+        "src/Stats/useQoE.ts": {
+          "bytesInOutput": 3159
+        },
         "src/Checkbox/Checkbox.tsx": {
           "bytesInOutput": 731
         },
@@ -17489,7 +17543,7 @@
           "bytesInOutput": 606
         },
         "src/Prebuilt/common/hooks.ts": {
-          "bytesInOutput": 5956
+          "bytesInOutput": 5957
         },
         "src/Prebuilt/components/Leave/LeaveRoom.tsx": {
           "bytesInOutput": 2454
@@ -17933,7 +17987,7 @@
           "bytesInOutput": 1204
         },
         "src/Prebuilt/components/hooks/useTileLayout.tsx": {
-          "bytesInOutput": 3831
+          "bytesInOutput": 3835
         },
         "src/Prebuilt/components/VideoLayouts/RoleProminence.tsx": {
           "bytesInOutput": 2183
@@ -18101,7 +18155,7 @@
           "bytesInOutput": 651
         }
       },
-      "bytes": 1319109
+      "bytes": 1322555
     }
   }
 }

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.8-alpha.4",
+  "version": "0.3.9-alpha.0",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -82,11 +82,11 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.8-alpha.4",
+    "@100mslive/hls-player": "0.3.9-alpha.0",
     "@100mslive/hms-noise-cancellation": "0.0.1",
-    "@100mslive/hms-virtual-background": "1.13.8-alpha.4",
-    "@100mslive/react-icons": "0.10.8-alpha.4",
-    "@100mslive/react-sdk": "0.10.8-alpha.4",
+    "@100mslive/hms-virtual-background": "1.13.9-alpha.0",
+    "@100mslive/react-icons": "0.10.9-alpha.0",
+    "@100mslive/react-sdk": "0.10.9-alpha.0",
     "@100mslive/types-prebuilt": "0.12.8",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -122,5 +122,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "1ac0f11a034d8e0aed06479e20671c86bffd77f8"
+  "gitHead": "0e749918d6dddfed6208acd8e4dbfed267cc751e"
 }

package/src/Stats/Stats.tsx

@@ -13,6 +13,7 @@ import {
 import { Tooltip } from '../Tooltip';
 import { formatBytes } from './formatBytes';
 import { Stats } from './StyledStats';
+import { useQoE } from './useQoE';
 
 export interface VideoTileStatsProps {
   videoTrackID?: HMSTrackID;
@@ -33,6 +34,7 @@ export function VideoTileStats({ videoTrackID, audioTrackID, peerID, isLocal = f
   const videoTrackStats = isLocal ? localVideoTrackStats?.[0] : remoteVideoTrackStats;
   const downlinkScore = useHMSStore(selectConnectionQualityByPeerID(peerID))?.downlinkQuality;
   const availableOutgoingBitrate = useHMSStatsStore(selectHMSStats.availablePublishBitrate);
+  const qoe = useQoE({ videoTrackID, audioTrackID, isLocal });
 
   // Viewer role - no stats to show
   if (!(audioTrackStats || videoTrackStats)) {
@@ -87,6 +89,7 @@ export function VideoTileStats({ videoTrackID, audioTrackID, peerID, isLocal = f
             </Fragment>
           ) : (
             <Fragment>
+              <StatsRow show={isNotNullish(qoe)} label="QoE" value={qoe} />
               <StatsRow
                 show={isNotNullishAndNot0(videoTrackStats?.frameWidth)}
                 label="Width"

package/src/Stats/useQoE.ts

@@ -0,0 +1,79 @@
+import { useRef } from 'react';
+import { usePrevious } from 'react-use';
+import { HMSTrackID, selectHMSStats, useHMSStatsStore } from '@100mslive/react-sdk';
+
+interface UseQoEProps {
+  videoTrackID?: HMSTrackID;
+  audioTrackID?: HMSTrackID;
+  isLocal?: boolean;
+}
+
+const EXPECTED_RESOLUTION = 1280 * 720;
+
+const clip = (value: number, min_value: number, max_value: number) => {
+  return Math.max(Math.min(value, max_value), min_value);
+};
+
+/**
+ * calculate QoE using 5 params:
+ * p1:freeze_duration_norm
+ * p2:resolution_norm
+ * p3:fps_norm
+ * p4:delay_norm
+ * p5:audio_concealed_norm
+ * the formula is 5*(p1)^3 * (p2)^0.3 * (p3)^0.5 * (p4)^1 * (p5)*2
+ *
+ * https://github.com/100mslive/webrtc-benchmark/blob/daily/sssd.py#L112
+ */
+export const useQoE = ({ videoTrackID, audioTrackID, isLocal = false }: UseQoEProps) => {
+  const audioTrackStats = useHMSStatsStore(selectHMSStats.trackStatsByID(audioTrackID));
+  const videoTrackStats = useHMSStatsStore(selectHMSStats.trackStatsByID(videoTrackID));
+  const prevVideoTrackStats = usePrevious(videoTrackStats);
+  const prevAudioTrackStats = usePrevious(audioTrackStats);
+
+  const prevJitterBufferDelayMs = useRef<number>(0);
+
+  if (isLocal || (videoTrackID && !videoTrackStats) || (audioTrackID && !audioTrackStats)) {
+    return;
+  }
+
+  const resolutionNorm =
+    ((videoTrackStats?.frameWidth || 0) * (videoTrackStats?.frameHeight || 0)) / EXPECTED_RESOLUTION;
+
+  const framesDecodedInLastSec =
+    videoTrackStats?.framesDecoded && prevVideoTrackStats?.framesDecoded
+      ? videoTrackStats.framesDecoded - prevVideoTrackStats.framesDecoded
+      : 0;
+  let freezeDurationNorm =
+    1 - ((videoTrackStats?.totalFreezesDuration || 0) - (prevVideoTrackStats?.totalFreezesDuration || 0));
+  freezeDurationNorm = freezeDurationNorm < 0 ? 0.5 : freezeDurationNorm;
+  freezeDurationNorm = framesDecodedInLastSec === 0 ? 0 : freezeDurationNorm;
+
+  const fpsNorm = framesDecodedInLastSec / 30;
+
+  const prevJBDelay = prevVideoTrackStats?.jitterBufferDelay || 0;
+  const prevJBEmittedCount = prevVideoTrackStats?.jitterBufferEmittedCount || 0;
+  const currentJBDelay = (videoTrackStats?.jitterBufferDelay || 0) - prevJBDelay;
+  const currentJBEmittedCount = (videoTrackStats?.jitterBufferEmittedCount || 0) - prevJBEmittedCount;
+
+  const jitterBufferDelayMs =
+    currentJBEmittedCount > 0 ? (currentJBDelay * 1000) / currentJBEmittedCount : prevJitterBufferDelayMs.current;
+  prevJitterBufferDelayMs.current = jitterBufferDelayMs;
+  const delayNorm = 1 - Math.min(1, jitterBufferDelayMs / 2000);
+
+  const prevConcealedSamples =
+    (prevAudioTrackStats?.concealedSamples || 0) - (prevAudioTrackStats?.silentConcealedSamples || 0);
+  const currentConcealedSamples =
+    (audioTrackStats?.concealedSamples || 0) - (audioTrackStats?.silentConcealedSamples || 0) - prevConcealedSamples;
+
+  const audioConcealedNorm = 1 - currentConcealedSamples / 48000;
+
+  return (
+    5 *
+    clip(freezeDurationNorm, 0, 1) ** 3 *
+    clip(resolutionNorm, 0, 1) ** 0.3 *
+    clip(fpsNorm, 0, 1) ** 0.2 *
+    clip(delayNorm, 0, 1) ** 0.5 *
+    clip(audioConcealedNorm, 0, 1) ** 2
+  ).toFixed(2);
+};