@microsoft/teams-js 2.14.0-beta.1 → 2.14.0

package/dist/MicrosoftTeams.js

@@ -824,6 +824,7 @@ __webpack_require__.d(__webpack_exports__, {
   "appEntity": () => (/* reexport */ appEntity),
   "appInitialization": () => (/* reexport */ appInitialization),
   "appInstallDialog": () => (/* reexport */ appInstallDialog),
+  "appNotification": () => (/* reexport */ appNotification),
   "authentication": () => (/* reexport */ authentication),
   "barCode": () => (/* reexport */ barCode),
   "calendar": () => (/* reexport */ calendar),
@@ -2089,7 +2090,7 @@ var _minRuntimeConfigToUninitialize = {
  * @hidden
  *  Package version.
  */
-var version = "2.14.0-beta.1";
+var version = "2.14.0";
 
 ;// CONCATENATED MODULE: ./src/internal/internalAPIs.ts
 
@@ -5709,6 +5710,135 @@ var appInstallDialog;
     appInstallDialog.isSupported = isSupported;
 })(appInstallDialog || (appInstallDialog = {}));
 
+;// CONCATENATED MODULE: ./src/public/appNotification.ts
+
+
+
+
+/**
+ * Namespace to interact with the appNotification specific part of the SDK
+ * @beta
+ */
+var appNotification;
+(function (appNotification) {
+    /**
+     * @internal
+     *
+     * @hidden
+     *
+     * @beta
+     *
+     * This converts the notifcationActionUrl from a URL type to a string type for proper flow across the iframe
+     * @param notificationDisplayParam - appNotification display parameter with the notificationActionUrl as a URL type
+     * @returns a serialized object that can be sent to the host SDK
+     */
+    function serializeParam(notificationDisplayParam) {
+        var _a;
+        return {
+            title: notificationDisplayParam.title,
+            content: notificationDisplayParam.content,
+            notificationIconAsSring: (_a = notificationDisplayParam.icon) === null || _a === void 0 ? void 0 : _a.href,
+            displayDurationInSeconds: notificationDisplayParam.displayDurationInSeconds,
+            notificationActionUrlAsString: notificationDisplayParam.notificationActionUrl.href,
+        };
+    }
+    /**
+     * Checks the valididty of the URL passed
+     *
+     * @param url
+     * @returns True if a valid url was passed
+     *
+     * @beta
+     */
+    function isValidUrl(url) {
+        var validProtocols = ['https:'];
+        return validProtocols.includes(url.protocol);
+    }
+    /**
+     * Validates that the input string is of property length
+     *
+     * @param inputString and maximumLength
+     * @returns True if string length is within specified limit
+     *
+     * @beta
+     */
+    function isValidLength(inputString, maxLength) {
+        return inputString.length <= maxLength;
+    }
+    /**
+     * Validates that all the required appNotification display parameters are either supplied or satisfy the required checks
+     * @param notificationDisplayParam
+     * @throws Error if any of the required parameters aren't supplied
+     * @throws Error if content or title length is beyond specific limit
+     * @throws Error if invalid url is passed
+     * @returns void
+     *
+     * @beta
+     */
+    function validateNotificationDisplayParams(notificationDisplayParam) {
+        var maxTitleLength = 75;
+        var maxContentLength = 1500;
+        if (!notificationDisplayParam.title) {
+            throw new Error('Must supply notification title');
+        }
+        if (!isValidLength(notificationDisplayParam.title, maxTitleLength)) {
+            throw new Error("Invalid notification title length: Maximum title length ".concat(maxTitleLength, ", title length supplied ").concat(notificationDisplayParam.title.length));
+        }
+        if (!notificationDisplayParam.content) {
+            throw new Error('Must supply notification content');
+        }
+        if (!isValidLength(notificationDisplayParam.content, maxContentLength)) {
+            throw new Error("Invalid notification content length: Maximum content length ".concat(maxContentLength, ", content length supplied ").concat(notificationDisplayParam.content.length));
+        }
+        if (!notificationDisplayParam.notificationActionUrl) {
+            throw new Error('Must supply notification url');
+        }
+        if (!isValidUrl(notificationDisplayParam.notificationActionUrl)) {
+            throw new Error('Invalid notificationAction url');
+        }
+        if ((notificationDisplayParam === null || notificationDisplayParam === void 0 ? void 0 : notificationDisplayParam.icon) !== undefined && !isValidUrl(notificationDisplayParam === null || notificationDisplayParam === void 0 ? void 0 : notificationDisplayParam.icon)) {
+            throw new Error('Invalid icon url');
+        }
+        if (!notificationDisplayParam.displayDurationInSeconds) {
+            throw new Error('Must supply notification display duration in seconds');
+        }
+        if (notificationDisplayParam.displayDurationInSeconds < 0) {
+            throw new Error('Notification display time must be greater than zero');
+        }
+    }
+    /**
+     * Displays appNotification after making a validiity check on all of the required parameters, by calling the validateNotificationDisplayParams helper function
+     * An interface object containing all the required parameters to be displayed on the notification would be passed in here
+     * The notificationDisplayParam would be serialized before passing across to the message handler to ensure all objects passed contain simple parameters that would properly pass across the Iframe
+     * @param notificationdisplayparam - Interface object with all the parameters required to display an appNotificiation
+     * @returns a promise resolution upon conclusion
+     * @throws Error if appNotification capability is not supported
+     * @throws Error if notficationDisplayParam was not validated successfully
+     *
+     * @beta
+     */
+    function displayInAppNotification(notificationDisplayParam) {
+        ensureInitialized(runtime, FrameContexts.content, FrameContexts.stage, FrameContexts.sidePanel, FrameContexts.meetingStage);
+        if (!isSupported()) {
+            throw errorNotSupportedOnPlatform;
+        }
+        validateNotificationDisplayParams(notificationDisplayParam);
+        return sendAndHandleSdkError('appNotification.displayNotification', serializeParam(notificationDisplayParam));
+    }
+    appNotification.displayInAppNotification = displayInAppNotification;
+    /**
+     * Checks if appNotification is supported by the host
+     * @returns boolean to represent whether the appNotification capability is supported
+     * @throws Error if {@linkcode app.initialize} has not successfully completed
+     *
+     * @beta
+     */
+    function isSupported() {
+        return ensureInitialized(runtime) && runtime.supports.appNotification ? true : false;
+    }
+    appNotification.isSupported = isSupported;
+})(appNotification || (appNotification = {}));
+
 ;// CONCATENATED MODULE: ./src/public/media.ts
 /* eslint-disable @typescript-eslint/explicit-member-accessibility */
 var __extends = (undefined && undefined.__extends) || (function () {
@@ -7891,6 +8021,274 @@ var profile;
     profile.isSupported = isSupported;
 })(profile || (profile = {}));
 
+;// CONCATENATED MODULE: ./src/internal/videoFrameTick.ts
+
+var VideoFrameTick = /** @class */ (function () {
+    function VideoFrameTick() {
+    }
+    VideoFrameTick.setTimeout = function (callback, timeoutInMs) {
+        var startedAtInMs = performance.now();
+        var id = generateGUID();
+        VideoFrameTick.setTimeoutCallbacks[id] = {
+            callback: callback,
+            timeoutInMs: timeoutInMs,
+            startedAtInMs: startedAtInMs,
+        };
+        return id;
+    };
+    VideoFrameTick.clearTimeout = function (id) {
+        delete VideoFrameTick.setTimeoutCallbacks[id];
+    };
+    VideoFrameTick.setInterval = function (callback, intervalInMs) {
+        VideoFrameTick.setTimeout(function next() {
+            callback();
+            VideoFrameTick.setTimeout(next, intervalInMs);
+        }, intervalInMs);
+    };
+    /**
+     * Call this function whenever a frame comes in, it will check if any timeout is due and call the callback
+     */
+    VideoFrameTick.tick = function () {
+        var now = performance.now();
+        var timeoutIds = [];
+        // find all the timeouts that are due,
+        // not to invoke them in the loop to avoid modifying the collection while iterating
+        for (var key in VideoFrameTick.setTimeoutCallbacks) {
+            var callback = VideoFrameTick.setTimeoutCallbacks[key];
+            var start = callback.startedAtInMs;
+            if (now - start >= callback.timeoutInMs) {
+                timeoutIds.push(key);
+            }
+        }
+        // invoke the callbacks
+        for (var _i = 0, timeoutIds_1 = timeoutIds; _i < timeoutIds_1.length; _i++) {
+            var id = timeoutIds_1[_i];
+            var callback = VideoFrameTick.setTimeoutCallbacks[id];
+            callback.callback();
+            delete VideoFrameTick.setTimeoutCallbacks[id];
+        }
+    };
+    VideoFrameTick.setTimeoutCallbacks = {};
+    return VideoFrameTick;
+}());
+
+
+;// CONCATENATED MODULE: ./src/internal/videoPerformanceStatistics.ts
+
+var VideoPerformanceStatistics = /** @class */ (function () {
+    function VideoPerformanceStatistics(distributionBinSize, 
+    /**
+     * Function to report the statistics result
+     */
+    reportStatisticsResult) {
+        this.reportStatisticsResult = reportStatisticsResult;
+        this.sampleCount = 0;
+        this.distributionBins = new Uint32Array(distributionBinSize);
+    }
+    /**
+     * Call this function before processing every frame
+     */
+    VideoPerformanceStatistics.prototype.processStarts = function (effectId, frameWidth, frameHeight, effectParam) {
+        VideoFrameTick.tick();
+        if (!this.suitableForThisSession(effectId, frameWidth, frameHeight, effectParam)) {
+            this.reportAndResetSession(this.getStatistics(), effectId, effectParam, frameWidth, frameHeight);
+        }
+        this.start();
+    };
+    VideoPerformanceStatistics.prototype.processEnds = function () {
+        // calculate duration of the process and record it
+        var durationInMillisecond = performance.now() - this.frameProcessingStartedAt;
+        var binIndex = Math.floor(Math.max(0, Math.min(this.distributionBins.length - 1, durationInMillisecond)));
+        this.distributionBins[binIndex] += 1;
+        this.sampleCount += 1;
+    };
+    VideoPerformanceStatistics.prototype.getStatistics = function () {
+        if (!this.currentSession) {
+            return null;
+        }
+        return {
+            effectId: this.currentSession.effectId,
+            effectParam: this.currentSession.effectParam,
+            frameHeight: this.currentSession.frameHeight,
+            frameWidth: this.currentSession.frameWidth,
+            duration: performance.now() - this.currentSession.startedAtInMs,
+            sampleCount: this.sampleCount,
+            distributionBins: this.distributionBins.slice(),
+        };
+    };
+    VideoPerformanceStatistics.prototype.start = function () {
+        this.frameProcessingStartedAt = performance.now();
+    };
+    VideoPerformanceStatistics.prototype.suitableForThisSession = function (effectId, frameWidth, frameHeight, effectParam) {
+        return (this.currentSession &&
+            this.currentSession.effectId === effectId &&
+            this.currentSession.effectParam === effectParam &&
+            this.currentSession.frameWidth === frameWidth &&
+            this.currentSession.frameHeight === frameHeight);
+    };
+    VideoPerformanceStatistics.prototype.reportAndResetSession = function (result, effectId, effectParam, frameWidth, frameHeight) {
+        var _this = this;
+        result && this.reportStatisticsResult(result);
+        this.resetCurrentSession(this.getNextTimeout(effectId, this.currentSession), effectId, effectParam, frameWidth, frameHeight);
+        if (this.timeoutId) {
+            VideoFrameTick.clearTimeout(this.timeoutId);
+        }
+        this.timeoutId = VideoFrameTick.setTimeout((function () { return _this.reportAndResetSession(_this.getStatistics(), effectId, effectParam, frameWidth, frameHeight); }).bind(this), this.currentSession.timeoutInMs);
+    };
+    VideoPerformanceStatistics.prototype.resetCurrentSession = function (timeoutInMs, effectId, effectParam, frameWidth, frameHeight) {
+        this.currentSession = {
+            startedAtInMs: performance.now(),
+            timeoutInMs: timeoutInMs,
+            effectId: effectId,
+            effectParam: effectParam,
+            frameWidth: frameWidth,
+            frameHeight: frameHeight,
+        };
+        this.sampleCount = 0;
+        this.distributionBins.fill(0);
+    };
+    // send the statistics result every n second, where n starts from 1, 2, 4...and finally stays at every 30 seconds.
+    VideoPerformanceStatistics.prototype.getNextTimeout = function (effectId, currentSession) {
+        // only reset timeout when new session or effect changed
+        if (!currentSession || currentSession.effectId !== effectId) {
+            return VideoPerformanceStatistics.initialSessionTimeoutInMs;
+        }
+        return Math.min(VideoPerformanceStatistics.maxSessionTimeoutInMs, currentSession.timeoutInMs * 2);
+    };
+    VideoPerformanceStatistics.initialSessionTimeoutInMs = 1000;
+    VideoPerformanceStatistics.maxSessionTimeoutInMs = 1000 * 30;
+    return VideoPerformanceStatistics;
+}());
+
+
+;// CONCATENATED MODULE: ./src/internal/videoPerformanceMonitor.ts
+
+
+/**
+ * This class is used to monitor the performance of video processing, and report performance events.
+ */
+var VideoPerformanceMonitor = /** @class */ (function () {
+    function VideoPerformanceMonitor(reportPerformanceEvent) {
+        var _this = this;
+        this.reportPerformanceEvent = reportPerformanceEvent;
+        this.isFirstFrameProcessed = false;
+        this.frameProcessTimeLimit = 100;
+        this.frameProcessingStartedAt = 0;
+        this.frameProcessingTimeCost = 0;
+        this.processedFrameCount = 0;
+        this.performanceStatistics = new VideoPerformanceStatistics(VideoPerformanceMonitor.distributionBinSize, function (result) {
+            return _this.reportPerformanceEvent('video.performance.performanceDataGenerated', [result]);
+        });
+    }
+    /**
+     * Start to check frame processing time intervally
+     * and report performance event if the average frame processing time is too long.
+     */
+    VideoPerformanceMonitor.prototype.startMonitorSlowFrameProcessing = function () {
+        var _this = this;
+        VideoFrameTick.setInterval(function () {
+            if (_this.processedFrameCount === 0) {
+                return;
+            }
+            var averageFrameProcessingTime = _this.frameProcessingTimeCost / _this.processedFrameCount;
+            if (averageFrameProcessingTime > _this.frameProcessTimeLimit) {
+                _this.reportPerformanceEvent('video.performance.frameProcessingSlow', [averageFrameProcessingTime]);
+            }
+            _this.frameProcessingTimeCost = 0;
+            _this.processedFrameCount = 0;
+        }, VideoPerformanceMonitor.calculateFPSInterval);
+    };
+    /**
+     * Define the time limit of frame processing.
+     * When the average frame processing time is longer than the time limit, a "video.performance.frameProcessingSlow" event will be reported.
+     * @param timeLimit
+     */
+    VideoPerformanceMonitor.prototype.setFrameProcessTimeLimit = function (timeLimit) {
+        this.frameProcessTimeLimit = timeLimit;
+    };
+    /**
+     * Call this function when the app starts to switch to the new video effect
+     */
+    VideoPerformanceMonitor.prototype.reportApplyingVideoEffect = function (effectId, effectParam) {
+        var _a, _b;
+        if (((_a = this.applyingEffect) === null || _a === void 0 ? void 0 : _a.effectId) === effectId && ((_b = this.applyingEffect) === null || _b === void 0 ? void 0 : _b.effectParam) === effectParam) {
+            return;
+        }
+        this.applyingEffect = {
+            effectId: effectId,
+            effectParam: effectParam,
+        };
+        this.appliedEffect = undefined;
+    };
+    /**
+     * Call this function when the new video effect is ready
+     */
+    VideoPerformanceMonitor.prototype.reportVideoEffectChanged = function (effectId, effectParam) {
+        if (this.applyingEffect === undefined ||
+            (this.applyingEffect.effectId !== effectId && this.applyingEffect.effectParam !== effectParam)) {
+            // don't handle obsoleted event
+            return;
+        }
+        this.appliedEffect = {
+            effectId: effectId,
+            effectParam: effectParam,
+        };
+        this.applyingEffect = undefined;
+        this.isFirstFrameProcessed = false;
+    };
+    /**
+     * Call this function when the app starts to process a video frame
+     */
+    VideoPerformanceMonitor.prototype.reportStartFrameProcessing = function (frameWidth, frameHeight) {
+        VideoFrameTick.tick();
+        if (!this.appliedEffect) {
+            return;
+        }
+        this.frameProcessingStartedAt = performance.now();
+        this.performanceStatistics.processStarts(this.appliedEffect.effectId, frameWidth, frameHeight, this.appliedEffect.effectParam);
+    };
+    /**
+     * Call this function when the app finishes successfully processing a video frame
+     */
+    VideoPerformanceMonitor.prototype.reportFrameProcessed = function () {
+        var _a;
+        if (!this.appliedEffect) {
+            return;
+        }
+        this.processedFrameCount++;
+        this.frameProcessingTimeCost += performance.now() - this.frameProcessingStartedAt;
+        this.performanceStatistics.processEnds();
+        if (!this.isFirstFrameProcessed) {
+            this.isFirstFrameProcessed = true;
+            this.reportPerformanceEvent('video.performance.firstFrameProcessed', [
+                Date.now(),
+                this.appliedEffect.effectId,
+                (_a = this.appliedEffect) === null || _a === void 0 ? void 0 : _a.effectParam,
+            ]);
+        }
+    };
+    /**
+     * Call this function when the app starts to get the texture stream
+     */
+    VideoPerformanceMonitor.prototype.reportGettingTextureStream = function (streamId) {
+        this.gettingTextureStreamStartedAt = performance.now();
+        this.currentStreamId = streamId;
+    };
+    /**
+     * Call this function when the app finishes successfully getting the texture stream
+     */
+    VideoPerformanceMonitor.prototype.reportTextureStreamAcquired = function () {
+        if (this.gettingTextureStreamStartedAt !== undefined) {
+            var timeTaken = performance.now() - this.gettingTextureStreamStartedAt;
+            this.reportPerformanceEvent('video.performance.textureStreamAcquired', [this.currentStreamId, timeTaken]);
+        }
+    };
+    VideoPerformanceMonitor.distributionBinSize = 1000;
+    VideoPerformanceMonitor.calculateFPSInterval = 1000;
+    return VideoPerformanceMonitor;
+}());
+
+
 ;// CONCATENATED MODULE: ./src/internal/videoUtils.ts
 var videoUtils_awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
@@ -7937,14 +8335,14 @@ var videoUtils_generator = (undefined && undefined.__generator) || function (thi
  * @hidden
  * Create a MediaStreamTrack from the media stream with the given streamId and processed by videoFrameHandler.
  */
-function processMediaStream(streamId, videoFrameHandler, notifyError) {
+function processMediaStream(streamId, videoFrameHandler, notifyError, videoPerformanceMonitor) {
     return videoUtils_awaiter(this, void 0, void 0, function () {
         var _a;
         return videoUtils_generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
                     _a = createProcessedStreamGenerator;
-                    return [4 /*yield*/, getInputVideoTrack(streamId, notifyError)];
+                    return [4 /*yield*/, getInputVideoTrack(streamId, notifyError, videoPerformanceMonitor)];
                 case 1: return [2 /*return*/, _a.apply(void 0, [_b.sent(), new DefaultTransformer(notifyError, videoFrameHandler)])];
             }
         });
@@ -7958,14 +8356,14 @@ function processMediaStream(streamId, videoFrameHandler, notifyError) {
  * @internal
  * Limited to Microsoft-internal use
  */
-function processMediaStreamWithMetadata(streamId, videoFrameHandler, notifyError) {
+function processMediaStreamWithMetadata(streamId, videoFrameHandler, notifyError, videoPerformanceMonitor) {
     return videoUtils_awaiter(this, void 0, void 0, function () {
         var _a;
         return videoUtils_generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
                     _a = createProcessedStreamGenerator;
-                    return [4 /*yield*/, getInputVideoTrack(streamId, notifyError)];
+                    return [4 /*yield*/, getInputVideoTrack(streamId, notifyError, videoPerformanceMonitor)];
                 case 1: return [2 /*return*/, _a.apply(void 0, [_b.sent(), new TransformerWithMetadata(notifyError, videoFrameHandler)])];
             }
         });
@@ -7974,7 +8372,7 @@ function processMediaStreamWithMetadata(streamId, videoFrameHandler, notifyError
 /**
  * Get the video track from the media stream gotten from chrome.webview.getTextureStream(streamId).
  */
-function getInputVideoTrack(streamId, notifyError) {
+function getInputVideoTrack(streamId, notifyError, videoPerformanceMonitor) {
     return videoUtils_awaiter(this, void 0, void 0, function () {
         var chrome, mediaStream, tracks, error_1, errorMsg;
         return videoUtils_generator(this, function (_a) {
@@ -7987,6 +8385,7 @@ function getInputVideoTrack(streamId, notifyError) {
                     _a.label = 1;
                 case 1:
                     _a.trys.push([1, 3, , 4]);
+                    videoPerformanceMonitor === null || videoPerformanceMonitor === void 0 ? void 0 : videoPerformanceMonitor.reportGettingTextureStream(streamId);
                     return [4 /*yield*/, chrome.webview.getTextureStream(streamId)];
                 case 2:
                     mediaStream = _a.sent();
@@ -7994,6 +8393,7 @@ function getInputVideoTrack(streamId, notifyError) {
                     if (tracks.length === 0) {
                         throw new Error("No video track in stream ".concat(streamId));
                     }
+                    videoPerformanceMonitor === null || videoPerformanceMonitor === void 0 ? void 0 : videoPerformanceMonitor.reportTextureStreamAcquired();
                     return [2 /*return*/, tracks[0]];
                 case 3:
                     error_1 = _a.sent();
@@ -8319,10 +8719,12 @@ var TransformerWithMetadata = /** @class */ (function () {
 /**
  * @hidden
  */
-function createEffectParameterChangeCallback(callback) {
+function createEffectParameterChangeCallback(callback, videoPerformanceMonitor) {
     return function (effectId, effectParam) {
+        videoPerformanceMonitor === null || videoPerformanceMonitor === void 0 ? void 0 : videoPerformanceMonitor.reportApplyingVideoEffect(effectId || '', effectParam);
         callback(effectId, effectParam)
             .then(function () {
+            videoPerformanceMonitor === null || videoPerformanceMonitor === void 0 ? void 0 : videoPerformanceMonitor.reportVideoEffectChanged(effectId || '', effectParam);
             sendMessageToParent('video.videoEffectReadiness', [true, effectId, undefined, effectParam]);
         })
             .catch(function (reason) {
@@ -8398,12 +8800,16 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
 
 
 
+
 /**
  * Namespace to video extensibility of the SDK
  * @beta
  */
 var video;
 (function (video) {
+    var videoPerformanceMonitor = inServerSideRenderingEnvironment()
+        ? undefined
+        : new VideoPerformanceMonitor(sendMessageToParent);
     /**
      * Video frame format enum, currently only support NV12
      * @beta
@@ -8489,6 +8895,9 @@ var video;
         if (!parameters.videoFrameHandler || !parameters.videoBufferHandler) {
             throw new Error('Both videoFrameHandler and videoBufferHandler must be provided');
         }
+        registerHandler('video.setFrameProcessTimeLimit', function (timeLimitInfo) {
+            return videoPerformanceMonitor === null || videoPerformanceMonitor === void 0 ? void 0 : videoPerformanceMonitor.setFrameProcessTimeLimit(timeLimitInfo.timeLimit);
+        }, false);
         if (doesSupportMediaStream()) {
             registerForMediaStream(parameters.videoFrameHandler, parameters.config);
         }
@@ -8499,6 +8908,7 @@ var video;
             // should not happen if isSupported() is true
             throw errorNotSupportedOnPlatform;
         }
+        videoPerformanceMonitor === null || videoPerformanceMonitor === void 0 ? void 0 : videoPerformanceMonitor.startMonitorSlowFrameProcessing();
     }
     video.registerForVideoFrame = registerForVideoFrame;
     /**
@@ -8527,7 +8937,7 @@ var video;
         if (!isSupported()) {
             throw errorNotSupportedOnPlatform;
         }
-        registerHandler('video.effectParameterChange', createEffectParameterChangeCallback(callback), false);
+        registerHandler('video.effectParameterChange', createEffectParameterChangeCallback(callback, videoPerformanceMonitor), false);
         sendMessageToParent('video.registerForVideoEffect');
     }
     video.registerForVideoEffect = registerForVideoEffect;
@@ -8569,13 +8979,14 @@ var video;
             throw errorNotSupportedOnPlatform;
         }
         registerHandler('video.startVideoExtensibilityVideoStream', function (mediaStreamInfo) { return video_awaiter(_this, void 0, void 0, function () {
-            var streamId, generator;
+            var streamId, monitoredVideoFrameHandler, generator;
             var _a, _b;
             return video_generator(this, function (_c) {
                 switch (_c.label) {
                     case 0:
                         streamId = mediaStreamInfo.streamId;
-                        return [4 /*yield*/, processMediaStream(streamId, videoFrameHandler, notifyError)];
+                        monitoredVideoFrameHandler = createMonitoredVideoFrameHandler(videoFrameHandler, videoPerformanceMonitor);
+                        return [4 /*yield*/, processMediaStream(streamId, monitoredVideoFrameHandler, notifyError, videoPerformanceMonitor)];
                     case 1:
                         generator = _c.sent();
                         // register the video track with processed frames back to the stream:
@@ -8586,6 +8997,24 @@ var video;
         }); }, false);
         sendMessageToParent('video.mediaStream.registerForVideoFrame', [config]);
     }
+    function createMonitoredVideoFrameHandler(videoFrameHandler, videoPerformanceMonitor) {
+        var _this = this;
+        return function (videoFrameData) { return video_awaiter(_this, void 0, void 0, function () {
+            var originalFrame, processedFrame;
+            return video_generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        originalFrame = videoFrameData.videoFrame;
+                        videoPerformanceMonitor === null || videoPerformanceMonitor === void 0 ? void 0 : videoPerformanceMonitor.reportStartFrameProcessing(originalFrame.codedWidth, originalFrame.codedHeight);
+                        return [4 /*yield*/, videoFrameHandler(videoFrameData)];
+                    case 1:
+                        processedFrame = _a.sent();
+                        videoPerformanceMonitor === null || videoPerformanceMonitor === void 0 ? void 0 : videoPerformanceMonitor.reportFrameProcessed();
+                        return [2 /*return*/, processedFrame];
+                }
+            });
+        }); };
+    }
     function registerForVideoBuffer(videoBufferHandler, config) {
         ensureInitialized(runtime, FrameContexts.sidePanel);
         if (!isSupported() || !doesSupportSharedFrame()) {
@@ -8596,7 +9025,9 @@ var video;
         function (videoBufferData) {
             if (videoBufferData) {
                 var timestamp_1 = videoBufferData.timestamp;
+                videoPerformanceMonitor === null || videoPerformanceMonitor === void 0 ? void 0 : videoPerformanceMonitor.reportStartFrameProcessing(videoBufferData.width, videoBufferData.height);
                 videoBufferHandler(normalizeVideoBufferData(videoBufferData), function () {
+                    videoPerformanceMonitor === null || videoPerformanceMonitor === void 0 ? void 0 : videoPerformanceMonitor.reportFrameProcessed();
                     notifyVideoFrameProcessed(timestamp_1);
                 }, notifyError);
             }
@@ -10346,6 +10777,7 @@ var marketplace;
 
 
 
+
 
 
 
@@ -11625,6 +12057,7 @@ var videoEx_generator = (undefined && undefined.__generator) || function (thisAr
 
 
 
+
 /**
  * @hidden
  * Extended video API
@@ -11635,6 +12068,9 @@ var videoEx_generator = (undefined && undefined.__generator) || function (thisAr
  */
 var videoEx;
 (function (videoEx) {
+    var videoPerformanceMonitor = inServerSideRenderingEnvironment()
+        ? undefined
+        : new VideoPerformanceMonitor(sendMessageToParent);
     /**
      * @hidden
      * Error level when notifying errors to the host, the host will decide what to do acording to the error level.
@@ -11670,6 +12106,7 @@ var videoEx;
             throw new Error('Both videoFrameHandler and videoBufferHandler must be provided');
         }
         if (ensureInitialized(runtime, FrameContexts.sidePanel)) {
+            registerHandler('video.setFrameProcessTimeLimit', function (timeLimit) { return videoPerformanceMonitor === null || videoPerformanceMonitor === void 0 ? void 0 : videoPerformanceMonitor.setFrameProcessTimeLimit(timeLimit); }, false);
             if ((_a = runtime.supports.video) === null || _a === void 0 ? void 0 : _a.mediaStream) {
                 registerHandler('video.startVideoExtensibilityVideoStream', function (mediaStreamInfo) { return videoEx_awaiter(_this, void 0, void 0, function () {
                     var streamId, metadataInTexture, generator, _a;
@@ -11679,11 +12116,11 @@ var videoEx;
                             case 0:
                                 streamId = mediaStreamInfo.streamId, metadataInTexture = mediaStreamInfo.metadataInTexture;
                                 if (!metadataInTexture) return [3 /*break*/, 2];
-                                return [4 /*yield*/, processMediaStreamWithMetadata(streamId, parameters.videoFrameHandler, notifyError)];
+                                return [4 /*yield*/, processMediaStreamWithMetadata(streamId, parameters.videoFrameHandler, notifyError, videoPerformanceMonitor)];
                             case 1:
                                 _a = _d.sent();
                                 return [3 /*break*/, 4];
-                            case 2: return [4 /*yield*/, processMediaStream(streamId, parameters.videoFrameHandler, notifyError)];
+                            case 2: return [4 /*yield*/, processMediaStream(streamId, parameters.videoFrameHandler, notifyError, videoPerformanceMonitor)];
                             case 3:
                                 _a = _d.sent();
                                 _d.label = 4;
@@ -11701,8 +12138,10 @@ var videoEx;
             else if ((_b = runtime.supports.video) === null || _b === void 0 ? void 0 : _b.sharedFrame) {
                 registerHandler('video.newVideoFrame', function (videoBufferData) {
                     if (videoBufferData) {
+                        videoPerformanceMonitor === null || videoPerformanceMonitor === void 0 ? void 0 : videoPerformanceMonitor.reportStartFrameProcessing(videoBufferData.width, videoBufferData.height);
                         var timestamp_1 = videoBufferData.timestamp;
                         parameters.videoBufferHandler(normalizedVideoBufferData(videoBufferData), function () {
+                            videoPerformanceMonitor === null || videoPerformanceMonitor === void 0 ? void 0 : videoPerformanceMonitor.reportFrameProcessed();
                             notifyVideoFrameProcessed(timestamp_1);
                         }, notifyError);
                     }
@@ -11713,6 +12152,7 @@ var videoEx;
                 // should not happen if isSupported() is true
                 throw errorNotSupportedOnPlatform;
             }
+            videoPerformanceMonitor === null || videoPerformanceMonitor === void 0 ? void 0 : videoPerformanceMonitor.startMonitorSlowFrameProcessing();
         }
     }
     videoEx.registerForVideoFrame = registerForVideoFrame;
@@ -11756,7 +12196,7 @@ var videoEx;
         if (!isSupported()) {
             throw errorNotSupportedOnPlatform;
         }
-        registerHandler('video.effectParameterChange', createEffectParameterChangeCallback(callback), false);
+        registerHandler('video.effectParameterChange', createEffectParameterChangeCallback(callback, videoPerformanceMonitor), false);
         sendMessageToParent('video.registerForVideoEffect');
     }
     videoEx.registerForVideoEffect = registerForVideoEffect;