idmission-web-sdk 2.3.124 → 2.3.126

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -17,7 +17,6 @@ var middleware = require('zustand/middleware');
17
17
  var shallow = require('zustand/react/shallow');
18
18
  var cn = require('clsx');
19
19
  var SignatureCanvas = require('react-signature-canvas');
20
- var server = require('react-dom/server');
21
20
 
22
21
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
23
22
 
@@ -236,7 +235,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
236
235
  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
237
236
  };
238
237
 
239
- var webSdkVersion = '2.3.124';
238
+ var webSdkVersion = '2.3.126';
240
239
 
241
240
  function getPlatform() {
242
241
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -14409,6 +14408,9 @@ function inferBlobType(blobPart) {
14409
14408
 
14410
14409
  var signatureRecorder = null;
14411
14410
  var signatureChunks = [];
14411
+ var ondataavailableInvocations = [];
14412
+ var ondataavailableStartTime;
14413
+ var lastCalculatedVideoChunkRate;
14412
14414
  var videoSignatureInitialState = {
14413
14415
  startRecording: function startRecording() {
14414
14416
  return null;
@@ -14433,6 +14435,10 @@ var videoSignatureInitialState = {
14433
14435
  signatureValid: false,
14434
14436
  supportsRequestVideoFrameCallback: undefined,
14435
14437
  supportsRoundRect: undefined,
14438
+ nullChunksReceived: 0,
14439
+ timesSignatureCleared: 0,
14440
+ finalChunkReceived: false,
14441
+ requestDataInterval: undefined,
14436
14442
  onSignatureVideoCaptured: function onSignatureVideoCaptured() {
14437
14443
  return null;
14438
14444
  }
@@ -14445,8 +14451,11 @@ var useVideoSignatureStore = zustand.create()(middleware.devtools(function (set,
14445
14451
  captureAudio = false;
14446
14452
  }
14447
14453
  if (!camera) throw new Error('Camera not found');
14448
- // set our flag and clear whatever we have recorded so far.
14454
+ // clear whatever we have recorded so far.
14449
14455
  signatureChunks = [];
14456
+ ondataavailableInvocations = [];
14457
+ ondataavailableStartTime = undefined;
14458
+ lastCalculatedVideoChunkRate = undefined;
14450
14459
  // start recording from the output canvas to capture the signature
14451
14460
  var outputStream = (_a = get().outputCanvas.current) === null || _a === void 0 ? void 0 : _a.captureStream(24);
14452
14461
  if (!outputStream) throw new Error('outputStream not found');
@@ -14464,77 +14473,123 @@ var useVideoSignatureStore = zustand.create()(middleware.devtools(function (set,
14464
14473
  recordingStartedAt: e.timeStamp
14465
14474
  });
14466
14475
  };
14467
- var hasFirstChunk = false;
14468
14476
  signatureRecorder.ondataavailable = function (event) {
14477
+ var now = performance.now();
14469
14478
  signatureChunks.push(event.data);
14470
- if (!hasFirstChunk) {
14471
- hasFirstChunk = true;
14472
- set({
14473
- firstChunkReceivedAt: performance.now(),
14474
- lastChunkReceivedAt: performance.now()
14479
+ trackVideoChunkRate(now);
14480
+ if (event.data.size > 0) {
14481
+ set(function (state) {
14482
+ var _a;
14483
+ return {
14484
+ firstChunkReceivedAt: (_a = state.firstChunkReceivedAt) !== null && _a !== void 0 ? _a : now,
14485
+ lastChunkReceivedAt: now
14486
+ };
14475
14487
  });
14476
14488
  } else {
14477
- set({
14478
- lastChunkReceivedAt: performance.now()
14489
+ set(function (state) {
14490
+ var _a;
14491
+ return {
14492
+ nullChunksReceived: state.nullChunksReceived + 1,
14493
+ firstNullChunkReceivedAt: (_a = state.firstNullChunkReceivedAt) !== null && _a !== void 0 ? _a : now,
14494
+ lastNullChunkReceivedAt: now
14495
+ };
14479
14496
  });
14480
14497
  }
14481
14498
  };
14482
- signatureRecorder.start(250);
14499
+ signatureRecorder.start();
14500
+ var interval = setInterval(function () {
14501
+ return signatureRecorder === null || signatureRecorder === void 0 ? void 0 : signatureRecorder.requestData();
14502
+ }, 250);
14483
14503
  set({
14504
+ requestDataInterval: interval,
14484
14505
  recordingStartRequestedAt: performance.now()
14485
14506
  });
14486
14507
  },
14487
14508
  stopRecording: function stopRecording(signatureData, imageUrl) {
14488
14509
  return __awaiter(this, void 0, void 0, function () {
14489
- var _this = this;
14490
- return __generator(this, function (_a) {
14491
- switch (_a.label) {
14510
+ function processVideo() {
14511
+ return __awaiter(this, void 0, void 0, function () {
14512
+ var recordingStoppedAt, mimeType, blob, _a, onSignatureVideoCaptured, recordingStartRequestedAt, recordingStartedAt, firstChunkReceivedAt, signatureStartedAt, signatureEndedAt, acceptClickedAt, clearClickedAt, recordingStopRequestedAt, lastChunkReceivedAt, supportsRequestVideoFrameCallback, supportsRoundRect, nullChunksReceived, firstNullChunkReceivedAt, lastNullChunkReceivedAt, timesSignatureCleared, metadata;
14513
+ return __generator(this, function (_b) {
14514
+ if (get().recordingStoppedAt) return [2 /*return*/];
14515
+ recordingStoppedAt = performance.now();
14516
+ set({
14517
+ recordingStoppedAt: recordingStoppedAt
14518
+ });
14519
+ mimeType = inferBlobType(signatureChunks[0]) || (signatureRecorder === null || signatureRecorder === void 0 ? void 0 : signatureRecorder.mimeType) || 'video/mp4';
14520
+ blob = new Blob(signatureChunks, {
14521
+ type: mimeType
14522
+ });
14523
+ signatureChunks = [];
14524
+ signatureRecorder = null;
14525
+ _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;
14526
+ metadata = {
14527
+ mimeType: mimeType,
14528
+ browserFeatures: {
14529
+ supportsRoundRect: supportsRoundRect,
14530
+ supportsRequestVideoFrameCallback: supportsRequestVideoFrameCallback
14531
+ },
14532
+ diagnostics: {
14533
+ nullChunksReceived: nullChunksReceived,
14534
+ firstNullChunkReceivedAt: firstNullChunkReceivedAt ? Math.ceil(firstNullChunkReceivedAt) : 0,
14535
+ lastNullChunkReceivedAt: lastNullChunkReceivedAt ? Math.ceil(lastNullChunkReceivedAt) : 0,
14536
+ finalChunkReceived: finalChunkReceived,
14537
+ finalChunkTimedOut: timedOut,
14538
+ finalChunkWaitedMs: Math.ceil(waitedMs),
14539
+ videoChunkRate: lastCalculatedVideoChunkRate,
14540
+ timesSignatureCleared: timesSignatureCleared
14541
+ },
14542
+ timingData: {
14543
+ recordingStartRequestedAt: recordingStartRequestedAt ? Math.ceil(recordingStartRequestedAt) : 0,
14544
+ recordingStartedAt: recordingStartedAt ? Math.ceil(recordingStartedAt) : 0,
14545
+ firstChunkReceivedAt: firstChunkReceivedAt ? Math.ceil(firstChunkReceivedAt) : 0,
14546
+ signatureStartedAt: signatureStartedAt ? Math.ceil(signatureStartedAt) : 0,
14547
+ signatureEndedAt: signatureEndedAt ? Math.ceil(signatureEndedAt) : 0,
14548
+ acceptClickedAt: acceptClickedAt ? Math.ceil(acceptClickedAt) : 0,
14549
+ clearClickedAt: clearClickedAt ? Math.ceil(clearClickedAt) : 0,
14550
+ recordingStopRequestedAt: recordingStopRequestedAt ? Math.ceil(recordingStopRequestedAt) : 0,
14551
+ recordingStoppedAt: Math.ceil(recordingStoppedAt),
14552
+ lastChunkReceivedAt: lastChunkReceivedAt ? Math.ceil(lastChunkReceivedAt) : 0
14553
+ }
14554
+ };
14555
+ debug('signature video metadata', metadata);
14556
+ onSignatureVideoCaptured(blob, signatureData !== null && signatureData !== void 0 ? signatureData : null, imageUrl !== null && imageUrl !== void 0 ? imageUrl : null, metadata);
14557
+ return [2 /*return*/];
14558
+ });
14559
+ });
14560
+ }
14561
+ var _a, recordingStartedAt, recordingStopRequestedAt, isRecording, _b, finalChunkReceived, timedOut, waitedMs;
14562
+ return __generator(this, function (_c) {
14563
+ switch (_c.label) {
14492
14564
  case 0:
14565
+ _a = get(), recordingStartedAt = _a.recordingStartedAt, recordingStopRequestedAt = _a.recordingStopRequestedAt;
14566
+ isRecording = !!recordingStartedAt && !recordingStopRequestedAt;
14567
+ if (!isRecording) return [2 /*return*/];
14493
14568
  set({
14494
- recordingStopRequestedAt: performance.now()
14569
+ recordingStopRequestedAt: performance.now(),
14570
+ recordingStoppedAt: undefined
14495
14571
  });
14496
- if (!signatureRecorder) return [2 /*return*/];
14497
- return [4 /*yield*/, waitForOneMoreChunk()];
14572
+ clearInterval(get().requestDataInterval);
14573
+ return [4 /*yield*/, waitForOneMoreChunk()
14574
+ // this represents the time that it is safe to release the camera access
14575
+ ];
14498
14576
  case 1:
14499
- _a.sent();
14500
- signatureRecorder.onstop = function () {
14501
- return __awaiter(_this, void 0, void 0, function () {
14502
- var recordingStoppedAt, mimeType, blob, _a, onSignatureVideoCaptured, recordingStartRequestedAt, recordingStartedAt, firstChunkReceivedAt, signatureStartedAt, signatureEndedAt, acceptClickedAt, recordingStopRequestedAt, lastChunkReceivedAt, supportsRequestVideoFrameCallback, supportsRoundRect;
14503
- return __generator(this, function (_b) {
14504
- recordingStoppedAt = performance.now();
14505
- set({
14506
- recordingStoppedAt: recordingStoppedAt
14507
- });
14508
- mimeType = inferBlobType(signatureChunks[0]) || (signatureRecorder === null || signatureRecorder === void 0 ? void 0 : signatureRecorder.mimeType) || 'video/mp4';
14509
- blob = new Blob(signatureChunks, {
14510
- type: mimeType
14511
- });
14512
- signatureChunks = [];
14513
- signatureRecorder = null;
14514
- _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;
14515
- onSignatureVideoCaptured(blob, signatureData !== null && signatureData !== void 0 ? signatureData : null, imageUrl !== null && imageUrl !== void 0 ? imageUrl : null, {
14516
- mimeType: mimeType,
14517
- browserFeatures: {
14518
- supportsRoundRect: supportsRoundRect,
14519
- supportsRequestVideoFrameCallback: supportsRequestVideoFrameCallback
14520
- },
14521
- timingData: {
14522
- recordingStartRequestedAt: recordingStartRequestedAt ? Math.ceil(recordingStartRequestedAt) : 0,
14523
- recordingStartedAt: recordingStartedAt ? Math.ceil(recordingStartedAt) : 0,
14524
- firstChunkReceivedAt: firstChunkReceivedAt ? Math.ceil(firstChunkReceivedAt) : 0,
14525
- signatureStartedAt: signatureStartedAt ? Math.ceil(signatureStartedAt) : 0,
14526
- signatureEndedAt: signatureEndedAt ? Math.ceil(signatureEndedAt) : 0,
14527
- acceptClickedAt: acceptClickedAt ? Math.ceil(acceptClickedAt) : 0,
14528
- recordingStopRequestedAt: recordingStopRequestedAt ? Math.ceil(recordingStopRequestedAt) : 0,
14529
- recordingStoppedAt: Math.ceil(recordingStoppedAt),
14530
- lastChunkReceivedAt: lastChunkReceivedAt ? Math.ceil(lastChunkReceivedAt) : 0
14531
- }
14532
- });
14533
- return [2 /*return*/];
14534
- });
14535
- });
14536
- };
14577
+ _b = _c.sent(), finalChunkReceived = _b.finalChunkReceived, timedOut = _b.timedOut, waitedMs = _b.waitedMs;
14578
+ // this represents the time that it is safe to release the camera access
14579
+ set({
14580
+ finalChunkReceived: true
14581
+ });
14582
+ if (!signatureRecorder) return [3 /*break*/, 2];
14583
+ signatureRecorder.onstop = processVideo;
14537
14584
  signatureRecorder.stop();
14585
+ return [3 /*break*/, 4];
14586
+ case 2:
14587
+ warn('signature recorder not found, processing video immediately');
14588
+ return [4 /*yield*/, processVideo()];
14589
+ case 3:
14590
+ _c.sent();
14591
+ _c.label = 4;
14592
+ case 4:
14538
14593
  return [2 /*return*/];
14539
14594
  }
14540
14595
  });
@@ -14542,6 +14597,9 @@ var useVideoSignatureStore = zustand.create()(middleware.devtools(function (set,
14542
14597
  },
14543
14598
  clearRecordedData: function clearRecordedData() {
14544
14599
  signatureChunks = [];
14600
+ ondataavailableInvocations = [];
14601
+ ondataavailableStartTime = undefined;
14602
+ lastCalculatedVideoChunkRate = undefined;
14545
14603
  signatureRecorder === null || signatureRecorder === void 0 ? void 0 : signatureRecorder.stop();
14546
14604
  signatureRecorder = null;
14547
14605
  set({
@@ -14556,8 +14614,13 @@ var useVideoSignatureStore = zustand.create()(middleware.devtools(function (set,
14556
14614
  signatureStartedAt: undefined,
14557
14615
  signatureEndedAt: undefined,
14558
14616
  acceptClickedAt: undefined,
14617
+ // Note: clearClickedAt is intentionally preserved for telemetry metadata
14559
14618
  supportsRequestVideoFrameCallback: undefined,
14560
- supportsRoundRect: undefined
14619
+ supportsRoundRect: undefined,
14620
+ nullChunksReceived: 0,
14621
+ firstNullChunkReceivedAt: undefined,
14622
+ lastNullChunkReceivedAt: undefined,
14623
+ finalChunkReceived: false
14561
14624
  });
14562
14625
  }
14563
14626
  });
@@ -14567,11 +14630,11 @@ var useVideoSignatureStore = zustand.create()(middleware.devtools(function (set,
14567
14630
  * @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.
14568
14631
  * @param checkEveryMs - The interval in milliseconds between checks after the initial delay has passed.
14569
14632
  * @param timeoutMs - The maximum time in milliseconds to wait for the chunk -- this is used to prevent infinite loops.
14570
- * @returns A promise that resolves when the delay has passed and at least one chunk has been received received.
14633
+ * @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.
14571
14634
  */
14572
14635
  function waitForOneMoreChunk(delayMs, checkEveryMs, timeoutMs) {
14573
14636
  if (delayMs === void 0) {
14574
- delayMs = 1000;
14637
+ delayMs = 250;
14575
14638
  }
14576
14639
  if (checkEveryMs === void 0) {
14577
14640
  checkEveryMs = 100;
@@ -14579,29 +14642,44 @@ function waitForOneMoreChunk(delayMs, checkEveryMs, timeoutMs) {
14579
14642
  if (timeoutMs === void 0) {
14580
14643
  timeoutMs = 3000;
14581
14644
  }
14582
- var start = performance.now();
14583
14645
  return new Promise(function (resolve) {
14584
- var initialLastChunkReceivedAt = useVideoSignatureStore.getState().lastChunkReceivedAt;
14585
- function gotAChunk() {
14646
+ var _a;
14647
+ var start = performance.now();
14648
+ var initialLastChunkReceivedAt = (_a = useVideoSignatureStore.getState().lastChunkReceivedAt) !== null && _a !== void 0 ? _a : start;
14649
+ signatureRecorder === null || signatureRecorder === void 0 ? void 0 : signatureRecorder.requestData();
14650
+ function checkForChunk() {
14586
14651
  var lastChunkReceivedAt = useVideoSignatureStore.getState().lastChunkReceivedAt;
14587
- return performance.now() - start > timeoutMs || !lastChunkReceivedAt || !initialLastChunkReceivedAt || lastChunkReceivedAt > initialLastChunkReceivedAt;
14652
+ var waitedMs = performance.now() - start;
14653
+ var timedOut = waitedMs > timeoutMs;
14654
+ var finalChunkReceived = !!lastChunkReceivedAt && !!initialLastChunkReceivedAt && lastChunkReceivedAt > initialLastChunkReceivedAt;
14655
+ return {
14656
+ waitedMs: waitedMs,
14657
+ finalChunkReceived: finalChunkReceived,
14658
+ timedOut: timedOut
14659
+ };
14588
14660
  }
14589
14661
  setTimeout(function () {
14590
- if (gotAChunk()) return resolve(); // check immediately
14662
+ // check immediately
14663
+ var result = checkForChunk();
14664
+ if (result.finalChunkReceived || result.timedOut) return resolve(result);
14591
14665
  // otherwise, check on a configured interval
14592
14666
  var interval = setInterval(function () {
14593
- if (gotAChunk()) {
14667
+ var result = checkForChunk();
14668
+ if (result.finalChunkReceived || result.timedOut) {
14594
14669
  clearInterval(interval);
14595
- resolve();
14670
+ resolve(result);
14596
14671
  }
14597
14672
  }, checkEveryMs);
14598
14673
  }, delayMs);
14599
14674
  });
14600
14675
  }
14601
14676
  function VideoSignatureContextProvider(_a) {
14602
- var _b, _c;
14603
14677
  var children = _a.children;
14604
- var videoRef = useCameraStore().videoRef;
14678
+ var _b = useCameraStore(),
14679
+ videoRef = _b.videoRef,
14680
+ videoWidth = _b.videoWidth,
14681
+ videoHeight = _b.videoHeight,
14682
+ releaseCameraAccess = _b.releaseCameraAccess;
14605
14683
  var outputCanvas = React.useRef(null);
14606
14684
  React.useEffect(function () {
14607
14685
  return useVideoSignatureStore.setState({
@@ -14609,18 +14687,13 @@ function VideoSignatureContextProvider(_a) {
14609
14687
  });
14610
14688
  }, []);
14611
14689
  var drawOutputFrame = React.useCallback(function () {
14612
- if (!outputCanvas.current || !videoRef.current) return;
14690
+ if (!outputCanvas.current) return;
14613
14691
  var ctx = outputCanvas.current.getContext('2d');
14614
14692
  if (!ctx) return;
14615
- var _a = [videoRef.current.videoWidth, videoRef.current.videoHeight],
14693
+ var _a = [outputCanvas.current.width, outputCanvas.current.height],
14616
14694
  w = _a[0],
14617
14695
  h = _a[1];
14618
14696
  var isPortrait = w < h;
14619
- // Only update canvas dimensions if they changed (setting dimensions clears the canvas!)
14620
- if (outputCanvas.current.width !== w || outputCanvas.current.height !== h) {
14621
- outputCanvas.current.width = w;
14622
- outputCanvas.current.height = h;
14623
- }
14624
14697
  var rect = [w * (isPortrait ? 0.02 : 0.15),
14625
14698
  // x
14626
14699
  h * (isPortrait ? 0.15 : 0.25),
@@ -14629,7 +14702,9 @@ function VideoSignatureContextProvider(_a) {
14629
14702
  // width
14630
14703
  h * (isPortrait ? 0.7 : 0.5) // height
14631
14704
  ];
14632
- ctx.drawImage(videoRef.current, 0, 0, w, h);
14705
+ if (videoRef.current) {
14706
+ ctx.drawImage(videoRef.current, 0, 0, w, h);
14707
+ }
14633
14708
  ctx.beginPath();
14634
14709
  ctx.fillStyle = 'rgba(255,255,255,0.5)';
14635
14710
  var supportsRoundRect = typeof ctx.roundRect === 'function';
@@ -14651,11 +14726,15 @@ function VideoSignatureContextProvider(_a) {
14651
14726
  ctx.drawImage.apply(ctx, __spreadArray([signatureCanvas], rect, false));
14652
14727
  }
14653
14728
  }, [videoRef]);
14654
- useVideoFrameLoop(videoRef, drawOutputFrame);
14729
+ var finalChunkReceived = useVideoSignatureStore().finalChunkReceived;
14730
+ React.useEffect(function () {
14731
+ if (finalChunkReceived) releaseCameraAccess();
14732
+ }, [finalChunkReceived, releaseCameraAccess]);
14733
+ useVideoFrameLoop(videoRef, drawOutputFrame, !finalChunkReceived);
14655
14734
  return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, children, /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvas, {
14656
14735
  ref: outputCanvas,
14657
- width: (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.videoWidth,
14658
- height: (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.videoHeight
14736
+ width: videoWidth,
14737
+ height: videoHeight
14659
14738
  }));
14660
14739
  }
14661
14740
  function requestVideoFrameCallback(video, onFrame) {
@@ -14675,8 +14754,11 @@ function requestVideoFrameCallback(video, onFrame) {
14675
14754
  };
14676
14755
  }
14677
14756
  }
14678
- function videoFrameLoop(video, onFrame) {
14679
- if (!video) return;
14757
+ function videoFrameLoop(video, onFrame, running) {
14758
+ if (running === void 0) {
14759
+ running = true;
14760
+ }
14761
+ if (!video || !running) return;
14680
14762
  var cancelFn;
14681
14763
  var canceled = false;
14682
14764
  function onFrameRecursive() {
@@ -14697,10 +14779,51 @@ function videoFrameLoop(video, onFrame) {
14697
14779
  if (cancelFn !== undefined) cancelFn();
14698
14780
  };
14699
14781
  }
14700
- function useVideoFrameLoop(ref, onFrame) {
14782
+ function useVideoFrameLoop(ref, onFrame, running) {
14783
+ if (running === void 0) {
14784
+ running = true;
14785
+ }
14701
14786
  React.useEffect(function () {
14702
- return videoFrameLoop(ref.current, onFrame);
14703
- }, [onFrame, ref]);
14787
+ return videoFrameLoop(ref.current, onFrame, running);
14788
+ }, [onFrame, ref, running]);
14789
+ }
14790
+ function calculateAndStoreOndataavailableRate() {
14791
+ if (ondataavailableInvocations.length < 2 || !ondataavailableStartTime) {
14792
+ lastCalculatedVideoChunkRate = {
14793
+ averageRate: 0,
14794
+ minRate: 0,
14795
+ maxRate: 0,
14796
+ totalChunksReceived: ondataavailableInvocations.length,
14797
+ recordingDurationMs: 0
14798
+ };
14799
+ return;
14800
+ }
14801
+ var totalDuration = ondataavailableInvocations[ondataavailableInvocations.length - 1] - ondataavailableStartTime;
14802
+ var averageRate = (ondataavailableInvocations.length - 1) / (totalDuration / 1000); // invocations per second
14803
+ // Calculate rates for each interval between invocations
14804
+ var rates = [];
14805
+ for (var i = 1; i < ondataavailableInvocations.length; i++) {
14806
+ var intervalMs = ondataavailableInvocations[i] - ondataavailableInvocations[i - 1];
14807
+ var rate = 1000 / intervalMs; // invocations per second for this interval
14808
+ rates.push(rate);
14809
+ }
14810
+ var minRate = Math.min.apply(Math, rates);
14811
+ var maxRate = Math.max.apply(Math, rates);
14812
+ lastCalculatedVideoChunkRate = {
14813
+ averageRate: Math.round(averageRate * 100) / 100,
14814
+ // Round to 2 decimal places
14815
+ minRate: Math.round(minRate * 100) / 100,
14816
+ maxRate: Math.round(maxRate * 100) / 100,
14817
+ totalChunksReceived: ondataavailableInvocations.length,
14818
+ recordingDurationMs: Math.round(totalDuration)
14819
+ };
14820
+ }
14821
+ function trackVideoChunkRate(now) {
14822
+ // Track ondataavailable invocations for rate calculation
14823
+ ondataavailableStartTime !== null && ondataavailableStartTime !== void 0 ? ondataavailableStartTime : ondataavailableStartTime = now;
14824
+ ondataavailableInvocations.push(now);
14825
+ // Calculate and store the current rate
14826
+ calculateAndStoreOndataavailableRate();
14704
14827
  }
14705
14828
 
14706
14829
  function VideoSignaturePad(_a) {
@@ -15638,13 +15761,18 @@ function VideoSignatureWizardGuides(_a) {
15638
15761
  });
15639
15762
  }, []);
15640
15763
  var onClearBtnClicked = React.useCallback(function () {
15641
- var _a, _b;
15764
+ var _a;
15765
+ var _b = useVideoSignatureStore.getState(),
15766
+ timesSignatureCleared = _b.timesSignatureCleared,
15767
+ signaturePad = _b.signaturePad;
15642
15768
  useVideoSignatureStore.setState({
15769
+ clearClickedAt: performance.now(),
15770
+ timesSignatureCleared: timesSignatureCleared + 1,
15643
15771
  signatureStartedAt: undefined,
15644
15772
  signaturePadEmpty: true,
15645
15773
  signatureValid: false
15646
15774
  });
15647
- (_b = (_a = useVideoSignatureStore.getState().signaturePad) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.clear();
15775
+ (_a = signaturePad.current) === null || _a === void 0 ? void 0 : _a.clear();
15648
15776
  if (restartVideoOnSignaturePadCleared) {
15649
15777
  setTimeout(function () {
15650
15778
  useVideoSignatureStore.getState().clearRecordedData();
@@ -16033,6 +16161,13 @@ var useVideoRecorder = function useVideoRecorder(mergeAVStreams) {
16033
16161
  }, [audioRecordingIntentionallyStopped, audioRecordingStopped, audioUrl, isRecordingAudio, isRecordingVideo, videoRecordingIntentionallyStopped, videoRecordingStopped, videoUrl]);
16034
16162
  };
16035
16163
 
16164
+ var DEFAULT_CLASSNAMES = {};
16165
+ var DEFAULT_VERBIAGE = {};
16166
+ var VERBIAGE_FALLBACKS = {
16167
+ headingText: 'Please read the following text aloud',
16168
+ promptText: '',
16169
+ doneBtnText: 'Done'
16170
+ };
16036
16171
  var ReadTextPrompt = function ReadTextPrompt(_a) {
16037
16172
  var onComplete = _a.onComplete,
16038
16173
  _b = _a.durationMs,
@@ -16040,18 +16175,27 @@ var ReadTextPrompt = function ReadTextPrompt(_a) {
16040
16175
  _c = _a.minReadingMs,
16041
16176
  minReadingMs = _c === void 0 ? 10000 : _c,
16042
16177
  _d = _a.classNames,
16043
- classNames = _d === void 0 ? {} : _d,
16178
+ classNames = _d === void 0 ? DEFAULT_CLASSNAMES : _d,
16044
16179
  _e = _a.verbiage,
16045
- rawVerbiage = _e === void 0 ? {} : _e;
16180
+ rawVerbiage = _e === void 0 ? DEFAULT_VERBIAGE : _e,
16181
+ onPromptTextRendered = _a.onPromptTextRendered;
16046
16182
  var countdownTimeoutRef = React.useRef(undefined);
16047
16183
  var _f = React.useState(durationMs / 1000),
16048
16184
  countdownRemaining = _f[0],
16049
16185
  setCountdownRemaining = _f[1];
16050
- var verbiage = useTranslations(rawVerbiage, {
16051
- headingText: 'Please read the following text aloud',
16052
- promptText: '',
16053
- doneBtnText: 'Done'
16054
- });
16186
+ var promptTextRef = React.useRef(null);
16187
+ var verbiage = useTranslations(rawVerbiage, VERBIAGE_FALLBACKS);
16188
+ // Each time the rendered DOM contents changes for the prompt text,
16189
+ // notify the parent via callback so it can respond.
16190
+ // [NOTE]
16191
+ // This is a bit of a workaround for extracting the text of a react component.
16192
+ // Grabbing from the dom is not ideal but it works for now.
16193
+ // [TODO] Can this be pulled form the react tree instead?
16194
+ React.useEffect(function () {
16195
+ if (promptTextRef.current && onPromptTextRendered) {
16196
+ onPromptTextRendered(promptTextRef.current);
16197
+ }
16198
+ }, [onPromptTextRendered, verbiage.promptText]);
16055
16199
  var manualCountdown = React.useCallback(function (remainingTime) {
16056
16200
  if (remainingTime > 0) {
16057
16201
  var nextCycle_1 = remainingTime - 1;
@@ -16086,7 +16230,8 @@ var ReadTextPrompt = function ReadTextPrompt(_a) {
16086
16230
  }, /*#__PURE__*/React__namespace.default.createElement(ReadTextPromptHeading, {
16087
16231
  className: classNames.heading
16088
16232
  }, verbiage.headingText), /*#__PURE__*/React__namespace.default.createElement(ReadTextPromptText, {
16089
- className: classNames.prompt
16233
+ className: classNames.prompt,
16234
+ ref: promptTextRef
16090
16235
  }, verbiage.promptText), /*#__PURE__*/React__namespace.default.createElement(ReadTextPromptButtonsRow, {
16091
16236
  className: classNames.buttonsRow
16092
16237
  }, /*#__PURE__*/React__namespace.default.createElement(ReadTextPromptTimeRemaining, {
@@ -16132,8 +16277,101 @@ var ReadTextPromptTimeRemaining = styled__default.default.div(templateObject_5$1
16132
16277
  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, ";") : "";
16133
16278
  });
16134
16279
  var DoneButton = styled__default.default(LoaderButton)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin: auto 0;\n"], ["\n margin: auto 0;\n"])));
16280
+ var ReadTextPromptWrapped = /*#__PURE__*/React.memo(ReadTextPrompt);
16135
16281
  var templateObject_1$6, templateObject_2$6, templateObject_3$5, templateObject_4$1, templateObject_5$1, templateObject_6;
16136
16282
 
16283
+ // Precompiled regexes for performance and clarity
16284
+ var RE_ESCAPE_N = /\\n/g;
16285
+ var RE_ESCAPE_T = /\\t/g;
16286
+ var RE_ESCAPE_R = /\\r/g;
16287
+ // Remove entire script/style blocks before anything else
16288
+ var RE_SCRIPT_BLOCK = /<script[\s\S]*?<\/script>/gi;
16289
+ var RE_STYLE_BLOCK = /<style[\s\S]*?<\/style>/gi;
16290
+ // Replace common block-level tags with spaces to preserve boundaries
16291
+ 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;
16292
+ 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;
16293
+ // Any remaining HTML tag
16294
+ var RE_ALL_TAGS = /<[^>]*>/g;
16295
+ // Numeric entities (be lenient on optional semicolon)
16296
+ var RE_NUM_DEC = /&#(\d+);?/g;
16297
+ var RE_NUM_HEX = /&#x([0-9a-f]+);?/gi;
16298
+ // Invisible/whitespace variants
16299
+ var RE_NBSP_CHAR = /\u00A0/g;
16300
+ var RE_ZERO_WIDTH = /[\u200B-\u200D\uFEFF]/g;
16301
+ // Named entities map; case-insensitive replacement will be applied
16302
+ var NAMED_ENTITIES = {
16303
+ nbsp: ' ',
16304
+ amp: '&',
16305
+ lt: '<',
16306
+ gt: '>',
16307
+ quot: '"',
16308
+ '#39': "'",
16309
+ // some encoders output &#39; but handle via numeric too
16310
+ apos: "'",
16311
+ cent: '¢',
16312
+ pound: '£',
16313
+ yen: '¥',
16314
+ euro: '€',
16315
+ copy: '©',
16316
+ reg: '®',
16317
+ mdash: '—',
16318
+ ndash: '–',
16319
+ hellip: '…',
16320
+ ldquo: '"',
16321
+ rdquo: '"',
16322
+ lsquo: "'",
16323
+ rsquo: "'"
16324
+ };
16325
+ function decodeNamedEntities(input) {
16326
+ return input.replace(/&([a-z#0-9]+);/gi, function (_, name) {
16327
+ var key = name.toLowerCase();
16328
+ if (Object.prototype.hasOwnProperty.call(NAMED_ENTITIES, key)) {
16329
+ return NAMED_ENTITIES[key];
16330
+ }
16331
+ return "&".concat(name, ";");
16332
+ });
16333
+ }
16334
+ function getRawTextFromHtml(str) {
16335
+ if (!str) return '';
16336
+ var s = str;
16337
+ // 1) Handle literal escape sequences (avoid confusing with HTML)
16338
+ s = s.replace(RE_ESCAPE_N, ' ').replace(RE_ESCAPE_T, ' ').replace(RE_ESCAPE_R, ' ');
16339
+ // 2) Remove script/style blocks entirely
16340
+ s = s.replace(RE_SCRIPT_BLOCK, ' ').replace(RE_STYLE_BLOCK, ' ');
16341
+ // 3) Replace block-level elements with spaces, then strip remaining tags
16342
+ s = s.replace(RE_BLOCK_OPEN, ' ').replace(RE_BLOCK_CLOSE, ' ');
16343
+ s = s.replace(RE_ALL_TAGS, '');
16344
+ // 4) Decode numeric entities using code points (handles >0xFFFF)
16345
+ s = s.replace(RE_NUM_DEC, function (_, dec) {
16346
+ var codePoint = parseInt(dec, 10);
16347
+ if (Number.isFinite(codePoint) && codePoint >= 0) {
16348
+ try {
16349
+ return String.fromCodePoint(codePoint);
16350
+ } catch (_a) {
16351
+ return '';
16352
+ }
16353
+ }
16354
+ return '';
16355
+ }).replace(RE_NUM_HEX, function (_, hex) {
16356
+ var codePoint = parseInt(hex, 16);
16357
+ if (Number.isFinite(codePoint) && codePoint >= 0) {
16358
+ try {
16359
+ return String.fromCodePoint(codePoint);
16360
+ } catch (_a) {
16361
+ return '';
16362
+ }
16363
+ }
16364
+ return '';
16365
+ });
16366
+ // 5) Decode common named entities (case-insensitive)
16367
+ s = decodeNamedEntities(s);
16368
+ // 6) Replace Unicode NBSP and remove zero-width characters
16369
+ s = s.replace(RE_NBSP_CHAR, ' ').replace(RE_ZERO_WIDTH, '');
16370
+ // 7) Normalize whitespace
16371
+ s = s.replace(/\s+/g, ' ').trim();
16372
+ return s;
16373
+ }
16374
+
16137
16375
  var edgeBoundary = 0.05;
16138
16376
  var defaultVideoIdCaptureThresholds = {
16139
16377
  detection: {
@@ -16364,18 +16602,22 @@ var IdVideoCapture = function IdVideoCapture(_a) {
16364
16602
  }, [goodFramesCount]);
16365
16603
  var delaySatisfied = !['SHOW_ID_FRONT', 'SHOW_PASSPORT'].includes(requestedAction) || idFrontCaptureStartedAt !== null && new Date().getTime() > idFrontCaptureStartedAt + idCardFrontDelay;
16366
16604
  var translatedText = useVerbiage(readTextPrompt, '');
16605
+ var handlePromptTextRendered = React.useCallback(function (element) {
16606
+ if (element) {
16607
+ var rawText = getRawTextFromHtml(element.innerHTML);
16608
+ setExpectedAudioText(rawText);
16609
+ }
16610
+ }, [setExpectedAudioText]);
16367
16611
  var onIdCaptureComplete = React.useCallback(function () {
16368
16612
  var _a;
16369
16613
  if (translatedText) {
16370
16614
  setRequestedAction('READ_TEXT');
16371
16615
  useVideoRecorderStore.getState().startRecordingAudio();
16372
16616
  setIdCaptureVideoAudioStartsAt(new Date().getTime() - ((_a = videoStartsAt === null || videoStartsAt === void 0 ? void 0 : videoStartsAt.getTime()) !== null && _a !== void 0 ? _a : 0));
16373
- var renderedTranslatedText = typeof translatedText === 'string' ? translatedText : server.renderToString(translatedText);
16374
- setExpectedAudioText(renderedTranslatedText);
16375
16617
  } else {
16376
16618
  useVideoRecorderStore.getState().stopRecordingVideo();
16377
16619
  }
16378
- }, [setExpectedAudioText, setIdCaptureVideoAudioStartsAt, translatedText, videoStartsAt]);
16620
+ }, [setIdCaptureVideoAudioStartsAt, translatedText, videoStartsAt]);
16379
16621
  var frameWidth = (_c = (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.videoWidth) !== null && _c !== void 0 ? _c : 0;
16380
16622
  var frameHeight = (_e = (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.videoHeight) !== null && _e !== void 0 ? _e : 0;
16381
16623
  var faceBox = face === null || face === void 0 ? void 0 : face.box;
@@ -16533,13 +16775,14 @@ var IdVideoCapture = function IdVideoCapture(_a) {
16533
16775
  className: classNames.container
16534
16776
  }, /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvas, {
16535
16777
  ref: photoCanvas
16536
- }), requestedAction === 'READ_TEXT' ? ( /*#__PURE__*/React__namespace.default.createElement(ReadTextPrompt, {
16778
+ }), requestedAction === 'READ_TEXT' ? ( /*#__PURE__*/React__namespace.default.createElement(ReadTextPromptWrapped, {
16537
16779
  startedAt: timeoutStartedAt || undefined,
16538
16780
  durationMs: readTextTimeoutDurationMs,
16539
16781
  minReadingMs: readTextMinReadingMs,
16540
16782
  classNames: classNames.readTextPrompt,
16541
16783
  verbiage: readTextPromptVerbiage,
16542
- onComplete: stopRecording
16784
+ onComplete: stopRecording,
16785
+ onPromptTextRendered: handlePromptTextRendered
16543
16786
  })) : ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(IdVideoCaptureGuides, {
16544
16787
  classNames: classNames.guides,
16545
16788
  verbiage: rawVerbiage.guides,