add perf markers

Azure · Mar 6, 2024 · c0e4b89 · c0e4b89
1 parent 9f55109
commit c0e4b89
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 4 deletions.
diff --git a/common/config/webpack/sampleapp.webpack.config.js b/common/config/webpack/sampleapp.webpack.config.js
@@ -12,8 +12,7 @@ const webpackConfig = (sampleAppDir, env, babelConfig) => {
     entry: {
       build: './src/index.tsx'
     },
-    mode: env.production ? 'production' : 'development',
-    ...(env.production || !env.development ? {} : { devtool: 'eval-source-map' }),
+    mode: 'production',
     resolve:  {
       extensions: ['.ts', '.tsx', '.js'],
       alias: env.production ? {

diff --git a/packages/react-components/src/components/VideoGallery/useVideoStreamLifecycleMaintainer.ts b/packages/react-components/src/components/VideoGallery/useVideoStreamLifecycleMaintainer.ts
@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { VideoStreamOptions, CreateVideoStreamViewResult, ViewScalingMode } from '../../types';
 
 /** @private */
@@ -49,8 +49,18 @@ const useVideoStreamLifecycleMaintainer = (
     scalingMode
   } = props;
 
+  const wasVideoStreamViewAvailable = useRef(false);
   const [videoStreamViewResult, setVideoStreamViewResult] = useState<CreateVideoStreamViewResult | undefined>();
 
+  useEffect(() => {
+    performance.mark('videoStreamView-notAvailable');
+  }, []);
+
+  if (wasVideoStreamViewAvailable.current === false && videoStreamViewResult) {
+    wasVideoStreamViewAvailable.current = true;
+    performance.mark('videoStreamView-available');
+  }
+
   useEffect(() => {
     if (isStreamAvailable && !renderElementExists) {
       onCreateStreamView?.({ isMirrored, scalingMode })?.then((result) => {

diff --git a/packages/react-composites/src/composites/CallComposite/CallComposite.tsx b/packages/react-composites/src/composites/CallComposite/CallComposite.tsx
@@ -438,6 +438,8 @@ const MainScreen = (props: MainScreenProps): JSX.Element => {
         <ConfigurationPage
           mobileView={props.mobileView}
           startCallHandler={(): void => {
+            console.log('perftests-startCall');
+            performance.mark('perftests-startCall');
             if (callees) {
               adapter.startCall(callees);
             } else {

diff --git a/samples/CallWithChat/src/app/views/CallScreen.tsx b/samples/CallWithChat/src/app/views/CallScreen.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { TeamsMeetingLinkLocator } from '@azure/communication-calling';
+import { CallState, TeamsMeetingLinkLocator } from '@azure/communication-calling';
 import { CommunicationUserIdentifier } from '@azure/communication-common';
 import {
   toFlatCommunicationIdentifier,
@@ -22,6 +22,9 @@ import { WEB_APP_TITLE } from '../utils/constants';
 import { useIsMobile } from '../utils/useIsMobile';
 import { isIOS } from '../utils/utils';
 
+// eslint-disable-next-line no-var, @typescript-eslint/no-explicit-any
+var pageTimings = (window as any)._pageTimings || ((window as any)._pageTimings = {});
+
 export interface CallScreenProps {
   token: string;
   userId: CommunicationUserIdentifier;
@@ -115,6 +118,9 @@ export const CallScreen = (props: CallScreenProps): JSX.Element => {
     [userId, token]
   );
 
+  const callStatus = useRef<CallState>('None');
+  const remoteParticipantIdsWithVideosReadys = useRef<unknown[]>([]);
+
   const afterAdapterCreate = useCallback(
     async (adapter: CallWithChatAdapter): Promise<CallWithChatAdapter> => {
       adapter.on('callError', (e) => {
@@ -135,6 +141,44 @@ export const CallScreen = (props: CallScreenProps): JSX.Element => {
           callIdRef.current = state?.call?.id;
           console.log(`Call Id: ${callIdRef.current}`);
         }
+
+        if (state?.call?.state) {
+          if (state.call.state !== callStatus.current) {
+            callStatus.current = state.call.state;
+            performance.mark(`callStateChange-${callStatus.current}`);
+            console.log(`Call State: ${callStatus.current}`);
+          }
+        }
+
+        if (state.call?.remoteParticipants) {
+          const remoteParticipants = state.call.remoteParticipants;
+          const participantsWithVideosReady = Object.values(remoteParticipants)
+            .filter((participant) => {
+              const streams = Object.values(participant.videoStreams);
+              const videoStreamsReady = streams.some(
+                (stream) => stream.mediaStreamType === 'Video' && !!stream.view?.target
+              );
+              return videoStreamsReady;
+            })
+            .map((participant) => participant.identifier);
+
+          const newParticipantsWithVideosReady = participantsWithVideosReady.filter(
+            (participant) => !remoteParticipantIdsWithVideosReadys.current.includes(participant)
+          );
+
+          newParticipantsWithVideosReady.forEach((participant) => {
+            remoteParticipantIdsWithVideosReadys.current.push(participant);
+            performance.mark(`remoteParticipantVideoReady-${participant}`);
+            console.log(`Remote participant with video ready: ${participant}`);
+
+            // update page timings
+            // Collect perf metrics from page and add them to pageTimings object
+            performance.getEntriesByType('mark').forEach((perfMark) => {
+              pageTimings[perfMark.name] = Math.round(perfMark.startTime);
+            });
+            console.log('Page Timings:', pageTimings);
+          });
+        }
       });
       return adapter;
     },