idmission-web-sdk 2.3.124 → 2.3.126

package/dist/sdk2.esm.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { useRef, useState, useEffect, useContext, createContext, useReducer, useCallback, useMemo, useLayoutEffect, forwardRef, useImperativeHandle } from 'react';
+import React__default, { useRef, useState, useEffect, useContext, createContext, useReducer, useCallback, useMemo, useLayoutEffect, forwardRef, useImperativeHandle, memo } from 'react';
 import * as ReactDOM from 'react-dom/client';
 import platform from 'platform';
 import styled, { keyframes, useTheme, ThemeProvider as ThemeProvider$1 } from 'styled-components';
@@ -16,7 +16,6 @@ import { devtools } from 'zustand/middleware';
 import { useShallow } from 'zustand/react/shallow';
 import cn from 'clsx';
 import SignatureCanvas from 'react-signature-canvas';
-import { renderToString } from 'react-dom/server';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -205,7 +204,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
   return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var webSdkVersion = '2.3.124';
+var webSdkVersion = '2.3.126';
 
 function getPlatform() {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -14378,6 +14377,9 @@ function inferBlobType(blobPart) {
 
 var signatureRecorder = null;
 var signatureChunks = [];
+var ondataavailableInvocations = [];
+var ondataavailableStartTime;
+var lastCalculatedVideoChunkRate;
 var videoSignatureInitialState = {
   startRecording: function startRecording() {
     return null;
@@ -14402,6 +14404,10 @@ var videoSignatureInitialState = {
   signatureValid: false,
   supportsRequestVideoFrameCallback: undefined,
   supportsRoundRect: undefined,
+  nullChunksReceived: 0,
+  timesSignatureCleared: 0,
+  finalChunkReceived: false,
+  requestDataInterval: undefined,
   onSignatureVideoCaptured: function onSignatureVideoCaptured() {
     return null;
   }
@@ -14414,8 +14420,11 @@ var useVideoSignatureStore = create()(devtools(function (set, get) {
         captureAudio = false;
       }
       if (!camera) throw new Error('Camera not found');
-      // set our flag and clear whatever we have recorded so far.
+      // clear whatever we have recorded so far.
       signatureChunks = [];
+      ondataavailableInvocations = [];
+      ondataavailableStartTime = undefined;
+      lastCalculatedVideoChunkRate = undefined;
       // start recording from the output canvas to capture the signature
       var outputStream = (_a = get().outputCanvas.current) === null || _a === void 0 ? void 0 : _a.captureStream(24);
       if (!outputStream) throw new Error('outputStream not found');
@@ -14433,77 +14442,123 @@ var useVideoSignatureStore = create()(devtools(function (set, get) {
           recordingStartedAt: e.timeStamp
         });
       };
-      var hasFirstChunk = false;
       signatureRecorder.ondataavailable = function (event) {
+        var now = performance.now();
         signatureChunks.push(event.data);
-        if (!hasFirstChunk) {
-          hasFirstChunk = true;
-          set({
-            firstChunkReceivedAt: performance.now(),
-            lastChunkReceivedAt: performance.now()
+        trackVideoChunkRate(now);
+        if (event.data.size > 0) {
+          set(function (state) {
+            var _a;
+            return {
+              firstChunkReceivedAt: (_a = state.firstChunkReceivedAt) !== null && _a !== void 0 ? _a : now,
+              lastChunkReceivedAt: now
+            };
           });
         } else {
-          set({
-            lastChunkReceivedAt: performance.now()
+          set(function (state) {
+            var _a;
+            return {
+              nullChunksReceived: state.nullChunksReceived + 1,
+              firstNullChunkReceivedAt: (_a = state.firstNullChunkReceivedAt) !== null && _a !== void 0 ? _a : now,
+              lastNullChunkReceivedAt: now
+            };
           });
         }
       };
-      signatureRecorder.start(250);
+      signatureRecorder.start();
+      var interval = setInterval(function () {
+        return signatureRecorder === null || signatureRecorder === void 0 ? void 0 : signatureRecorder.requestData();
+      }, 250);
       set({
+        requestDataInterval: interval,
         recordingStartRequestedAt: performance.now()
       });
     },
     stopRecording: function stopRecording(signatureData, imageUrl) {
       return __awaiter(this, void 0, void 0, function () {
-        var _this = this;
-        return __generator(this, function (_a) {
-          switch (_a.label) {
+        function processVideo() {
+          return __awaiter(this, void 0, void 0, function () {
+            var recordingStoppedAt, mimeType, blob, _a, onSignatureVideoCaptured, recordingStartRequestedAt, recordingStartedAt, firstChunkReceivedAt, signatureStartedAt, signatureEndedAt, acceptClickedAt, clearClickedAt, recordingStopRequestedAt, lastChunkReceivedAt, supportsRequestVideoFrameCallback, supportsRoundRect, nullChunksReceived, firstNullChunkReceivedAt, lastNullChunkReceivedAt, timesSignatureCleared, metadata;
+            return __generator(this, function (_b) {
+              if (get().recordingStoppedAt) return [2 /*return*/];
+              recordingStoppedAt = performance.now();
+              set({
+                recordingStoppedAt: recordingStoppedAt
+              });
+              mimeType = inferBlobType(signatureChunks[0]) || (signatureRecorder === null || signatureRecorder === void 0 ? void 0 : signatureRecorder.mimeType) || 'video/mp4';
+              blob = new Blob(signatureChunks, {
+                type: mimeType
+              });
+              signatureChunks = [];
+              signatureRecorder = null;
+              _a = get(), onSignatureVideoCaptured = _a.onSignatureVideoCaptured, recordingStartRequestedAt = _a.recordingStartRequestedAt, recordingStartedAt = _a.recordingStartedAt, firstChunkReceivedAt = _a.firstChunkReceivedAt, signatureStartedAt = _a.signatureStartedAt, signatureEndedAt = _a.signatureEndedAt, acceptClickedAt = _a.acceptClickedAt, clearClickedAt = _a.clearClickedAt, recordingStopRequestedAt = _a.recordingStopRequestedAt, lastChunkReceivedAt = _a.lastChunkReceivedAt, supportsRequestVideoFrameCallback = _a.supportsRequestVideoFrameCallback, supportsRoundRect = _a.supportsRoundRect, nullChunksReceived = _a.nullChunksReceived, firstNullChunkReceivedAt = _a.firstNullChunkReceivedAt, lastNullChunkReceivedAt = _a.lastNullChunkReceivedAt, timesSignatureCleared = _a.timesSignatureCleared;
+              metadata = {
+                mimeType: mimeType,
+                browserFeatures: {
+                  supportsRoundRect: supportsRoundRect,
+                  supportsRequestVideoFrameCallback: supportsRequestVideoFrameCallback
+                },
+                diagnostics: {
+                  nullChunksReceived: nullChunksReceived,
+                  firstNullChunkReceivedAt: firstNullChunkReceivedAt ? Math.ceil(firstNullChunkReceivedAt) : 0,
+                  lastNullChunkReceivedAt: lastNullChunkReceivedAt ? Math.ceil(lastNullChunkReceivedAt) : 0,
+                  finalChunkReceived: finalChunkReceived,
+                  finalChunkTimedOut: timedOut,
+                  finalChunkWaitedMs: Math.ceil(waitedMs),
+                  videoChunkRate: lastCalculatedVideoChunkRate,
+                  timesSignatureCleared: timesSignatureCleared
+                },
+                timingData: {
+                  recordingStartRequestedAt: recordingStartRequestedAt ? Math.ceil(recordingStartRequestedAt) : 0,
+                  recordingStartedAt: recordingStartedAt ? Math.ceil(recordingStartedAt) : 0,
+                  firstChunkReceivedAt: firstChunkReceivedAt ? Math.ceil(firstChunkReceivedAt) : 0,
+                  signatureStartedAt: signatureStartedAt ? Math.ceil(signatureStartedAt) : 0,
+                  signatureEndedAt: signatureEndedAt ? Math.ceil(signatureEndedAt) : 0,
+                  acceptClickedAt: acceptClickedAt ? Math.ceil(acceptClickedAt) : 0,
+                  clearClickedAt: clearClickedAt ? Math.ceil(clearClickedAt) : 0,
+                  recordingStopRequestedAt: recordingStopRequestedAt ? Math.ceil(recordingStopRequestedAt) : 0,
+                  recordingStoppedAt: Math.ceil(recordingStoppedAt),
+                  lastChunkReceivedAt: lastChunkReceivedAt ? Math.ceil(lastChunkReceivedAt) : 0
+                }
+              };
+              debug('signature video metadata', metadata);
+              onSignatureVideoCaptured(blob, signatureData !== null && signatureData !== void 0 ? signatureData : null, imageUrl !== null && imageUrl !== void 0 ? imageUrl : null, metadata);
+              return [2 /*return*/];
+            });
+          });
+        }
+        var _a, recordingStartedAt, recordingStopRequestedAt, isRecording, _b, finalChunkReceived, timedOut, waitedMs;
+        return __generator(this, function (_c) {
+          switch (_c.label) {
             case 0:
+              _a = get(), recordingStartedAt = _a.recordingStartedAt, recordingStopRequestedAt = _a.recordingStopRequestedAt;
+              isRecording = !!recordingStartedAt && !recordingStopRequestedAt;
+              if (!isRecording) return [2 /*return*/];
               set({
-                recordingStopRequestedAt: performance.now()
+                recordingStopRequestedAt: performance.now(),
+                recordingStoppedAt: undefined
               });
-              if (!signatureRecorder) return [2 /*return*/];
-              return [4 /*yield*/, waitForOneMoreChunk()];
+              clearInterval(get().requestDataInterval);
+              return [4 /*yield*/, waitForOneMoreChunk()
+              // this represents the time that it is safe to release the camera access
+              ];
             case 1:
-              _a.sent();
-              signatureRecorder.onstop = function () {
-                return __awaiter(_this, void 0, void 0, function () {
-                  var recordingStoppedAt, mimeType, blob, _a, onSignatureVideoCaptured, recordingStartRequestedAt, recordingStartedAt, firstChunkReceivedAt, signatureStartedAt, signatureEndedAt, acceptClickedAt, recordingStopRequestedAt, lastChunkReceivedAt, supportsRequestVideoFrameCallback, supportsRoundRect;
-                  return __generator(this, function (_b) {
-                    recordingStoppedAt = performance.now();
-                    set({
-                      recordingStoppedAt: recordingStoppedAt
-                    });
-                    mimeType = inferBlobType(signatureChunks[0]) || (signatureRecorder === null || signatureRecorder === void 0 ? void 0 : signatureRecorder.mimeType) || 'video/mp4';
-                    blob = new Blob(signatureChunks, {
-                      type: mimeType
-                    });
-                    signatureChunks = [];
-                    signatureRecorder = null;
-                    _a = get(), onSignatureVideoCaptured = _a.onSignatureVideoCaptured, recordingStartRequestedAt = _a.recordingStartRequestedAt, recordingStartedAt = _a.recordingStartedAt, firstChunkReceivedAt = _a.firstChunkReceivedAt, signatureStartedAt = _a.signatureStartedAt, signatureEndedAt = _a.signatureEndedAt, acceptClickedAt = _a.acceptClickedAt, recordingStopRequestedAt = _a.recordingStopRequestedAt, lastChunkReceivedAt = _a.lastChunkReceivedAt, supportsRequestVideoFrameCallback = _a.supportsRequestVideoFrameCallback, supportsRoundRect = _a.supportsRoundRect;
-                    onSignatureVideoCaptured(blob, signatureData !== null && signatureData !== void 0 ? signatureData : null, imageUrl !== null && imageUrl !== void 0 ? imageUrl : null, {
-                      mimeType: mimeType,
-                      browserFeatures: {
-                        supportsRoundRect: supportsRoundRect,
-                        supportsRequestVideoFrameCallback: supportsRequestVideoFrameCallback
-                      },
-                      timingData: {
-                        recordingStartRequestedAt: recordingStartRequestedAt ? Math.ceil(recordingStartRequestedAt) : 0,
-                        recordingStartedAt: recordingStartedAt ? Math.ceil(recordingStartedAt) : 0,
-                        firstChunkReceivedAt: firstChunkReceivedAt ? Math.ceil(firstChunkReceivedAt) : 0,
-                        signatureStartedAt: signatureStartedAt ? Math.ceil(signatureStartedAt) : 0,
-                        signatureEndedAt: signatureEndedAt ? Math.ceil(signatureEndedAt) : 0,
-                        acceptClickedAt: acceptClickedAt ? Math.ceil(acceptClickedAt) : 0,
-                        recordingStopRequestedAt: recordingStopRequestedAt ? Math.ceil(recordingStopRequestedAt) : 0,
-                        recordingStoppedAt: Math.ceil(recordingStoppedAt),
-                        lastChunkReceivedAt: lastChunkReceivedAt ? Math.ceil(lastChunkReceivedAt) : 0
-                      }
-                    });
-                    return [2 /*return*/];
-                  });
-                });
-              };
+              _b = _c.sent(), finalChunkReceived = _b.finalChunkReceived, timedOut = _b.timedOut, waitedMs = _b.waitedMs;
+              // this represents the time that it is safe to release the camera access
+              set({
+                finalChunkReceived: true
+              });
+              if (!signatureRecorder) return [3 /*break*/, 2];
+              signatureRecorder.onstop = processVideo;
               signatureRecorder.stop();
+              return [3 /*break*/, 4];
+            case 2:
+              warn('signature recorder not found, processing video immediately');
+              return [4 /*yield*/, processVideo()];
+            case 3:
+              _c.sent();
+              _c.label = 4;
+            case 4:
               return [2 /*return*/];
           }
         });
@@ -14511,6 +14566,9 @@ var useVideoSignatureStore = create()(devtools(function (set, get) {
     },
     clearRecordedData: function clearRecordedData() {
       signatureChunks = [];
+      ondataavailableInvocations = [];
+      ondataavailableStartTime = undefined;
+      lastCalculatedVideoChunkRate = undefined;
       signatureRecorder === null || signatureRecorder === void 0 ? void 0 : signatureRecorder.stop();
       signatureRecorder = null;
       set({
@@ -14525,8 +14583,13 @@ var useVideoSignatureStore = create()(devtools(function (set, get) {
         signatureStartedAt: undefined,
         signatureEndedAt: undefined,
         acceptClickedAt: undefined,
+        // Note: clearClickedAt is intentionally preserved for telemetry metadata
         supportsRequestVideoFrameCallback: undefined,
-        supportsRoundRect: undefined
+        supportsRoundRect: undefined,
+        nullChunksReceived: 0,
+        firstNullChunkReceivedAt: undefined,
+        lastNullChunkReceivedAt: undefined,
+        finalChunkReceived: false
       });
     }
   });
@@ -14536,11 +14599,11 @@ var useVideoSignatureStore = create()(devtools(function (set, get) {
  * @param delayMs - The delay in milliseconds before the first check -- this is used to make sure we get at least one extra second of video.
  * @param checkEveryMs - The interval in milliseconds between checks after the initial delay has passed.
  * @param timeoutMs - The maximum time in milliseconds to wait for the chunk -- this is used to prevent infinite loops.
- * @returns A promise that resolves when the delay has passed and at least one chunk has been received received.
+ * @returns A promise that resolves when the delay has passed and at least one chunk has been received received. The return value is the number of milliseconds that we waited, whether we received a chunk, and whether we timed out.
  */
 function waitForOneMoreChunk(delayMs, checkEveryMs, timeoutMs) {
   if (delayMs === void 0) {
-    delayMs = 1000;
+    delayMs = 250;
   }
   if (checkEveryMs === void 0) {
     checkEveryMs = 100;
@@ -14548,29 +14611,44 @@ function waitForOneMoreChunk(delayMs, checkEveryMs, timeoutMs) {
   if (timeoutMs === void 0) {
     timeoutMs = 3000;
   }
-  var start = performance.now();
   return new Promise(function (resolve) {
-    var initialLastChunkReceivedAt = useVideoSignatureStore.getState().lastChunkReceivedAt;
-    function gotAChunk() {
+    var _a;
+    var start = performance.now();
+    var initialLastChunkReceivedAt = (_a = useVideoSignatureStore.getState().lastChunkReceivedAt) !== null && _a !== void 0 ? _a : start;
+    signatureRecorder === null || signatureRecorder === void 0 ? void 0 : signatureRecorder.requestData();
+    function checkForChunk() {
       var lastChunkReceivedAt = useVideoSignatureStore.getState().lastChunkReceivedAt;
-      return performance.now() - start > timeoutMs || !lastChunkReceivedAt || !initialLastChunkReceivedAt || lastChunkReceivedAt > initialLastChunkReceivedAt;
+      var waitedMs = performance.now() - start;
+      var timedOut = waitedMs > timeoutMs;
+      var finalChunkReceived = !!lastChunkReceivedAt && !!initialLastChunkReceivedAt && lastChunkReceivedAt > initialLastChunkReceivedAt;
+      return {
+        waitedMs: waitedMs,
+        finalChunkReceived: finalChunkReceived,
+        timedOut: timedOut
+      };
     }
     setTimeout(function () {
-      if (gotAChunk()) return resolve(); // check immediately
+      // check immediately
+      var result = checkForChunk();
+      if (result.finalChunkReceived || result.timedOut) return resolve(result);
       // otherwise, check on a configured interval
       var interval = setInterval(function () {
-        if (gotAChunk()) {
+        var result = checkForChunk();
+        if (result.finalChunkReceived || result.timedOut) {
           clearInterval(interval);
-          resolve();
+          resolve(result);
         }
       }, checkEveryMs);
     }, delayMs);
   });
 }
 function VideoSignatureContextProvider(_a) {
-  var _b, _c;
   var children = _a.children;
-  var videoRef = useCameraStore().videoRef;
+  var _b = useCameraStore(),
+    videoRef = _b.videoRef,
+    videoWidth = _b.videoWidth,
+    videoHeight = _b.videoHeight,
+    releaseCameraAccess = _b.releaseCameraAccess;
   var outputCanvas = useRef(null);
   useEffect(function () {
     return useVideoSignatureStore.setState({
@@ -14578,18 +14656,13 @@ function VideoSignatureContextProvider(_a) {
     });
   }, []);
   var drawOutputFrame = useCallback(function () {
-    if (!outputCanvas.current || !videoRef.current) return;
+    if (!outputCanvas.current) return;
     var ctx = outputCanvas.current.getContext('2d');
     if (!ctx) return;
-    var _a = [videoRef.current.videoWidth, videoRef.current.videoHeight],
+    var _a = [outputCanvas.current.width, outputCanvas.current.height],
       w = _a[0],
       h = _a[1];
     var isPortrait = w < h;
-    // Only update canvas dimensions if they changed (setting dimensions clears the canvas!)
-    if (outputCanvas.current.width !== w || outputCanvas.current.height !== h) {
-      outputCanvas.current.width = w;
-      outputCanvas.current.height = h;
-    }
     var rect = [w * (isPortrait ? 0.02 : 0.15),
     // x
     h * (isPortrait ? 0.15 : 0.25),
@@ -14598,7 +14671,9 @@ function VideoSignatureContextProvider(_a) {
     //  width
     h * (isPortrait ? 0.7 : 0.5) //   height
     ];
-    ctx.drawImage(videoRef.current, 0, 0, w, h);
+    if (videoRef.current) {
+      ctx.drawImage(videoRef.current, 0, 0, w, h);
+    }
     ctx.beginPath();
     ctx.fillStyle = 'rgba(255,255,255,0.5)';
     var supportsRoundRect = typeof ctx.roundRect === 'function';
@@ -14620,11 +14695,15 @@ function VideoSignatureContextProvider(_a) {
       ctx.drawImage.apply(ctx, __spreadArray([signatureCanvas], rect, false));
     }
   }, [videoRef]);
-  useVideoFrameLoop(videoRef, drawOutputFrame);
+  var finalChunkReceived = useVideoSignatureStore().finalChunkReceived;
+  useEffect(function () {
+    if (finalChunkReceived) releaseCameraAccess();
+  }, [finalChunkReceived, releaseCameraAccess]);
+  useVideoFrameLoop(videoRef, drawOutputFrame, !finalChunkReceived);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children, /*#__PURE__*/React__default.createElement(InvisibleCanvas, {
     ref: outputCanvas,
-    width: (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.videoWidth,
-    height: (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.videoHeight
+    width: videoWidth,
+    height: videoHeight
   }));
 }
 function requestVideoFrameCallback(video, onFrame) {
@@ -14644,8 +14723,11 @@ function requestVideoFrameCallback(video, onFrame) {
     };
   }
 }
-function videoFrameLoop(video, onFrame) {
-  if (!video) return;
+function videoFrameLoop(video, onFrame, running) {
+  if (running === void 0) {
+    running = true;
+  }
+  if (!video || !running) return;
   var cancelFn;
   var canceled = false;
   function onFrameRecursive() {
@@ -14666,10 +14748,51 @@ function videoFrameLoop(video, onFrame) {
     if (cancelFn !== undefined) cancelFn();
   };
 }
-function useVideoFrameLoop(ref, onFrame) {
+function useVideoFrameLoop(ref, onFrame, running) {
+  if (running === void 0) {
+    running = true;
+  }
   useEffect(function () {
-    return videoFrameLoop(ref.current, onFrame);
-  }, [onFrame, ref]);
+    return videoFrameLoop(ref.current, onFrame, running);
+  }, [onFrame, ref, running]);
+}
+function calculateAndStoreOndataavailableRate() {
+  if (ondataavailableInvocations.length < 2 || !ondataavailableStartTime) {
+    lastCalculatedVideoChunkRate = {
+      averageRate: 0,
+      minRate: 0,
+      maxRate: 0,
+      totalChunksReceived: ondataavailableInvocations.length,
+      recordingDurationMs: 0
+    };
+    return;
+  }
+  var totalDuration = ondataavailableInvocations[ondataavailableInvocations.length - 1] - ondataavailableStartTime;
+  var averageRate = (ondataavailableInvocations.length - 1) / (totalDuration / 1000); // invocations per second
+  // Calculate rates for each interval between invocations
+  var rates = [];
+  for (var i = 1; i < ondataavailableInvocations.length; i++) {
+    var intervalMs = ondataavailableInvocations[i] - ondataavailableInvocations[i - 1];
+    var rate = 1000 / intervalMs; // invocations per second for this interval
+    rates.push(rate);
+  }
+  var minRate = Math.min.apply(Math, rates);
+  var maxRate = Math.max.apply(Math, rates);
+  lastCalculatedVideoChunkRate = {
+    averageRate: Math.round(averageRate * 100) / 100,
+    // Round to 2 decimal places
+    minRate: Math.round(minRate * 100) / 100,
+    maxRate: Math.round(maxRate * 100) / 100,
+    totalChunksReceived: ondataavailableInvocations.length,
+    recordingDurationMs: Math.round(totalDuration)
+  };
+}
+function trackVideoChunkRate(now) {
+  // Track ondataavailable invocations for rate calculation
+  ondataavailableStartTime !== null && ondataavailableStartTime !== void 0 ? ondataavailableStartTime : ondataavailableStartTime = now;
+  ondataavailableInvocations.push(now);
+  // Calculate and store the current rate
+  calculateAndStoreOndataavailableRate();
 }
 
 function VideoSignaturePad(_a) {
@@ -15607,13 +15730,18 @@ function VideoSignatureWizardGuides(_a) {
     });
   }, []);
   var onClearBtnClicked = useCallback(function () {
-    var _a, _b;
+    var _a;
+    var _b = useVideoSignatureStore.getState(),
+      timesSignatureCleared = _b.timesSignatureCleared,
+      signaturePad = _b.signaturePad;
     useVideoSignatureStore.setState({
+      clearClickedAt: performance.now(),
+      timesSignatureCleared: timesSignatureCleared + 1,
       signatureStartedAt: undefined,
       signaturePadEmpty: true,
       signatureValid: false
     });
-    (_b = (_a = useVideoSignatureStore.getState().signaturePad) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.clear();
+    (_a = signaturePad.current) === null || _a === void 0 ? void 0 : _a.clear();
     if (restartVideoOnSignaturePadCleared) {
       setTimeout(function () {
         useVideoSignatureStore.getState().clearRecordedData();
@@ -16002,6 +16130,13 @@ var useVideoRecorder = function useVideoRecorder(mergeAVStreams) {
   }, [audioRecordingIntentionallyStopped, audioRecordingStopped, audioUrl, isRecordingAudio, isRecordingVideo, videoRecordingIntentionallyStopped, videoRecordingStopped, videoUrl]);
 };
 
+var DEFAULT_CLASSNAMES = {};
+var DEFAULT_VERBIAGE = {};
+var VERBIAGE_FALLBACKS = {
+  headingText: 'Please read the following text aloud',
+  promptText: '',
+  doneBtnText: 'Done'
+};
 var ReadTextPrompt = function ReadTextPrompt(_a) {
   var onComplete = _a.onComplete,
     _b = _a.durationMs,
@@ -16009,18 +16144,27 @@ var ReadTextPrompt = function ReadTextPrompt(_a) {
     _c = _a.minReadingMs,
     minReadingMs = _c === void 0 ? 10000 : _c,
     _d = _a.classNames,
-    classNames = _d === void 0 ? {} : _d,
+    classNames = _d === void 0 ? DEFAULT_CLASSNAMES : _d,
     _e = _a.verbiage,
-    rawVerbiage = _e === void 0 ? {} : _e;
+    rawVerbiage = _e === void 0 ? DEFAULT_VERBIAGE : _e,
+    onPromptTextRendered = _a.onPromptTextRendered;
   var countdownTimeoutRef = useRef(undefined);
   var _f = useState(durationMs / 1000),
     countdownRemaining = _f[0],
     setCountdownRemaining = _f[1];
-  var verbiage = useTranslations(rawVerbiage, {
-    headingText: 'Please read the following text aloud',
-    promptText: '',
-    doneBtnText: 'Done'
-  });
+  var promptTextRef = useRef(null);
+  var verbiage = useTranslations(rawVerbiage, VERBIAGE_FALLBACKS);
+  // Each time the rendered DOM contents changes for the prompt text,
+  // notify the parent via callback so it can respond.
+  // [NOTE]
+  // This is a bit of a workaround for extracting the text of a react component.
+  // Grabbing from the dom is not ideal but it works for now.
+  // [TODO] Can this be pulled form the react tree instead?
+  useEffect(function () {
+    if (promptTextRef.current && onPromptTextRendered) {
+      onPromptTextRendered(promptTextRef.current);
+    }
+  }, [onPromptTextRendered, verbiage.promptText]);
   var manualCountdown = useCallback(function (remainingTime) {
     if (remainingTime > 0) {
       var nextCycle_1 = remainingTime - 1;
@@ -16055,7 +16199,8 @@ var ReadTextPrompt = function ReadTextPrompt(_a) {
   }, /*#__PURE__*/React__default.createElement(ReadTextPromptHeading, {
     className: classNames.heading
   }, verbiage.headingText), /*#__PURE__*/React__default.createElement(ReadTextPromptText, {
-    className: classNames.prompt
+    className: classNames.prompt,
+    ref: promptTextRef
   }, verbiage.promptText), /*#__PURE__*/React__default.createElement(ReadTextPromptButtonsRow, {
     className: classNames.buttonsRow
   }, /*#__PURE__*/React__default.createElement(ReadTextPromptTimeRemaining, {
@@ -16101,8 +16246,101 @@ var ReadTextPromptTimeRemaining = styled.div(templateObject_5$1 || (templateObje
   return ((_c = (_b = (_a = props.theme.idVideoCapture) === null || _a === void 0 ? void 0 : _a.readTextPrompt) === null || _b === void 0 ? void 0 : _b.timeRemaining) === null || _c === void 0 ? void 0 : _c.borderRadius) ? "border-radius: ".concat((_f = (_e = (_d = props.theme.idVideoCapture) === null || _d === void 0 ? void 0 : _d.readTextPrompt) === null || _e === void 0 ? void 0 : _e.timeRemaining) === null || _f === void 0 ? void 0 : _f.borderRadius, ";") : "";
 });
 var DoneButton = styled(LoaderButton)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin: auto 0;\n"], ["\n  margin: auto 0;\n"])));
+var ReadTextPromptWrapped = /*#__PURE__*/memo(ReadTextPrompt);
 var templateObject_1$6, templateObject_2$6, templateObject_3$5, templateObject_4$1, templateObject_5$1, templateObject_6;
 
+// Precompiled regexes for performance and clarity
+var RE_ESCAPE_N = /\\n/g;
+var RE_ESCAPE_T = /\\t/g;
+var RE_ESCAPE_R = /\\r/g;
+// Remove entire script/style blocks before anything else
+var RE_SCRIPT_BLOCK = /<script[\s\S]*?<\/script>/gi;
+var RE_STYLE_BLOCK = /<style[\s\S]*?<\/style>/gi;
+// Replace common block-level tags with spaces to preserve boundaries
+var RE_BLOCK_OPEN = /<(div|p|h[1-6]|li|ul|ol|blockquote|pre|section|article|header|footer|aside|nav|main|form|fieldset|table|tr|td|th|br)[^>]*>/gi;
+var RE_BLOCK_CLOSE = /<\/(div|p|h[1-6]|li|ul|ol|blockquote|pre|section|article|header|footer|aside|nav|main|form|fieldset|table|tr|td|th|br)>/gi;
+// Any remaining HTML tag
+var RE_ALL_TAGS = /<[^>]*>/g;
+// Numeric entities (be lenient on optional semicolon)
+var RE_NUM_DEC = /&#(\d+);?/g;
+var RE_NUM_HEX = /&#x([0-9a-f]+);?/gi;
+// Invisible/whitespace variants
+var RE_NBSP_CHAR = /\u00A0/g;
+var RE_ZERO_WIDTH = /[\u200B-\u200D\uFEFF]/g;
+// Named entities map; case-insensitive replacement will be applied
+var NAMED_ENTITIES = {
+  nbsp: ' ',
+  amp: '&',
+  lt: '<',
+  gt: '>',
+  quot: '"',
+  '#39': "'",
+  // some encoders output &#39; but handle via numeric too
+  apos: "'",
+  cent: '¢',
+  pound: '£',
+  yen: '¥',
+  euro: '€',
+  copy: '©',
+  reg: '®',
+  mdash: '—',
+  ndash: '–',
+  hellip: '…',
+  ldquo: '"',
+  rdquo: '"',
+  lsquo: "'",
+  rsquo: "'"
+};
+function decodeNamedEntities(input) {
+  return input.replace(/&([a-z#0-9]+);/gi, function (_, name) {
+    var key = name.toLowerCase();
+    if (Object.prototype.hasOwnProperty.call(NAMED_ENTITIES, key)) {
+      return NAMED_ENTITIES[key];
+    }
+    return "&".concat(name, ";");
+  });
+}
+function getRawTextFromHtml(str) {
+  if (!str) return '';
+  var s = str;
+  // 1) Handle literal escape sequences (avoid confusing with HTML)
+  s = s.replace(RE_ESCAPE_N, ' ').replace(RE_ESCAPE_T, ' ').replace(RE_ESCAPE_R, ' ');
+  // 2) Remove script/style blocks entirely
+  s = s.replace(RE_SCRIPT_BLOCK, ' ').replace(RE_STYLE_BLOCK, ' ');
+  // 3) Replace block-level elements with spaces, then strip remaining tags
+  s = s.replace(RE_BLOCK_OPEN, ' ').replace(RE_BLOCK_CLOSE, ' ');
+  s = s.replace(RE_ALL_TAGS, '');
+  // 4) Decode numeric entities using code points (handles >0xFFFF)
+  s = s.replace(RE_NUM_DEC, function (_, dec) {
+    var codePoint = parseInt(dec, 10);
+    if (Number.isFinite(codePoint) && codePoint >= 0) {
+      try {
+        return String.fromCodePoint(codePoint);
+      } catch (_a) {
+        return '';
+      }
+    }
+    return '';
+  }).replace(RE_NUM_HEX, function (_, hex) {
+    var codePoint = parseInt(hex, 16);
+    if (Number.isFinite(codePoint) && codePoint >= 0) {
+      try {
+        return String.fromCodePoint(codePoint);
+      } catch (_a) {
+        return '';
+      }
+    }
+    return '';
+  });
+  // 5) Decode common named entities (case-insensitive)
+  s = decodeNamedEntities(s);
+  // 6) Replace Unicode NBSP and remove zero-width characters
+  s = s.replace(RE_NBSP_CHAR, ' ').replace(RE_ZERO_WIDTH, '');
+  // 7) Normalize whitespace
+  s = s.replace(/\s+/g, ' ').trim();
+  return s;
+}
+
 var edgeBoundary = 0.05;
 var defaultVideoIdCaptureThresholds = {
   detection: {
@@ -16333,18 +16571,22 @@ var IdVideoCapture = function IdVideoCapture(_a) {
   }, [goodFramesCount]);
   var delaySatisfied = !['SHOW_ID_FRONT', 'SHOW_PASSPORT'].includes(requestedAction) || idFrontCaptureStartedAt !== null && new Date().getTime() > idFrontCaptureStartedAt + idCardFrontDelay;
   var translatedText = useVerbiage(readTextPrompt, '');
+  var handlePromptTextRendered = useCallback(function (element) {
+    if (element) {
+      var rawText = getRawTextFromHtml(element.innerHTML);
+      setExpectedAudioText(rawText);
+    }
+  }, [setExpectedAudioText]);
   var onIdCaptureComplete = useCallback(function () {
     var _a;
     if (translatedText) {
       setRequestedAction('READ_TEXT');
       useVideoRecorderStore.getState().startRecordingAudio();
       setIdCaptureVideoAudioStartsAt(new Date().getTime() - ((_a = videoStartsAt === null || videoStartsAt === void 0 ? void 0 : videoStartsAt.getTime()) !== null && _a !== void 0 ? _a : 0));
-      var renderedTranslatedText = typeof translatedText === 'string' ? translatedText : renderToString(translatedText);
-      setExpectedAudioText(renderedTranslatedText);
     } else {
       useVideoRecorderStore.getState().stopRecordingVideo();
     }
-  }, [setExpectedAudioText, setIdCaptureVideoAudioStartsAt, translatedText, videoStartsAt]);
+  }, [setIdCaptureVideoAudioStartsAt, translatedText, videoStartsAt]);
   var frameWidth = (_c = (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.videoWidth) !== null && _c !== void 0 ? _c : 0;
   var frameHeight = (_e = (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.videoHeight) !== null && _e !== void 0 ? _e : 0;
   var faceBox = face === null || face === void 0 ? void 0 : face.box;
@@ -16502,13 +16744,14 @@ var IdVideoCapture = function IdVideoCapture(_a) {
     className: classNames.container
   }, /*#__PURE__*/React__default.createElement(InvisibleCanvas, {
     ref: photoCanvas
-  }), requestedAction === 'READ_TEXT' ? ( /*#__PURE__*/React__default.createElement(ReadTextPrompt, {
+  }), requestedAction === 'READ_TEXT' ? ( /*#__PURE__*/React__default.createElement(ReadTextPromptWrapped, {
     startedAt: timeoutStartedAt || undefined,
     durationMs: readTextTimeoutDurationMs,
     minReadingMs: readTextMinReadingMs,
     classNames: classNames.readTextPrompt,
     verbiage: readTextPromptVerbiage,
-    onComplete: stopRecording
+    onComplete: stopRecording,
+    onPromptTextRendered: handlePromptTextRendered
   })) : ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IdVideoCaptureGuides, {
     classNames: classNames.guides,
     verbiage: rawVerbiage.guides,