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

package/src/Prebuilt/plugins/FlyingEmoji.jsx

@@ -1,9 +1,11 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useMedia } from 'react-use';
 import {
+  selectIsLargeRoom,
   selectLocalPeerID,
   selectPeerNameByID,
   useCustomEvent,
+  useHMSActions,
   useHMSStore,
   useHMSVanillaStore,
 } from '@100mslive/react-sdk';
@@ -43,17 +45,23 @@ const getStartingPoints = isMobile => {
 export function FlyingEmoji() {
   const localPeerId = useHMSStore(selectLocalPeerID);
   const vanillaStore = useHMSVanillaStore();
+  const hmsActions = useHMSActions();
   const [emojis, setEmojis] = useState([]);
   const isMobile = useMedia(cssConfig.media.md);
+  const isLargeRoom = useHMSStore(selectIsLargeRoom);
 
   const startingPoints = useMemo(() => getStartingPoints(isMobile), [isMobile]);
 
   const showFlyingEmoji = useCallback(
-    ({ emojiId, senderId }) => {
+    async ({ emojiId, senderId }) => {
       if (!emojiId || !senderId || document.hidden) {
         return;
       }
-      const senderPeerName = vanillaStore.getState(selectPeerNameByID(senderId));
+      let senderPeerName = vanillaStore.getState(selectPeerNameByID(senderId));
+      if (!senderPeerName && isLargeRoom) {
+        const sender = await hmsActions.getPeer(senderId);
+        senderPeerName = sender?.name;
+      }
       const nameToShow = localPeerId === senderId ? 'You' : senderPeerName;
       const startingPoint = startingPoints[emojiCount % startingPoints.length];
       const id = emojiCount++;
@@ -71,7 +79,7 @@ export function FlyingEmoji() {
         ];
       });
     },
-    [localPeerId, vanillaStore, startingPoints],
+    [vanillaStore, isLargeRoom, localPeerId, startingPoints, hmsActions],
   );
 
   useCustomEvent({
@@ -118,24 +126,28 @@ export function FlyingEmoji() {
             <Box>
               <em-emoji id={emoji.emojiId} size="48px" set="apple"></em-emoji>
             </Box>
-            <Box
-              css={{
-                width: 'fit-content',
-                padding: '$2 $4',
-                background: '$surface_bright',
-                borderRadius: '$1',
-              }}
-            >
-              <Text
+            {emoji.senderName ? (
+              <Box
                 css={{
-                  fontSize: '$space$6',
-                  lineHeight: '$xs',
-                  color: '$on_surface_high',
+                  width: 'fit-content',
+                  padding: '$2 $4',
+                  background: '$surface_bright',
+                  borderRadius: '$1',
                 }}
               >
-                {emoji.senderName}
-              </Text>
-            </Box>
+                <Text
+                  css={{
+                    fontSize: '$space$6',
+                    lineHeight: '$xs',
+                    color: '$on_surface_high',
+                  }}
+                >
+                  {emoji.senderName}
+                </Text>
+              </Box>
+            ) : (
+              ''
+            )}
           </Flex>
         );
       })}

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);
+};