idmission-web-sdk 2.3.191-refactor-modernize-react-examples-9e9af14 → 2.3.192

package/dist/sdk2.cjs.development.js

@@ -235,7 +235,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
   return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var webSdkVersion = '2.3.190';
+var webSdkVersion = '2.3.192';
 
 function getPlatform() {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -15843,7 +15843,8 @@ function processFaceDetectorPrediction(_a) {
     minCaptureVarianceThreshold = _a.minCaptureVarianceThreshold,
     brightness = _a.brightness,
     range = _a.range,
-    variance = _a.variance;
+    variance = _a.variance,
+    samplePoints = _a.samplePoints;
   var face = faces[0];
   var faceNotDetected = faces.length === 0;
   var faceNotCentered = false,
@@ -15919,27 +15920,40 @@ function processFaceDetectorPrediction(_a) {
     faceReadyAt: faceReady ? new Date() : null,
     faceIsStable: faceIsStable,
     noseIsStable: noseIsStable,
-    faceVisibilityTooLow: faceVisibilityTooLow
+    faceVisibilityTooLow: faceVisibilityTooLow,
+    brightness: brightness,
+    range: range,
+    variance: variance,
+    samplePoints: samplePoints
   };
 }
 
-function detectBrightnessAndContrast(frame, brightnessAverager) {
+function detectBrightnessAndContrast(frame, brightnessAverager, bounds, collectSamplePoints) {
+  if (collectSamplePoints === void 0) {
+    collectSamplePoints = false;
+  }
   var ctx = frame.getContext('2d');
   if (!ctx || frame.width === 0 || frame.height === 0) return {};
-  var imageData = ctx.getImageData(0, 0, frame.width, frame.height);
+  // Determine sampling region, clamped to canvas dimensions
+  var regionX = bounds ? Math.max(0, Math.floor(bounds.x)) : 0;
+  var regionY = bounds ? Math.max(0, Math.floor(bounds.y)) : 0;
+  var regionW = bounds ? Math.min(Math.ceil(bounds.width), frame.width - regionX) : frame.width;
+  var regionH = bounds ? Math.min(Math.ceil(bounds.height), frame.height - regionY) : frame.height;
+  if (regionW <= 0 || regionH <= 0) return {};
+  var imageData = ctx.getImageData(regionX, regionY, regionW, regionH);
   var pixels = imageData.data; // This is already Uint8ClampedArray
-  var width = frame.width;
   var sampleResolution = 10;
-  var xStep = Math.max(1, Math.floor(width / sampleResolution));
-  var yStep = Math.max(1, Math.floor(frame.height / sampleResolution));
+  var xStep = Math.max(1, Math.floor(regionW / sampleResolution));
+  var yStep = Math.max(1, Math.floor(regionH / sampleResolution));
   var brightness = 0;
   var brightnessForVariance = 0;
   var minBrightness = Infinity;
   var maxBrightness = -Infinity;
   var iterations = 0;
-  for (var y = Math.floor(yStep / 2); y < frame.height; y += yStep) {
-    for (var x = Math.floor(xStep / 2); x < width; x += xStep) {
-      var pixelIndex = (y * width + x) * 4;
+  var samplePoints = collectSamplePoints ? [] : undefined;
+  for (var y = Math.floor(yStep / 2); y < regionH; y += yStep) {
+    for (var x = Math.floor(xStep / 2); x < regionW; x += xStep) {
+      var pixelIndex = (y * regionW + x) * 4;
       var r = pixels[pixelIndex];
       var g = pixels[pixelIndex + 1];
       var b = pixels[pixelIndex + 2];
@@ -15952,6 +15966,11 @@ function detectBrightnessAndContrast(frame, brightnessAverager) {
       minBrightness = Math.min(minBrightness, luminance);
       maxBrightness = Math.max(maxBrightness, luminance);
       iterations++;
+      // Collect sample coordinates in canvas space for debug overlay
+      samplePoints === null || samplePoints === void 0 ? void 0 : samplePoints.push({
+        x: regionX + x,
+        y: regionY + y
+      });
     }
   }
   var _a = brightnessAverager(brightness / iterations),
@@ -15962,7 +15981,8 @@ function detectBrightnessAndContrast(frame, brightnessAverager) {
   return {
     brightness: isFull ? avg : undefined,
     range: isFull ? range : undefined,
-    variance: isFull ? variance : undefined
+    variance: isFull ? variance : undefined,
+    samplePoints: samplePoints
   };
 }
 function createRunningAvgFIFO(capacity) {
@@ -16059,30 +16079,32 @@ function SelfieGuidanceModelsProvider(_a) {
     requireVerticalFaceCentering = _d === void 0 ? true : _d,
     minCaptureBrightnessThreshold = _a.minCaptureBrightnessThreshold,
     minCaptureRangeThreshold = _a.minCaptureRangeThreshold,
-    minCaptureVarianceThreshold = _a.minCaptureVarianceThreshold;
-  var _e = useCameraStore(shallow.useShallow(function (state) {
+    minCaptureVarianceThreshold = _a.minCaptureVarianceThreshold,
+    _e = _a.debugShowSamplePoints,
+    debugShowSamplePoints = _e === void 0 ? false : _e;
+  var _f = useCameraStore(shallow.useShallow(function (state) {
       return {
         videoRef: state.videoRef,
         videoLoaded: state.videoLoaded,
         cameraReady: state.cameraReady
       };
     })),
-    videoRef = _e.videoRef,
-    videoLoaded = _e.videoLoaded,
-    cameraReady = _e.cameraReady;
+    videoRef = _f.videoRef,
+    videoLoaded = _f.videoLoaded,
+    cameraReady = _f.cameraReady;
   var canvasRef = React.useRef(null);
   var onPredictionHandler = React.useRef(undefined);
   var addToAverage = useRunningAvg(5).addToAverage;
-  var _f = useLoadDocumentDetector({
+  var _g = useLoadDocumentDetector({
       videoRef: videoRef,
       onModelError: onModelError,
       modelLoadTimeoutMs: modelLoadTimeoutMs
     }),
-    ready = _f.ready,
-    modelLoadState = _f.modelLoadState,
-    modelDownloadProgress = _f.modelDownloadProgress,
-    modelWarmingStartedAt = _f.modelWarmingStartedAt,
-    modelError = _f.modelError;
+    ready = _g.ready,
+    modelLoadState = _g.modelLoadState,
+    modelDownloadProgress = _g.modelDownloadProgress,
+    modelWarmingStartedAt = _g.modelWarmingStartedAt,
+    modelError = _g.modelError;
   // const {
   //   ready,
   //   modelLoadState,
@@ -16094,9 +16116,9 @@ function SelfieGuidanceModelsProvider(_a) {
   //   modelLoadTimeoutMs,
   //   videoRef,
   // })
-  var _g = useFrameLoop(React.useCallback(function () {
+  var _h = useFrameLoop(React.useCallback(function () {
       return __awaiter(_this, void 0, void 0, function () {
-        var vw, vh, ctx, thresholdsProvided, brightnessResults, brightness, range, variance, prediction, processed, e_1;
+        var vw, vh, ctx, prediction, thresholdsProvided, brightnessResults, primaryFaceDetection, primaryFaceBounds, brightness, range, variance, processed, e_1;
         var _a, _b;
         return __generator(this, function (_c) {
           switch (_c.label) {
@@ -16114,14 +16136,28 @@ function SelfieGuidanceModelsProvider(_a) {
               _c.label = 1;
             case 1:
               _c.trys.push([1, 4,, 5]);
+              return [4 /*yield*/, makeFacePredictionWithDocumentDetector(canvasRef.current)];
+            case 2:
+              prediction = _c.sent();
               thresholdsProvided = minCaptureBrightnessThreshold !== undefined || minCaptureRangeThreshold !== undefined || minCaptureVarianceThreshold !== undefined;
-              brightnessResults = thresholdsProvided ? detectBrightnessAndContrast(canvasRef.current, addToAverage) : undefined;
+              brightnessResults = void 0;
+              if (thresholdsProvided || debugShowSamplePoints) {
+                primaryFaceDetection = prediction === null || prediction === void 0 ? void 0 : prediction.detections.find(function (d) {
+                  return d.categories.some(function (c) {
+                    return c.categoryName === 'Primary face';
+                  });
+                });
+                primaryFaceBounds = (primaryFaceDetection === null || primaryFaceDetection === void 0 ? void 0 : primaryFaceDetection.boundingBox) ? {
+                  x: primaryFaceDetection.boundingBox.originX,
+                  y: primaryFaceDetection.boundingBox.originY,
+                  width: primaryFaceDetection.boundingBox.width,
+                  height: primaryFaceDetection.boundingBox.height
+                } : undefined;
+                brightnessResults = detectBrightnessAndContrast(canvasRef.current, addToAverage, primaryFaceBounds, debugShowSamplePoints);
+              }
               brightness = brightnessResults === null || brightnessResults === void 0 ? void 0 : brightnessResults.brightness;
               range = brightnessResults === null || brightnessResults === void 0 ? void 0 : brightnessResults.range;
               variance = brightnessResults === null || brightnessResults === void 0 ? void 0 : brightnessResults.variance;
-              return [4 /*yield*/, makeFacePredictionWithDocumentDetector(canvasRef.current)];
-            case 2:
-              prediction = _c.sent();
               processed = processFaceDetectorPrediction({
                 faces: (_a = prediction === null || prediction === void 0 ? void 0 : prediction.faces) !== null && _a !== void 0 ? _a : [],
                 videoWidth: vw,
@@ -16132,7 +16168,8 @@ function SelfieGuidanceModelsProvider(_a) {
                 minCaptureVarianceThreshold: minCaptureVarianceThreshold,
                 brightness: brightness,
                 range: range,
-                variance: variance
+                variance: variance,
+                samplePoints: brightnessResults === null || brightnessResults === void 0 ? void 0 : brightnessResults.samplePoints
               });
               setLastFaceDetectionAt(new Date().getTime());
               // setLastPrediction(processed)
@@ -16150,12 +16187,12 @@ function SelfieGuidanceModelsProvider(_a) {
           }
         });
       });
-    }, [cameraReady, modelError, ready, requireVerticalFaceCentering, videoLoaded, videoRef, addToAverage, minCaptureBrightnessThreshold, minCaptureRangeThreshold, minCaptureVarianceThreshold]), {
+    }, [cameraReady, modelError, ready, requireVerticalFaceCentering, videoLoaded, videoRef, addToAverage, minCaptureBrightnessThreshold, minCaptureRangeThreshold, minCaptureVarianceThreshold, debugShowSamplePoints]), {
       throttleMs: throttleMs,
       autoStart: autoStart
     }),
-    start = _g.start,
-    stop = _g.stop;
+    start = _h.start,
+    stop = _h.stop;
   var onPredictionMade = React.useCallback(function (handler) {
     onPredictionHandler.current = handler;
   }, []);
@@ -16169,9 +16206,12 @@ function SelfieGuidanceModelsProvider(_a) {
       error: modelError,
       modelDownloadProgress: modelDownloadProgress,
       modelLoadState: modelLoadState,
-      modelWarmingStartedAt: modelWarmingStartedAt
+      modelWarmingStartedAt: modelWarmingStartedAt,
+      minCaptureBrightnessThreshold: minCaptureBrightnessThreshold,
+      minCaptureRangeThreshold: minCaptureRangeThreshold,
+      minCaptureVarianceThreshold: minCaptureVarianceThreshold
     };
-  }, [start, stop, ready, onPredictionMade, modelError, modelDownloadProgress, modelLoadState, modelWarmingStartedAt]);
+  }, [start, stop, ready, onPredictionMade, modelError, modelDownloadProgress, modelLoadState, modelWarmingStartedAt, minCaptureBrightnessThreshold, minCaptureRangeThreshold, minCaptureVarianceThreshold]);
   return /*#__PURE__*/React__namespace.createElement(SelfieGuidanceModelsContext.Provider, {
     value: value
   }, /*#__PURE__*/React__namespace.createElement(InvisibleCanvas, {
@@ -16414,7 +16454,7 @@ var reducer$3 = function reducer(state, action) {
   }
 };
 var SelfieCapture = function SelfieCapture(_a) {
-  var _b;
+  var _b, _c, _d, _e, _f, _g, _h, _j;
   var onGuidanceSatisfied = _a.onGuidanceSatisfied,
     onGuidanceNotSatisfied = _a.onGuidanceNotSatisfied,
     onFaceDetected = _a.onFaceDetected,
@@ -16422,44 +16462,49 @@ var SelfieCapture = function SelfieCapture(_a) {
     onSelfieCaptured = _a.onSelfieCaptured,
     onTimeout = _a.onTimeout,
     onExit = _a.onExit,
-    _c = _a.timeoutDurationMs,
-    timeoutDurationMs = _c === void 0 ? 15000 : _c,
+    _k = _a.timeoutDurationMs,
+    timeoutDurationMs = _k === void 0 ? 15000 : _k,
     guidanceMessage = _a.guidanceMessage,
     guidanceSatisfied = _a.guidanceSatisfied,
     guidesComponent = _a.guidesComponent,
-    _d = _a.allowManualSelfieCaptureOnLoadingError,
-    allowManualSelfieCaptureOnLoadingError = _d === void 0 ? false : _d,
-    _e = _a.shouldCapture,
-    shouldCapture = _e === void 0 ? true : _e,
-    _f = _a.classNames,
-    classNames = _f === void 0 ? {} : _f,
-    _g = _a.colors,
-    colors = _g === void 0 ? {} : _g,
-    _h = _a.verbiage,
-    rawVerbiage = _h === void 0 ? {} : _h,
-    _j = _a.debugMode,
-    debugMode = _j === void 0 ? false : _j;
-  var _k = useResizeObserver(),
-    ref = _k.ref,
-    _l = _k.width,
-    width = _l === void 0 ? 1 : _l,
-    _m = _k.height,
-    height = _m === void 0 ? 1 : _m;
-  var _o = React.useReducer(reducer$3, initialState$4),
-    _p = _o[0],
-    busy = _p.busy,
-    prediction = _p.prediction,
-    dispatch = _o[1];
+    _l = _a.allowManualSelfieCaptureOnLoadingError,
+    allowManualSelfieCaptureOnLoadingError = _l === void 0 ? false : _l,
+    _m = _a.shouldCapture,
+    shouldCapture = _m === void 0 ? true : _m,
+    _o = _a.classNames,
+    classNames = _o === void 0 ? {} : _o,
+    _p = _a.colors,
+    colors = _p === void 0 ? {} : _p,
+    _q = _a.verbiage,
+    rawVerbiage = _q === void 0 ? {} : _q,
+    _r = _a.debugMode,
+    debugMode = _r === void 0 ? false : _r,
+    _s = _a.debugShowSamplePoints,
+    debugShowSamplePoints = _s === void 0 ? false : _s;
+  var _t = useResizeObserver(),
+    ref = _t.ref,
+    _u = _t.width,
+    width = _u === void 0 ? 1 : _u,
+    _v = _t.height,
+    height = _v === void 0 ? 1 : _v;
+  var _w = React.useReducer(reducer$3, initialState$4),
+    _x = _w[0],
+    busy = _x.busy,
+    prediction = _x.prediction,
+    dispatch = _w[1];
   var lastPredictionCanvas = React.useRef(null);
   var videoRef = useCameraStore(shallow.useShallow(function (state) {
     return {
       videoRef: state.videoRef
     };
   })).videoRef;
-  var _q = useSelfieGuidanceModelsContext(),
-    onPredictionMade = _q.onPredictionMade,
-    canvasRef = _q.canvasRef,
-    guidanceError = _q.error;
+  var _y = useSelfieGuidanceModelsContext(),
+    onPredictionMade = _y.onPredictionMade,
+    canvasRef = _y.canvasRef,
+    guidanceError = _y.error,
+    minCaptureBrightnessThreshold = _y.minCaptureBrightnessThreshold,
+    minCaptureRangeThreshold = _y.minCaptureRangeThreshold,
+    minCaptureVarianceThreshold = _y.minCaptureVarianceThreshold;
   onPredictionMade(useDebounce.useThrottledCallback(React.useCallback(function (prediction) {
     return __awaiter(void 0, void 0, void 0, function () {
       return __generator(this, function (_a) {
@@ -16506,9 +16551,9 @@ var SelfieCapture = function SelfieCapture(_a) {
       return timer && clearTimeout(timer);
     };
   }, [doCapture, prediction]);
-  var _r = useTimeout(timeoutDurationMs, onTimeout),
-    timedOut = _r.timedOut,
-    timeoutStartedAt = _r.timeoutStartedAt;
+  var _z = useTimeout(timeoutDurationMs, onTimeout),
+    timedOut = _z.timedOut,
+    timeoutStartedAt = _z.timeoutStartedAt;
   var debugScalingDetails = useDebugScalingDetails({
     enabled: debugMode,
     pageWidth: width,
@@ -16557,7 +16602,27 @@ var SelfieCapture = function SelfieCapture(_a) {
     face: prediction.face,
     scaling: debugScalingDetails,
     color: satisfied ? 'green' : 'red'
-  }))), debugMode && (/*#__PURE__*/React__namespace.default.createElement(DebugStatsPane, null, camera ? (/*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, "\u2705 Camera: ", camera.label, " (", camera.width, "x", camera.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React__namespace.default.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.faceNotDetected) ? '✅' : '❌', " Face Detected", /*#__PURE__*/React__namespace.default.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.faceNotCentered) ? '✅' : '❌', " Face Centered", /*#__PURE__*/React__namespace.default.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.faceTooClose) && !(prediction === null || prediction === void 0 ? void 0 : prediction.faceTooFar) ? '✅' : '❌', ' ', "Face", ' ', (prediction === null || prediction === void 0 ? void 0 : prediction.faceTooClose) ? 'Too Close' : (prediction === null || prediction === void 0 ? void 0 : prediction.faceTooFar) ? 'Too Far' : 'Distance Correct', /*#__PURE__*/React__namespace.default.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.faceLookingAway) ? '✅' : '❌', " Face Looking Forward", /*#__PURE__*/React__namespace.default.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.faceIsStable) ? '✅' : '❌', " Face Is Stable", /*#__PURE__*/React__namespace.default.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.noseIsStable) ? '✅' : '❌', " Nose Is Stable", /*#__PURE__*/React__namespace.default.createElement("br", null), !timedOut ? '✅' : '❌', " Time Remaining:", ' ', Math.max(0, timeoutDurationMs - (new Date().getTime() - (timeoutStartedAt !== null && timeoutStartedAt !== void 0 ? timeoutStartedAt : new Date()).getTime())), "ms")), allowManualCapture && (/*#__PURE__*/React__namespace.default.createElement(CaptureButtonContainer$1, {
+  }), debugShowSamplePoints && ((_c = prediction.samplePoints) === null || _c === void 0 ? void 0 : _c.map(function (pt, i) {
+    var horizontal = debugScalingDetails.horizontal,
+      pageWidth = debugScalingDetails.pageWidth,
+      pageHeight = debugScalingDetails.pageHeight,
+      videoWidth = debugScalingDetails.videoWidth,
+      videoHeight = debugScalingDetails.videoHeight,
+      scaledWidth = debugScalingDetails.scaledWidth,
+      scaledHeight = debugScalingDetails.scaledHeight,
+      xOffset = debugScalingDetails.xOffset,
+      yOffset = debugScalingDetails.yOffset;
+    if (!videoWidth || !videoHeight) return null;
+    var left = horizontal ? pt.x / videoWidth * scaledWidth - xOffset : pt.x / videoWidth * pageWidth;
+    var top = horizontal ? pt.y / videoHeight * pageHeight : pt.y / videoHeight * scaledHeight - yOffset;
+    return /*#__PURE__*/React__namespace.default.createElement(FaceDetectionKeypointMarker, {
+      key: i,
+      style: {
+        left: left - 2,
+        top: top - 2
+      }
+    });
+  })))), debugMode && (/*#__PURE__*/React__namespace.default.createElement(DebugStatsPane, null, camera ? (/*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, "\u2705 Camera: ", camera.label, " (", camera.width, "x", camera.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React__namespace.default.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.faceNotDetected) ? '✅' : '❌', " Face Detected", /*#__PURE__*/React__namespace.default.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.faceNotCentered) ? '✅' : '❌', " Face Centered", /*#__PURE__*/React__namespace.default.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.faceTooClose) && !(prediction === null || prediction === void 0 ? void 0 : prediction.faceTooFar) ? '✅' : '❌', ' ', "Face", ' ', (prediction === null || prediction === void 0 ? void 0 : prediction.faceTooClose) ? 'Too Close' : (prediction === null || prediction === void 0 ? void 0 : prediction.faceTooFar) ? 'Too Far' : 'Distance Correct', /*#__PURE__*/React__namespace.default.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.faceLookingAway) ? '✅' : '❌', " Face Looking Forward", /*#__PURE__*/React__namespace.default.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.faceIsStable) ? '✅' : '❌', " Face Is Stable", /*#__PURE__*/React__namespace.default.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.noseIsStable) ? '✅' : '❌', " Nose Is Stable", /*#__PURE__*/React__namespace.default.createElement("br", null), !timedOut ? '✅' : '❌', " Time Remaining:", ' ', Math.max(0, timeoutDurationMs - (new Date().getTime() - (timeoutStartedAt !== null && timeoutStartedAt !== void 0 ? timeoutStartedAt : new Date()).getTime())), "ms", /*#__PURE__*/React__namespace.default.createElement("br", null), (prediction === null || prediction === void 0 ? void 0 : prediction.faceVisibilityTooLow) ? '❌' : '✅', " Visibility", minCaptureBrightnessThreshold !== undefined && (/*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement("br", null), "\xA0\xA0Brightness:", ' ', (_e = (_d = prediction === null || prediction === void 0 ? void 0 : prediction.brightness) === null || _d === void 0 ? void 0 : _d.toFixed(1)) !== null && _e !== void 0 ? _e : '—', " (min:", ' ', minCaptureBrightnessThreshold, ")")), minCaptureRangeThreshold !== undefined && (/*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement("br", null), "\xA0\xA0Range: ", (_g = (_f = prediction === null || prediction === void 0 ? void 0 : prediction.range) === null || _f === void 0 ? void 0 : _f.toFixed(1)) !== null && _g !== void 0 ? _g : '—', " (min: ", minCaptureRangeThreshold, ")")), minCaptureVarianceThreshold !== undefined && (/*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement("br", null), "\xA0\xA0Variance: ", (_j = (_h = prediction === null || prediction === void 0 ? void 0 : prediction.variance) === null || _h === void 0 ? void 0 : _h.toFixed(1)) !== null && _j !== void 0 ? _j : '—', ' ', "(min: ", minCaptureVarianceThreshold, ")")))), allowManualCapture && (/*#__PURE__*/React__namespace.default.createElement(CaptureButtonContainer$1, {
     className: classNames.manualCaptureBtnContainer
   }, /*#__PURE__*/React__namespace.default.createElement(CaptureButton$1, {
     className: classNames.manualCaptureBtn,
@@ -16700,17 +16765,19 @@ var FaceLivenessCapture = function FaceLivenessCapture(_a) {
     colors = _l === void 0 ? {} : _l,
     _m = _a.verbiage,
     rawVerbiage = _m === void 0 ? {} : _m,
-    debugMode = _a.debugMode;
-  var _o = React.useContext(SubmissionContext),
-    checkLiveness = _o.checkLiveness,
-    submissionError = _o.submissionError;
+    debugMode = _a.debugMode,
+    _o = _a.debugShowSamplePoints,
+    debugShowSamplePoints = _o === void 0 ? false : _o;
+  var _p = React.useContext(SubmissionContext),
+    checkLiveness = _p.checkLiveness,
+    submissionError = _p.submissionError;
   var modelError = useSelfieGuidanceModelsContext().error;
-  var _p = React.useReducer(reducer$2, initialState$3),
-    state = _p[0],
-    dispatch = _p[1];
-  var _q = React.useState(null),
-    imageUrl = _q[0],
-    setImageUrl = _q[1];
+  var _q = React.useReducer(reducer$2, initialState$3),
+    state = _q[0],
+    dispatch = _q[1];
+  var _r = React.useState(null),
+    imageUrl = _r[0],
+    setImageUrl = _r[1];
   var rawCanvas = React.useRef(null);
   var cropCanvas = React.useRef(null);
   var resizeCanvas = React.useRef(null);
@@ -16905,7 +16972,8 @@ var FaceLivenessCapture = function FaceLivenessCapture(_a) {
     classNames: classNames,
     colors: colors,
     verbiage: rawVerbiage,
-    debugMode: debugMode
+    debugMode: debugMode,
+    debugShowSamplePoints: debugShowSamplePoints
   }), debugMode && !disableCapturePreview && imageUrl && (/*#__PURE__*/React__namespace.default.createElement(SelfieProgressPreview, {
     classNames: classNames.imagePreview,
     imageUrl: imageUrl,
@@ -17438,39 +17506,41 @@ var FaceLivenessWizard = function FaceLivenessWizard(_a) {
     verbiage = _s === void 0 ? {} : _s,
     _t = _a.debugMode,
     debugMode = _t === void 0 ? false : _t,
-    _u = _a.showLoadingOverlay,
-    showLoadingOverlay = _u === void 0 ? true : _u;
-  var _v = useSubmissionContext(),
-    submissionResponse = _v.submissionResponse,
-    livenessCheckRequest = _v.livenessCheckRequest,
-    setSelfieImage = _v.setSelfieImage,
-    logSelfieCaptureAttempt = _v.logSelfieCaptureAttempt;
-  var _w = useCameraStore(shallow.useShallow(function (state) {
+    _u = _a.debugShowSamplePoints,
+    debugShowSamplePoints = _u === void 0 ? false : _u,
+    _v = _a.showLoadingOverlay,
+    showLoadingOverlay = _v === void 0 ? true : _v;
+  var _w = useSubmissionContext(),
+    submissionResponse = _w.submissionResponse,
+    livenessCheckRequest = _w.livenessCheckRequest,
+    setSelfieImage = _w.setSelfieImage,
+    logSelfieCaptureAttempt = _w.logSelfieCaptureAttempt;
+  var _x = useCameraStore(shallow.useShallow(function (state) {
       return {
         cameraAccessDenied: state.cameraAccessDenied,
         requestCameraAccess: state.requestCameraAccess,
         releaseCameraAccess: state.releaseCameraAccess
       };
     })),
-    cameraAccessDenied = _w.cameraAccessDenied,
-    requestCameraAccess = _w.requestCameraAccess,
-    releaseCameraAccess = _w.releaseCameraAccess;
-  var _x = React.useState(''),
-    faceCropImageUrl = _x[0],
-    setFaceCropImageUrl = _x[1];
-  var _y = React.useState(0),
-    retryCount = _y[0],
-    setRetryCount = _y[1];
-  var _z = React.useState(showLoadingOverlay ? 'LOADING' : 'CAPTURING'),
-    captureState = _z[0],
-    setCaptureState = _z[1];
+    cameraAccessDenied = _x.cameraAccessDenied,
+    requestCameraAccess = _x.requestCameraAccess,
+    releaseCameraAccess = _x.releaseCameraAccess;
+  var _y = React.useState(''),
+    faceCropImageUrl = _y[0],
+    setFaceCropImageUrl = _y[1];
+  var _z = React.useState(0),
+    retryCount = _z[0],
+    setRetryCount = _z[1];
+  var _0 = React.useState(showLoadingOverlay ? 'LOADING' : 'CAPTURING'),
+    captureState = _0[0],
+    setCaptureState = _0[1];
   var captureStartedAt = React.useRef(undefined);
   var operationStartedAt = React.useRef(undefined);
   var livenessScore = React.useRef(undefined);
-  var _0 = useSelfieGuidanceModelsContext(),
-    start = _0.start,
-    stop = _0.stop,
-    selfieGuidanceCanvasRef = _0.canvasRef;
+  var _1 = useSelfieGuidanceModelsContext(),
+    start = _1.start,
+    stop = _1.stop,
+    selfieGuidanceCanvasRef = _1.canvasRef;
   React.useEffect(function () {
     if (precapturedDocuments === null || precapturedDocuments === void 0 ? void 0 : precapturedDocuments.selfie) {
       setSelfieImage(precapturedDocuments.selfie.imageData);
@@ -17555,9 +17625,9 @@ var FaceLivenessWizard = function FaceLivenessWizard(_a) {
     }
     onDenied === null || onDenied === void 0 ? void 0 : onDenied(submissionResponse, livenessCheckRequest);
   }, [allowLivenessFailure, onDenied, submissionResponse, livenessCheckRequest]);
-  var _1 = React.useState(0),
-    attempt = _1[0],
-    setAttempt = _1[1];
+  var _2 = React.useState(0),
+    attempt = _2[0],
+    setAttempt = _2[1];
   var onExitCallback = React.useCallback(function () {
     setAttempt(function (n) {
       return n + 1;
@@ -17629,7 +17699,8 @@ var FaceLivenessWizard = function FaceLivenessWizard(_a) {
           classNames: classNames.capture,
           colors: colors,
           verbiage: verbiage,
-          debugMode: debugMode
+          debugMode: debugMode,
+          debugShowSamplePoints: debugShowSamplePoints
         });
       case 'SUCCESS':
         if (!showSuccessScreen) return null;
@@ -17694,7 +17765,8 @@ function FaceLivenessWizardWithProviders(_a) {
   }, /*#__PURE__*/React__namespace.default.createElement(SelfieGuidanceModelsProvider, {
     autoStart: false,
     onModelError: faceLivenessProps.onModelError,
-    modelLoadTimeoutMs: faceLivenessProps.modelLoadTimeoutMs
+    modelLoadTimeoutMs: faceLivenessProps.modelLoadTimeoutMs,
+    debugShowSamplePoints: faceLivenessProps.debugShowSamplePoints
   }, /*#__PURE__*/React__namespace.default.createElement(FaceLivenessWizard, _assign({}, faceLivenessProps))));
 }
 
@@ -19276,32 +19348,34 @@ function SelfieCaptureWizard(_a) {
     _o = _a.verbiage,
     verbiage = _o === void 0 ? {} : _o,
     _p = _a.debugMode,
-    debugMode = _p === void 0 ? false : _p;
-  var _q = useSubmissionContext(),
-    setSelfieImage = _q.setSelfieImage,
-    logSelfieCaptureAttempt = _q.logSelfieCaptureAttempt;
-  var _r = useCameraStore(shallow.useShallow(function (state) {
+    debugMode = _p === void 0 ? false : _p,
+    _q = _a.debugShowSamplePoints,
+    debugShowSamplePoints = _q === void 0 ? false : _q;
+  var _r = useSubmissionContext(),
+    setSelfieImage = _r.setSelfieImage,
+    logSelfieCaptureAttempt = _r.logSelfieCaptureAttempt;
+  var _s = useCameraStore(shallow.useShallow(function (state) {
       return {
         cameraAccessDenied: state.cameraAccessDenied,
         requestCameraAccess: state.requestCameraAccess,
         releaseCameraAccess: state.releaseCameraAccess
       };
     })),
-    cameraAccessDenied = _r.cameraAccessDenied,
-    requestCameraAccess = _r.requestCameraAccess,
-    releaseCameraAccess = _r.releaseCameraAccess;
-  var _s = React.useState(showLoadingOverlay ? 'LOADING' : 'CAPTURING'),
-    captureState = _s[0],
-    setCaptureState = _s[1];
+    cameraAccessDenied = _s.cameraAccessDenied,
+    requestCameraAccess = _s.requestCameraAccess,
+    releaseCameraAccess = _s.releaseCameraAccess;
+  var _t = React.useState(showLoadingOverlay ? 'LOADING' : 'CAPTURING'),
+    captureState = _t[0],
+    setCaptureState = _t[1];
   var rawCanvas = React.useRef(null);
   var cropCanvas = React.useRef(null);
   var resizeCanvas = React.useRef(null);
   var captureStartedAt = React.useRef(undefined);
   var operationStartedAt = React.useRef(undefined);
-  var _t = useSelfieGuidanceModelsContext(),
-    start = _t.start,
-    stop = _t.stop,
-    modelError = _t.error;
+  var _u = useSelfieGuidanceModelsContext(),
+    start = _u.start,
+    stop = _u.stop,
+    modelError = _u.error;
   React.useEffect(function () {
     if (precapturedDocuments === null || precapturedDocuments === void 0 ? void 0 : precapturedDocuments.selfie) {
       setSelfieImage(precapturedDocuments.selfie.imageData);
@@ -19355,9 +19429,9 @@ function SelfieCaptureWizard(_a) {
       status: status
     }));
   }, [captureState, guidesComponent]);
-  var _u = React.useState(0),
-    attempt = _u[0],
-    setAttempt = _u[1];
+  var _v = React.useState(0),
+    attempt = _v[0],
+    setAttempt = _v[1];
   var onExitCallback = React.useCallback(function () {
     setAttempt(function (n) {
       return n + 1;
@@ -19404,7 +19478,8 @@ function SelfieCaptureWizard(_a) {
     classNames: classNames.capture,
     colors: colors.capture,
     verbiage: verbiage.capture,
-    debugMode: debugMode
+    debugMode: debugMode,
+    debugShowSamplePoints: debugShowSamplePoints
   })), showLoadingOverlay && (/*#__PURE__*/React__namespace.default.createElement(SelfieCaptureLoadingOverlay, {
     key: attempt,
     mode: loadingOverlayMode,
@@ -19474,32 +19549,34 @@ function VideoSignatureWizardComponent(_a, ref) {
     _s = _a.verbiage,
     verbiage = _s === void 0 ? {} : _s,
     _t = _a.debugMode,
-    debugMode = _t === void 0 ? false : _t;
-  var _u = useSubmissionContext(),
-    selfieImage = _u.selfieImage,
-    setSelfieImage = _u.setSelfieImage,
-    setSignatureData = _u.setSignatureData,
-    setSignatureVideoUrl = _u.setSignatureVideoUrl,
-    setSignatureVideoMetadata = _u.setSignatureVideoMetadata,
-    logSelfieCaptureAttempt = _u.logSelfieCaptureAttempt,
-    uploadDocument = _u.uploadDocument;
+    debugMode = _t === void 0 ? false : _t,
+    _u = _a.debugShowSamplePoints,
+    debugShowSamplePoints = _u === void 0 ? false : _u;
+  var _v = useSubmissionContext(),
+    selfieImage = _v.selfieImage,
+    setSelfieImage = _v.setSelfieImage,
+    setSignatureData = _v.setSignatureData,
+    setSignatureVideoUrl = _v.setSignatureVideoUrl,
+    setSignatureVideoMetadata = _v.setSignatureVideoMetadata,
+    logSelfieCaptureAttempt = _v.logSelfieCaptureAttempt,
+    uploadDocument = _v.uploadDocument;
   var cameraAccessDenied = useCameraStore(shallow.useShallow(function (state) {
     return {
       cameraAccessDenied: state.cameraAccessDenied
     };
   })).cameraAccessDenied;
-  var _v = React.useState(skipLivenessValidation ? 'CAPTURING_SELFIE' : 'CHECKING_LIVENESS'),
-    captureState = _v[0],
-    setCaptureState = _v[1];
-  var _w = React.useState(null),
-    signatureVideoMetadata = _w[0],
-    setSignatureVideoMetadataLocal = _w[1];
+  var _w = React.useState(skipLivenessValidation ? 'CAPTURING_SELFIE' : 'CHECKING_LIVENESS'),
+    captureState = _w[0],
+    setCaptureState = _w[1];
+  var _x = React.useState(null),
+    signatureVideoMetadata = _x[0],
+    setSignatureVideoMetadataLocal = _x[1];
   var operationStartedAt = React.useRef(undefined);
   var captureStartedAt = React.useRef(undefined);
   var captureEndedAt = React.useRef(undefined);
-  var _x = useSelfieGuidanceModelsContext(),
-    start = _x.start,
-    stop = _x.stop;
+  var _y = useSelfieGuidanceModelsContext(),
+    start = _y.start,
+    stop = _y.stop;
   React.useEffect(function () {
     operationStartedAt.current = new Date();
   }, []);
@@ -19551,17 +19628,17 @@ function VideoSignatureWizardComponent(_a, ref) {
     setCaptureState('SUCCESS');
     onVideoCaptured === null || onVideoCaptured === void 0 ? void 0 : onVideoCaptured(videoData, signatureData, signatureImageData, metadata);
   }, [onVideoCaptured, setSignatureData, setSignatureVideoMetadata, setSignatureVideoUrl]);
-  var _y = React.useState(true),
-    showLoadingOverlay = _y[0],
-    setShowLoadingOverlay = _y[1];
+  var _z = React.useState(true),
+    showLoadingOverlay = _z[0],
+    setShowLoadingOverlay = _z[1];
   var onSignatureCaptureFacesNotDetected = React.useCallback(function () {
     setShowLoadingOverlay(false);
     setCaptureState(skipLivenessValidation ? 'CAPTURING_SELFIE' : 'CHECKING_LIVENESS');
     useVideoSignatureStore.getState().clearRecordedData();
   }, [skipLivenessValidation]);
-  var _z = React.useState(0),
-    attempt = _z[0],
-    setAttempt = _z[1];
+  var _0 = React.useState(0),
+    attempt = _0[0],
+    setAttempt = _0[1];
   var onRetry = React.useCallback(function () {
     onRetryClicked === null || onRetryClicked === void 0 ? void 0 : onRetryClicked();
     setAttempt(function (n) {
@@ -19638,6 +19715,7 @@ function VideoSignatureWizardComponent(_a, ref) {
           colors: colors.faceLiveness,
           verbiage: verbiage.faceLiveness,
           debugMode: debugMode,
+          debugShowSamplePoints: debugShowSamplePoints,
           renderCameraFeed: false
         }));
       case 'CAPTURING_SELFIE':
@@ -19662,6 +19740,7 @@ function VideoSignatureWizardComponent(_a, ref) {
           colors: colors.faceLiveness,
           verbiage: verbiage.faceLiveness,
           debugMode: debugMode,
+          debugShowSamplePoints: debugShowSamplePoints,
           renderCameraFeed: false
         }));
       case 'CAPTURING_SIGNATURE':
@@ -19788,7 +19867,8 @@ function VideoSignatureWizardWithProvidersComponent(props, ref) {
     requireVerticalFaceCentering: false,
     minCaptureBrightnessThreshold: props.minCaptureBrightnessThreshold,
     minCaptureRangeThreshold: props.minCaptureRangeThreshold,
-    minCaptureVarianceThreshold: props.minCaptureVarianceThreshold
+    minCaptureVarianceThreshold: props.minCaptureVarianceThreshold,
+    debugShowSamplePoints: props.debugShowSamplePoints
   }, /*#__PURE__*/React__namespace.default.createElement(VideoSignatureWizard, _assign({
     ref: ref
   }, props, {
@@ -23878,7 +23958,9 @@ function SignatureKYCComponent(_a, ref) {
     geolocationEnabled = _a.geolocationEnabled,
     geolocationRequired = _a.geolocationRequired,
     _s = _a.debugMode,
-    debugMode = _s === void 0 ? false : _s;
+    debugMode = _s === void 0 ? false : _s,
+    _t = _a.debugShowSamplePoints,
+    debugShowSamplePoints = _t === void 0 ? false : _t;
   useLanguage(lang);
   useDebugLogging(debugMode);
   return /*#__PURE__*/React__namespace.default.createElement(AuthProvider, {
@@ -23948,11 +24030,12 @@ function SignatureKYCComponent(_a, ref) {
         classNames: classNames,
         colors: colors,
         debugMode: debugMode,
+        debugShowSamplePoints: debugShowSamplePoints,
         verbiage: verbiage,
         onModelError: onModelError,
         onUserCancel: onUserCancel
       };
-    }, [onLoadingStarted, onLoadingProgress, onLoadingCompleted, onLoadingFailed, onSelfieCaptured, customOverlayContent, onLoadingOverlayDismissed, loadingOverlayMode, skipSuccessScreen, captureAudio, minSignaturePadPoints, headTrackingDisabled, headTrackingBoundaryPercentage, headTrackingBoundaryType, modelLoadTimeoutMs, faceLivenessProps, allowSignatureAfterLivenessCheckFailure, restartVideoOnSignaturePadCleared, skipLivenessValidation, allowManualSelfieCaptureOnLoadingError, guidesComponent, showFaceGuideThenSignaturePad, minCaptureBrightnessThreshold, minCaptureRangeThreshold, minCaptureVarianceThreshold, classNames, colors, debugMode, verbiage, onModelError, onUserCancel])
+    }, [onLoadingStarted, onLoadingProgress, onLoadingCompleted, onLoadingFailed, onSelfieCaptured, customOverlayContent, onLoadingOverlayDismissed, loadingOverlayMode, skipSuccessScreen, captureAudio, minSignaturePadPoints, headTrackingDisabled, headTrackingBoundaryPercentage, headTrackingBoundaryType, modelLoadTimeoutMs, faceLivenessProps, allowSignatureAfterLivenessCheckFailure, restartVideoOnSignaturePadCleared, skipLivenessValidation, allowManualSelfieCaptureOnLoadingError, guidesComponent, showFaceGuideThenSignaturePad, minCaptureBrightnessThreshold, minCaptureRangeThreshold, minCaptureVarianceThreshold, classNames, colors, debugMode, debugShowSamplePoints, verbiage, onModelError, onUserCancel])
   })))));
 }
 /** Render a fullscreen capture component that captures a video of the user signing the screen. */