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

package/dist/sdk2.umd.development.js

@@ -211,7 +211,7 @@
     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
@@ -24950,7 +24950,8 @@
       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,
@@ -25026,27 +25027,40 @@
       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];
@@ -25059,6 +25073,11 @@
         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),
@@ -25069,7 +25088,8 @@
     return {
       brightness: isFull ? avg : undefined,
       range: isFull ? range : undefined,
-      variance: isFull ? variance : undefined
+      variance: isFull ? variance : undefined,
+      samplePoints: samplePoints
     };
   }
   function createRunningAvgFIFO(capacity) {
@@ -25166,30 +25186,32 @@
       requireVerticalFaceCentering = _d === void 0 ? true : _d,
       minCaptureBrightnessThreshold = _a.minCaptureBrightnessThreshold,
       minCaptureRangeThreshold = _a.minCaptureRangeThreshold,
-      minCaptureVarianceThreshold = _a.minCaptureVarianceThreshold;
-    var _e = useCameraStore(useShallow(function (state) {
+      minCaptureVarianceThreshold = _a.minCaptureVarianceThreshold,
+      _e = _a.debugShowSamplePoints,
+      debugShowSamplePoints = _e === void 0 ? false : _e;
+    var _f = useCameraStore(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,
@@ -25201,9 +25223,9 @@
     //   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) {
@@ -25221,14 +25243,28 @@
                 _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,
@@ -25239,7 +25275,8 @@
                   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)
@@ -25257,12 +25294,12 @@
             }
           });
         });
-      }, [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;
     }, []);
@@ -25276,9 +25313,12 @@
         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, {
@@ -25521,7 +25561,7 @@
     }
   };
   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,
@@ -25529,44 +25569,49 @@
       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(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(f(React.useCallback(function (prediction) {
       return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
@@ -25613,9 +25658,9 @@
         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,
@@ -25664,7 +25709,27 @@
       face: prediction.face,
       scaling: debugScalingDetails,
       color: satisfied ? 'green' : 'red'
-    }))), debugMode && (/*#__PURE__*/React.createElement(DebugStatsPane, null, camera ? (/*#__PURE__*/React.createElement(React.Fragment, null, "\u2705 Camera: ", camera.label, " (", camera.width, "x", camera.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.faceNotDetected) ? '✅' : '❌', " Face Detected", /*#__PURE__*/React.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.faceNotCentered) ? '✅' : '❌', " Face Centered", /*#__PURE__*/React.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.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.faceLookingAway) ? '✅' : '❌', " Face Looking Forward", /*#__PURE__*/React.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.faceIsStable) ? '✅' : '❌', " Face Is Stable", /*#__PURE__*/React.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.noseIsStable) ? '✅' : '❌', " Nose Is Stable", /*#__PURE__*/React.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.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.createElement(FaceDetectionKeypointMarker, {
+        key: i,
+        style: {
+          left: left - 2,
+          top: top - 2
+        }
+      });
+    })))), debugMode && (/*#__PURE__*/React.createElement(DebugStatsPane, null, camera ? (/*#__PURE__*/React.createElement(React.Fragment, null, "\u2705 Camera: ", camera.label, " (", camera.width, "x", camera.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.faceNotDetected) ? '✅' : '❌', " Face Detected", /*#__PURE__*/React.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.faceNotCentered) ? '✅' : '❌', " Face Centered", /*#__PURE__*/React.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.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.faceLookingAway) ? '✅' : '❌', " Face Looking Forward", /*#__PURE__*/React.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.faceIsStable) ? '✅' : '❌', " Face Is Stable", /*#__PURE__*/React.createElement("br", null), !(prediction === null || prediction === void 0 ? void 0 : prediction.noseIsStable) ? '✅' : '❌', " Nose Is Stable", /*#__PURE__*/React.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.createElement("br", null), (prediction === null || prediction === void 0 ? void 0 : prediction.faceVisibilityTooLow) ? '❌' : '✅', " Visibility", minCaptureBrightnessThreshold !== undefined && (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.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.createElement(React.Fragment, null, /*#__PURE__*/React.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.createElement(React.Fragment, null, /*#__PURE__*/React.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.createElement(CaptureButtonContainer$1, {
       className: classNames.manualCaptureBtnContainer
     }, /*#__PURE__*/React.createElement(CaptureButton$1, {
       className: classNames.manualCaptureBtn,
@@ -25807,17 +25872,19 @@
       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);
@@ -26012,7 +26079,8 @@
       classNames: classNames,
       colors: colors,
       verbiage: rawVerbiage,
-      debugMode: debugMode
+      debugMode: debugMode,
+      debugShowSamplePoints: debugShowSamplePoints
     }), debugMode && !disableCapturePreview && imageUrl && (/*#__PURE__*/React.createElement(SelfieProgressPreview, {
       classNames: classNames.imagePreview,
       imageUrl: imageUrl,
@@ -26545,39 +26613,41 @@
       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(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(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);
@@ -26662,9 +26732,9 @@
       }
       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;
@@ -26736,7 +26806,8 @@
             classNames: classNames.capture,
             colors: colors,
             verbiage: verbiage,
-            debugMode: debugMode
+            debugMode: debugMode,
+            debugShowSamplePoints: debugShowSamplePoints
           });
         case 'SUCCESS':
           if (!showSuccessScreen) return null;
@@ -26801,7 +26872,8 @@
     }, /*#__PURE__*/React.createElement(SelfieGuidanceModelsProvider, {
       autoStart: false,
       onModelError: faceLivenessProps.onModelError,
-      modelLoadTimeoutMs: faceLivenessProps.modelLoadTimeoutMs
+      modelLoadTimeoutMs: faceLivenessProps.modelLoadTimeoutMs,
+      debugShowSamplePoints: faceLivenessProps.debugShowSamplePoints
     }, /*#__PURE__*/React.createElement(FaceLivenessWizard, _assign({}, faceLivenessProps))));
   }
 
@@ -29151,32 +29223,34 @@
       _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(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(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);
@@ -29230,9 +29304,9 @@
         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;
@@ -29279,7 +29353,8 @@
       classNames: classNames.capture,
       colors: colors.capture,
       verbiage: verbiage.capture,
-      debugMode: debugMode
+      debugMode: debugMode,
+      debugShowSamplePoints: debugShowSamplePoints
     })), showLoadingOverlay && (/*#__PURE__*/React.createElement(SelfieCaptureLoadingOverlay, {
       key: attempt,
       mode: loadingOverlayMode,
@@ -29349,32 +29424,34 @@
       _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(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();
     }, []);
@@ -29426,17 +29503,17 @@
       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) {
@@ -29513,6 +29590,7 @@
             colors: colors.faceLiveness,
             verbiage: verbiage.faceLiveness,
             debugMode: debugMode,
+            debugShowSamplePoints: debugShowSamplePoints,
             renderCameraFeed: false
           }));
         case 'CAPTURING_SELFIE':
@@ -29537,6 +29615,7 @@
             colors: colors.faceLiveness,
             verbiage: verbiage.faceLiveness,
             debugMode: debugMode,
+            debugShowSamplePoints: debugShowSamplePoints,
             renderCameraFeed: false
           }));
         case 'CAPTURING_SIGNATURE':
@@ -29663,7 +29742,8 @@
       requireVerticalFaceCentering: false,
       minCaptureBrightnessThreshold: props.minCaptureBrightnessThreshold,
       minCaptureRangeThreshold: props.minCaptureRangeThreshold,
-      minCaptureVarianceThreshold: props.minCaptureVarianceThreshold
+      minCaptureVarianceThreshold: props.minCaptureVarianceThreshold,
+      debugShowSamplePoints: props.debugShowSamplePoints
     }, /*#__PURE__*/React.createElement(VideoSignatureWizard, _assign({
       ref: ref
     }, props, {
@@ -33753,7 +33833,9 @@
       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.createElement(AuthProvider, {
@@ -33823,11 +33905,12 @@
           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. */