idmission-web-sdk 2.2.45 → 2.2.47
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.
- package/dist/components/CompositeWizard.d.ts +2 -1
- package/dist/components/CompositeWizard.d.ts.map +1 -1
- package/dist/components/camera/CameraAccessDeniedOverlay.d.ts.map +1 -1
- package/dist/components/camera/CameraProvider.d.ts +17 -0
- package/dist/components/camera/CameraProvider.d.ts.map +1 -0
- package/dist/components/camera/CameraVideoTag.d.ts +4 -2
- package/dist/components/camera/CameraVideoTag.d.ts.map +1 -1
- package/dist/components/camera/MicrophoneAccessDeniedOverlay.d.ts.map +1 -1
- package/dist/components/customer_flows/CustomerBiometricsEnrollment.d.ts.map +1 -1
- package/dist/components/customer_flows/CustomerIdAndBiometricsEnrollment.d.ts.map +1 -1
- package/dist/components/customer_flows/CustomerIdentification.d.ts.map +1 -1
- package/dist/components/customer_flows/CustomerVerification.d.ts.map +1 -1
- package/dist/components/customer_flows/DocumentCapture.d.ts.map +1 -1
- package/dist/components/customer_flows/FaceValidation.d.ts.map +1 -1
- package/dist/components/customer_flows/IdAndFaceValidation.d.ts.map +1 -1
- package/dist/components/customer_flows/IdValidation.d.ts.map +1 -1
- package/dist/components/customer_flows/VideoIdValidation.d.ts.map +1 -1
- package/dist/components/customer_identification/CustomerIdentificationWizard.d.ts +1 -1
- package/dist/components/customer_identification/CustomerIdentificationWizard.d.ts.map +1 -1
- package/dist/components/customer_verification/CustomerVerificationWizard.d.ts.map +1 -1
- package/dist/components/document_capture/DocumentCaptureScreen.d.ts.map +1 -1
- package/dist/components/document_capture/DocumentCaptureStateProvider.d.ts.map +1 -1
- package/dist/components/face_liveness/FaceLivenessWizard.d.ts.map +1 -1
- package/dist/components/id_capture/DocumentDetectionModelProvider.d.ts.map +1 -1
- package/dist/components/id_capture/FocusModelProvider.d.ts.map +1 -1
- package/dist/components/id_capture/IdCapture.d.ts.map +1 -1
- package/dist/components/id_capture/IdCaptureGuides.d.ts.map +1 -1
- package/dist/components/id_capture/IdCaptureLoadingOverlayDefault.d.ts.map +1 -1
- package/dist/components/id_capture/IdCaptureLoadingOverlayLegacy.d.ts.map +1 -1
- package/dist/components/id_capture/IdCaptureWizard.d.ts.map +1 -1
- package/dist/components/selfie_capture/SelfieCapture.d.ts.map +1 -1
- package/dist/components/selfie_capture/SelfieCaptureLoadingOverlayDefault.d.ts.map +1 -1
- package/dist/components/selfie_capture/SelfieCaptureLoadingOverlayLegacy.d.ts.map +1 -1
- package/dist/components/selfie_capture/SelfieGuidanceModelsProvider.d.ts.map +1 -1
- package/dist/components/submission/SubmissionProvider.d.ts.map +1 -1
- package/dist/components/video_id/IdVideoCapture.d.ts.map +1 -1
- package/dist/components/video_id/IdVideoCaptureFlipIdPrompt.d.ts.map +1 -1
- package/dist/components/video_id/IdVideoCaptureGuides.d.ts.map +1 -1
- package/dist/components/video_id/IdVideoCaptureWizard.d.ts.map +1 -1
- package/dist/components/video_signature_capture/VideoSignatureCapture.d.ts.map +1 -1
- package/dist/components/video_signature_capture/VideoSignatureWizard.d.ts.map +1 -1
- package/dist/lib/camera/Camera.d.ts +0 -4
- package/dist/lib/camera/Camera.d.ts.map +1 -1
- package/dist/lib/models/DocumentDetection.d.ts +1 -3
- package/dist/lib/models/DocumentDetection.d.ts.map +1 -1
- package/dist/lib/models/FaceDetection.d.ts +1 -3
- package/dist/lib/models/FaceDetection.d.ts.map +1 -1
- package/dist/lib/models/Focus.d.ts +1 -3
- package/dist/lib/models/Focus.d.ts.map +1 -1
- package/dist/sdk2.cjs.development.js +1300 -1239
- package/dist/sdk2.cjs.development.js.map +1 -1
- package/dist/sdk2.cjs.production.js +1 -1
- package/dist/sdk2.cjs.production.js.map +1 -1
- package/dist/sdk2.esm.js +1300 -1239
- package/dist/sdk2.esm.js.map +1 -1
- package/dist/sdk2.umd.development.js +1238 -1294
- package/dist/sdk2.umd.development.js.map +1 -1
- package/dist/sdk2.umd.production.js +1 -1
- package/dist/sdk2.umd.production.js.map +1 -1
- package/dist/version.d.ts +1 -1
- package/package.json +4 -5
- package/dist/lib/camera/cameraStore.d.ts +0 -52
- package/dist/lib/camera/cameraStore.d.ts.map +0 -1
- package/dist/lib/camera/videoRefStack.d.ts +0 -6
- package/dist/lib/camera/videoRefStack.d.ts.map +0 -1
|
@@ -9,12 +9,10 @@ var tusJsClient = require('tus-js-client');
|
|
|
9
9
|
var SparkMD5 = require('spark-md5');
|
|
10
10
|
var useResizeObserver = require('use-resize-observer');
|
|
11
11
|
var tasksVision = require('@mediapipe/tasks-vision');
|
|
12
|
-
var zustand = require('zustand');
|
|
13
12
|
var useDebounce = require('use-debounce');
|
|
14
13
|
var reactDom = require('react-dom');
|
|
15
14
|
var LanguageDetector = require('i18next-browser-languagedetector');
|
|
16
15
|
var i18n = require('i18next');
|
|
17
|
-
var shallow = require('zustand/react/shallow');
|
|
18
16
|
var SignatureCanvas = require('react-signature-canvas');
|
|
19
17
|
|
|
20
18
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
@@ -234,7 +232,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
|
|
|
234
232
|
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
235
233
|
};
|
|
236
234
|
|
|
237
|
-
var webSdkVersion = '2.2.
|
|
235
|
+
var webSdkVersion = '2.2.47';
|
|
238
236
|
|
|
239
237
|
function getPlatform() {
|
|
240
238
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
@@ -803,11 +801,11 @@ function setDefaultAuthUrl(url) {
|
|
|
803
801
|
if (!allowedAuthUrls.includes(url)) throw new Error('invalid auth url');
|
|
804
802
|
exports.defaultAuthUrl = url;
|
|
805
803
|
}
|
|
806
|
-
var initialState$
|
|
804
|
+
var initialState$5 = {
|
|
807
805
|
authUrl: exports.defaultAuthUrl,
|
|
808
806
|
sessionCheckState: 'READY'
|
|
809
807
|
};
|
|
810
|
-
var AuthStateContext = /*#__PURE__*/React.createContext(initialState$
|
|
808
|
+
var AuthStateContext = /*#__PURE__*/React.createContext(initialState$5);
|
|
811
809
|
var AuthDispatchContext = /*#__PURE__*/React.createContext(function () {});
|
|
812
810
|
var reducer$4 = function reducer(state, action) {
|
|
813
811
|
switch (action.type) {
|
|
@@ -839,7 +837,7 @@ function useAuthReducer(authUrl, sessionId) {
|
|
|
839
837
|
if (authUrl === void 0) {
|
|
840
838
|
authUrl = exports.defaultAuthUrl;
|
|
841
839
|
}
|
|
842
|
-
var _a = React.useReducer(reducer$4, _assign(_assign({}, initialState$
|
|
840
|
+
var _a = React.useReducer(reducer$4, _assign(_assign({}, initialState$5), {
|
|
843
841
|
authUrl: authUrl
|
|
844
842
|
})),
|
|
845
843
|
state = _a[0],
|
|
@@ -1352,7 +1350,8 @@ var SubmissionProvider = function SubmissionProvider(_a) {
|
|
|
1352
1350
|
}
|
|
1353
1351
|
};
|
|
1354
1352
|
_e = {
|
|
1355
|
-
filetype: blob.type
|
|
1353
|
+
filetype: blob.type,
|
|
1354
|
+
contentType: blob.type
|
|
1356
1355
|
};
|
|
1357
1356
|
return [4 /*yield*/, calculateMd5(blob)];
|
|
1358
1357
|
case 3:
|
|
@@ -1919,48 +1918,6 @@ function calculateMd5(blob) {
|
|
|
1919
1918
|
});
|
|
1920
1919
|
}
|
|
1921
1920
|
|
|
1922
|
-
var visionTasksBasePath = "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.7/wasm";
|
|
1923
|
-
var visionRuntimePreloading = false;
|
|
1924
|
-
function preloadVisionRuntime() {
|
|
1925
|
-
return __awaiter(this, void 0, void 0, function () {
|
|
1926
|
-
function handleDownloadProgress(event) {
|
|
1927
|
-
var detail = event.detail;
|
|
1928
|
-
if (detail.url !== url) return;
|
|
1929
|
-
progressByUseCase.visionRuntime = sumUpProgressForDependencies([url]);
|
|
1930
|
-
document.dispatchEvent(new CustomEvent('idmission.preloadProgress.visionRuntime', {
|
|
1931
|
-
detail: progressByUseCase.visionRuntime
|
|
1932
|
-
}));
|
|
1933
|
-
}
|
|
1934
|
-
var url;
|
|
1935
|
-
return __generator(this, function (_a) {
|
|
1936
|
-
switch (_a.label) {
|
|
1937
|
-
case 0:
|
|
1938
|
-
if (visionRuntimePreloading) return [2 /*return*/, new Promise(function (resolve) {
|
|
1939
|
-
setInterval(function () {
|
|
1940
|
-
if (!visionRuntimePreloading) resolve();
|
|
1941
|
-
}, 100);
|
|
1942
|
-
})];
|
|
1943
|
-
visionRuntimePreloading = true;
|
|
1944
|
-
url = "".concat(visionTasksBasePath, "/vision_wasm_internal.wasm");
|
|
1945
|
-
document.addEventListener('idmission.preloadProgress', handleDownloadProgress);
|
|
1946
|
-
_a.label = 1;
|
|
1947
|
-
case 1:
|
|
1948
|
-
_a.trys.push([1,, 3, 4]);
|
|
1949
|
-
return [4 /*yield*/, preloadDependency(url)];
|
|
1950
|
-
case 2:
|
|
1951
|
-
_a.sent();
|
|
1952
|
-
return [3 /*break*/, 4];
|
|
1953
|
-
case 3:
|
|
1954
|
-
document.removeEventListener('idmission.preloadProgress', handleDownloadProgress);
|
|
1955
|
-
visionRuntimePreloading = false;
|
|
1956
|
-
return [7 /*endfinally*/];
|
|
1957
|
-
case 4:
|
|
1958
|
-
return [2 /*return*/];
|
|
1959
|
-
}
|
|
1960
|
-
});
|
|
1961
|
-
});
|
|
1962
|
-
}
|
|
1963
|
-
|
|
1964
1921
|
function getFrameDimensions(frame) {
|
|
1965
1922
|
var frameWidth = frame.width,
|
|
1966
1923
|
frameHeight = frame.height;
|
|
@@ -1997,219 +1954,827 @@ function clearCanvas(canvas) {
|
|
|
1997
1954
|
}
|
|
1998
1955
|
var templateObject_1$G;
|
|
1999
1956
|
|
|
2000
|
-
function
|
|
2001
|
-
|
|
2002
|
-
|
|
2003
|
-
|
|
2004
|
-
|
|
2005
|
-
|
|
2006
|
-
var cropCtx = cropCanvas.getContext('2d');
|
|
2007
|
-
var resizeCtx = resizeCanvas.getContext('2d');
|
|
2008
|
-
if (!rawCtx || !cropCtx || !resizeCtx) throw new Error('could not get 2d context');
|
|
2009
|
-
rawCanvas.width = frame.width;
|
|
2010
|
-
rawCanvas.height = frame.height;
|
|
2011
|
-
rawCtx.putImageData(frame, 0, 0);
|
|
2012
|
-
if (frame.height > frame.width) {
|
|
2013
|
-
cropCanvas.width = frame.width;
|
|
2014
|
-
cropCanvas.height = frame.height;
|
|
2015
|
-
cropCtx.drawImage(rawCanvas, 0, 0, cropCanvas.width, cropCanvas.height);
|
|
2016
|
-
} else {
|
|
2017
|
-
var _a = face.box,
|
|
2018
|
-
xMin = _a.xMin,
|
|
2019
|
-
width = _a.width;
|
|
2020
|
-
var desiredWidth = frame.height * 0.6;
|
|
2021
|
-
var faceCenterX = xMin + width / 2;
|
|
2022
|
-
var xPos = Math.max(0, faceCenterX - desiredWidth / 2);
|
|
2023
|
-
cropCanvas.width = desiredWidth;
|
|
2024
|
-
cropCanvas.height = frame.height;
|
|
2025
|
-
cropCtx.drawImage(rawCanvas, xPos, 0, cropCanvas.width, cropCanvas.height, 0, 0, cropCanvas.width, cropCanvas.height);
|
|
2026
|
-
}
|
|
2027
|
-
resizeCanvas.height = maxHeight !== null && maxHeight !== void 0 ? maxHeight : cropCanvas.height;
|
|
2028
|
-
resizeCanvas.width = cropCanvas.width * (resizeCanvas.height / cropCanvas.height);
|
|
2029
|
-
resizeCtx === null || resizeCtx === void 0 ? void 0 : resizeCtx.drawImage(cropCanvas, 0, 0, resizeCanvas.width, resizeCanvas.height);
|
|
2030
|
-
var dataURL = resizeCanvas.toDataURL('image/jpeg', quality);
|
|
2031
|
-
log('cropToShoulders size', new TextEncoder().encode(dataURL).length);
|
|
2032
|
-
clearCanvas(rawCanvas);
|
|
2033
|
-
clearCanvas(cropCanvas);
|
|
2034
|
-
clearCanvas(resizeCanvas);
|
|
2035
|
-
return dataURL;
|
|
2036
|
-
}
|
|
2037
|
-
function cropToDetectedObjectBox(frame, box, canvas) {
|
|
2038
|
-
canvas || (canvas = document.createElement('canvas'));
|
|
2039
|
-
var ctx = canvas.getContext('2d');
|
|
2040
|
-
if (!ctx) throw new Error('could not get 2d context');
|
|
2041
|
-
var xMin = box.xMin,
|
|
2042
|
-
yMin = box.yMin,
|
|
2043
|
-
width = box.width,
|
|
2044
|
-
height = box.height;
|
|
2045
|
-
canvas.width = width;
|
|
2046
|
-
canvas.height = height;
|
|
2047
|
-
ctx.drawImage(frame, xMin, yMin, width, height, 0, 0, width, height);
|
|
2048
|
-
return canvas;
|
|
2049
|
-
}
|
|
2050
|
-
|
|
2051
|
-
var defaultImageSegmenterModelPath = 'https://websdk-cdn-dev.idmission.com/assets/models/selfiesegmenter20240524/selfie_segmenter.tflite';
|
|
2052
|
-
var imageSegmenterModelSizeInBytes = 256440.32;
|
|
2053
|
-
// The idea here is that we globally set a cache key based on the time at page load. That way our built-in speed test
|
|
2054
|
-
// isn't fooled by cache times, but subsequent downloads of the vision runtime still do load from the cache.
|
|
2055
|
-
var tinyModelCacheKey = new Date().getTime();
|
|
2056
|
-
var initialModelCapabilities = {
|
|
2057
|
-
probeState: 'notProbed',
|
|
2058
|
-
delegate: 'GPU',
|
|
2059
|
-
networkTier: 'untested',
|
|
2060
|
-
networkSpeed: 0,
|
|
2061
|
-
networkTestTime: 0
|
|
2062
|
-
};
|
|
2063
|
-
var modelCapabilities = _assign({}, initialModelCapabilities);
|
|
2064
|
-
function probeModelCapabilities() {
|
|
2065
|
-
return __awaiter(this, void 0, void 0, function () {
|
|
2066
|
-
var error_1, error_2;
|
|
1957
|
+
function listAvailableCameras(facingMode_1) {
|
|
1958
|
+
return __awaiter(this, arguments, void 0, function (facingMode, requestMicAccess) {
|
|
1959
|
+
var cameraEnumerationStream, videoDevices;
|
|
1960
|
+
if (requestMicAccess === void 0) {
|
|
1961
|
+
requestMicAccess = false;
|
|
1962
|
+
}
|
|
2067
1963
|
return __generator(this, function (_a) {
|
|
2068
1964
|
switch (_a.label) {
|
|
2069
1965
|
case 0:
|
|
2070
|
-
|
|
2071
|
-
|
|
2072
|
-
|
|
2073
|
-
|
|
2074
|
-
|
|
2075
|
-
|
|
2076
|
-
|
|
2077
|
-
|
|
1966
|
+
return [4 /*yield*/, navigator.mediaDevices.getUserMedia({
|
|
1967
|
+
video: {
|
|
1968
|
+
facingMode: {
|
|
1969
|
+
exact: facingMode
|
|
1970
|
+
}
|
|
1971
|
+
},
|
|
1972
|
+
audio: requestMicAccess
|
|
1973
|
+
})
|
|
1974
|
+
// This lists all available cameras attached to the user's device.
|
|
1975
|
+
];
|
|
2078
1976
|
case 1:
|
|
2079
|
-
_a.sent();
|
|
2080
|
-
|
|
1977
|
+
cameraEnumerationStream = _a.sent();
|
|
1978
|
+
return [4 /*yield*/, navigator.mediaDevices.enumerateDevices()];
|
|
2081
1979
|
case 2:
|
|
2082
|
-
_a.
|
|
2083
|
-
|
|
2084
|
-
|
|
2085
|
-
|
|
2086
|
-
|
|
2087
|
-
|
|
2088
|
-
|
|
2089
|
-
|
|
2090
|
-
|
|
2091
|
-
|
|
2092
|
-
|
|
2093
|
-
_a.label = 5;
|
|
2094
|
-
case 5:
|
|
2095
|
-
_a.trys.push([5, 7,, 8]);
|
|
2096
|
-
log('Model Probing: testing CPU capabilities...');
|
|
2097
|
-
return [4 /*yield*/, loadTinyModel('CPU')];
|
|
2098
|
-
case 6:
|
|
2099
|
-
_a.sent();
|
|
2100
|
-
log('Model Probing: CPU is capable.');
|
|
2101
|
-
return [3 /*break*/, 8];
|
|
2102
|
-
case 7:
|
|
2103
|
-
error_2 = _a.sent();
|
|
2104
|
-
warn('Model Probing: CPU delegate could not be loaded', error_2);
|
|
2105
|
-
modelCapabilities.delegate = 'NONE';
|
|
2106
|
-
return [3 /*break*/, 8];
|
|
2107
|
-
case 8:
|
|
2108
|
-
return [3 /*break*/, 10];
|
|
2109
|
-
case 9:
|
|
2110
|
-
modelCapabilities.probeState = 'probed';
|
|
2111
|
-
return [7 /*endfinally*/];
|
|
2112
|
-
case 10:
|
|
2113
|
-
return [2 /*return*/];
|
|
1980
|
+
videoDevices = _a.sent().filter(function (_a) {
|
|
1981
|
+
var kind = _a.kind;
|
|
1982
|
+
return kind === 'videoinput';
|
|
1983
|
+
});
|
|
1984
|
+
// Release the access to the user's camera that we obtained for enumeration purposes.
|
|
1985
|
+
cameraEnumerationStream.getVideoTracks().forEach(function (track) {
|
|
1986
|
+
track.enabled = false;
|
|
1987
|
+
track.stop();
|
|
1988
|
+
});
|
|
1989
|
+
cameraEnumerationStream = null;
|
|
1990
|
+
return [2 /*return*/, videoDevices];
|
|
2114
1991
|
}
|
|
2115
1992
|
});
|
|
2116
1993
|
});
|
|
2117
1994
|
}
|
|
2118
|
-
function
|
|
2119
|
-
return
|
|
2120
|
-
|
|
2121
|
-
|
|
2122
|
-
|
|
1995
|
+
var frontLabels = ['front', 'avant', 'anteriore', 'cameraaanvoorzijde', 'kamerapåframsidan', 'forsidekamera', 'kamerapåforsiden', 'aparatprzedni', 'etukamera', 'kameradepan', 'ÖnKamera', 'cameramặttrước', 'camerăfață', 'prednákamera', 'prednjakamera', 'előlapikamera', 'přednífotoaparát', 'μπροστινήκάμερα', 'переднякамера', 'передняякамера', 'преднакамера', 'алдыңғыкамера', 'מצלמה קדמית', 'الكاميرا الأمامية', 'फ़्रंटकैमरा', '前置相机', '前置鏡頭', '前面カメラ', '전면카메라', 'กล้องด้านหน้า'].map(function (s) {
|
|
1996
|
+
return s.toLocaleLowerCase().split(' ').join('');
|
|
1997
|
+
});
|
|
1998
|
+
var rearLabels = ['back', 'rear', 'posterior', 'trasera', 'traseira', 'arrière', 'rückkamera', 'fotocamera(posteriore)', 'cameraaanachterzijde', 'kamerapåbaksidan', 'kamerapåbaksiden', 'bagsidekamera', 'aparattylny', 'takakamera', 'arkakamera', 'kamerabelakang', 'cameramặtsau', 'camerăspate', 'stražnjakamera', 'zadnákamera', 'hátoldalikamera', 'zadnífotoaparát', 'πίσωκάμερα', 'заднякамера', 'Задняякамера', 'заднакамера', 'артқыкамера', 'מצלמה אחורית', 'الكاميرا الخلفية', 'बैककैमरा', '后置相机', '後置鏡頭', '背面カメラ', '후면카메라', 'กล้องด้านหลัง'].map(function (s) {
|
|
1999
|
+
return s.toLocaleLowerCase().split(' ').join('');
|
|
2000
|
+
});
|
|
2001
|
+
var backUltraWideLabels = ['backdualwidecamera', 'backultrawidecamera', 'ultraampliaposterior', 'ultra-angulartraseira', 'ultragrandeangulartraseira', 'ultragrandangle', 'ultragranangular', 'ultra-weitwinkelkamera', 'ultra-grandangolo', 'ultrabredecameraaanachterzijde', 'ultravidvinkelkamerapåbaksidan', 'ultravidvinkelkameraetpåbagsiden', 'ultravidvinkelkamerabak', 'ultragenişkameraarkayüzü', 'ultralaajakulmainentakakamera', 'tylnyaparatultraszerokokątny', 'cameracựcrộngmặtsau', 'camerăcuobiectivultra‑superangularspate', 'ultraszéleslátószögűkamera', 'kameraultralebarbelakang', 'stražnjaultraširokakamera', 'zadníultraširokoúhlýfotoaparát', 'ultraširokouhlá', 'πίσωυπερευρείακάμερα', 'заднянадширококутнакамера', 'Задняясверхширокоугольнаякамера', 'Задна свръх широкоъгълна камера', 'артқыультракеңбұрыштыкамера', 'מצלמה אולטרה רחבה אחורית', 'كاميرا خلفية عريضة جدًا', 'बैकअल्ट्रावाइडकैमरा', '后置超广角相机', '後置超廣角鏡頭相機', '背面超広角カメラ', '후면울트라와이드카메라', 'กล้องด้านหลังอัลตร้าไวด์'].map(function (s) {
|
|
2002
|
+
return s.toLocaleLowerCase().split(' ').join('');
|
|
2003
|
+
});
|
|
2004
|
+
var labelMatches = function labelMatches(labelOrDevice, labelSetOrLabel) {
|
|
2005
|
+
var label = labelOrDevice instanceof MediaDeviceInfo ? getDeviceLabel(labelOrDevice) : labelOrDevice;
|
|
2006
|
+
var labelSet = typeof labelSetOrLabel === 'string' ? [labelSetOrLabel] : labelSetOrLabel;
|
|
2007
|
+
return labelSet.some(function (l) {
|
|
2008
|
+
return label.includes(l);
|
|
2009
|
+
});
|
|
2010
|
+
};
|
|
2011
|
+
var getDeviceLabel = function getDeviceLabel(deviceInfo) {
|
|
2012
|
+
return deviceInfo.label.toLocaleLowerCase().split(' ').join('');
|
|
2013
|
+
};
|
|
2014
|
+
var currentCamera;
|
|
2015
|
+
var currentAudioStream;
|
|
2016
|
+
function obtainCameraAccess(stream, deviceLabel, video) {
|
|
2017
|
+
releaseCameraAccess();
|
|
2018
|
+
log('obtaining camera access...');
|
|
2019
|
+
var _a = stream.getVideoTracks()[0].getSettings(),
|
|
2020
|
+
width = _a.width,
|
|
2021
|
+
height = _a.height;
|
|
2022
|
+
var label = deviceLabel.toLocaleLowerCase().split(' ').join('');
|
|
2023
|
+
var isRearFacing = labelMatches(label, __spreadArray(__spreadArray(__spreadArray([], rearLabels, true), backUltraWideLabels, true), ['iphone'], false));
|
|
2024
|
+
var release = function release() {
|
|
2025
|
+
stream.getTracks().forEach(function (track) {
|
|
2026
|
+
track.enabled = false;
|
|
2027
|
+
track.stop();
|
|
2028
|
+
});
|
|
2029
|
+
if (video) {
|
|
2030
|
+
video.pause();
|
|
2031
|
+
video.srcObject = null;
|
|
2032
|
+
video.src = '';
|
|
2123
2033
|
}
|
|
2124
|
-
|
|
2125
|
-
|
|
2034
|
+
};
|
|
2035
|
+
width || (width = 0);
|
|
2036
|
+
height || (height = 0);
|
|
2037
|
+
currentCamera = {
|
|
2038
|
+
label: deviceLabel,
|
|
2039
|
+
stream: stream,
|
|
2040
|
+
width: width,
|
|
2041
|
+
height: height,
|
|
2042
|
+
isRearFacing: isRearFacing,
|
|
2043
|
+
release: release
|
|
2044
|
+
};
|
|
2045
|
+
if (video) video.srcObject = stream;
|
|
2046
|
+
return currentCamera;
|
|
2047
|
+
}
|
|
2048
|
+
function releaseCameraAccess() {
|
|
2049
|
+
if (!currentCamera) return;
|
|
2050
|
+
log('releasing camera access...');
|
|
2051
|
+
currentCamera.release();
|
|
2052
|
+
currentCamera = undefined;
|
|
2053
|
+
}
|
|
2054
|
+
function releaseMicrophoneAccess() {
|
|
2055
|
+
var _a;
|
|
2056
|
+
if (!currentAudioStream) return;
|
|
2057
|
+
log('releasing microphone access...');
|
|
2058
|
+
(_a = currentAudioStream.stop) === null || _a === void 0 ? void 0 : _a.call(currentAudioStream);
|
|
2059
|
+
currentAudioStream.getAudioTracks().forEach(function (t) {
|
|
2060
|
+
var _a;
|
|
2061
|
+
(_a = t.stop) === null || _a === void 0 ? void 0 : _a.call(t);
|
|
2062
|
+
});
|
|
2063
|
+
currentAudioStream = undefined;
|
|
2064
|
+
}
|
|
2065
|
+
function usePreferredCaptureDevice(_a) {
|
|
2066
|
+
var _b = _a === void 0 ? {} : _a,
|
|
2067
|
+
_c = _b.requestAccessAutomatically,
|
|
2068
|
+
requestAccessAutomatically = _c === void 0 ? true : _c,
|
|
2069
|
+
_d = _b.preferFrontFacingCamera,
|
|
2070
|
+
preferFrontFacingCamera = _d === void 0 ? false : _d,
|
|
2071
|
+
_e = _b.preferContinuityCamera,
|
|
2072
|
+
preferContinuityCamera = _e === void 0 ? true : _e,
|
|
2073
|
+
_f = _b.requireMicrophoneAccess,
|
|
2074
|
+
requireMicrophoneAccess = _f === void 0 ? false : _f,
|
|
2075
|
+
_g = _b.maxVideoWidth,
|
|
2076
|
+
maxVideoWidth = _g === void 0 ? 1920 : _g,
|
|
2077
|
+
maxFps = _b.maxFps,
|
|
2078
|
+
_h = _b.debugMode,
|
|
2079
|
+
debugMode = _h === void 0 ? false : _h;
|
|
2080
|
+
var videoRef = React.useRef(null);
|
|
2081
|
+
var videoRefStack = React.useRef([]);
|
|
2082
|
+
var cameraRef = React.useRef(null);
|
|
2083
|
+
var _j = React.useState(false),
|
|
2084
|
+
cameraReady = _j[0],
|
|
2085
|
+
setCameraReady = _j[1];
|
|
2086
|
+
var _k = React.useState(false),
|
|
2087
|
+
microphoneReady = _k[0],
|
|
2088
|
+
setMicrophoneReady = _k[1];
|
|
2089
|
+
var _l = React.useState(null),
|
|
2090
|
+
videoDevice = _l[0],
|
|
2091
|
+
setVideoDevice = _l[1];
|
|
2092
|
+
var _m = React.useState(null),
|
|
2093
|
+
audioStream = _m[0],
|
|
2094
|
+
setAudioStream = _m[1];
|
|
2095
|
+
var _o = React.useState(false),
|
|
2096
|
+
videoLoaded = _o[0],
|
|
2097
|
+
setVideoLoaded = _o[1];
|
|
2098
|
+
var _p = React.useState(false),
|
|
2099
|
+
iphoneContinuityCameraAvailable = _p[0],
|
|
2100
|
+
setIphoneContinuityCameraAvailable = _p[1];
|
|
2101
|
+
var _q = React.useState(preferContinuityCamera),
|
|
2102
|
+
iphoneContinuityCameraAllowed = _q[0],
|
|
2103
|
+
setIphoneContinuityCameraAllowed = _q[1];
|
|
2104
|
+
var _r = React.useState(false),
|
|
2105
|
+
iphoneContinuityCameraDenied = _r[0],
|
|
2106
|
+
setIphoneContinuityCameraDenied = _r[1];
|
|
2107
|
+
var _s = React.useState(false),
|
|
2108
|
+
cameraAccessDenied = _s[0],
|
|
2109
|
+
setCameraAccessDenied = _s[1];
|
|
2110
|
+
var _t = React.useState(false),
|
|
2111
|
+
microphoneAccessDenied = _t[0],
|
|
2112
|
+
setMicrophoneAccessDenied = _t[1];
|
|
2113
|
+
var videoRefElement = videoRef.current;
|
|
2114
|
+
React.useEffect(function pushVideoRefToStackWhenChanged() {
|
|
2115
|
+
// proceed if the video element being mounted is not already at the top of the videoRefStack.
|
|
2116
|
+
var topOfStack = videoRefStack.current.slice(-1)[0];
|
|
2117
|
+
if (videoRefElement && videoRefElement !== topOfStack) {
|
|
2118
|
+
log('adding video to stack', videoRefElement);
|
|
2119
|
+
videoRefStack.current.push(videoRefElement);
|
|
2120
|
+
}
|
|
2121
|
+
}, [videoRefElement]);
|
|
2122
|
+
var onVideoUnmounted = React.useCallback(function (videoElement) {
|
|
2123
|
+
log('removing video from stack', videoElement);
|
|
2124
|
+
videoRefStack.current = videoRefStack.current.filter(function (v) {
|
|
2125
|
+
return v !== videoElement;
|
|
2126
|
+
});
|
|
2127
|
+
videoRef.current = videoRefStack.current.slice(-1)[0]; // top of stack.
|
|
2128
|
+
log('new videoRef is', videoRef.current);
|
|
2129
|
+
}, []);
|
|
2130
|
+
React.useEffect(function resetCameraOnContinuityPreferenceChanged() {
|
|
2131
|
+
if (debugMode) {
|
|
2132
|
+
log('iphone continuity camera allowed changed', iphoneContinuityCameraAllowed);
|
|
2126
2133
|
}
|
|
2127
|
-
|
|
2128
|
-
|
|
2129
|
-
|
|
2130
|
-
|
|
2131
|
-
|
|
2132
|
-
|
|
2134
|
+
releaseCameraAccess();
|
|
2135
|
+
cameraRef.current = null;
|
|
2136
|
+
setVideoLoaded(false);
|
|
2137
|
+
}, [debugMode, iphoneContinuityCameraAllowed]);
|
|
2138
|
+
// NOTE: the bound callback function here is called requestCameraAccess, because
|
|
2139
|
+
// it initiates the useEffect chain that results in camera access being requested
|
|
2140
|
+
// (requestCameraAccessAutomatically -> chooseFromAvailableCameras -> accessChosenCamera).
|
|
2141
|
+
//
|
|
2142
|
+
// We chose to title the inner function "chooseFromAvailableCameras" because
|
|
2143
|
+
// that's all it literally does -- the available cameras are enumerated, and then
|
|
2144
|
+
// the result is parsed to decide which one we like best, which is then passed to
|
|
2145
|
+
// setVideoDevice, which causes accessChosenCamera to trigger.
|
|
2146
|
+
//
|
|
2147
|
+
// I am not a huge fan of getUserMedia's design -- you need to call it twice in order
|
|
2148
|
+
// to select the "best" camera for your application's purposes.
|
|
2149
|
+
var requestCameraAccess = React.useCallback(function chooseFromAvailableCameras() {
|
|
2150
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
2151
|
+
var availableCameras, selectedCamera, platform_1, iphoneContinuityCamera, e_1;
|
|
2152
|
+
var _a, _b;
|
|
2153
|
+
return __generator(this, function (_c) {
|
|
2154
|
+
switch (_c.label) {
|
|
2155
|
+
case 0:
|
|
2156
|
+
setCameraReady(false);
|
|
2157
|
+
setCameraAccessDenied(false);
|
|
2158
|
+
_c.label = 1;
|
|
2159
|
+
case 1:
|
|
2160
|
+
_c.trys.push([1, 3,, 4]);
|
|
2161
|
+
return [4 /*yield*/, listAvailableCameras()];
|
|
2162
|
+
case 2:
|
|
2163
|
+
availableCameras = _c.sent();
|
|
2164
|
+
selectedCamera = void 0;
|
|
2165
|
+
if (debugMode) {
|
|
2166
|
+
log('availableCameras', availableCameras);
|
|
2167
|
+
}
|
|
2168
|
+
platform_1 = getPlatform();
|
|
2169
|
+
if (debugMode) {
|
|
2170
|
+
log('platformDetails', platform_1);
|
|
2171
|
+
}
|
|
2172
|
+
if (!iphoneContinuityCameraDenied && (!(platform_1 === null || platform_1 === void 0 ? void 0 : platform_1.os) || platform_1.os.family === 'OS X')) {
|
|
2173
|
+
iphoneContinuityCamera = availableCameras.find(function (deviceInfo) {
|
|
2174
|
+
return labelMatches(deviceInfo, 'iphone');
|
|
2175
|
+
});
|
|
2176
|
+
setIphoneContinuityCameraAvailable(!!iphoneContinuityCamera);
|
|
2177
|
+
if (iphoneContinuityCamera && iphoneContinuityCameraAllowed) {
|
|
2178
|
+
selectedCamera = iphoneContinuityCamera;
|
|
2179
|
+
}
|
|
2180
|
+
} else if (((_a = platform_1 === null || platform_1 === void 0 ? void 0 : platform_1.os) === null || _a === void 0 ? void 0 : _a.family) === 'Android' || availableCameras.every(function (c) {
|
|
2181
|
+
return c.label.startsWith('camera2 ');
|
|
2182
|
+
})) {
|
|
2183
|
+
availableCameras = availableCameras.sort(function (a, b) {
|
|
2184
|
+
return a.label.toLowerCase().localeCompare(b.label.toLowerCase());
|
|
2185
|
+
});
|
|
2186
|
+
if (debugMode) {
|
|
2187
|
+
log('cameras have been sorted', availableCameras);
|
|
2188
|
+
}
|
|
2189
|
+
}
|
|
2190
|
+
if (preferFrontFacingCamera) {
|
|
2191
|
+
selectedCamera = availableCameras.find(function (deviceInfo) {
|
|
2192
|
+
return labelMatches(deviceInfo, frontLabels);
|
|
2193
|
+
});
|
|
2194
|
+
}
|
|
2195
|
+
selectedCamera || (selectedCamera = availableCameras.find(function (deviceInfo) {
|
|
2196
|
+
return labelMatches(deviceInfo, 'backtriplecamera');
|
|
2197
|
+
}));
|
|
2198
|
+
selectedCamera || (selectedCamera = availableCameras.find(function (deviceInfo) {
|
|
2199
|
+
return labelMatches(deviceInfo, 'backdualcamera');
|
|
2200
|
+
}));
|
|
2201
|
+
selectedCamera || (selectedCamera = availableCameras.find(function (deviceInfo) {
|
|
2202
|
+
return labelMatches(deviceInfo, rearLabels) && !labelMatches(deviceInfo, backUltraWideLabels);
|
|
2203
|
+
}));
|
|
2204
|
+
selectedCamera || (selectedCamera = availableCameras.find(function (deviceInfo) {
|
|
2205
|
+
return labelMatches(deviceInfo, rearLabels);
|
|
2206
|
+
}));
|
|
2207
|
+
// on iOS, the front facing camera always is at the first position in the list, so we skip it if all else fails.
|
|
2208
|
+
if (!preferFrontFacingCamera && ((_b = platform_1 === null || platform_1 === void 0 ? void 0 : platform_1.os) === null || _b === void 0 ? void 0 : _b.family) === 'iOS' && availableCameras.length > 0) {
|
|
2209
|
+
selectedCamera || (selectedCamera = availableCameras[1]);
|
|
2210
|
+
}
|
|
2211
|
+
selectedCamera || (selectedCamera = availableCameras[0]);
|
|
2212
|
+
if (debugMode) log('selectedCamera', selectedCamera);
|
|
2213
|
+
setVideoDevice(selectedCamera);
|
|
2214
|
+
return [3 /*break*/, 4];
|
|
2215
|
+
case 3:
|
|
2216
|
+
e_1 = _c.sent();
|
|
2217
|
+
if (e_1.name === 'NotAllowedError') {
|
|
2218
|
+
error('camera access has been blocked by the user', e_1);
|
|
2219
|
+
setCameraAccessDenied(true);
|
|
2220
|
+
} else {
|
|
2221
|
+
error('camera access encountered some other error', e_1);
|
|
2222
|
+
throw e_1;
|
|
2223
|
+
}
|
|
2224
|
+
return [3 /*break*/, 4];
|
|
2225
|
+
case 4:
|
|
2226
|
+
return [2 /*return*/];
|
|
2227
|
+
}
|
|
2228
|
+
});
|
|
2229
|
+
});
|
|
2230
|
+
}, [debugMode, iphoneContinuityCameraAllowed, iphoneContinuityCameraDenied, preferFrontFacingCamera]);
|
|
2231
|
+
React.useEffect(function requestCameraAccessAutomatically() {
|
|
2232
|
+
if (requestAccessAutomatically && !cameraAccessDenied) {
|
|
2233
|
+
requestCameraAccess()["catch"](error);
|
|
2234
|
+
}
|
|
2235
|
+
}, [cameraAccessDenied, requestAccessAutomatically, requestCameraAccess]);
|
|
2236
|
+
React.useEffect(function accessChosenCamera() {
|
|
2237
|
+
var _this = this;
|
|
2238
|
+
var _a;
|
|
2239
|
+
if (!videoDevice) return;
|
|
2240
|
+
var cleanup = function cleanup() {
|
|
2241
|
+
releaseCameraAccess();
|
|
2242
|
+
cameraRef.current = null;
|
|
2243
|
+
setVideoLoaded(false);
|
|
2244
|
+
};
|
|
2245
|
+
if (!((_a = navigator.mediaDevices) === null || _a === void 0 ? void 0 : _a.getUserMedia)) return cleanup;
|
|
2246
|
+
(function () {
|
|
2247
|
+
return __awaiter(_this, void 0, void 0, function () {
|
|
2248
|
+
var constraints, stream, e_2, handleStreamEnded;
|
|
2249
|
+
var _a;
|
|
2250
|
+
return __generator(this, function (_b) {
|
|
2251
|
+
switch (_b.label) {
|
|
2252
|
+
case 0:
|
|
2253
|
+
constraints = {
|
|
2254
|
+
audio: false,
|
|
2255
|
+
video: {
|
|
2256
|
+
deviceId: {
|
|
2257
|
+
exact: videoDevice.deviceId
|
|
2258
|
+
},
|
|
2259
|
+
width: {
|
|
2260
|
+
ideal: maxVideoWidth
|
|
2261
|
+
},
|
|
2262
|
+
aspectRatio: 1.777777778,
|
|
2263
|
+
frameRate: {}
|
|
2264
|
+
}
|
|
2265
|
+
};
|
|
2266
|
+
if (maxFps) {
|
|
2267
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
2268
|
+
// @ts-ignore
|
|
2269
|
+
constraints.video.frameRate = {
|
|
2270
|
+
max: maxFps
|
|
2271
|
+
};
|
|
2272
|
+
}
|
|
2273
|
+
stream = null;
|
|
2274
|
+
_b.label = 1;
|
|
2275
|
+
case 1:
|
|
2276
|
+
_b.trys.push([1, 3,, 4]);
|
|
2277
|
+
return [4 /*yield*/, navigator.mediaDevices.getUserMedia(constraints)];
|
|
2278
|
+
case 2:
|
|
2279
|
+
stream = _b.sent();
|
|
2280
|
+
return [3 /*break*/, 4];
|
|
2281
|
+
case 3:
|
|
2282
|
+
e_2 = _b.sent();
|
|
2283
|
+
if (e_2.name === 'NotAllowedError') {
|
|
2284
|
+
if (iphoneContinuityCameraAllowed) {
|
|
2285
|
+
setIphoneContinuityCameraAvailable(false);
|
|
2286
|
+
setIphoneContinuityCameraDenied(true);
|
|
2287
|
+
} else {
|
|
2288
|
+
setCameraAccessDenied(true);
|
|
2289
|
+
}
|
|
2290
|
+
return [2 /*return*/];
|
|
2291
|
+
}
|
|
2292
|
+
return [3 /*break*/, 4];
|
|
2293
|
+
case 4:
|
|
2294
|
+
if (!!stream) return [3 /*break*/, 8];
|
|
2295
|
+
_b.label = 5;
|
|
2296
|
+
case 5:
|
|
2297
|
+
_b.trys.push([5, 7,, 8]);
|
|
2298
|
+
return [4 /*yield*/, navigator.mediaDevices.getUserMedia({
|
|
2299
|
+
audio: false,
|
|
2300
|
+
video: true
|
|
2301
|
+
})];
|
|
2302
|
+
case 6:
|
|
2303
|
+
stream = _b.sent();
|
|
2304
|
+
log('opened stream with no width and height constraints');
|
|
2305
|
+
return [3 /*break*/, 8];
|
|
2306
|
+
case 7:
|
|
2307
|
+
_b.sent();
|
|
2308
|
+
log('cannot open stream at all');
|
|
2309
|
+
return [3 /*break*/, 8];
|
|
2310
|
+
case 8:
|
|
2311
|
+
if (!stream) {
|
|
2312
|
+
throw new Error('failed to open camera');
|
|
2313
|
+
}
|
|
2314
|
+
handleStreamEnded = function handleStreamEnded() {
|
|
2315
|
+
if (iphoneContinuityCameraAvailable && iphoneContinuityCameraAllowed) {
|
|
2316
|
+
log('someone unplugged the continuity camera');
|
|
2317
|
+
releaseCameraAccess();
|
|
2318
|
+
cameraRef.current = null;
|
|
2319
|
+
setIphoneContinuityCameraAvailable(false);
|
|
2320
|
+
setIphoneContinuityCameraDenied(true);
|
|
2321
|
+
setVideoDevice(null);
|
|
2322
|
+
} else {
|
|
2323
|
+
log('someone unplugged the webcam');
|
|
2324
|
+
releaseCameraAccess();
|
|
2325
|
+
cameraRef.current = null;
|
|
2326
|
+
setVideoLoaded(false);
|
|
2327
|
+
setCameraAccessDenied(true);
|
|
2328
|
+
}
|
|
2329
|
+
};
|
|
2330
|
+
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('ended', handleStreamEnded);
|
|
2331
|
+
stream.getVideoTracks().forEach(function (track) {
|
|
2332
|
+
track.onended = handleStreamEnded;
|
|
2333
|
+
});
|
|
2334
|
+
cameraRef.current = obtainCameraAccess(stream, videoDevice.label, videoRef.current);
|
|
2335
|
+
return [2 /*return*/];
|
|
2336
|
+
}
|
|
2337
|
+
});
|
|
2338
|
+
});
|
|
2339
|
+
})();
|
|
2340
|
+
return cleanup;
|
|
2341
|
+
}, [iphoneContinuityCameraAllowed, iphoneContinuityCameraAvailable, maxFps, maxVideoWidth, videoDevice]);
|
|
2342
|
+
React.useEffect(function triggerCameraReady() {
|
|
2343
|
+
// TODO: in the future let's evaluate whether we can simplify this to just
|
|
2344
|
+
// setCameraReady(!!videoDevice && videoLoaded) -- we are wondering whether
|
|
2345
|
+
// we somehow depend on this being set twice.
|
|
2346
|
+
setCameraReady(false);
|
|
2347
|
+
if (videoDevice && videoLoaded) {
|
|
2348
|
+
setCameraReady(videoDevice && videoLoaded);
|
|
2349
|
+
}
|
|
2350
|
+
}, [videoLoaded, videoDevice]);
|
|
2351
|
+
var requestMicrophoneAccess = React.useCallback(function _requestMicrophoneAccess() {
|
|
2352
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
2353
|
+
var stream;
|
|
2354
|
+
return __generator(this, function (_a) {
|
|
2355
|
+
switch (_a.label) {
|
|
2356
|
+
case 0:
|
|
2357
|
+
setMicrophoneReady(false);
|
|
2358
|
+
setMicrophoneAccessDenied(false);
|
|
2359
|
+
_a.label = 1;
|
|
2360
|
+
case 1:
|
|
2361
|
+
_a.trys.push([1, 3,, 4]);
|
|
2362
|
+
return [4 /*yield*/, navigator.mediaDevices.getUserMedia({
|
|
2363
|
+
audio: true,
|
|
2364
|
+
video: false
|
|
2365
|
+
})];
|
|
2366
|
+
case 2:
|
|
2367
|
+
stream = _a.sent();
|
|
2368
|
+
currentAudioStream = stream;
|
|
2369
|
+
setAudioStream(stream);
|
|
2370
|
+
setMicrophoneReady(true);
|
|
2371
|
+
stream.getAudioTracks().forEach(function (track) {
|
|
2372
|
+
track.onended = function () {
|
|
2373
|
+
setMicrophoneAccessDenied(true);
|
|
2374
|
+
};
|
|
2375
|
+
});
|
|
2376
|
+
return [3 /*break*/, 4];
|
|
2377
|
+
case 3:
|
|
2378
|
+
_a.sent();
|
|
2379
|
+
setMicrophoneAccessDenied(true);
|
|
2380
|
+
return [3 /*break*/, 4];
|
|
2381
|
+
case 4:
|
|
2382
|
+
return [2 /*return*/];
|
|
2383
|
+
}
|
|
2384
|
+
});
|
|
2385
|
+
});
|
|
2386
|
+
}, []);
|
|
2387
|
+
React.useEffect(function requestMicrophoneAccessIfNeeded() {
|
|
2388
|
+
if (!requireMicrophoneAccess || microphoneAccessDenied) return;
|
|
2389
|
+
requestMicrophoneAccess()["catch"](error);
|
|
2390
|
+
return function () {
|
|
2391
|
+
releaseMicrophoneAccess();
|
|
2392
|
+
setAudioStream(null);
|
|
2393
|
+
setMicrophoneReady(false);
|
|
2394
|
+
};
|
|
2395
|
+
}, [microphoneAccessDenied, requestMicrophoneAccess, requireMicrophoneAccess]);
|
|
2396
|
+
var takePhoto = React.useCallback(function _takePhoto() {
|
|
2397
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
2398
|
+
var canvas;
|
|
2399
|
+
return __generator(this, function (_a) {
|
|
2400
|
+
switch (_a.label) {
|
|
2401
|
+
case 0:
|
|
2402
|
+
if (!cameraRef.current) return [2 /*return*/, null];
|
|
2403
|
+
if (!(typeof ImageCapture !== 'undefined')) return [3 /*break*/, 2];
|
|
2404
|
+
return [4 /*yield*/, new ImageCapture(cameraRef.current.stream.getTracks()[0]).takePhoto()];
|
|
2405
|
+
case 1:
|
|
2406
|
+
return [2 /*return*/, _a.sent()];
|
|
2407
|
+
case 2:
|
|
2408
|
+
if (!videoRef.current) return [2 /*return*/, null];
|
|
2409
|
+
canvas = document.createElement('canvas');
|
|
2410
|
+
drawToCanvas(canvas, videoRef.current);
|
|
2411
|
+
return [2 /*return*/, new Promise(function (resolve) {
|
|
2412
|
+
return canvas.toBlob(resolve);
|
|
2413
|
+
})];
|
|
2414
|
+
}
|
|
2415
|
+
});
|
|
2416
|
+
});
|
|
2417
|
+
}, []);
|
|
2418
|
+
return React.useMemo(function () {
|
|
2419
|
+
return {
|
|
2420
|
+
videoRef: videoRef,
|
|
2421
|
+
videoDevice: videoDevice,
|
|
2422
|
+
videoLoaded: videoLoaded,
|
|
2423
|
+
setVideoLoaded: setVideoLoaded,
|
|
2424
|
+
onVideoUnmounted: onVideoUnmounted,
|
|
2425
|
+
cameraRef: cameraRef,
|
|
2426
|
+
cameraReady: cameraReady,
|
|
2427
|
+
cameraAccessDenied: cameraAccessDenied,
|
|
2428
|
+
requestCameraAccess: requestCameraAccess,
|
|
2429
|
+
releaseCameraAccess: releaseCameraAccess,
|
|
2430
|
+
iphoneContinuityCameraAvailable: iphoneContinuityCameraAvailable,
|
|
2431
|
+
iphoneContinuityCameraAllowed: iphoneContinuityCameraAllowed,
|
|
2432
|
+
setIphoneContinuityCameraAllowed: setIphoneContinuityCameraAllowed,
|
|
2433
|
+
takePhoto: takePhoto,
|
|
2434
|
+
audioStream: audioStream,
|
|
2435
|
+
microphoneReady: microphoneReady,
|
|
2436
|
+
microphoneAccessDenied: microphoneAccessDenied,
|
|
2437
|
+
requestMicrophoneAccess: requestMicrophoneAccess
|
|
2438
|
+
};
|
|
2439
|
+
}, [audioStream, cameraAccessDenied, cameraReady, iphoneContinuityCameraAllowed, iphoneContinuityCameraAvailable, microphoneAccessDenied, microphoneReady, onVideoUnmounted, requestCameraAccess, requestMicrophoneAccess, takePhoto, videoDevice, videoLoaded]);
|
|
2440
|
+
}
|
|
2441
|
+
|
|
2442
|
+
var CameraStateContext = /*#__PURE__*/React.createContext({
|
|
2443
|
+
videoRef: {
|
|
2444
|
+
current: null
|
|
2445
|
+
},
|
|
2446
|
+
videoDevice: null,
|
|
2447
|
+
videoLoaded: false,
|
|
2448
|
+
cameraRef: {
|
|
2449
|
+
current: null
|
|
2450
|
+
},
|
|
2451
|
+
cameraReady: false,
|
|
2452
|
+
cameraAccessDenied: false,
|
|
2453
|
+
requestCameraAccess: function requestCameraAccess() {
|
|
2454
|
+
return null;
|
|
2455
|
+
},
|
|
2456
|
+
releaseCameraAccess: function releaseCameraAccess() {
|
|
2457
|
+
return null;
|
|
2458
|
+
},
|
|
2459
|
+
iphoneContinuityCameraAvailable: false,
|
|
2460
|
+
iphoneContinuityCameraAllowed: true,
|
|
2461
|
+
setIphoneContinuityCameraAllowed: function setIphoneContinuityCameraAllowed() {
|
|
2462
|
+
return null;
|
|
2463
|
+
},
|
|
2464
|
+
takePhoto: function takePhoto() {
|
|
2465
|
+
return Promise.resolve(null);
|
|
2466
|
+
},
|
|
2467
|
+
setVideoLoaded: function setVideoLoaded() {
|
|
2468
|
+
return null;
|
|
2469
|
+
},
|
|
2470
|
+
onVideoUnmounted: function onVideoUnmounted() {
|
|
2471
|
+
return null;
|
|
2472
|
+
},
|
|
2473
|
+
audioStream: null,
|
|
2474
|
+
microphoneReady: false,
|
|
2475
|
+
microphoneAccessDenied: false,
|
|
2476
|
+
requestMicrophoneAccess: function requestMicrophoneAccess() {
|
|
2477
|
+
return null;
|
|
2478
|
+
}
|
|
2479
|
+
});
|
|
2480
|
+
var CameraProvider = function CameraProvider(_a) {
|
|
2481
|
+
var children = _a.children,
|
|
2482
|
+
_b = _a.requestAccessAutomatically,
|
|
2483
|
+
requestAccessAutomatically = _b === void 0 ? true : _b,
|
|
2484
|
+
_c = _a.preferFrontFacingCamera,
|
|
2485
|
+
preferFrontFacingCamera = _c === void 0 ? false : _c,
|
|
2486
|
+
_d = _a.preferContinuityCamera,
|
|
2487
|
+
preferContinuityCamera = _d === void 0 ? true : _d,
|
|
2488
|
+
_e = _a.requireMicrophoneAccess,
|
|
2489
|
+
requireMicrophoneAccess = _e === void 0 ? false : _e,
|
|
2490
|
+
_f = _a.maxVideoWidth,
|
|
2491
|
+
maxVideoWidth = _f === void 0 ? 1920 : _f,
|
|
2492
|
+
maxFps = _a.maxFps,
|
|
2493
|
+
onCameraAccessDenied = _a.onCameraAccessDenied,
|
|
2494
|
+
onMicrophoneAccessDenied = _a.onMicrophoneAccessDenied,
|
|
2495
|
+
_g = _a.debugMode,
|
|
2496
|
+
debugMode = _g === void 0 ? false : _g;
|
|
2497
|
+
var captureDevice = usePreferredCaptureDevice({
|
|
2498
|
+
requestAccessAutomatically: requestAccessAutomatically,
|
|
2499
|
+
preferFrontFacingCamera: preferFrontFacingCamera,
|
|
2500
|
+
preferContinuityCamera: preferContinuityCamera,
|
|
2501
|
+
requireMicrophoneAccess: requireMicrophoneAccess,
|
|
2502
|
+
maxVideoWidth: maxVideoWidth,
|
|
2503
|
+
maxFps: maxFps,
|
|
2504
|
+
debugMode: debugMode
|
|
2505
|
+
});
|
|
2506
|
+
React.useEffect(function () {
|
|
2507
|
+
if (captureDevice.cameraAccessDenied) onCameraAccessDenied === null || onCameraAccessDenied === void 0 ? void 0 : onCameraAccessDenied();
|
|
2508
|
+
}, [captureDevice.cameraAccessDenied, onCameraAccessDenied]);
|
|
2509
|
+
React.useEffect(function () {
|
|
2510
|
+
if (captureDevice.microphoneAccessDenied) onMicrophoneAccessDenied === null || onMicrophoneAccessDenied === void 0 ? void 0 : onMicrophoneAccessDenied();
|
|
2511
|
+
}, [captureDevice.microphoneAccessDenied, onMicrophoneAccessDenied]);
|
|
2512
|
+
var releaseCameraAccess = captureDevice.releaseCameraAccess;
|
|
2513
|
+
React.useEffect(function () {
|
|
2514
|
+
return function () {
|
|
2515
|
+
releaseCameraAccess();
|
|
2516
|
+
};
|
|
2517
|
+
}, [releaseCameraAccess]);
|
|
2518
|
+
return /*#__PURE__*/React__namespace.default.createElement(CameraStateContext.Provider, {
|
|
2519
|
+
value: captureDevice
|
|
2520
|
+
}, children);
|
|
2521
|
+
};
|
|
2522
|
+
|
|
2523
|
+
var visionTasksBasePath = "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.7/wasm";
|
|
2524
|
+
var visionRuntimePreloading = false;
|
|
2525
|
+
function preloadVisionRuntime() {
|
|
2526
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
2527
|
+
function handleDownloadProgress(event) {
|
|
2528
|
+
var detail = event.detail;
|
|
2529
|
+
if (detail.url !== url) return;
|
|
2530
|
+
progressByUseCase.visionRuntime = sumUpProgressForDependencies([url]);
|
|
2531
|
+
document.dispatchEvent(new CustomEvent('idmission.preloadProgress.visionRuntime', {
|
|
2532
|
+
detail: progressByUseCase.visionRuntime
|
|
2533
|
+
}));
|
|
2534
|
+
}
|
|
2535
|
+
var url;
|
|
2536
|
+
return __generator(this, function (_a) {
|
|
2537
|
+
switch (_a.label) {
|
|
2538
|
+
case 0:
|
|
2539
|
+
if (visionRuntimePreloading) return [2 /*return*/, new Promise(function (resolve) {
|
|
2540
|
+
setInterval(function () {
|
|
2541
|
+
if (!visionRuntimePreloading) resolve();
|
|
2542
|
+
}, 100);
|
|
2543
|
+
})];
|
|
2544
|
+
visionRuntimePreloading = true;
|
|
2545
|
+
url = "".concat(visionTasksBasePath, "/vision_wasm_internal.wasm");
|
|
2546
|
+
document.addEventListener('idmission.preloadProgress', handleDownloadProgress);
|
|
2547
|
+
_a.label = 1;
|
|
2133
2548
|
case 1:
|
|
2134
|
-
|
|
2135
|
-
return [4 /*yield*/,
|
|
2549
|
+
_a.trys.push([1,, 3, 4]);
|
|
2550
|
+
return [4 /*yield*/, preloadDependency(url)];
|
|
2136
2551
|
case 2:
|
|
2137
|
-
|
|
2552
|
+
_a.sent();
|
|
2138
2553
|
return [3 /*break*/, 4];
|
|
2139
2554
|
case 3:
|
|
2140
|
-
|
|
2141
|
-
|
|
2142
|
-
|
|
2143
|
-
return [2 /*return*/];
|
|
2555
|
+
document.removeEventListener('idmission.preloadProgress', handleDownloadProgress);
|
|
2556
|
+
visionRuntimePreloading = false;
|
|
2557
|
+
return [7 /*endfinally*/];
|
|
2144
2558
|
case 4:
|
|
2145
|
-
time = (new Date().getTime() - startedAt.getTime()) / 1000.0;
|
|
2146
|
-
modelCapabilities.networkTestTime || (modelCapabilities.networkTestTime = time);
|
|
2147
|
-
modelCapabilities.networkSpeed || (modelCapabilities.networkSpeed = imageSegmenterModelSizeInBytes / time);
|
|
2148
|
-
modelCapabilities.networkTier = time < 0.5 ? 'fast' : time < 2 ? 'medium' : 'slow';
|
|
2149
|
-
speedMbps = modelCapabilities.networkSpeed / 1024 / 1024;
|
|
2150
|
-
log('Model Probing: network speed', speedMbps.toFixed(3), 'Mbps');
|
|
2151
|
-
log('Model Probing: network test took', time);
|
|
2152
|
-
log('Model Probing: network tier', modelCapabilities.networkTier);
|
|
2153
|
-
_b = (_a = tasksVision.ImageSegmenter).createFromOptions;
|
|
2154
|
-
return [4 /*yield*/, tasksVision.FilesetResolver.forVisionTasks(visionTasksBasePath)];
|
|
2155
|
-
case 5:
|
|
2156
|
-
return [4 /*yield*/, _b.apply(_a, [_c.sent(), {
|
|
2157
|
-
baseOptions: {
|
|
2158
|
-
modelAssetPath: modelAssetPath,
|
|
2159
|
-
delegate: delegate
|
|
2160
|
-
}
|
|
2161
|
-
}])];
|
|
2162
|
-
case 6:
|
|
2163
|
-
model = _c.sent();
|
|
2164
|
-
emptyFrame = document.createElement('canvas');
|
|
2165
|
-
model.segment(emptyFrame);
|
|
2166
|
-
emptyFrame.remove();
|
|
2167
2559
|
return [2 /*return*/];
|
|
2168
2560
|
}
|
|
2169
2561
|
});
|
|
2170
2562
|
});
|
|
2171
2563
|
}
|
|
2172
|
-
function giveUpAfter(maxTime) {
|
|
2173
|
-
return new Promise(function (_resolve, reject) {
|
|
2174
|
-
setTimeout(function () {
|
|
2175
|
-
reject(new Error('gave up after reaching maximum time allowed'));
|
|
2176
|
-
}, maxTime);
|
|
2177
|
-
});
|
|
2178
|
-
}
|
|
2179
2564
|
|
|
2180
|
-
function
|
|
2181
|
-
|
|
2182
|
-
|
|
2183
|
-
xMin: (_a = box === null || box === void 0 ? void 0 : box.originX) !== null && _a !== void 0 ? _a : 0,
|
|
2184
|
-
xMax: ((_b = box === null || box === void 0 ? void 0 : box.originX) !== null && _b !== void 0 ? _b : 0) + ((_c = box === null || box === void 0 ? void 0 : box.width) !== null && _c !== void 0 ? _c : 0),
|
|
2185
|
-
yMin: (_d = box === null || box === void 0 ? void 0 : box.originY) !== null && _d !== void 0 ? _d : 0,
|
|
2186
|
-
yMax: ((_e = box === null || box === void 0 ? void 0 : box.originY) !== null && _e !== void 0 ? _e : 0) + ((_f = box === null || box === void 0 ? void 0 : box.height) !== null && _f !== void 0 ? _f : 0),
|
|
2187
|
-
width: (_g = box === null || box === void 0 ? void 0 : box.width) !== null && _g !== void 0 ? _g : 0,
|
|
2188
|
-
height: (_h = box === null || box === void 0 ? void 0 : box.height) !== null && _h !== void 0 ? _h : 0
|
|
2189
|
-
};
|
|
2190
|
-
}
|
|
2191
|
-
function waitForVideoReady(videoRef, checkEveryMs) {
|
|
2192
|
-
if (checkEveryMs === void 0) {
|
|
2193
|
-
checkEveryMs = 100;
|
|
2565
|
+
function cropToShoulders(rawCanvas, cropCanvas, resizeCanvas, frame, face, quality, maxHeight) {
|
|
2566
|
+
if (quality === void 0) {
|
|
2567
|
+
quality = 0.92;
|
|
2194
2568
|
}
|
|
2195
|
-
|
|
2196
|
-
|
|
2197
|
-
|
|
2198
|
-
|
|
2199
|
-
|
|
2200
|
-
|
|
2201
|
-
|
|
2202
|
-
|
|
2203
|
-
|
|
2204
|
-
|
|
2205
|
-
|
|
2206
|
-
|
|
2207
|
-
}
|
|
2208
|
-
|
|
2209
|
-
|
|
2210
|
-
|
|
2211
|
-
|
|
2212
|
-
|
|
2569
|
+
if (!rawCanvas || !cropCanvas || !resizeCanvas) return '';
|
|
2570
|
+
var rawCtx = rawCanvas.getContext('2d');
|
|
2571
|
+
var cropCtx = cropCanvas.getContext('2d');
|
|
2572
|
+
var resizeCtx = resizeCanvas.getContext('2d');
|
|
2573
|
+
if (!rawCtx || !cropCtx || !resizeCtx) throw new Error('could not get 2d context');
|
|
2574
|
+
rawCanvas.width = frame.width;
|
|
2575
|
+
rawCanvas.height = frame.height;
|
|
2576
|
+
rawCtx.putImageData(frame, 0, 0);
|
|
2577
|
+
if (frame.height > frame.width) {
|
|
2578
|
+
cropCanvas.width = frame.width;
|
|
2579
|
+
cropCanvas.height = frame.height;
|
|
2580
|
+
cropCtx.drawImage(rawCanvas, 0, 0, cropCanvas.width, cropCanvas.height);
|
|
2581
|
+
} else {
|
|
2582
|
+
var _a = face.box,
|
|
2583
|
+
xMin = _a.xMin,
|
|
2584
|
+
width = _a.width;
|
|
2585
|
+
var desiredWidth = frame.height * 0.6;
|
|
2586
|
+
var faceCenterX = xMin + width / 2;
|
|
2587
|
+
var xPos = Math.max(0, faceCenterX - desiredWidth / 2);
|
|
2588
|
+
cropCanvas.width = desiredWidth;
|
|
2589
|
+
cropCanvas.height = frame.height;
|
|
2590
|
+
cropCtx.drawImage(rawCanvas, xPos, 0, cropCanvas.width, cropCanvas.height, 0, 0, cropCanvas.width, cropCanvas.height);
|
|
2591
|
+
}
|
|
2592
|
+
resizeCanvas.height = maxHeight !== null && maxHeight !== void 0 ? maxHeight : cropCanvas.height;
|
|
2593
|
+
resizeCanvas.width = cropCanvas.width * (resizeCanvas.height / cropCanvas.height);
|
|
2594
|
+
resizeCtx === null || resizeCtx === void 0 ? void 0 : resizeCtx.drawImage(cropCanvas, 0, 0, resizeCanvas.width, resizeCanvas.height);
|
|
2595
|
+
var dataURL = resizeCanvas.toDataURL('image/jpeg', quality);
|
|
2596
|
+
log('cropToShoulders size', new TextEncoder().encode(dataURL).length);
|
|
2597
|
+
clearCanvas(rawCanvas);
|
|
2598
|
+
clearCanvas(cropCanvas);
|
|
2599
|
+
clearCanvas(resizeCanvas);
|
|
2600
|
+
return dataURL;
|
|
2601
|
+
}
|
|
2602
|
+
function cropToDetectedObjectBox(frame, box, canvas) {
|
|
2603
|
+
canvas || (canvas = document.createElement('canvas'));
|
|
2604
|
+
var ctx = canvas.getContext('2d');
|
|
2605
|
+
if (!ctx) throw new Error('could not get 2d context');
|
|
2606
|
+
var xMin = box.xMin,
|
|
2607
|
+
yMin = box.yMin,
|
|
2608
|
+
width = box.width,
|
|
2609
|
+
height = box.height;
|
|
2610
|
+
canvas.width = width;
|
|
2611
|
+
canvas.height = height;
|
|
2612
|
+
ctx.drawImage(frame, xMin, yMin, width, height, 0, 0, width, height);
|
|
2613
|
+
return canvas;
|
|
2614
|
+
}
|
|
2615
|
+
|
|
2616
|
+
var defaultImageSegmenterModelPath = 'https://websdk-cdn-dev.idmission.com/assets/models/selfiesegmenter20240524/selfie_segmenter.tflite';
|
|
2617
|
+
var imageSegmenterModelSizeInBytes = 256440.32;
|
|
2618
|
+
// The idea here is that we globally set a cache key based on the time at page load. That way our built-in speed test
|
|
2619
|
+
// isn't fooled by cache times, but subsequent downloads of the vision runtime still do load from the cache.
|
|
2620
|
+
var tinyModelCacheKey = new Date().getTime();
|
|
2621
|
+
var initialModelCapabilities = {
|
|
2622
|
+
probeState: 'notProbed',
|
|
2623
|
+
delegate: 'GPU',
|
|
2624
|
+
networkTier: 'untested',
|
|
2625
|
+
networkSpeed: 0,
|
|
2626
|
+
networkTestTime: 0
|
|
2627
|
+
};
|
|
2628
|
+
var modelCapabilities = _assign({}, initialModelCapabilities);
|
|
2629
|
+
function probeModelCapabilities() {
|
|
2630
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
2631
|
+
var error_1, error_2;
|
|
2632
|
+
return __generator(this, function (_a) {
|
|
2633
|
+
switch (_a.label) {
|
|
2634
|
+
case 0:
|
|
2635
|
+
if (modelCapabilities.probeState === 'probed') return [2 /*return*/];
|
|
2636
|
+
if (modelCapabilities.probeState === 'probing') return [2 /*return*/, new Promise(function (resolve) {
|
|
2637
|
+
setInterval(function () {
|
|
2638
|
+
if (modelCapabilities.probeState === 'probed') resolve();
|
|
2639
|
+
}, 100);
|
|
2640
|
+
})];
|
|
2641
|
+
modelCapabilities.probeState = 'probing';
|
|
2642
|
+
return [4 /*yield*/, preloadVisionRuntime()];
|
|
2643
|
+
case 1:
|
|
2644
|
+
_a.sent();
|
|
2645
|
+
_a.label = 2;
|
|
2646
|
+
case 2:
|
|
2647
|
+
_a.trys.push([2, 4, 9, 10]);
|
|
2648
|
+
log('Model Probing: testing GPU capabilities...');
|
|
2649
|
+
return [4 /*yield*/, loadTinyModel('GPU')];
|
|
2650
|
+
case 3:
|
|
2651
|
+
_a.sent();
|
|
2652
|
+
log('Model Probing: GPU is capable.');
|
|
2653
|
+
return [3 /*break*/, 10];
|
|
2654
|
+
case 4:
|
|
2655
|
+
error_1 = _a.sent();
|
|
2656
|
+
warn('Model Probing: GPU delegate could not be loaded', error_1);
|
|
2657
|
+
modelCapabilities.delegate = 'CPU';
|
|
2658
|
+
_a.label = 5;
|
|
2659
|
+
case 5:
|
|
2660
|
+
_a.trys.push([5, 7,, 8]);
|
|
2661
|
+
log('Model Probing: testing CPU capabilities...');
|
|
2662
|
+
return [4 /*yield*/, loadTinyModel('CPU')];
|
|
2663
|
+
case 6:
|
|
2664
|
+
_a.sent();
|
|
2665
|
+
log('Model Probing: CPU is capable.');
|
|
2666
|
+
return [3 /*break*/, 8];
|
|
2667
|
+
case 7:
|
|
2668
|
+
error_2 = _a.sent();
|
|
2669
|
+
warn('Model Probing: CPU delegate could not be loaded', error_2);
|
|
2670
|
+
modelCapabilities.delegate = 'NONE';
|
|
2671
|
+
return [3 /*break*/, 8];
|
|
2672
|
+
case 8:
|
|
2673
|
+
return [3 /*break*/, 10];
|
|
2674
|
+
case 9:
|
|
2675
|
+
modelCapabilities.probeState = 'probed';
|
|
2676
|
+
return [7 /*endfinally*/];
|
|
2677
|
+
case 10:
|
|
2678
|
+
return [2 /*return*/];
|
|
2679
|
+
}
|
|
2680
|
+
});
|
|
2681
|
+
});
|
|
2682
|
+
}
|
|
2683
|
+
function loadTinyModel() {
|
|
2684
|
+
return __awaiter(this, arguments, void 0, function (delegate, maxTime) {
|
|
2685
|
+
var modelAssetPath, startedAt, e_1, time, speedMbps, model, _a, _b, emptyFrame;
|
|
2686
|
+
if (delegate === void 0) {
|
|
2687
|
+
delegate = 'GPU';
|
|
2688
|
+
}
|
|
2689
|
+
if (maxTime === void 0) {
|
|
2690
|
+
maxTime = 10000;
|
|
2691
|
+
}
|
|
2692
|
+
return __generator(this, function (_c) {
|
|
2693
|
+
switch (_c.label) {
|
|
2694
|
+
case 0:
|
|
2695
|
+
modelAssetPath = "".concat(defaultImageSegmenterModelPath, "?_=").concat(tinyModelCacheKey);
|
|
2696
|
+
startedAt = new Date();
|
|
2697
|
+
_c.label = 1;
|
|
2698
|
+
case 1:
|
|
2699
|
+
_c.trys.push([1, 3,, 4]);
|
|
2700
|
+
return [4 /*yield*/, Promise.race([preloadDependency(modelAssetPath), giveUpAfter(maxTime)])];
|
|
2701
|
+
case 2:
|
|
2702
|
+
_c.sent();
|
|
2703
|
+
return [3 /*break*/, 4];
|
|
2704
|
+
case 3:
|
|
2705
|
+
e_1 = _c.sent();
|
|
2706
|
+
error('speed test failed', e_1);
|
|
2707
|
+
modelCapabilities.networkTier = 'unusable';
|
|
2708
|
+
return [2 /*return*/];
|
|
2709
|
+
case 4:
|
|
2710
|
+
time = (new Date().getTime() - startedAt.getTime()) / 1000.0;
|
|
2711
|
+
modelCapabilities.networkTestTime || (modelCapabilities.networkTestTime = time);
|
|
2712
|
+
modelCapabilities.networkSpeed || (modelCapabilities.networkSpeed = imageSegmenterModelSizeInBytes / time);
|
|
2713
|
+
modelCapabilities.networkTier = time < 0.5 ? 'fast' : time < 2 ? 'medium' : 'slow';
|
|
2714
|
+
speedMbps = modelCapabilities.networkSpeed / 1024 / 1024;
|
|
2715
|
+
log('Model Probing: network speed', speedMbps.toFixed(3), 'Mbps');
|
|
2716
|
+
log('Model Probing: network test took', time);
|
|
2717
|
+
log('Model Probing: network tier', modelCapabilities.networkTier);
|
|
2718
|
+
_b = (_a = tasksVision.ImageSegmenter).createFromOptions;
|
|
2719
|
+
return [4 /*yield*/, tasksVision.FilesetResolver.forVisionTasks(visionTasksBasePath)];
|
|
2720
|
+
case 5:
|
|
2721
|
+
return [4 /*yield*/, _b.apply(_a, [_c.sent(), {
|
|
2722
|
+
baseOptions: {
|
|
2723
|
+
modelAssetPath: modelAssetPath,
|
|
2724
|
+
delegate: delegate
|
|
2725
|
+
}
|
|
2726
|
+
}])];
|
|
2727
|
+
case 6:
|
|
2728
|
+
model = _c.sent();
|
|
2729
|
+
emptyFrame = document.createElement('canvas');
|
|
2730
|
+
model.segment(emptyFrame);
|
|
2731
|
+
emptyFrame.remove();
|
|
2732
|
+
return [2 /*return*/];
|
|
2733
|
+
}
|
|
2734
|
+
});
|
|
2735
|
+
});
|
|
2736
|
+
}
|
|
2737
|
+
function giveUpAfter(maxTime) {
|
|
2738
|
+
return new Promise(function (_resolve, reject) {
|
|
2739
|
+
setTimeout(function () {
|
|
2740
|
+
reject(new Error('gave up after reaching maximum time allowed'));
|
|
2741
|
+
}, maxTime);
|
|
2742
|
+
});
|
|
2743
|
+
}
|
|
2744
|
+
|
|
2745
|
+
function convertBoundingBox(box) {
|
|
2746
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
2747
|
+
return {
|
|
2748
|
+
xMin: (_a = box === null || box === void 0 ? void 0 : box.originX) !== null && _a !== void 0 ? _a : 0,
|
|
2749
|
+
xMax: ((_b = box === null || box === void 0 ? void 0 : box.originX) !== null && _b !== void 0 ? _b : 0) + ((_c = box === null || box === void 0 ? void 0 : box.width) !== null && _c !== void 0 ? _c : 0),
|
|
2750
|
+
yMin: (_d = box === null || box === void 0 ? void 0 : box.originY) !== null && _d !== void 0 ? _d : 0,
|
|
2751
|
+
yMax: ((_e = box === null || box === void 0 ? void 0 : box.originY) !== null && _e !== void 0 ? _e : 0) + ((_f = box === null || box === void 0 ? void 0 : box.height) !== null && _f !== void 0 ? _f : 0),
|
|
2752
|
+
width: (_g = box === null || box === void 0 ? void 0 : box.width) !== null && _g !== void 0 ? _g : 0,
|
|
2753
|
+
height: (_h = box === null || box === void 0 ? void 0 : box.height) !== null && _h !== void 0 ? _h : 0
|
|
2754
|
+
};
|
|
2755
|
+
}
|
|
2756
|
+
function waitForVideoReady(videoRef, checkEveryMs) {
|
|
2757
|
+
if (checkEveryMs === void 0) {
|
|
2758
|
+
checkEveryMs = 100;
|
|
2759
|
+
}
|
|
2760
|
+
return new Promise(function (resolve) {
|
|
2761
|
+
var _a, _b, _c;
|
|
2762
|
+
if (((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.readyState) !== null && _b !== void 0 ? _b : 0) >= 2) return resolve();
|
|
2763
|
+
(_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.load();
|
|
2764
|
+
var interval = setInterval(function () {
|
|
2765
|
+
var _a, _b;
|
|
2766
|
+
if (((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.readyState) !== null && _b !== void 0 ? _b : 0) >= 2) {
|
|
2767
|
+
clearInterval(interval);
|
|
2768
|
+
resolve();
|
|
2769
|
+
}
|
|
2770
|
+
}, checkEveryMs);
|
|
2771
|
+
});
|
|
2772
|
+
}
|
|
2773
|
+
function calculateIoU(boxA, boxB) {
|
|
2774
|
+
var xA = Math.max(boxA.xMin, boxB.xMin);
|
|
2775
|
+
var yA = Math.max(boxA.yMin, boxB.yMin);
|
|
2776
|
+
var xB = Math.min(boxA.xMax, boxB.xMax);
|
|
2777
|
+
var yB = Math.min(boxA.yMax, boxB.yMax);
|
|
2213
2778
|
var intersectWidth = Math.max(0, xB - xA);
|
|
2214
2779
|
var intersectHeight = Math.max(0, yB - yA);
|
|
2215
2780
|
var intersectionArea = intersectWidth * intersectHeight;
|
|
@@ -2300,8 +2865,7 @@ function useLoadFocusModel(_a) {
|
|
|
2300
2865
|
modelPath = _b === void 0 ? defaultFocusModelPath : _b,
|
|
2301
2866
|
_c = _a.modelLoadTimeoutMs,
|
|
2302
2867
|
modelLoadTimeoutMs = _c === void 0 ? defaultFocusModelLoadTimeoutMs : _c,
|
|
2303
|
-
onModelError = _a.onModelError
|
|
2304
|
-
videoRef = _a.videoRef;
|
|
2868
|
+
onModelError = _a.onModelError;
|
|
2305
2869
|
var _d = React.useState(false),
|
|
2306
2870
|
ready = _d[0],
|
|
2307
2871
|
setReady = _d[1];
|
|
@@ -2311,6 +2875,7 @@ function useLoadFocusModel(_a) {
|
|
|
2311
2875
|
var _f = React.useState(null),
|
|
2312
2876
|
modelError = _f[0],
|
|
2313
2877
|
setModelError = _f[1];
|
|
2878
|
+
var videoRef = React.useContext(CameraStateContext).videoRef;
|
|
2314
2879
|
React.useEffect(function loadModel() {
|
|
2315
2880
|
var _this = this;
|
|
2316
2881
|
setReady(false);
|
|
@@ -2448,8 +3013,7 @@ function closeFaceDetector() {
|
|
|
2448
3013
|
function useLoadFaceDetector(_a) {
|
|
2449
3014
|
var onModelError = _a.onModelError,
|
|
2450
3015
|
_b = _a.modelLoadTimeoutMs,
|
|
2451
|
-
modelLoadTimeoutMs = _b === void 0 ? defaultSelfieCaptureModelLoadTimeoutMs : _b
|
|
2452
|
-
videoRef = _a.videoRef;
|
|
3016
|
+
modelLoadTimeoutMs = _b === void 0 ? defaultSelfieCaptureModelLoadTimeoutMs : _b;
|
|
2453
3017
|
var _c = React.useState(false),
|
|
2454
3018
|
ready = _c[0],
|
|
2455
3019
|
setReady = _c[1];
|
|
@@ -2459,6 +3023,7 @@ function useLoadFaceDetector(_a) {
|
|
|
2459
3023
|
var _e = React.useState(null),
|
|
2460
3024
|
modelError = _e[0],
|
|
2461
3025
|
setModelError = _e[1];
|
|
3026
|
+
var videoRef = React.useContext(CameraStateContext).videoRef;
|
|
2462
3027
|
React.useEffect(function loadModel() {
|
|
2463
3028
|
var _this = this;
|
|
2464
3029
|
setReady(false);
|
|
@@ -2939,8 +3504,7 @@ function useLoadDocumentDetector(_a) {
|
|
|
2939
3504
|
modelLoadTimeoutMs = _c === void 0 ? defaultDocumentDetectionModelLoadTimeoutMs : _c,
|
|
2940
3505
|
_d = _a.scoreThreshold,
|
|
2941
3506
|
scoreThreshold = _d === void 0 ? defaultDocumentDetectionScoreThreshold : _d,
|
|
2942
|
-
onModelError = _a.onModelError
|
|
2943
|
-
videoRef = _a.videoRef;
|
|
3507
|
+
onModelError = _a.onModelError;
|
|
2944
3508
|
var _e = React.useState(false),
|
|
2945
3509
|
ready = _e[0],
|
|
2946
3510
|
setReady = _e[1];
|
|
@@ -2950,6 +3514,7 @@ function useLoadDocumentDetector(_a) {
|
|
|
2950
3514
|
var _g = React.useState(null),
|
|
2951
3515
|
modelError = _g[0],
|
|
2952
3516
|
setModelError = _g[1];
|
|
3517
|
+
var videoRef = React.useContext(CameraStateContext).videoRef;
|
|
2953
3518
|
React.useEffect(function loadModel() {
|
|
2954
3519
|
var _this = this;
|
|
2955
3520
|
setReady(false);
|
|
@@ -3166,582 +3731,96 @@ function processDocumentDetectorPrediction(prediction, thresholds, boundaries) {
|
|
|
3166
3731
|
idCardFrontDetectionThresholdMet: idCardFrontDetectionThresholdMet,
|
|
3167
3732
|
idCardBackDetectionScore: idCardBackDetectionScore,
|
|
3168
3733
|
idCardBackDetectionThresholdMet: idCardBackDetectionThresholdMet,
|
|
3169
|
-
passportDetectionScore: passportDetectionScore,
|
|
3170
|
-
passportDetectionThresholdMet: passportDetectionThresholdMet,
|
|
3171
|
-
bestDocument: bestDocument,
|
|
3172
|
-
documentInBounds: documentInBounds,
|
|
3173
|
-
documentTooClose: documentTooClose,
|
|
3174
|
-
documentIsStable: documentIsStable,
|
|
3175
|
-
frameWidth: frameWidth,
|
|
3176
|
-
frameHeight: frameHeight,
|
|
3177
|
-
allZero: allZero
|
|
3178
|
-
};
|
|
3179
|
-
}
|
|
3180
|
-
function applyNonMaxSuppression(detectedObjects, isGoodBox) {
|
|
3181
|
-
var maxes = {};
|
|
3182
|
-
detectedObjects.forEach(function (obj, i) {
|
|
3183
|
-
if (obj) {
|
|
3184
|
-
if (!maxes[obj.label]) maxes[obj.label] = [0, -1];
|
|
3185
|
-
if (obj.score > maxes[obj.label][0] && (isGoodBox === null || isGoodBox === void 0 ? void 0 : isGoodBox(obj))) maxes[obj.label] = [obj.score, i];
|
|
3186
|
-
}
|
|
3187
|
-
});
|
|
3188
|
-
return Object.keys(maxes).map(function (label) {
|
|
3189
|
-
return detectedObjects[maxes[label][1]];
|
|
3190
|
-
}).filter(function (obj) {
|
|
3191
|
-
return !!obj;
|
|
3192
|
-
});
|
|
3193
|
-
}
|
|
3194
|
-
|
|
3195
|
-
function useFrameLoop(fn, _a) {
|
|
3196
|
-
var _b = _a.throttleMs,
|
|
3197
|
-
throttleMs = _b === void 0 ? 0 : _b,
|
|
3198
|
-
_c = _a.autoStart,
|
|
3199
|
-
autoStart = _c === void 0 ? false : _c;
|
|
3200
|
-
var _d = React.useState(false),
|
|
3201
|
-
running = _d[0],
|
|
3202
|
-
setRunning = _d[1];
|
|
3203
|
-
var startedAtRef = React.useRef(null);
|
|
3204
|
-
var loopId = React.useRef(0);
|
|
3205
|
-
var frameId = React.useRef(0);
|
|
3206
|
-
React.useEffect(function runFrameLoop() {
|
|
3207
|
-
if (!running) return;
|
|
3208
|
-
var timer;
|
|
3209
|
-
var currentLoopId = loopId.current;
|
|
3210
|
-
function renderPrediction() {
|
|
3211
|
-
return __awaiter(this, void 0, void 0, function () {
|
|
3212
|
-
var start, timeRunning, took, amountToThrottle;
|
|
3213
|
-
var _a, _b;
|
|
3214
|
-
return __generator(this, function (_c) {
|
|
3215
|
-
switch (_c.label) {
|
|
3216
|
-
case 0:
|
|
3217
|
-
if (currentLoopId !== loopId.current) return [2 /*return*/];
|
|
3218
|
-
start = new Date().getTime();
|
|
3219
|
-
timeRunning = start - ((_b = (_a = startedAtRef.current) === null || _a === void 0 ? void 0 : _a.getTime()) !== null && _b !== void 0 ? _b : 0);
|
|
3220
|
-
return [4 /*yield*/, fn(frameId.current, timeRunning)];
|
|
3221
|
-
case 1:
|
|
3222
|
-
_c.sent();
|
|
3223
|
-
took = new Date().getTime() - start;
|
|
3224
|
-
amountToThrottle = Math.max((throttleMs !== null && throttleMs !== void 0 ? throttleMs : 0) - took, 0);
|
|
3225
|
-
timer = setTimeout(function () {
|
|
3226
|
-
frameId.current = requestAnimationFrame(renderPrediction);
|
|
3227
|
-
}, amountToThrottle);
|
|
3228
|
-
return [2 /*return*/];
|
|
3229
|
-
}
|
|
3230
|
-
});
|
|
3231
|
-
});
|
|
3232
|
-
}
|
|
3233
|
-
renderPrediction().then();
|
|
3234
|
-
return function () {
|
|
3235
|
-
loopId.current += 1;
|
|
3236
|
-
frameId.current && cancelAnimationFrame(frameId.current);
|
|
3237
|
-
timer && clearTimeout(timer);
|
|
3238
|
-
};
|
|
3239
|
-
}, [fn, running, throttleMs]);
|
|
3240
|
-
var start = React.useCallback(function () {
|
|
3241
|
-
startedAtRef.current = new Date();
|
|
3242
|
-
setRunning(true);
|
|
3243
|
-
}, []);
|
|
3244
|
-
var stop = React.useCallback(function () {
|
|
3245
|
-
loopId.current += 1; // force the loop to stop immediately.
|
|
3246
|
-
setRunning(false);
|
|
3247
|
-
startedAtRef.current = null;
|
|
3248
|
-
}, []);
|
|
3249
|
-
React.useEffect(function startAutomatically() {
|
|
3250
|
-
if (autoStart) start();
|
|
3251
|
-
return function () {
|
|
3252
|
-
stop();
|
|
3253
|
-
};
|
|
3254
|
-
}, [autoStart, start, stop]);
|
|
3255
|
-
return {
|
|
3256
|
-
start: start,
|
|
3257
|
-
stop: stop
|
|
3258
|
-
};
|
|
3259
|
-
}
|
|
3260
|
-
|
|
3261
|
-
function listAvailableCameras(facingMode_1) {
|
|
3262
|
-
return __awaiter(this, arguments, void 0, function (facingMode, requestMicAccess) {
|
|
3263
|
-
var cameraEnumerationStream, videoDevices;
|
|
3264
|
-
if (requestMicAccess === void 0) {
|
|
3265
|
-
requestMicAccess = false;
|
|
3266
|
-
}
|
|
3267
|
-
return __generator(this, function (_a) {
|
|
3268
|
-
switch (_a.label) {
|
|
3269
|
-
case 0:
|
|
3270
|
-
return [4 /*yield*/, navigator.mediaDevices.getUserMedia({
|
|
3271
|
-
video: {
|
|
3272
|
-
facingMode: {
|
|
3273
|
-
exact: facingMode
|
|
3274
|
-
}
|
|
3275
|
-
},
|
|
3276
|
-
audio: requestMicAccess
|
|
3277
|
-
})
|
|
3278
|
-
// This lists all available cameras attached to the user's device.
|
|
3279
|
-
];
|
|
3280
|
-
case 1:
|
|
3281
|
-
cameraEnumerationStream = _a.sent();
|
|
3282
|
-
return [4 /*yield*/, navigator.mediaDevices.enumerateDevices()];
|
|
3283
|
-
case 2:
|
|
3284
|
-
videoDevices = _a.sent().filter(function (_a) {
|
|
3285
|
-
var kind = _a.kind;
|
|
3286
|
-
return kind === 'videoinput';
|
|
3287
|
-
});
|
|
3288
|
-
// Release the access to the user's camera that we obtained for enumeration purposes.
|
|
3289
|
-
cameraEnumerationStream.getVideoTracks().forEach(function (track) {
|
|
3290
|
-
track.enabled = false;
|
|
3291
|
-
track.stop();
|
|
3292
|
-
});
|
|
3293
|
-
cameraEnumerationStream = null;
|
|
3294
|
-
return [2 /*return*/, videoDevices];
|
|
3295
|
-
}
|
|
3296
|
-
});
|
|
3297
|
-
});
|
|
3298
|
-
}
|
|
3299
|
-
var frontCameraLabels = ['front', 'avant', 'anteriore', 'cameraaanvoorzijde', 'kamerapåframsidan', 'forsidekamera', 'kamerapåforsiden', 'aparatprzedni', 'etukamera', 'kameradepan', 'ÖnKamera', 'cameramặttrước', 'camerăfață', 'prednákamera', 'prednjakamera', 'előlapikamera', 'přednífotoaparát', 'μπροστινήκάμερα', 'переднякамера', 'передняякамера', 'преднакамера', 'алдыңғыкамера', 'מצלמה קדמית', 'الكاميرا الأمامية', 'फ़्रंटकैमरा', '前置相机', '前置鏡頭', '前面カメラ', '전면카메라', 'กล้องด้านหน้า'].map(function (s) {
|
|
3300
|
-
return s.toLocaleLowerCase().split(' ').join('');
|
|
3301
|
-
});
|
|
3302
|
-
var rearCameraLabels = ['back', 'rear', 'posterior', 'trasera', 'traseira', 'arrière', 'rückkamera', 'fotocamera(posteriore)', 'cameraaanachterzijde', 'kamerapåbaksidan', 'kamerapåbaksiden', 'bagsidekamera', 'aparattylny', 'takakamera', 'arkakamera', 'kamerabelakang', 'cameramặtsau', 'camerăspate', 'stražnjakamera', 'zadnákamera', 'hátoldalikamera', 'zadnífotoaparát', 'πίσωκάμερα', 'заднякамера', 'Задняякамера', 'заднакамера', 'артқыкамера', 'מצלמה אחורית', 'الكاميرا الخلفية', 'बैककैमरा', '后置相机', '後置鏡頭', '背面カメラ', '후면카메라', 'กล้องด้านหลัง'].map(function (s) {
|
|
3303
|
-
return s.toLocaleLowerCase().split(' ').join('');
|
|
3304
|
-
});
|
|
3305
|
-
var backUltraWideCameraLabels = ['backdualwidecamera', 'backultrawidecamera', 'ultraampliaposterior', 'ultra-angulartraseira', 'ultragrandeangulartraseira', 'ultragrandangle', 'ultragranangular', 'ultra-weitwinkelkamera', 'ultra-grandangolo', 'ultrabredecameraaanachterzijde', 'ultravidvinkelkamerapåbaksidan', 'ultravidvinkelkameraetpåbagsiden', 'ultravidvinkelkamerabak', 'ultragenişkameraarkayüzü', 'ultralaajakulmainentakakamera', 'tylnyaparatultraszerokokątny', 'cameracựcrộngmặtsau', 'camerăcuobiectivultra‑superangularspate', 'ultraszéleslátószögűkamera', 'kameraultralebarbelakang', 'stražnjaultraširokakamera', 'zadníultraširokoúhlýfotoaparát', 'ultraširokouhlá', 'πίσωυπερευρείακάμερα', 'заднянадширококутнакамера', 'Задняясверхширокоугольнаякамера', 'Задна свръх широкоъгълна камера', 'артқыультракеңбұрыштыкамера', 'מצלמה אולטרה רחבה אחורית', 'كاميرا خلفية عريضة جدًا', 'बैकअल्ट्रावाइडकैमरा', '后置超广角相机', '後置超廣角鏡頭相機', '背面超広角カメラ', '후면울트라와이드카메라', 'กล้องด้านหลังอัลตร้าไวด์'].map(function (s) {
|
|
3306
|
-
return s.toLocaleLowerCase().split(' ').join('');
|
|
3307
|
-
});
|
|
3308
|
-
var cameraLabelMatches = function cameraLabelMatches(labelOrDevice, labelSetOrLabel) {
|
|
3309
|
-
var label = labelOrDevice instanceof MediaDeviceInfo ? getDeviceLabel(labelOrDevice) : labelOrDevice;
|
|
3310
|
-
var labelSet = typeof labelSetOrLabel === 'string' ? [labelSetOrLabel] : labelSetOrLabel;
|
|
3311
|
-
return labelSet.some(function (l) {
|
|
3312
|
-
return label.includes(l);
|
|
3313
|
-
});
|
|
3314
|
-
};
|
|
3315
|
-
var getDeviceLabel = function getDeviceLabel(deviceInfo) {
|
|
3316
|
-
return deviceInfo.label.toLocaleLowerCase().split(' ').join('');
|
|
3317
|
-
};
|
|
3318
|
-
var currentCamera;
|
|
3319
|
-
function obtainCameraAccess(stream, deviceLabel, video) {
|
|
3320
|
-
releaseCameraAccess();
|
|
3321
|
-
log('obtaining camera access...');
|
|
3322
|
-
var _a = stream.getVideoTracks()[0].getSettings(),
|
|
3323
|
-
width = _a.width,
|
|
3324
|
-
height = _a.height;
|
|
3325
|
-
log('camera dimensions', width, height);
|
|
3326
|
-
var label = deviceLabel.toLocaleLowerCase().split(' ').join('');
|
|
3327
|
-
log('camera label', label);
|
|
3328
|
-
var isRearFacing = cameraLabelMatches(label, __spreadArray(__spreadArray(__spreadArray([], rearCameraLabels, true), backUltraWideCameraLabels, true), ['iphone'], false));
|
|
3329
|
-
log('is rear facing?', isRearFacing);
|
|
3330
|
-
var release = function release() {
|
|
3331
|
-
stream.getTracks().forEach(function (track) {
|
|
3332
|
-
track.enabled = false;
|
|
3333
|
-
track.stop();
|
|
3334
|
-
});
|
|
3335
|
-
if (video) {
|
|
3336
|
-
video.pause();
|
|
3337
|
-
video.srcObject = null;
|
|
3338
|
-
video.src = '';
|
|
3339
|
-
}
|
|
3340
|
-
};
|
|
3341
|
-
width || (width = 0);
|
|
3342
|
-
height || (height = 0);
|
|
3343
|
-
currentCamera = {
|
|
3344
|
-
label: deviceLabel,
|
|
3345
|
-
stream: stream,
|
|
3346
|
-
width: width,
|
|
3347
|
-
height: height,
|
|
3348
|
-
isRearFacing: isRearFacing,
|
|
3349
|
-
release: release
|
|
3350
|
-
};
|
|
3351
|
-
log('camera access granted');
|
|
3352
|
-
if (video) video.srcObject = stream;
|
|
3353
|
-
log('video source initialized');
|
|
3354
|
-
return currentCamera;
|
|
3355
|
-
}
|
|
3356
|
-
function releaseCameraAccess() {
|
|
3357
|
-
if (!currentCamera) return;
|
|
3358
|
-
log('releasing camera access...');
|
|
3359
|
-
currentCamera.release();
|
|
3360
|
-
currentCamera = undefined;
|
|
3361
|
-
}
|
|
3362
|
-
|
|
3363
|
-
var initialState$5 = {
|
|
3364
|
-
videoRef: {
|
|
3365
|
-
current: null
|
|
3366
|
-
},
|
|
3367
|
-
videoLoaded: false,
|
|
3368
|
-
videoStream: null,
|
|
3369
|
-
videoDevice: null,
|
|
3370
|
-
isRearFacing: false,
|
|
3371
|
-
camera: null,
|
|
3372
|
-
cameraReady: false,
|
|
3373
|
-
cameraAccessDenied: false,
|
|
3374
|
-
iphoneContinuityCameraAvailable: false,
|
|
3375
|
-
iphoneContinuityCameraDenied: false,
|
|
3376
|
-
preferIphoneContinuityCamera: true,
|
|
3377
|
-
audioStream: null,
|
|
3378
|
-
microphoneReady: false,
|
|
3379
|
-
microphoneAccessDenied: false
|
|
3380
|
-
};
|
|
3381
|
-
var createCameraStore = function createCameraStore(config) {
|
|
3382
|
-
var store = zustand.createStore(function (set, get) {
|
|
3383
|
-
return _assign(_assign(_assign({}, initialState$5), config), {
|
|
3384
|
-
reset: function reset() {
|
|
3385
|
-
return set(_assign(_assign({}, initialState$5), config));
|
|
3386
|
-
},
|
|
3387
|
-
setConfig: function setConfig(config) {
|
|
3388
|
-
return set(config);
|
|
3389
|
-
},
|
|
3390
|
-
onVideoMounted: function onVideoMounted() {
|
|
3391
|
-
return set({
|
|
3392
|
-
videoLoaded: true
|
|
3393
|
-
});
|
|
3394
|
-
},
|
|
3395
|
-
setIphoneContinuityCameraAllowed: function setIphoneContinuityCameraAllowed(value) {
|
|
3396
|
-
return set({
|
|
3397
|
-
preferIphoneContinuityCamera: value
|
|
3398
|
-
});
|
|
3399
|
-
},
|
|
3400
|
-
requestCameraAccess: function requestCameraAccess() {
|
|
3401
|
-
return __awaiter(this, void 0, void 0, function () {
|
|
3402
|
-
var _a, videoRef, releaseCameraAccess, preferFrontFacingCamera, preferIphoneContinuityCamera, iphoneContinuityCameraDenied, availableCameras, selectedCamera, platform_1, iphoneContinuityCamera, constraints, stream_1, e_1, iphoneContinuityCameraAvailable_1, handleStreamEnded_1, videoTrack_1, camera_1, e_3;
|
|
3403
|
-
var _b, _c, _d;
|
|
3404
|
-
return __generator(this, function (_e) {
|
|
3405
|
-
switch (_e.label) {
|
|
3406
|
-
case 0:
|
|
3407
|
-
_a = get(), videoRef = _a.videoRef, releaseCameraAccess = _a.releaseCameraAccess, preferFrontFacingCamera = _a.preferFrontFacingCamera, preferIphoneContinuityCamera = _a.preferIphoneContinuityCamera, iphoneContinuityCameraDenied = _a.iphoneContinuityCameraDenied;
|
|
3408
|
-
releaseCameraAccess();
|
|
3409
|
-
_e.label = 1;
|
|
3410
|
-
case 1:
|
|
3411
|
-
_e.trys.push([1, 11,, 12]);
|
|
3412
|
-
return [4 /*yield*/, listAvailableCameras()];
|
|
3413
|
-
case 2:
|
|
3414
|
-
availableCameras = _e.sent();
|
|
3415
|
-
selectedCamera = void 0;
|
|
3416
|
-
debug('availableCameras', availableCameras);
|
|
3417
|
-
platform_1 = getPlatform();
|
|
3418
|
-
debug('platformDetails', platform_1);
|
|
3419
|
-
if (!iphoneContinuityCameraDenied && (!(platform_1 === null || platform_1 === void 0 ? void 0 : platform_1.os) || platform_1.os.family === 'OS X')) {
|
|
3420
|
-
iphoneContinuityCamera = availableCameras.find(function (deviceInfo) {
|
|
3421
|
-
return cameraLabelMatches(deviceInfo, 'iphone');
|
|
3422
|
-
});
|
|
3423
|
-
set({
|
|
3424
|
-
iphoneContinuityCameraAvailable: !!iphoneContinuityCamera
|
|
3425
|
-
});
|
|
3426
|
-
if (iphoneContinuityCamera && preferIphoneContinuityCamera) {
|
|
3427
|
-
selectedCamera = iphoneContinuityCamera;
|
|
3428
|
-
}
|
|
3429
|
-
} else if (((_b = platform_1 === null || platform_1 === void 0 ? void 0 : platform_1.os) === null || _b === void 0 ? void 0 : _b.family) === 'Android' || availableCameras.every(function (c) {
|
|
3430
|
-
return c.label.startsWith('camera2 ');
|
|
3431
|
-
})) {
|
|
3432
|
-
availableCameras = availableCameras.sort(function (a, b) {
|
|
3433
|
-
return a.label.toLowerCase().localeCompare(b.label.toLowerCase());
|
|
3434
|
-
});
|
|
3435
|
-
debug('cameras have been sorted', availableCameras);
|
|
3436
|
-
}
|
|
3437
|
-
if (preferFrontFacingCamera) {
|
|
3438
|
-
selectedCamera = availableCameras.find(function (deviceInfo) {
|
|
3439
|
-
return cameraLabelMatches(deviceInfo, frontCameraLabels);
|
|
3440
|
-
});
|
|
3441
|
-
}
|
|
3442
|
-
selectedCamera || (selectedCamera = availableCameras.find(function (deviceInfo) {
|
|
3443
|
-
return cameraLabelMatches(deviceInfo, 'backtriplecamera');
|
|
3444
|
-
}));
|
|
3445
|
-
selectedCamera || (selectedCamera = availableCameras.find(function (deviceInfo) {
|
|
3446
|
-
return cameraLabelMatches(deviceInfo, 'backdualcamera');
|
|
3447
|
-
}));
|
|
3448
|
-
selectedCamera || (selectedCamera = availableCameras.find(function (deviceInfo) {
|
|
3449
|
-
return cameraLabelMatches(deviceInfo, rearCameraLabels) && !cameraLabelMatches(deviceInfo, backUltraWideCameraLabels);
|
|
3450
|
-
}));
|
|
3451
|
-
selectedCamera || (selectedCamera = availableCameras.find(function (deviceInfo) {
|
|
3452
|
-
return cameraLabelMatches(deviceInfo, rearCameraLabels);
|
|
3453
|
-
}));
|
|
3454
|
-
// on iOS, the front facing camera always is at the first position in the list, so we skip it if all else fails.
|
|
3455
|
-
if (!preferFrontFacingCamera && ((_c = platform_1 === null || platform_1 === void 0 ? void 0 : platform_1.os) === null || _c === void 0 ? void 0 : _c.family) === 'iOS' && availableCameras.length > 0) {
|
|
3456
|
-
selectedCamera || (selectedCamera = availableCameras[1]);
|
|
3457
|
-
}
|
|
3458
|
-
selectedCamera || (selectedCamera = availableCameras[0]);
|
|
3459
|
-
debug('selectedCamera', selectedCamera);
|
|
3460
|
-
set({
|
|
3461
|
-
videoDevice: selectedCamera
|
|
3462
|
-
});
|
|
3463
|
-
constraints = {
|
|
3464
|
-
audio: false,
|
|
3465
|
-
video: {
|
|
3466
|
-
deviceId: {
|
|
3467
|
-
exact: selectedCamera.deviceId
|
|
3468
|
-
},
|
|
3469
|
-
width: {
|
|
3470
|
-
ideal: config.maxVideoWidth
|
|
3471
|
-
},
|
|
3472
|
-
aspectRatio: 1.777777778,
|
|
3473
|
-
frameRate: {}
|
|
3474
|
-
}
|
|
3475
|
-
};
|
|
3476
|
-
if (config.maxFps) {
|
|
3477
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
3478
|
-
// @ts-ignore
|
|
3479
|
-
constraints.video.frameRate = {
|
|
3480
|
-
max: config.maxFps
|
|
3481
|
-
};
|
|
3482
|
-
}
|
|
3483
|
-
stream_1 = null;
|
|
3484
|
-
_e.label = 3;
|
|
3485
|
-
case 3:
|
|
3486
|
-
_e.trys.push([3, 5,, 6]);
|
|
3487
|
-
debug('obtaining camera access with constraints', constraints);
|
|
3488
|
-
return [4 /*yield*/, navigator.mediaDevices.getUserMedia(constraints)];
|
|
3489
|
-
case 4:
|
|
3490
|
-
stream_1 = _e.sent();
|
|
3491
|
-
return [3 /*break*/, 6];
|
|
3492
|
-
case 5:
|
|
3493
|
-
e_1 = _e.sent();
|
|
3494
|
-
if (e_1.name === 'NotAllowedError') {
|
|
3495
|
-
if (preferIphoneContinuityCamera) {
|
|
3496
|
-
set({
|
|
3497
|
-
iphoneContinuityCameraAvailable: false,
|
|
3498
|
-
iphoneContinuityCameraDenied: true
|
|
3499
|
-
});
|
|
3500
|
-
} else {
|
|
3501
|
-
set({
|
|
3502
|
-
cameraAccessDenied: true
|
|
3503
|
-
});
|
|
3504
|
-
}
|
|
3505
|
-
return [2 /*return*/];
|
|
3506
|
-
}
|
|
3507
|
-
return [3 /*break*/, 6];
|
|
3508
|
-
case 6:
|
|
3509
|
-
if (!!stream_1) return [3 /*break*/, 10];
|
|
3510
|
-
_e.label = 7;
|
|
3511
|
-
case 7:
|
|
3512
|
-
_e.trys.push([7, 9,, 10]);
|
|
3513
|
-
return [4 /*yield*/, navigator.mediaDevices.getUserMedia({
|
|
3514
|
-
audio: false,
|
|
3515
|
-
video: true
|
|
3516
|
-
})];
|
|
3517
|
-
case 8:
|
|
3518
|
-
stream_1 = _e.sent();
|
|
3519
|
-
debug('opened stream with no width and height constraints');
|
|
3520
|
-
return [3 /*break*/, 10];
|
|
3521
|
-
case 9:
|
|
3522
|
-
_e.sent();
|
|
3523
|
-
debug('cannot open stream at all');
|
|
3524
|
-
return [3 /*break*/, 10];
|
|
3525
|
-
case 10:
|
|
3526
|
-
if (!stream_1) {
|
|
3527
|
-
error('failed to open camera');
|
|
3528
|
-
throw new Error('failed to open camera');
|
|
3529
|
-
}
|
|
3530
|
-
debug('camera access granted with constraints', constraints);
|
|
3531
|
-
iphoneContinuityCameraAvailable_1 = get().iphoneContinuityCameraAvailable;
|
|
3532
|
-
handleStreamEnded_1 = function handleStreamEnded_1() {
|
|
3533
|
-
if (iphoneContinuityCameraAvailable_1 && preferIphoneContinuityCamera) {
|
|
3534
|
-
debug('someone unplugged the continuity camera');
|
|
3535
|
-
set({
|
|
3536
|
-
videoStream: null,
|
|
3537
|
-
videoDevice: null,
|
|
3538
|
-
cameraReady: false,
|
|
3539
|
-
iphoneContinuityCameraAvailable: false,
|
|
3540
|
-
iphoneContinuityCameraDenied: true
|
|
3541
|
-
});
|
|
3542
|
-
get().requestCameraAccess();
|
|
3543
|
-
} else {
|
|
3544
|
-
debug('someone unplugged the webcam');
|
|
3545
|
-
releaseCameraAccess();
|
|
3546
|
-
set({
|
|
3547
|
-
videoStream: null,
|
|
3548
|
-
videoDevice: null,
|
|
3549
|
-
videoLoaded: false,
|
|
3550
|
-
cameraReady: false,
|
|
3551
|
-
cameraAccessDenied: true
|
|
3552
|
-
});
|
|
3553
|
-
}
|
|
3554
|
-
};
|
|
3555
|
-
(_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.addEventListener('ended', handleStreamEnded_1);
|
|
3556
|
-
videoTrack_1 = stream_1.getVideoTracks()[0];
|
|
3557
|
-
videoTrack_1.onended = handleStreamEnded_1;
|
|
3558
|
-
camera_1 = obtainCameraAccess(stream_1, selectedCamera.label, videoRef.current);
|
|
3559
|
-
// iOS 17 has a strange behavior where the video track flickers between muted and unmuted
|
|
3560
|
-
// when the camera access is being requested. This delay is a workaround for that.
|
|
3561
|
-
setTimeout(function () {
|
|
3562
|
-
videoTrack_1.onmute = handleStreamEnded_1;
|
|
3563
|
-
set({
|
|
3564
|
-
camera: camera_1,
|
|
3565
|
-
cameraReady: true,
|
|
3566
|
-
cameraAccessDenied: false,
|
|
3567
|
-
isRearFacing: camera_1.isRearFacing,
|
|
3568
|
-
videoStream: stream_1
|
|
3569
|
-
});
|
|
3570
|
-
}, 500);
|
|
3571
|
-
return [3 /*break*/, 12];
|
|
3572
|
-
case 11:
|
|
3573
|
-
e_3 = _e.sent();
|
|
3574
|
-
if (e_3.name === 'NotAllowedError') {
|
|
3575
|
-
error('camera access has been blocked by the user', e_3);
|
|
3576
|
-
set({
|
|
3577
|
-
cameraAccessDenied: true
|
|
3578
|
-
});
|
|
3579
|
-
} else {
|
|
3580
|
-
error('camera access encountered some other error', e_3);
|
|
3581
|
-
throw e_3;
|
|
3582
|
-
}
|
|
3583
|
-
return [3 /*break*/, 12];
|
|
3584
|
-
case 12:
|
|
3585
|
-
return [2 /*return*/];
|
|
3586
|
-
}
|
|
3587
|
-
});
|
|
3588
|
-
});
|
|
3589
|
-
},
|
|
3590
|
-
releaseCameraAccess: function releaseCameraAccess() {
|
|
3591
|
-
return __awaiter(this, void 0, void 0, function () {
|
|
3592
|
-
var camera;
|
|
3593
|
-
return __generator(this, function (_a) {
|
|
3594
|
-
camera = get().camera;
|
|
3595
|
-
if (!camera) return [2 /*return*/];
|
|
3596
|
-
camera.release();
|
|
3597
|
-
set({
|
|
3598
|
-
camera: null,
|
|
3599
|
-
cameraReady: false,
|
|
3600
|
-
cameraAccessDenied: false
|
|
3601
|
-
});
|
|
3602
|
-
return [2 /*return*/];
|
|
3603
|
-
});
|
|
3604
|
-
});
|
|
3605
|
-
},
|
|
3606
|
-
requestMicrophoneAccess: function requestMicrophoneAccess() {
|
|
3607
|
-
return __awaiter(this, void 0, void 0, function () {
|
|
3608
|
-
var stream_2;
|
|
3609
|
-
return __generator(this, function (_a) {
|
|
3610
|
-
switch (_a.label) {
|
|
3611
|
-
case 0:
|
|
3612
|
-
get().releaseMicrophoneAccess();
|
|
3613
|
-
_a.label = 1;
|
|
3614
|
-
case 1:
|
|
3615
|
-
_a.trys.push([1, 3,, 4]);
|
|
3616
|
-
return [4 /*yield*/, navigator.mediaDevices.getUserMedia({
|
|
3617
|
-
audio: true,
|
|
3618
|
-
video: false
|
|
3619
|
-
})
|
|
3620
|
-
// iOS 17 has a strange behavior where the video track flickers between muted and unmuted
|
|
3621
|
-
// when the camera access is being requested. This delay is a workaround for that.
|
|
3622
|
-
];
|
|
3623
|
-
case 2:
|
|
3624
|
-
stream_2 = _a.sent();
|
|
3625
|
-
// iOS 17 has a strange behavior where the video track flickers between muted and unmuted
|
|
3626
|
-
// when the camera access is being requested. This delay is a workaround for that.
|
|
3627
|
-
setTimeout(function () {
|
|
3628
|
-
set({
|
|
3629
|
-
audioStream: stream_2,
|
|
3630
|
-
microphoneReady: true,
|
|
3631
|
-
microphoneAccessDenied: false
|
|
3632
|
-
});
|
|
3633
|
-
stream_2.getAudioTracks().forEach(function (track) {
|
|
3634
|
-
track.onended = function () {
|
|
3635
|
-
return set({
|
|
3636
|
-
microphoneReady: false,
|
|
3637
|
-
microphoneAccessDenied: true
|
|
3638
|
-
});
|
|
3639
|
-
};
|
|
3640
|
-
track.onmute = function () {
|
|
3641
|
-
return set({
|
|
3642
|
-
microphoneReady: false,
|
|
3643
|
-
microphoneAccessDenied: true
|
|
3644
|
-
});
|
|
3645
|
-
};
|
|
3646
|
-
});
|
|
3647
|
-
}, 500);
|
|
3648
|
-
return [3 /*break*/, 4];
|
|
3649
|
-
case 3:
|
|
3650
|
-
_a.sent();
|
|
3651
|
-
set({
|
|
3652
|
-
microphoneAccessDenied: true
|
|
3653
|
-
});
|
|
3654
|
-
return [3 /*break*/, 4];
|
|
3655
|
-
case 4:
|
|
3656
|
-
return [2 /*return*/];
|
|
3657
|
-
}
|
|
3658
|
-
});
|
|
3659
|
-
});
|
|
3660
|
-
},
|
|
3661
|
-
releaseMicrophoneAccess: function releaseMicrophoneAccess() {
|
|
3662
|
-
var _a;
|
|
3663
|
-
var audioStream = get().audioStream;
|
|
3664
|
-
(_a = audioStream === null || audioStream === void 0 ? void 0 : audioStream.stop) === null || _a === void 0 ? void 0 : _a.call(audioStream);
|
|
3665
|
-
audioStream === null || audioStream === void 0 ? void 0 : audioStream.getAudioTracks().forEach(function (track) {
|
|
3666
|
-
var _a;
|
|
3667
|
-
(_a = track.stop) === null || _a === void 0 ? void 0 : _a.call(track);
|
|
3668
|
-
});
|
|
3669
|
-
set({
|
|
3670
|
-
audioStream: null,
|
|
3671
|
-
microphoneReady: false,
|
|
3672
|
-
microphoneAccessDenied: false
|
|
3673
|
-
});
|
|
3674
|
-
}
|
|
3675
|
-
});
|
|
3676
|
-
});
|
|
3677
|
-
if (config.requestAccessAutomatically) {
|
|
3678
|
-
void store.getState().requestCameraAccess();
|
|
3679
|
-
}
|
|
3680
|
-
if (config.requireMicrophoneAccess) {
|
|
3681
|
-
void store.getState().requestMicrophoneAccess();
|
|
3682
|
-
}
|
|
3683
|
-
return _assign(_assign({}, store), {
|
|
3684
|
-
destroy: function destroy() {
|
|
3685
|
-
store.getState().releaseCameraAccess();
|
|
3686
|
-
store.getState().releaseMicrophoneAccess();
|
|
3734
|
+
passportDetectionScore: passportDetectionScore,
|
|
3735
|
+
passportDetectionThresholdMet: passportDetectionThresholdMet,
|
|
3736
|
+
bestDocument: bestDocument,
|
|
3737
|
+
documentInBounds: documentInBounds,
|
|
3738
|
+
documentTooClose: documentTooClose,
|
|
3739
|
+
documentIsStable: documentIsStable,
|
|
3740
|
+
frameWidth: frameWidth,
|
|
3741
|
+
frameHeight: frameHeight,
|
|
3742
|
+
allZero: allZero
|
|
3743
|
+
};
|
|
3744
|
+
}
|
|
3745
|
+
function applyNonMaxSuppression(detectedObjects, isGoodBox) {
|
|
3746
|
+
var maxes = {};
|
|
3747
|
+
detectedObjects.forEach(function (obj, i) {
|
|
3748
|
+
if (obj) {
|
|
3749
|
+
if (!maxes[obj.label]) maxes[obj.label] = [0, -1];
|
|
3750
|
+
if (obj.score > maxes[obj.label][0] && (isGoodBox === null || isGoodBox === void 0 ? void 0 : isGoodBox(obj))) maxes[obj.label] = [obj.score, i];
|
|
3687
3751
|
}
|
|
3688
3752
|
});
|
|
3689
|
-
|
|
3690
|
-
|
|
3691
|
-
function
|
|
3692
|
-
|
|
3693
|
-
|
|
3694
|
-
|
|
3695
|
-
|
|
3696
|
-
|
|
3697
|
-
|
|
3698
|
-
|
|
3699
|
-
|
|
3700
|
-
|
|
3701
|
-
|
|
3702
|
-
|
|
3703
|
-
|
|
3704
|
-
|
|
3705
|
-
|
|
3706
|
-
var
|
|
3707
|
-
|
|
3708
|
-
|
|
3709
|
-
|
|
3710
|
-
|
|
3711
|
-
|
|
3712
|
-
|
|
3713
|
-
|
|
3714
|
-
|
|
3715
|
-
|
|
3716
|
-
|
|
3717
|
-
|
|
3718
|
-
|
|
3719
|
-
|
|
3720
|
-
|
|
3721
|
-
|
|
3722
|
-
|
|
3723
|
-
|
|
3724
|
-
|
|
3725
|
-
|
|
3726
|
-
|
|
3753
|
+
return Object.keys(maxes).map(function (label) {
|
|
3754
|
+
return detectedObjects[maxes[label][1]];
|
|
3755
|
+
}).filter(function (obj) {
|
|
3756
|
+
return !!obj;
|
|
3757
|
+
});
|
|
3758
|
+
}
|
|
3759
|
+
|
|
3760
|
+
function useFrameLoop(fn, _a) {
|
|
3761
|
+
var _b = _a.throttleMs,
|
|
3762
|
+
throttleMs = _b === void 0 ? 0 : _b,
|
|
3763
|
+
_c = _a.autoStart,
|
|
3764
|
+
autoStart = _c === void 0 ? false : _c;
|
|
3765
|
+
var _d = React.useState(false),
|
|
3766
|
+
running = _d[0],
|
|
3767
|
+
setRunning = _d[1];
|
|
3768
|
+
var startedAtRef = React.useRef(null);
|
|
3769
|
+
var loopId = React.useRef(0);
|
|
3770
|
+
var frameId = React.useRef(0);
|
|
3771
|
+
React.useEffect(function runFrameLoop() {
|
|
3772
|
+
if (!running) return;
|
|
3773
|
+
var timer;
|
|
3774
|
+
var currentLoopId = loopId.current;
|
|
3775
|
+
function renderPrediction() {
|
|
3776
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
3777
|
+
var start, timeRunning, took, amountToThrottle;
|
|
3778
|
+
var _a, _b;
|
|
3779
|
+
return __generator(this, function (_c) {
|
|
3780
|
+
switch (_c.label) {
|
|
3781
|
+
case 0:
|
|
3782
|
+
if (currentLoopId !== loopId.current) return [2 /*return*/];
|
|
3783
|
+
start = new Date().getTime();
|
|
3784
|
+
timeRunning = start - ((_b = (_a = startedAtRef.current) === null || _a === void 0 ? void 0 : _a.getTime()) !== null && _b !== void 0 ? _b : 0);
|
|
3785
|
+
return [4 /*yield*/, fn(frameId.current, timeRunning)];
|
|
3786
|
+
case 1:
|
|
3787
|
+
_c.sent();
|
|
3788
|
+
took = new Date().getTime() - start;
|
|
3789
|
+
amountToThrottle = Math.max((throttleMs !== null && throttleMs !== void 0 ? throttleMs : 0) - took, 0);
|
|
3790
|
+
timer = setTimeout(function () {
|
|
3791
|
+
frameId.current = requestAnimationFrame(renderPrediction);
|
|
3792
|
+
}, amountToThrottle);
|
|
3793
|
+
return [2 /*return*/];
|
|
3794
|
+
}
|
|
3795
|
+
});
|
|
3727
3796
|
});
|
|
3728
|
-
(_c = store.current) === null || _c === void 0 ? void 0 : _c.getState().requestCameraAccess();
|
|
3729
3797
|
}
|
|
3730
|
-
|
|
3731
|
-
React.useEffect(function () {
|
|
3798
|
+
renderPrediction().then();
|
|
3732
3799
|
return function () {
|
|
3733
|
-
|
|
3734
|
-
|
|
3800
|
+
loopId.current += 1;
|
|
3801
|
+
frameId.current && cancelAnimationFrame(frameId.current);
|
|
3802
|
+
timer && clearTimeout(timer);
|
|
3735
3803
|
};
|
|
3804
|
+
}, [fn, running, throttleMs]);
|
|
3805
|
+
var start = React.useCallback(function () {
|
|
3806
|
+
startedAtRef.current = new Date();
|
|
3807
|
+
setRunning(true);
|
|
3736
3808
|
}, []);
|
|
3737
|
-
|
|
3738
|
-
|
|
3739
|
-
|
|
3740
|
-
|
|
3741
|
-
|
|
3742
|
-
|
|
3743
|
-
|
|
3744
|
-
|
|
3809
|
+
var stop = React.useCallback(function () {
|
|
3810
|
+
loopId.current += 1; // force the loop to stop immediately.
|
|
3811
|
+
setRunning(false);
|
|
3812
|
+
startedAtRef.current = null;
|
|
3813
|
+
}, []);
|
|
3814
|
+
React.useEffect(function startAutomatically() {
|
|
3815
|
+
if (autoStart) start();
|
|
3816
|
+
return function () {
|
|
3817
|
+
stop();
|
|
3818
|
+
};
|
|
3819
|
+
}, [autoStart, start, stop]);
|
|
3820
|
+
return {
|
|
3821
|
+
start: start,
|
|
3822
|
+
stop: stop
|
|
3823
|
+
};
|
|
3745
3824
|
}
|
|
3746
3825
|
|
|
3747
3826
|
var DocumentDetectionModelContext = /*#__PURE__*/React.createContext({
|
|
@@ -3789,7 +3868,7 @@ function DocumentDetectionModelProvider(_a) {
|
|
|
3789
3868
|
_g = _a.documentDetectionModelLoadTimeoutMs,
|
|
3790
3869
|
documentDetectionModelLoadTimeoutMs = _g === void 0 ? defaultDocumentDetectionModelLoadTimeoutMs : _g,
|
|
3791
3870
|
onDocumentDetectionModelError = _a.onDocumentDetectionModelError;
|
|
3792
|
-
var _h =
|
|
3871
|
+
var _h = React.useContext(CameraStateContext),
|
|
3793
3872
|
videoRef = _h.videoRef,
|
|
3794
3873
|
videoLoaded = _h.videoLoaded,
|
|
3795
3874
|
cameraReady = _h.cameraReady;
|
|
@@ -3812,8 +3891,7 @@ function DocumentDetectionModelProvider(_a) {
|
|
|
3812
3891
|
modelPath: documentDetectionModelPath,
|
|
3813
3892
|
modelLoadTimeoutMs: documentDetectionModelLoadTimeoutMs,
|
|
3814
3893
|
scoreThreshold: documentDetectionModelScoreThreshold,
|
|
3815
|
-
onModelError: onDocumentDetectionModelError
|
|
3816
|
-
videoRef: videoRef
|
|
3894
|
+
onModelError: onDocumentDetectionModelError
|
|
3817
3895
|
}),
|
|
3818
3896
|
ready = _o.ready,
|
|
3819
3897
|
modelDownloadProgress = _o.modelDownloadProgress,
|
|
@@ -3930,12 +4008,10 @@ function FocusModelProvider(_a) {
|
|
|
3930
4008
|
var _e = React.useState({}),
|
|
3931
4009
|
focusThresholds = _e[0],
|
|
3932
4010
|
setFocusThresholds = _e[1];
|
|
3933
|
-
var videoRef = useCameraStore().videoRef;
|
|
3934
4011
|
var _f = useLoadFocusModel({
|
|
3935
4012
|
modelPath: focusModelPath,
|
|
3936
4013
|
modelLoadTimeoutMs: focusModelLoadTimeoutMs,
|
|
3937
|
-
onModelError: onFocusModelError
|
|
3938
|
-
videoRef: videoRef
|
|
4014
|
+
onModelError: onFocusModelError
|
|
3939
4015
|
}),
|
|
3940
4016
|
ready = _f.ready,
|
|
3941
4017
|
modelDownloadProgress = _f.modelDownloadProgress,
|
|
@@ -5057,33 +5133,31 @@ var Button = styled__default.default(LoaderButton)(templateObject_5$b || (templa
|
|
|
5057
5133
|
var templateObject_1$D, templateObject_2$w, templateObject_3$o, templateObject_4$i, templateObject_5$b;
|
|
5058
5134
|
|
|
5059
5135
|
var IdCapture = function IdCapture(_a) {
|
|
5060
|
-
var _b, _c, _d, _e, _f, _g, _h;
|
|
5136
|
+
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
5061
5137
|
var requiredDocumentType = _a.requiredDocumentType,
|
|
5062
|
-
|
|
5063
|
-
thresholds =
|
|
5138
|
+
_k = _a.thresholds,
|
|
5139
|
+
thresholds = _k === void 0 ? defaultIdCaptureThresholds : _k,
|
|
5064
5140
|
guidanceMessage = _a.guidanceMessage,
|
|
5065
5141
|
guidanceSatisfied = _a.guidanceSatisfied,
|
|
5066
5142
|
onCapture = _a.onCapture,
|
|
5067
|
-
|
|
5068
|
-
classNames =
|
|
5069
|
-
|
|
5070
|
-
colors =
|
|
5071
|
-
|
|
5072
|
-
rawVerbiage =
|
|
5073
|
-
|
|
5074
|
-
debugMode =
|
|
5075
|
-
var
|
|
5076
|
-
ref =
|
|
5077
|
-
|
|
5078
|
-
width =
|
|
5079
|
-
|
|
5080
|
-
height =
|
|
5081
|
-
var
|
|
5082
|
-
state =
|
|
5083
|
-
dispatch =
|
|
5084
|
-
var
|
|
5085
|
-
camera = _t.camera,
|
|
5086
|
-
isRearFacing = _t.isRearFacing;
|
|
5143
|
+
_l = _a.classNames,
|
|
5144
|
+
classNames = _l === void 0 ? {} : _l,
|
|
5145
|
+
_m = _a.colors,
|
|
5146
|
+
colors = _m === void 0 ? {} : _m,
|
|
5147
|
+
_o = _a.verbiage,
|
|
5148
|
+
rawVerbiage = _o === void 0 ? {} : _o,
|
|
5149
|
+
_p = _a.debugMode,
|
|
5150
|
+
debugMode = _p === void 0 ? false : _p;
|
|
5151
|
+
var _q = useResizeObserver__default.default(),
|
|
5152
|
+
ref = _q.ref,
|
|
5153
|
+
_r = _q.width,
|
|
5154
|
+
width = _r === void 0 ? 1 : _r,
|
|
5155
|
+
_s = _q.height,
|
|
5156
|
+
height = _s === void 0 ? 1 : _s;
|
|
5157
|
+
var _t = useIdCaptureState(),
|
|
5158
|
+
state = _t[0],
|
|
5159
|
+
dispatch = _t[1];
|
|
5160
|
+
var cameraRef = React.useContext(CameraStateContext).cameraRef;
|
|
5087
5161
|
var _u = React.useContext(IdCaptureModelsContext),
|
|
5088
5162
|
modelsReady = _u.ready,
|
|
5089
5163
|
setThresholds = _u.setThresholds,
|
|
@@ -5195,16 +5269,17 @@ var IdCapture = function IdCapture(_a) {
|
|
|
5195
5269
|
classNames: classNames.overrideWrongDocumentTypeGuidanceDialog,
|
|
5196
5270
|
verbiage: rawVerbiage.overrideWrongDocumentTypeGuidanceDialog
|
|
5197
5271
|
}))), debugMode && ( /*#__PURE__*/React__namespace.default.createElement(DebugBoundingBoxOverlay, {
|
|
5198
|
-
"$flipX": !isRearFacing,
|
|
5272
|
+
"$flipX": !((_j = cameraRef.current) === null || _j === void 0 ? void 0 : _j.isRearFacing),
|
|
5199
5273
|
scaling: debugScalingDetails
|
|
5200
5274
|
}, state.detectedObjects.map(function (obj, i) {
|
|
5275
|
+
var _a;
|
|
5201
5276
|
return /*#__PURE__*/React__namespace.default.createElement(IdCaptureDetectedObjectDebugBox, {
|
|
5202
5277
|
key: i,
|
|
5203
5278
|
obj: obj,
|
|
5204
5279
|
scaling: debugScalingDetails,
|
|
5205
|
-
flipX: !isRearFacing
|
|
5280
|
+
flipX: !((_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.isRearFacing)
|
|
5206
5281
|
});
|
|
5207
|
-
}))), debugMode && ( /*#__PURE__*/React__namespace.default.createElement(DebugStatsPane, null,
|
|
5282
|
+
}))), debugMode && ( /*#__PURE__*/React__namespace.default.createElement(DebugStatsPane, null, cameraRef.current ? ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React__namespace.default.createElement("br", null), state.frameCaptureRate > 0.75 ? '✅' : '👎', " Frame Rate:", ' ', Math.round((state.frameCaptureRate + Number.EPSILON) * 1000) / 1000, ' ', "fps (", detectionTime, "ms doc detect, ", focusPredictionTime, "ms focus)", /*#__PURE__*/React__namespace.default.createElement("br", null), modelsReady ? ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, state.detectionThresholdMet ? '✅' : '❌', " Detected Document Type: ", state.detectedDocumentType, /*#__PURE__*/React__namespace.default.createElement("br", null), state.idCardFrontDetectionThresholdMet ? '✅' : '❌', " ID Card Front Score: ", state.idCardFrontDetectionScore.toFixed(3), /*#__PURE__*/React__namespace.default.createElement("br", null), state.idCardBackDetectionThresholdMet ? '✅' : '❌', " ID Card Back Score: ", state.idCardBackDetectionScore.toFixed(3), /*#__PURE__*/React__namespace.default.createElement("br", null), state.passportDetectionThresholdMet ? '✅' : '❌', " Passport Score: ", state.passportDetectionScore.toFixed(3), /*#__PURE__*/React__namespace.default.createElement("br", null), state.focusThresholdMet ? '✅' : '❌', " Focus Score:", ' ', state.focusScore.toFixed(3), /*#__PURE__*/React__namespace.default.createElement("br", null), state.documentInBounds ? '✅' : '❌', " Document In Bounds", /*#__PURE__*/React__namespace.default.createElement("br", null), state.documentIsStable ? '✅' : '❌', " Document Is Stable", /*#__PURE__*/React__namespace.default.createElement("br", null), state.goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', state.goodFramesCount, "/", state.goodFramesThreshold)) : ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, "\u274C Models not ready")))));
|
|
5208
5283
|
};
|
|
5209
5284
|
var timeSince = function timeSince(t) {
|
|
5210
5285
|
if (!t) return 0;
|
|
@@ -5221,9 +5296,7 @@ var CameraAccessDeniedOverlay = function CameraAccessDeniedOverlay(_a) {
|
|
|
5221
5296
|
colors = _e === void 0 ? {} : _e,
|
|
5222
5297
|
_f = _a.verbiage,
|
|
5223
5298
|
rawVerbiage = _f === void 0 ? {} : _f;
|
|
5224
|
-
var requestCameraAccess =
|
|
5225
|
-
return state.requestCameraAccess;
|
|
5226
|
-
});
|
|
5299
|
+
var requestCameraAccess = React.useContext(CameraStateContext).requestCameraAccess;
|
|
5227
5300
|
assets.imageUrl || (assets.imageUrl = DEFAULT_CDN_URL + '/camera-disable-icon.png');
|
|
5228
5301
|
var verbiage = useTranslations(rawVerbiage, {
|
|
5229
5302
|
headingText: 'Your camera permission is disabled',
|
|
@@ -5871,7 +5944,7 @@ var IdCaptureLoadingOverlayDefault = function IdCaptureLoadingOverlayDefault(_a)
|
|
|
5871
5944
|
var _o = React.useContext(IdCaptureModelsContext),
|
|
5872
5945
|
modelsReady = _o.ready,
|
|
5873
5946
|
modelDownloadProgress = _o.modelDownloadProgress;
|
|
5874
|
-
var _p =
|
|
5947
|
+
var _p = React.useContext(CameraStateContext),
|
|
5875
5948
|
cameraReady = _p.cameraReady,
|
|
5876
5949
|
cameraAccessDenied = _p.cameraAccessDenied,
|
|
5877
5950
|
iphoneContinuityCameraAvailable = _p.iphoneContinuityCameraAvailable,
|
|
@@ -6069,14 +6142,7 @@ var IdCaptureLoadingOverlayLegacy = function IdCaptureLoadingOverlayLegacy(_a) {
|
|
|
6069
6142
|
var _l = React.useContext(IdCaptureModelsContext),
|
|
6070
6143
|
modelsReady = _l.ready,
|
|
6071
6144
|
modelDownloadProgress = _l.modelDownloadProgress;
|
|
6072
|
-
var _m =
|
|
6073
|
-
return {
|
|
6074
|
-
cameraReady: state.cameraReady,
|
|
6075
|
-
cameraAccessDenied: state.cameraAccessDenied,
|
|
6076
|
-
iphoneContinuityCameraAvailable: state.iphoneContinuityCameraAvailable,
|
|
6077
|
-
setIphoneContinuityCameraAllowed: state.setIphoneContinuityCameraAllowed
|
|
6078
|
-
};
|
|
6079
|
-
})),
|
|
6145
|
+
var _m = React.useContext(CameraStateContext),
|
|
6080
6146
|
cameraReady = _m.cameraReady,
|
|
6081
6147
|
cameraAccessDenied = _m.cameraAccessDenied,
|
|
6082
6148
|
iphoneContinuityCameraAvailable = _m.iphoneContinuityCameraAvailable,
|
|
@@ -6622,24 +6688,23 @@ function getOrientation(allowPortraitOnMobile) {
|
|
|
6622
6688
|
}
|
|
6623
6689
|
|
|
6624
6690
|
var IdVideoCaptureFlipIdPrompt = function IdVideoCaptureFlipIdPrompt(_a) {
|
|
6625
|
-
var _b
|
|
6626
|
-
|
|
6627
|
-
|
|
6628
|
-
|
|
6691
|
+
var _b;
|
|
6692
|
+
var _c = _a.idCaptureGuideImages,
|
|
6693
|
+
idCaptureGuideImages = _c === void 0 ? defaultIdCaptureGuideImages : _c,
|
|
6694
|
+
_d = _a.classNames,
|
|
6695
|
+
classNames = _d === void 0 ? {} : _d,
|
|
6629
6696
|
borderWidth = _a.borderWidth,
|
|
6630
6697
|
borderColor = _a.borderColor,
|
|
6631
6698
|
borderRadius = _a.borderRadius,
|
|
6632
6699
|
imageStyle = _a.imageStyle;
|
|
6633
|
-
var
|
|
6634
|
-
|
|
6635
|
-
|
|
6636
|
-
|
|
6637
|
-
|
|
6638
|
-
|
|
6639
|
-
|
|
6640
|
-
|
|
6641
|
-
rotationAngle = _e[0],
|
|
6642
|
-
setRotationAngle = _e[1];
|
|
6700
|
+
var cameraRef = React.useContext(CameraStateContext).cameraRef;
|
|
6701
|
+
var isMirrored = !((_b = cameraRef.current) === null || _b === void 0 ? void 0 : _b.isRearFacing);
|
|
6702
|
+
var _e = React.useState(1),
|
|
6703
|
+
transitionTime = _e[0],
|
|
6704
|
+
setTransitionTime = _e[1];
|
|
6705
|
+
var _f = React.useState(0),
|
|
6706
|
+
rotationAngle = _f[0],
|
|
6707
|
+
setRotationAngle = _f[1];
|
|
6643
6708
|
var frontTransforms = ["rotateY(".concat(rotationAngle, "deg)")];
|
|
6644
6709
|
if (isMirrored) frontTransforms.push('scaleX(-1)');
|
|
6645
6710
|
var backTransforms = ["rotateY(".concat(180 - rotationAngle, "deg)")];
|
|
@@ -7163,30 +7228,29 @@ var Canvas$1 = styled__default.default.canvas(templateObject_2$n || (templateObj
|
|
|
7163
7228
|
var templateObject_1$r, templateObject_2$n;
|
|
7164
7229
|
|
|
7165
7230
|
function IdCaptureGuides(_a) {
|
|
7166
|
-
var _b
|
|
7167
|
-
|
|
7168
|
-
|
|
7169
|
-
|
|
7170
|
-
|
|
7171
|
-
|
|
7172
|
-
|
|
7173
|
-
|
|
7174
|
-
|
|
7175
|
-
|
|
7176
|
-
|
|
7177
|
-
|
|
7178
|
-
|
|
7179
|
-
|
|
7180
|
-
|
|
7181
|
-
|
|
7182
|
-
|
|
7183
|
-
|
|
7184
|
-
|
|
7185
|
-
|
|
7231
|
+
var _b, _c;
|
|
7232
|
+
var _d = _a.guideType,
|
|
7233
|
+
guideType = _d === void 0 ? 'fit' : _d,
|
|
7234
|
+
_e = _a.status,
|
|
7235
|
+
status = _e === void 0 ? 'ready' : _e,
|
|
7236
|
+
_f = _a.progress,
|
|
7237
|
+
progress = _f === void 0 ? 0 : _f,
|
|
7238
|
+
_g = _a.portraitGuidesOnMobile,
|
|
7239
|
+
portraitGuidesOnMobile = _g === void 0 ? true : _g,
|
|
7240
|
+
_h = _a.requestedAction,
|
|
7241
|
+
requestedAction = _h === void 0 ? 'SHOW_ID_FRONT' : _h,
|
|
7242
|
+
_j = _a.isBackToFront,
|
|
7243
|
+
isBackToFront = _j === void 0 ? false : _j,
|
|
7244
|
+
_k = _a.images,
|
|
7245
|
+
images = _k === void 0 ? defaultIdCaptureGuideImages : _k,
|
|
7246
|
+
_l = _a.classNames,
|
|
7247
|
+
classNames = _l === void 0 ? {} : _l,
|
|
7248
|
+
_m = _a.colors,
|
|
7249
|
+
colors = _m === void 0 ? {} : _m,
|
|
7250
|
+
_o = _a.verbiage,
|
|
7251
|
+
rawVerbiage = _o === void 0 ? {} : _o;
|
|
7186
7252
|
var state = useIdCaptureState()[0];
|
|
7187
|
-
var
|
|
7188
|
-
return state.isRearFacing;
|
|
7189
|
-
});
|
|
7253
|
+
var cameraRef = React.useContext(CameraStateContext).cameraRef;
|
|
7190
7254
|
var verbiage = useTranslations(rawVerbiage, {
|
|
7191
7255
|
instructionText: 'Scan the front of ID',
|
|
7192
7256
|
capturingText: 'Capturing...',
|
|
@@ -7198,7 +7262,7 @@ function IdCaptureGuides(_a) {
|
|
|
7198
7262
|
status: status,
|
|
7199
7263
|
progress: progress,
|
|
7200
7264
|
instruction: state.captureFailed ? verbiage.captureFailedText : state.capturing ? verbiage === null || verbiage === void 0 ? void 0 : verbiage.capturingText : verbiage.instructionText,
|
|
7201
|
-
isMirrored: !isRearFacing,
|
|
7265
|
+
isMirrored: !((_b = cameraRef.current) === null || _b === void 0 ? void 0 : _b.isRearFacing),
|
|
7202
7266
|
borderColor: state.isGoodFrame ? colors.guideBoxSatisfiedColor : colors.guideBoxUnsatisfiedColor,
|
|
7203
7267
|
imageVisible: requestedAction === 'FLIP_ID' || !state.idCardFrontDetectionThresholdMet || !state.documentInBounds || state.documentTooClose
|
|
7204
7268
|
})), guideType === 'fit' && ( /*#__PURE__*/React__namespace.default.createElement(IdCaptureFitGuide, {
|
|
@@ -7208,7 +7272,7 @@ function IdCaptureGuides(_a) {
|
|
|
7208
7272
|
status: status,
|
|
7209
7273
|
progress: progress,
|
|
7210
7274
|
instruction: state.captureFailed ? verbiage.captureFailedText : state.capturing ? verbiage === null || verbiage === void 0 ? void 0 : verbiage.capturingText : verbiage.instructionText,
|
|
7211
|
-
isMirrored: !isRearFacing,
|
|
7275
|
+
isMirrored: !((_c = cameraRef.current) === null || _c === void 0 ? void 0 : _c.isRearFacing),
|
|
7212
7276
|
isBackToFront: isBackToFront,
|
|
7213
7277
|
portraitGuidesOnMobile: portraitGuidesOnMobile,
|
|
7214
7278
|
borderColor: state.isGoodFrame ? colors.guideBoxSatisfiedColor : colors.guideBoxUnsatisfiedColor,
|
|
@@ -7307,6 +7371,48 @@ var ImagePreviewText = styled__default.default.div(templateObject_3$h || (templa
|
|
|
7307
7371
|
var ImagePreviewImageWrapper = styled__default.default.div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n position: relative;\n height: calc(100% - 8px);\n padding: 4px;\n border-radius: 4px;\n background: white;\n\n & > img {\n border-radius: 4px;\n width: auto;\n max-height: 100%;\n }\n"], ["\n position: relative;\n height: calc(100% - 8px);\n padding: 4px;\n border-radius: 4px;\n background: white;\n\n & > img {\n border-radius: 4px;\n width: auto;\n max-height: 100%;\n }\n"])));
|
|
7308
7372
|
var templateObject_1$q, templateObject_2$m, templateObject_3$h, templateObject_4$b;
|
|
7309
7373
|
|
|
7374
|
+
var CameraVideoTag = function CameraVideoTag(_a) {
|
|
7375
|
+
var _b;
|
|
7376
|
+
var className = _a.className;
|
|
7377
|
+
var _c = React.useContext(CameraStateContext),
|
|
7378
|
+
videoRef = _c.videoRef,
|
|
7379
|
+
setVideoLoaded = _c.setVideoLoaded,
|
|
7380
|
+
onVideoUnmounted = _c.onVideoUnmounted,
|
|
7381
|
+
cameraRef = _c.cameraRef;
|
|
7382
|
+
React.useEffect(function notifyCameraProviderOfUnmount() {
|
|
7383
|
+
var videoElement = videoRef.current;
|
|
7384
|
+
if (!videoElement) return;
|
|
7385
|
+
return function () {
|
|
7386
|
+
onVideoUnmounted(videoElement);
|
|
7387
|
+
};
|
|
7388
|
+
}, [onVideoUnmounted, videoRef]);
|
|
7389
|
+
React.useEffect(function setVideoLoadedToFalseOnMount() {
|
|
7390
|
+
setVideoLoaded(false);
|
|
7391
|
+
}, [setVideoLoaded]);
|
|
7392
|
+
React.useEffect(function attachCameraStreamToVideoTagWhenReady() {
|
|
7393
|
+
var _a;
|
|
7394
|
+
if (videoRef.current && ((_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.stream)) {
|
|
7395
|
+
videoRef.current.srcObject = cameraRef.current.stream;
|
|
7396
|
+
}
|
|
7397
|
+
}, [cameraRef, videoRef]);
|
|
7398
|
+
var onLoadedData = React.useCallback(function () {
|
|
7399
|
+
setVideoLoaded(true);
|
|
7400
|
+
}, [setVideoLoaded]);
|
|
7401
|
+
return /*#__PURE__*/React__namespace.default.createElement(FullscreenVideoTag, {
|
|
7402
|
+
className: className,
|
|
7403
|
+
autoPlay: true,
|
|
7404
|
+
playsInline: true,
|
|
7405
|
+
muted: true,
|
|
7406
|
+
ref: videoRef,
|
|
7407
|
+
onLoadedData: onLoadedData,
|
|
7408
|
+
"$isRearFacing": (_b = cameraRef.current) === null || _b === void 0 ? void 0 : _b.isRearFacing
|
|
7409
|
+
});
|
|
7410
|
+
};
|
|
7411
|
+
var FullscreenVideoTag = styled__default.default.video(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n transform: ", ";\n transform-style: preserve-3d;\n min-width: 100%;\n min-height: 100%;\n width: auto;\n height: auto;\n max-width: 100%;\n max-height: 100%;\n object-fit: cover;\n background: black;\n z-index: -2;\n"], ["\n transform: ", ";\n transform-style: preserve-3d;\n min-width: 100%;\n min-height: 100%;\n width: auto;\n height: auto;\n max-width: 100%;\n max-height: 100%;\n object-fit: cover;\n background: black;\n z-index: -2;\n"])), function (props) {
|
|
7412
|
+
return props.$isRearFacing ? '' : 'scaleX(-1)';
|
|
7413
|
+
});
|
|
7414
|
+
var templateObject_1$p;
|
|
7415
|
+
|
|
7310
7416
|
var documentCaptureInitialState = {
|
|
7311
7417
|
documents: [],
|
|
7312
7418
|
currentDocumentIndex: 0,
|
|
@@ -7425,8 +7531,8 @@ var DocumentCaptureStateProvider = function DocumentCaptureStateProvider(_a) {
|
|
|
7425
7531
|
var _c = React.useReducer(documentCaptureStateReducer, documentCaptureInitialState),
|
|
7426
7532
|
state = _c[0],
|
|
7427
7533
|
dispatch = _c[1];
|
|
7428
|
-
var _d =
|
|
7429
|
-
|
|
7534
|
+
var _d = React.useContext(CameraStateContext),
|
|
7535
|
+
cameraRef = _d.cameraRef,
|
|
7430
7536
|
videoRef = _d.videoRef;
|
|
7431
7537
|
var uploadDocument = React.useContext(SubmissionContext).uploadDocument;
|
|
7432
7538
|
var uploadCapturedDocument = React.useCallback(function (content, filetype) {
|
|
@@ -7517,7 +7623,8 @@ var DocumentCaptureStateProvider = function DocumentCaptureStateProvider(_a) {
|
|
|
7517
7623
|
}, [onResize]);
|
|
7518
7624
|
var videoTag = videoRef.current;
|
|
7519
7625
|
React.useEffect(function () {
|
|
7520
|
-
if (!state.capturing
|
|
7626
|
+
if (!state.capturing) return;
|
|
7627
|
+
if (!cameraRef.current) return;
|
|
7521
7628
|
function onComplete(content) {
|
|
7522
7629
|
if (!content) return;
|
|
7523
7630
|
var contentUrl = URL.createObjectURL(content);
|
|
@@ -7530,7 +7637,7 @@ var DocumentCaptureStateProvider = function DocumentCaptureStateProvider(_a) {
|
|
|
7530
7637
|
});
|
|
7531
7638
|
}
|
|
7532
7639
|
if (typeof ImageCapture !== 'undefined') {
|
|
7533
|
-
var tracks =
|
|
7640
|
+
var tracks = cameraRef.current.stream.getTracks();
|
|
7534
7641
|
var videoCameraTrack = tracks.find(function (track) {
|
|
7535
7642
|
return track.kind === 'video';
|
|
7536
7643
|
});
|
|
@@ -7545,7 +7652,7 @@ var DocumentCaptureStateProvider = function DocumentCaptureStateProvider(_a) {
|
|
|
7545
7652
|
drawToCanvas(canvas, videoTag);
|
|
7546
7653
|
canvas.toBlob(onComplete);
|
|
7547
7654
|
}
|
|
7548
|
-
}, [state.capturing,
|
|
7655
|
+
}, [cameraRef, state.capturing, videoTag]);
|
|
7549
7656
|
var stateWithActions = React.useMemo(function () {
|
|
7550
7657
|
return _assign(_assign({}, state), {
|
|
7551
7658
|
uploadCapturedDocument: uploadCapturedDocument
|
|
@@ -7660,85 +7767,52 @@ var DocumentCaptureGuideOverlay = function DocumentCaptureGuideOverlay(_a) {
|
|
|
7660
7767
|
ref: canvasRef
|
|
7661
7768
|
}));
|
|
7662
7769
|
};
|
|
7663
|
-
var CanvasWrapper = styled__default.default.div(templateObject_1$
|
|
7770
|
+
var CanvasWrapper = styled__default.default.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n flex-grow: 1;\n background-clip: padding-box;\n box-shadow: inset 0 0 0 2px ", ";\n"], ["\n flex-grow: 1;\n background-clip: padding-box;\n box-shadow: inset 0 0 0 2px ", ";\n"])), function (props) {
|
|
7664
7771
|
return props.$maskColor;
|
|
7665
7772
|
});
|
|
7666
7773
|
var Canvas = styled__default.default.canvas(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
7667
|
-
var templateObject_1$
|
|
7774
|
+
var templateObject_1$o, templateObject_2$l;
|
|
7668
7775
|
|
|
7669
|
-
var CameraFeedWrapper = styled__default.default.div(templateObject_1$
|
|
7776
|
+
var CameraFeedWrapper = styled__default.default.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7670
7777
|
return props.$mode === 'snapToGuides' ? "display: flex;\n position: absolute;\n left: ".concat(props.$x, "px;\n top: ").concat(props.$y, "px;\n width: ").concat(props.$w, "px;\n height: ").concat(props.$h, "px;") : "";
|
|
7671
7778
|
});
|
|
7672
|
-
var templateObject_1$o;
|
|
7673
|
-
|
|
7674
|
-
var CameraVideoTag = function CameraVideoTag(props) {
|
|
7675
|
-
var _a = useCameraStore(shallow.useShallow(function (store) {
|
|
7676
|
-
return {
|
|
7677
|
-
videoRef: store.videoRef,
|
|
7678
|
-
videoStream: store.videoStream,
|
|
7679
|
-
onVideoMounted: store.onVideoMounted,
|
|
7680
|
-
isRearFacing: store.isRearFacing
|
|
7681
|
-
};
|
|
7682
|
-
})),
|
|
7683
|
-
videoRef = _a.videoRef,
|
|
7684
|
-
videoStream = _a.videoStream,
|
|
7685
|
-
onVideoMounted = _a.onVideoMounted,
|
|
7686
|
-
isRearFacing = _a.isRearFacing;
|
|
7687
|
-
React.useEffect(function attachCameraStreamToVideoTagWhenReady() {
|
|
7688
|
-
if (videoRef.current && videoStream) {
|
|
7689
|
-
debug('attaching camera stream to video tag');
|
|
7690
|
-
videoRef.current.srcObject = videoStream;
|
|
7691
|
-
}
|
|
7692
|
-
}, [videoStream, videoRef]);
|
|
7693
|
-
return /*#__PURE__*/React__namespace.default.createElement(FullscreenVideoTag, _assign({
|
|
7694
|
-
autoPlay: true,
|
|
7695
|
-
playsInline: true,
|
|
7696
|
-
muted: true,
|
|
7697
|
-
ref: videoRef,
|
|
7698
|
-
onLoadedData: onVideoMounted,
|
|
7699
|
-
"$isRearFacing": isRearFacing
|
|
7700
|
-
}, props));
|
|
7701
|
-
};
|
|
7702
|
-
var FullscreenVideoTag = styled__default.default.video(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n transform: ", ";\n transform-style: preserve-3d;\n min-width: 100%;\n min-height: 100%;\n width: auto;\n height: auto;\n max-width: 100%;\n max-height: 100%;\n object-fit: cover;\n background: black;\n z-index: -2;\n"], ["\n transform: ", ";\n transform-style: preserve-3d;\n min-width: 100%;\n min-height: 100%;\n width: auto;\n height: auto;\n max-width: 100%;\n max-height: 100%;\n object-fit: cover;\n background: black;\n z-index: -2;\n"])), function (props) {
|
|
7703
|
-
return props.$isRearFacing ? '' : 'scaleX(-1)';
|
|
7704
|
-
});
|
|
7705
7779
|
var templateObject_1$n;
|
|
7706
7780
|
|
|
7707
7781
|
var DocumentCaptureScreen = function DocumentCaptureScreen(_a) {
|
|
7708
|
-
var _b, _c, _d, _e, _f;
|
|
7782
|
+
var _b, _c, _d, _e, _f, _g, _h;
|
|
7709
7783
|
var onCaptureClicked = _a.onCaptureClicked,
|
|
7710
|
-
|
|
7711
|
-
classNames =
|
|
7712
|
-
|
|
7713
|
-
rawVerbiage =
|
|
7714
|
-
var
|
|
7715
|
-
|
|
7716
|
-
documents =
|
|
7717
|
-
currentDocumentIndex =
|
|
7718
|
-
rectX =
|
|
7719
|
-
rectY =
|
|
7720
|
-
rectWidth =
|
|
7721
|
-
rectHeight =
|
|
7722
|
-
rectOffsetTop =
|
|
7723
|
-
capturing =
|
|
7724
|
-
uploadCapturedDocument =
|
|
7725
|
-
dispatch =
|
|
7726
|
-
var
|
|
7727
|
-
title =
|
|
7728
|
-
aspectRatio =
|
|
7729
|
-
cameraFeedMode =
|
|
7730
|
-
instructions =
|
|
7731
|
-
contentUrl =
|
|
7732
|
-
content =
|
|
7733
|
-
uploadState =
|
|
7734
|
-
var
|
|
7735
|
-
|
|
7736
|
-
cameraReady =
|
|
7737
|
-
cameraAccessDenied =
|
|
7738
|
-
requestCameraAccess =
|
|
7739
|
-
var
|
|
7740
|
-
cameraAccessRequested =
|
|
7741
|
-
setCameraAccessRequested =
|
|
7784
|
+
_j = _a.classNames,
|
|
7785
|
+
classNames = _j === void 0 ? {} : _j,
|
|
7786
|
+
_k = _a.verbiage,
|
|
7787
|
+
rawVerbiage = _k === void 0 ? {} : _k;
|
|
7788
|
+
var _l = useDocumentCaptureState(),
|
|
7789
|
+
_m = _l[0],
|
|
7790
|
+
documents = _m.documents,
|
|
7791
|
+
currentDocumentIndex = _m.currentDocumentIndex,
|
|
7792
|
+
rectX = _m.rectX,
|
|
7793
|
+
rectY = _m.rectY,
|
|
7794
|
+
rectWidth = _m.rectWidth,
|
|
7795
|
+
rectHeight = _m.rectHeight,
|
|
7796
|
+
rectOffsetTop = _m.rectOffsetTop,
|
|
7797
|
+
capturing = _m.capturing,
|
|
7798
|
+
uploadCapturedDocument = _m.uploadCapturedDocument,
|
|
7799
|
+
dispatch = _l[1];
|
|
7800
|
+
var _o = (_b = documents[currentDocumentIndex]) !== null && _b !== void 0 ? _b : {},
|
|
7801
|
+
title = _o.title,
|
|
7802
|
+
aspectRatio = _o.aspectRatio,
|
|
7803
|
+
cameraFeedMode = _o.cameraFeedMode,
|
|
7804
|
+
instructions = _o.instructions,
|
|
7805
|
+
contentUrl = _o.contentUrl,
|
|
7806
|
+
content = _o.content,
|
|
7807
|
+
uploadState = _o.uploadState;
|
|
7808
|
+
var _p = React.useContext(CameraStateContext),
|
|
7809
|
+
cameraRef = _p.cameraRef,
|
|
7810
|
+
cameraReady = _p.cameraReady,
|
|
7811
|
+
cameraAccessDenied = _p.cameraAccessDenied,
|
|
7812
|
+
requestCameraAccess = _p.requestCameraAccess;
|
|
7813
|
+
var _q = React.useState(false),
|
|
7814
|
+
cameraAccessRequested = _q[0],
|
|
7815
|
+
setCameraAccessRequested = _q[1];
|
|
7742
7816
|
var cameraAccessNeeded =
|
|
7743
7817
|
// we should force the browser to ask for camera access if...
|
|
7744
7818
|
uploadState === 'not_started' &&
|
|
@@ -7747,14 +7821,14 @@ var DocumentCaptureScreen = function DocumentCaptureScreen(_a) {
|
|
|
7747
7821
|
// and the user hasn't passed a media blob for the current document...
|
|
7748
7822
|
!cameraAccessRequested &&
|
|
7749
7823
|
// and we haven't already tried to force a camera request...
|
|
7750
|
-
!(
|
|
7824
|
+
!((_d = (_c = cameraRef.current) === null || _c === void 0 ? void 0 : _c.stream) === null || _d === void 0 ? void 0 : _d.active); // and we don't already have camera access.
|
|
7751
7825
|
React.useEffect(function requestCameraAccessIfNeeded() {
|
|
7752
7826
|
if (!cameraAccessNeeded) return;
|
|
7753
7827
|
setCameraAccessRequested(true);
|
|
7754
7828
|
requestCameraAccess();
|
|
7755
7829
|
}, [cameraAccessNeeded, requestCameraAccess]);
|
|
7756
7830
|
var theme = styled.useTheme();
|
|
7757
|
-
var maskColor = (
|
|
7831
|
+
var maskColor = (_g = (_f = (_e = theme.documentCapture) === null || _e === void 0 ? void 0 : _e.guideBox) === null || _f === void 0 ? void 0 : _f.maskColor) !== null && _g !== void 0 ? _g : cameraFeedMode === 'snapToGuides' ? '#708090' : "rgba(0, 0, 0, 0.5)";
|
|
7758
7832
|
var verbiage = useTranslations(rawVerbiage, {
|
|
7759
7833
|
headingText: title,
|
|
7760
7834
|
loadingBtnText: 'Camera initializing...',
|
|
@@ -7787,7 +7861,7 @@ var DocumentCaptureScreen = function DocumentCaptureScreen(_a) {
|
|
|
7787
7861
|
});
|
|
7788
7862
|
}
|
|
7789
7863
|
return /*#__PURE__*/React__namespace.default.createElement(PageContainer, {
|
|
7790
|
-
className: "flex ".concat((
|
|
7864
|
+
className: "flex ".concat((_h = classNames.container) !== null && _h !== void 0 ? _h : '')
|
|
7791
7865
|
}, /*#__PURE__*/React__namespace.default.createElement(CameraFeedWrapper, {
|
|
7792
7866
|
className: classNames.cameraFeedWrapper,
|
|
7793
7867
|
"$mode": cameraFeedMode !== null && cameraFeedMode !== void 0 ? cameraFeedMode : 'snapToGuides',
|
|
@@ -8212,7 +8286,7 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
|
8212
8286
|
var _3 = useIdCaptureState(),
|
|
8213
8287
|
state = _3[0],
|
|
8214
8288
|
dispatch = _3[1];
|
|
8215
|
-
var _4 =
|
|
8289
|
+
var _4 = React.useContext(CameraStateContext),
|
|
8216
8290
|
cameraAccessDenied = _4.cameraAccessDenied,
|
|
8217
8291
|
requestCameraAccess = _4.requestCameraAccess,
|
|
8218
8292
|
releaseCameraAccess = _4.releaseCameraAccess;
|
|
@@ -8337,7 +8411,7 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
|
8337
8411
|
type: 'resetWizard'
|
|
8338
8412
|
});
|
|
8339
8413
|
onExitCapture === null || onExitCapture === void 0 ? void 0 : onExitCapture();
|
|
8340
|
-
|
|
8414
|
+
requestCameraAccess();
|
|
8341
8415
|
}, [dispatch, onExitCapture, releaseCameraAccess, requestCameraAccess]);
|
|
8342
8416
|
React.useEffect(function () {
|
|
8343
8417
|
if (submissionStatus !== SubmissionStatus.READY) {
|
|
@@ -9160,13 +9234,7 @@ function SelfieGuidanceModelsProvider(_a) {
|
|
|
9160
9234
|
modelLoadTimeoutMs = _c === void 0 ? defaultSelfieCaptureModelLoadTimeoutMs : _c,
|
|
9161
9235
|
_d = _a.requireVerticalFaceCentering,
|
|
9162
9236
|
requireVerticalFaceCentering = _d === void 0 ? true : _d;
|
|
9163
|
-
var _e =
|
|
9164
|
-
return {
|
|
9165
|
-
videoRef: state.videoRef,
|
|
9166
|
-
videoLoaded: state.videoLoaded,
|
|
9167
|
-
cameraReady: state.cameraReady
|
|
9168
|
-
};
|
|
9169
|
-
})),
|
|
9237
|
+
var _e = React.useContext(CameraStateContext),
|
|
9170
9238
|
videoRef = _e.videoRef,
|
|
9171
9239
|
videoLoaded = _e.videoLoaded,
|
|
9172
9240
|
cameraReady = _e.cameraReady;
|
|
@@ -9174,8 +9242,7 @@ function SelfieGuidanceModelsProvider(_a) {
|
|
|
9174
9242
|
var onPredictionHandler = React.useRef();
|
|
9175
9243
|
var _f = useLoadFaceDetector({
|
|
9176
9244
|
onModelError: onModelError,
|
|
9177
|
-
modelLoadTimeoutMs: modelLoadTimeoutMs
|
|
9178
|
-
videoRef: videoRef
|
|
9245
|
+
modelLoadTimeoutMs: modelLoadTimeoutMs
|
|
9179
9246
|
}),
|
|
9180
9247
|
ready = _f.ready,
|
|
9181
9248
|
modelDownloadProgress = _f.modelDownloadProgress,
|
|
@@ -9508,14 +9575,8 @@ var SelfieCapture = function SelfieCapture(_a) {
|
|
|
9508
9575
|
prediction = _t.prediction,
|
|
9509
9576
|
dispatch = _s[1];
|
|
9510
9577
|
var lastPredictionCanvas = React.useRef(null);
|
|
9511
|
-
var _u =
|
|
9512
|
-
|
|
9513
|
-
camera: state.camera,
|
|
9514
|
-
cameraReady: state.cameraReady,
|
|
9515
|
-
videoRef: state.videoRef
|
|
9516
|
-
};
|
|
9517
|
-
})),
|
|
9518
|
-
camera = _u.camera,
|
|
9578
|
+
var _u = React.useContext(CameraStateContext),
|
|
9579
|
+
cameraRef = _u.cameraRef,
|
|
9519
9580
|
videoRef = _u.videoRef;
|
|
9520
9581
|
var _v = React.useContext(SelfieGuidanceModelsContext),
|
|
9521
9582
|
onPredictionMade = _v.onPredictionMade,
|
|
@@ -9605,7 +9666,7 @@ var SelfieCapture = function SelfieCapture(_a) {
|
|
|
9605
9666
|
face: prediction.face,
|
|
9606
9667
|
scaling: debugScalingDetails,
|
|
9607
9668
|
color: satisfied ? 'green' : 'red'
|
|
9608
|
-
}))), debugMode && ( /*#__PURE__*/React__namespace.default.createElement(DebugStatsPane, null,
|
|
9669
|
+
}))), debugMode && ( /*#__PURE__*/React__namespace.default.createElement(DebugStatsPane, null, cameraRef.current ? ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")")) : '❌ Camera not ready', /*#__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), !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(ExitCaptureButton, {
|
|
9609
9670
|
onClick: onExit,
|
|
9610
9671
|
className: classNames.exitCaptureBtn
|
|
9611
9672
|
}));
|
|
@@ -10061,9 +10122,7 @@ var MicrophoneAccessDeniedOverlay = function MicrophoneAccessDeniedOverlay(_a) {
|
|
|
10061
10122
|
colors = _e === void 0 ? {} : _e,
|
|
10062
10123
|
_f = _a.verbiage,
|
|
10063
10124
|
rawVerbiage = _f === void 0 ? {} : _f;
|
|
10064
|
-
var requestMicrophoneAccess =
|
|
10065
|
-
return state.requestMicrophoneAccess;
|
|
10066
|
-
});
|
|
10125
|
+
var requestMicrophoneAccess = React.useContext(CameraStateContext).requestMicrophoneAccess;
|
|
10067
10126
|
assets.imageUrl || (assets.imageUrl = DEFAULT_CDN_URL + '/microphone-disable-icon.svg');
|
|
10068
10127
|
var verbiage = useTranslations(rawVerbiage, {
|
|
10069
10128
|
headingText: 'Your microphone permission is disabled',
|
|
@@ -10111,13 +10170,7 @@ var SelfieCaptureLoadingOverlayLegacy = function SelfieCaptureLoadingOverlayLega
|
|
|
10111
10170
|
colors = _e === void 0 ? {} : _e,
|
|
10112
10171
|
_f = _a.verbiage,
|
|
10113
10172
|
rawVerbiage = _f === void 0 ? {} : _f;
|
|
10114
|
-
var _g =
|
|
10115
|
-
return {
|
|
10116
|
-
cameraReady: state.cameraReady,
|
|
10117
|
-
cameraAccessDenied: state.cameraAccessDenied,
|
|
10118
|
-
microphoneAccessDenied: state.microphoneAccessDenied
|
|
10119
|
-
};
|
|
10120
|
-
})),
|
|
10173
|
+
var _g = React.useContext(CameraStateContext),
|
|
10121
10174
|
cameraReady = _g.cameraReady,
|
|
10122
10175
|
cameraAccessDenied = _g.cameraAccessDenied,
|
|
10123
10176
|
microphoneAccessDenied = _g.microphoneAccessDenied;
|
|
@@ -10204,13 +10257,7 @@ var SelfieCaptureLoadingOverlayDefault = function SelfieCaptureLoadingOverlayDef
|
|
|
10204
10257
|
colors = _e === void 0 ? {} : _e,
|
|
10205
10258
|
_f = _a.verbiage,
|
|
10206
10259
|
rawVerbiage = _f === void 0 ? {} : _f;
|
|
10207
|
-
var _g =
|
|
10208
|
-
return {
|
|
10209
|
-
cameraReady: state.cameraReady,
|
|
10210
|
-
cameraAccessDenied: state.cameraAccessDenied,
|
|
10211
|
-
microphoneAccessDenied: state.microphoneAccessDenied
|
|
10212
|
-
};
|
|
10213
|
-
})),
|
|
10260
|
+
var _g = React.useContext(CameraStateContext),
|
|
10214
10261
|
cameraReady = _g.cameraReady,
|
|
10215
10262
|
cameraAccessDenied = _g.cameraAccessDenied,
|
|
10216
10263
|
microphoneAccessDenied = _g.microphoneAccessDenied;
|
|
@@ -10427,13 +10474,7 @@ var FaceLivenessWizard = function FaceLivenessWizard(_a) {
|
|
|
10427
10474
|
livenessCheckRequest = _t.livenessCheckRequest,
|
|
10428
10475
|
setSelfieImage = _t.setSelfieImage,
|
|
10429
10476
|
logSelfieCaptureAttempt = _t.logSelfieCaptureAttempt;
|
|
10430
|
-
var _u =
|
|
10431
|
-
return {
|
|
10432
|
-
cameraAccessDenied: state.cameraAccessDenied,
|
|
10433
|
-
requestCameraAccess: state.requestCameraAccess,
|
|
10434
|
-
releaseCameraAccess: state.releaseCameraAccess
|
|
10435
|
-
};
|
|
10436
|
-
})),
|
|
10477
|
+
var _u = React.useContext(CameraStateContext),
|
|
10437
10478
|
cameraAccessDenied = _u.cameraAccessDenied,
|
|
10438
10479
|
requestCameraAccess = _u.requestCameraAccess,
|
|
10439
10480
|
releaseCameraAccess = _u.releaseCameraAccess;
|
|
@@ -11154,10 +11195,10 @@ function VideoSignatureContextProvider(_a) {
|
|
|
11154
11195
|
setSignatureVideoUrl = _e[1];
|
|
11155
11196
|
var signatureRecorder = React.useRef(null);
|
|
11156
11197
|
var recordedChunks = React.useRef([]);
|
|
11157
|
-
var _f =
|
|
11158
|
-
|
|
11198
|
+
var _f = React.useContext(CameraStateContext),
|
|
11199
|
+
cameraRef = _f.cameraRef,
|
|
11159
11200
|
videoRef = _f.videoRef;
|
|
11160
|
-
var _g = useVideoRecorder(
|
|
11201
|
+
var _g = useVideoRecorder(cameraRef.current),
|
|
11161
11202
|
isRecordingVideo = _g.isRecordingVideo,
|
|
11162
11203
|
startRecordingVideo = _g.startRecordingVideo,
|
|
11163
11204
|
stopRecordingVideo = _g.stopRecordingVideo,
|
|
@@ -11225,8 +11266,8 @@ function VideoSignatureContextProvider(_a) {
|
|
|
11225
11266
|
var animationFrame = React.useRef(0);
|
|
11226
11267
|
React.useEffect(function () {
|
|
11227
11268
|
var _a;
|
|
11228
|
-
if (!signaturePad.current || !videoRef.current || !outputCanvas.current || !
|
|
11229
|
-
var _b = [
|
|
11269
|
+
if (!signaturePad.current || !videoRef.current || !outputCanvas.current || !cameraRef.current || !isRecording || !isRecordingVideo) return;
|
|
11270
|
+
var _b = [cameraRef.current.width, cameraRef.current.height],
|
|
11230
11271
|
w = _b[0],
|
|
11231
11272
|
h = _b[1];
|
|
11232
11273
|
var isPortrait = typeof window !== 'undefined' && window.innerWidth < window.innerHeight;
|
|
@@ -11259,7 +11300,7 @@ function VideoSignatureContextProvider(_a) {
|
|
|
11259
11300
|
return function () {
|
|
11260
11301
|
cancelAnimationFrame(animationFrame.current);
|
|
11261
11302
|
};
|
|
11262
|
-
}, [
|
|
11303
|
+
}, [cameraRef, isRecording, isRecordingVideo, videoRef]);
|
|
11263
11304
|
var onAcceptClicked = React.useCallback(function () {
|
|
11264
11305
|
return __awaiter(_this, void 0, void 0, function () {
|
|
11265
11306
|
var imageUrl;
|
|
@@ -11388,29 +11429,27 @@ var AcceptBtn = styled__default.default(LoaderButton)(templateObject_7$1 || (tem
|
|
|
11388
11429
|
var templateObject_1$9, templateObject_2$8, templateObject_3$8, templateObject_4$3, templateObject_5$2, templateObject_6$2, templateObject_7$1;
|
|
11389
11430
|
|
|
11390
11431
|
var VideoSignatureCapture = function VideoSignatureCapture(_a) {
|
|
11391
|
-
var _b;
|
|
11432
|
+
var _b, _c, _d;
|
|
11392
11433
|
var onVideoCaptured = _a.onVideoCaptured,
|
|
11393
11434
|
onFaceNotDetected = _a.onFaceNotDetected,
|
|
11394
11435
|
onExit = _a.onExit,
|
|
11395
11436
|
guidesComponent = _a.guidesComponent,
|
|
11396
|
-
|
|
11397
|
-
classNames =
|
|
11398
|
-
|
|
11399
|
-
colors =
|
|
11400
|
-
|
|
11401
|
-
rawVerbiage =
|
|
11402
|
-
|
|
11403
|
-
debugMode =
|
|
11404
|
-
var
|
|
11405
|
-
return state.camera;
|
|
11406
|
-
});
|
|
11437
|
+
_e = _a.classNames,
|
|
11438
|
+
classNames = _e === void 0 ? {} : _e,
|
|
11439
|
+
_f = _a.colors,
|
|
11440
|
+
colors = _f === void 0 ? {} : _f,
|
|
11441
|
+
_g = _a.verbiage,
|
|
11442
|
+
rawVerbiage = _g === void 0 ? {} : _g,
|
|
11443
|
+
_h = _a.debugMode,
|
|
11444
|
+
debugMode = _h === void 0 ? false : _h;
|
|
11445
|
+
var cameraRef = React.useContext(CameraStateContext).cameraRef;
|
|
11407
11446
|
var onPredictionMade = React.useContext(SelfieGuidanceModelsContext).onPredictionMade;
|
|
11408
|
-
var
|
|
11409
|
-
signatureData =
|
|
11410
|
-
signatureDataUrl =
|
|
11411
|
-
signatureVideoData =
|
|
11412
|
-
startRecording =
|
|
11413
|
-
stopRecording =
|
|
11447
|
+
var _j = useVideoSignatureContext(),
|
|
11448
|
+
signatureData = _j.signatureData,
|
|
11449
|
+
signatureDataUrl = _j.signatureDataUrl,
|
|
11450
|
+
signatureVideoData = _j.signatureVideoData,
|
|
11451
|
+
startRecording = _j.startRecording,
|
|
11452
|
+
stopRecording = _j.stopRecording;
|
|
11414
11453
|
React.useEffect(function () {
|
|
11415
11454
|
startRecording();
|
|
11416
11455
|
return function () {
|
|
@@ -11427,9 +11466,9 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
|
|
|
11427
11466
|
onVideoCaptured === null || onVideoCaptured === void 0 ? void 0 : onVideoCaptured(signatureVideoData, signatureData, signatureDataUrl);
|
|
11428
11467
|
}
|
|
11429
11468
|
}, [onVideoCaptured, signatureData, signatureDataUrl, signatureVideoData]);
|
|
11430
|
-
var
|
|
11431
|
-
numFramesWithoutFaces =
|
|
11432
|
-
setNumFramesWithoutFaces =
|
|
11469
|
+
var _k = React.useState(0),
|
|
11470
|
+
numFramesWithoutFaces = _k[0],
|
|
11471
|
+
setNumFramesWithoutFaces = _k[1];
|
|
11433
11472
|
React.useEffect(function () {
|
|
11434
11473
|
onPredictionMade(function (_a) {
|
|
11435
11474
|
var face = _a.face;
|
|
@@ -11456,7 +11495,7 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
|
|
|
11456
11495
|
}, verbiage.guidanceMessageText))), /*#__PURE__*/React__namespace.default.createElement(GuidesComponent, {
|
|
11457
11496
|
classNames: classNames.videoSignatureGuidesClassNames,
|
|
11458
11497
|
status: "success"
|
|
11459
|
-
}), debugMode && ( /*#__PURE__*/React__namespace.default.createElement(DebugStatsPane, null, "Video: ",
|
|
11498
|
+
}), debugMode && ( /*#__PURE__*/React__namespace.default.createElement(DebugStatsPane, null, "Video: ", (_c = cameraRef.current) === null || _c === void 0 ? void 0 : _c.width, "x", (_d = cameraRef.current) === null || _d === void 0 ? void 0 : _d.height)), /*#__PURE__*/React__namespace.default.createElement(ExitCaptureButton, {
|
|
11460
11499
|
onClick: onExit,
|
|
11461
11500
|
className: classNames.exitCaptureBtn
|
|
11462
11501
|
}));
|
|
@@ -11550,13 +11589,7 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
|
|
|
11550
11589
|
setSignatureData = _l.setSignatureData,
|
|
11551
11590
|
setSignatureVideoUrl = _l.setSignatureVideoUrl,
|
|
11552
11591
|
logSelfieCaptureAttempt = _l.logSelfieCaptureAttempt;
|
|
11553
|
-
var _m =
|
|
11554
|
-
return {
|
|
11555
|
-
cameraAccessDenied: state.cameraAccessDenied,
|
|
11556
|
-
requestCameraAccess: state.requestCameraAccess,
|
|
11557
|
-
releaseCameraAccess: state.releaseCameraAccess
|
|
11558
|
-
};
|
|
11559
|
-
})),
|
|
11592
|
+
var _m = React.useContext(CameraStateContext),
|
|
11560
11593
|
cameraAccessDenied = _m.cameraAccessDenied,
|
|
11561
11594
|
requestCameraAccess = _m.requestCameraAccess,
|
|
11562
11595
|
releaseCameraAccess = _m.releaseCameraAccess;
|
|
@@ -11716,29 +11749,27 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
|
|
|
11716
11749
|
};
|
|
11717
11750
|
|
|
11718
11751
|
var IdVideoCaptureGuides = function IdVideoCaptureGuides(_a) {
|
|
11719
|
-
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
|
|
11720
|
-
var
|
|
11721
|
-
requestedAction =
|
|
11722
|
-
|
|
11723
|
-
satisfied =
|
|
11724
|
-
|
|
11725
|
-
faceGuideStatus =
|
|
11752
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
|
|
11753
|
+
var _0 = _a.requestedAction,
|
|
11754
|
+
requestedAction = _0 === void 0 ? 'SHOW_ID_FRONT' : _0,
|
|
11755
|
+
_1 = _a.satisfied,
|
|
11756
|
+
satisfied = _1 === void 0 ? false : _1,
|
|
11757
|
+
_2 = _a.faceGuideStatus,
|
|
11758
|
+
faceGuideStatus = _2 === void 0 ? 'success' : _2,
|
|
11726
11759
|
faceGuideBorderWidth = _a.faceGuideBorderWidth,
|
|
11727
11760
|
faceGuideBorderColor = _a.faceGuideBorderColor,
|
|
11728
|
-
|
|
11729
|
-
idCardGuideStatus =
|
|
11761
|
+
_3 = _a.idCardGuideStatus,
|
|
11762
|
+
idCardGuideStatus = _3 === void 0 ? 'ready' : _3,
|
|
11730
11763
|
idCardGuideBorderWidth = _a.idCardGuideBorderWidth,
|
|
11731
11764
|
idCardGuideBorderColor = _a.idCardGuideBorderColor,
|
|
11732
11765
|
idCardCaptureProgress = _a.idCardCaptureProgress,
|
|
11733
|
-
|
|
11734
|
-
userSuppliedImages =
|
|
11735
|
-
|
|
11736
|
-
classNames =
|
|
11737
|
-
|
|
11738
|
-
rawVerbiage =
|
|
11739
|
-
var
|
|
11740
|
-
return state.isRearFacing;
|
|
11741
|
-
});
|
|
11766
|
+
_4 = _a.idCardCaptureGuideImages,
|
|
11767
|
+
userSuppliedImages = _4 === void 0 ? defaultIdCaptureGuideImages : _4,
|
|
11768
|
+
_5 = _a.classNames,
|
|
11769
|
+
classNames = _5 === void 0 ? {} : _5,
|
|
11770
|
+
_6 = _a.verbiage,
|
|
11771
|
+
rawVerbiage = _6 === void 0 ? {} : _6;
|
|
11772
|
+
var cameraRef = React.useContext(CameraStateContext).cameraRef;
|
|
11742
11773
|
var verbiage = useTranslations(rawVerbiage, {
|
|
11743
11774
|
idFrontInstructionText: 'Display the front of your ID card...',
|
|
11744
11775
|
idBackInstructionText: 'Display the back of your ID card...',
|
|
@@ -11751,17 +11782,17 @@ var IdVideoCaptureGuides = function IdVideoCaptureGuides(_a) {
|
|
|
11751
11782
|
if (faceGuideBorderColor === undefined) faceGuideBorderColor = (_j = satisfied ? (_f = (_e = theme.idVideoCapture) === null || _e === void 0 ? void 0 : _e.faceGuides) === null || _f === void 0 ? void 0 : _f.satisfiedColor : (_h = (_g = theme.idVideoCapture) === null || _g === void 0 ? void 0 : _g.faceGuides) === null || _h === void 0 ? void 0 : _h.unsatisfiedColor) !== null && _j !== void 0 ? _j : '#D6DCE7';
|
|
11752
11783
|
if (idCardGuideBorderWidth === undefined) idCardGuideBorderWidth = (_m = (_l = (_k = theme.idVideoCapture) === null || _k === void 0 ? void 0 : _k.idCardGuides) === null || _l === void 0 ? void 0 : _l.borderWidth) !== null && _m !== void 0 ? _m : 20;
|
|
11753
11784
|
if (idCardGuideBorderColor === undefined) idCardGuideBorderColor = (_s = satisfied ? (_p = (_o = theme.idVideoCapture) === null || _o === void 0 ? void 0 : _o.idCardGuides) === null || _p === void 0 ? void 0 : _p.satisfiedColor : (_r = (_q = theme.idVideoCapture) === null || _q === void 0 ? void 0 : _q.idCardGuides) === null || _r === void 0 ? void 0 : _r.unsatisfiedColor) !== null && _s !== void 0 ? _s : '#D6DCE7';
|
|
11754
|
-
var
|
|
11755
|
-
idCardGuideRef =
|
|
11756
|
-
|
|
11757
|
-
idCardGuideWidth =
|
|
11758
|
-
|
|
11759
|
-
idCardGuideHeight =
|
|
11785
|
+
var _7 = useResizeObserver__default.default(),
|
|
11786
|
+
idCardGuideRef = _7.ref,
|
|
11787
|
+
_8 = _7.width,
|
|
11788
|
+
idCardGuideWidth = _8 === void 0 ? 0 : _8,
|
|
11789
|
+
_9 = _7.height,
|
|
11790
|
+
idCardGuideHeight = _9 === void 0 ? 0 : _9;
|
|
11760
11791
|
var idCaptureGuideImages = useGuideImages(userSuppliedImages);
|
|
11761
11792
|
var idCaptureGuideImagesByUrl = useGuideImagesByUrl(idCaptureGuideImages);
|
|
11762
|
-
var
|
|
11763
|
-
aspectRatio =
|
|
11764
|
-
setAspectRatio =
|
|
11793
|
+
var _10 = React.useState(undefined),
|
|
11794
|
+
aspectRatio = _10[0],
|
|
11795
|
+
setAspectRatio = _10[1];
|
|
11765
11796
|
var onImageLoaded = React.useCallback(function (e) {
|
|
11766
11797
|
var _a, _b, _c, _d;
|
|
11767
11798
|
var img = e.currentTarget;
|
|
@@ -11808,7 +11839,7 @@ var IdVideoCaptureGuides = function IdVideoCaptureGuides(_a) {
|
|
|
11808
11839
|
}, /*#__PURE__*/React__namespace.default.createElement(IdCardGuideImage, {
|
|
11809
11840
|
alt: "",
|
|
11810
11841
|
className: classNames.idCardGuideImage,
|
|
11811
|
-
"$isMirrored": !isRearFacing,
|
|
11842
|
+
"$isMirrored": !((_v = cameraRef.current) === null || _v === void 0 ? void 0 : _v.isRearFacing),
|
|
11812
11843
|
style: idCardImageStyle,
|
|
11813
11844
|
src: requestedAction === 'SHOW_ID_BACK' ? idCaptureGuideImages.landscape.SHOW_ID_BACK.url : idCaptureGuideImages.landscape.SHOW_ID_FRONT.url,
|
|
11814
11845
|
onLoad: onImageLoaded
|
|
@@ -11822,8 +11853,8 @@ var IdVideoCaptureGuides = function IdVideoCaptureGuides(_a) {
|
|
|
11822
11853
|
className: classNames.idCardGuideInstructionsContainer
|
|
11823
11854
|
}, /*#__PURE__*/React__namespace.default.createElement(IdCardGuideInstructions, {
|
|
11824
11855
|
className: classNames.idCardGuideInstructions,
|
|
11825
|
-
"$textColor": (
|
|
11826
|
-
"$background": (
|
|
11856
|
+
"$textColor": (_x = (_w = theme.idVideoCapture) === null || _w === void 0 ? void 0 : _w.idCardGuides) === null || _x === void 0 ? void 0 : _x.instructionsTextColor,
|
|
11857
|
+
"$background": (_z = (_y = theme.idVideoCapture) === null || _y === void 0 ? void 0 : _y.idCardGuides) === null || _z === void 0 ? void 0 : _z.instructionsBackgroundColor
|
|
11827
11858
|
}, instructionText))))));
|
|
11828
11859
|
};
|
|
11829
11860
|
var Container = styled__default.default.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n display: flex;\n max-height: 100%;\n position: absolute;\n z-index: 1000;\n width: 100dvw;\n height: 100dvh;\n font-family: ", ";\n box-sizing: border-box;\n overflow: hidden;\n padding: 40px;\n"], ["\n display: flex;\n max-height: 100%;\n position: absolute;\n z-index: 1000;\n width: 100dvw;\n height: 100dvh;\n font-family: ", ";\n box-sizing: border-box;\n overflow: hidden;\n padding: 40px;\n"])), function (props) {
|
|
@@ -11968,100 +11999,99 @@ var defaultVideoIdCaptureThresholds = {
|
|
|
11968
11999
|
flipShortcutThreshold: 0.7
|
|
11969
12000
|
};
|
|
11970
12001
|
var IdVideoCapture = function IdVideoCapture(_a) {
|
|
11971
|
-
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
|
|
12002
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
|
|
11972
12003
|
var onComplete = _a.onComplete,
|
|
11973
12004
|
onIdFrontImageCaptured = _a.onIdFrontImageCaptured,
|
|
11974
12005
|
onIdBackImageCaptured = _a.onIdBackImageCaptured,
|
|
11975
12006
|
onFaceNotDetected = _a.onFaceNotDetected,
|
|
11976
12007
|
onRecordingFailed = _a.onRecordingFailed,
|
|
11977
12008
|
onExitCapture = _a.onExitCapture,
|
|
11978
|
-
|
|
11979
|
-
idCaptureModelsEnabled =
|
|
11980
|
-
|
|
11981
|
-
idCardCaptureGuideImages =
|
|
11982
|
-
|
|
11983
|
-
idCardFrontDelay =
|
|
11984
|
-
|
|
11985
|
-
videoIdCaptureThresholds =
|
|
11986
|
-
|
|
11987
|
-
skipShowIdCardBack =
|
|
11988
|
-
|
|
11989
|
-
captureCountdownSeconds =
|
|
12009
|
+
_x = _a.idCaptureModelsEnabled,
|
|
12010
|
+
idCaptureModelsEnabled = _x === void 0 ? true : _x,
|
|
12011
|
+
_y = _a.idCardCaptureGuideImages,
|
|
12012
|
+
idCardCaptureGuideImages = _y === void 0 ? defaultIdCaptureGuideImages : _y,
|
|
12013
|
+
_z = _a.idCardFrontDelay,
|
|
12014
|
+
idCardFrontDelay = _z === void 0 ? 1000 : _z,
|
|
12015
|
+
_0 = _a.videoIdCaptureThresholds,
|
|
12016
|
+
videoIdCaptureThresholds = _0 === void 0 ? defaultVideoIdCaptureThresholds : _0,
|
|
12017
|
+
_1 = _a.skipShowIdCardBack,
|
|
12018
|
+
skipShowIdCardBack = _1 === void 0 ? false : _1,
|
|
12019
|
+
_2 = _a.captureCountdownSeconds,
|
|
12020
|
+
captureCountdownSeconds = _2 === void 0 ? 3 : _2,
|
|
11990
12021
|
readTextPrompt = _a.readTextPrompt,
|
|
11991
|
-
|
|
11992
|
-
readTextTimeoutDurationMs =
|
|
11993
|
-
|
|
11994
|
-
readTextMinReadingMs =
|
|
11995
|
-
|
|
11996
|
-
disableFaceDetectionWhileAudioCapture =
|
|
11997
|
-
|
|
11998
|
-
disableFaceDetectionWhileAudioCaptureMsDelay =
|
|
11999
|
-
|
|
12000
|
-
mergeAVStreams =
|
|
12001
|
-
|
|
12002
|
-
classNames =
|
|
12003
|
-
|
|
12004
|
-
colors =
|
|
12005
|
-
|
|
12006
|
-
rawVerbiage =
|
|
12007
|
-
|
|
12008
|
-
debugMode =
|
|
12009
|
-
var
|
|
12010
|
-
ref =
|
|
12011
|
-
|
|
12012
|
-
width =
|
|
12013
|
-
|
|
12014
|
-
height =
|
|
12015
|
-
var
|
|
12016
|
-
|
|
12017
|
-
videoRef =
|
|
12018
|
-
videoLoaded =
|
|
12019
|
-
cameraReady =
|
|
12020
|
-
microphoneReady =
|
|
12021
|
-
audioStream =
|
|
12022
|
-
|
|
12023
|
-
|
|
12024
|
-
|
|
12025
|
-
|
|
12026
|
-
|
|
12027
|
-
|
|
12028
|
-
|
|
12029
|
-
|
|
12030
|
-
|
|
12031
|
-
|
|
12032
|
-
|
|
12033
|
-
|
|
12034
|
-
|
|
12035
|
-
|
|
12036
|
-
|
|
12037
|
-
|
|
12038
|
-
|
|
12039
|
-
|
|
12040
|
-
|
|
12041
|
-
|
|
12042
|
-
|
|
12043
|
-
|
|
12044
|
-
|
|
12045
|
-
|
|
12046
|
-
|
|
12047
|
-
|
|
12048
|
-
|
|
12049
|
-
|
|
12050
|
-
|
|
12051
|
-
|
|
12052
|
-
|
|
12053
|
-
|
|
12054
|
-
|
|
12055
|
-
|
|
12056
|
-
|
|
12057
|
-
|
|
12058
|
-
|
|
12059
|
-
|
|
12060
|
-
audioUrl = _21.audioUrl;
|
|
12022
|
+
_3 = _a.readTextTimeoutDurationMs,
|
|
12023
|
+
readTextTimeoutDurationMs = _3 === void 0 ? 15000 : _3,
|
|
12024
|
+
_4 = _a.readTextMinReadingMs,
|
|
12025
|
+
readTextMinReadingMs = _4 === void 0 ? 10000 : _4,
|
|
12026
|
+
_5 = _a.disableFaceDetectionWhileAudioCapture,
|
|
12027
|
+
disableFaceDetectionWhileAudioCapture = _5 === void 0 ? false : _5,
|
|
12028
|
+
_6 = _a.disableFaceDetectionWhileAudioCaptureMsDelay,
|
|
12029
|
+
disableFaceDetectionWhileAudioCaptureMsDelay = _6 === void 0 ? 2000 : _6,
|
|
12030
|
+
_7 = _a.mergeAVStreams,
|
|
12031
|
+
mergeAVStreams = _7 === void 0 ? false : _7,
|
|
12032
|
+
_8 = _a.classNames,
|
|
12033
|
+
classNames = _8 === void 0 ? {} : _8,
|
|
12034
|
+
_9 = _a.colors,
|
|
12035
|
+
colors = _9 === void 0 ? {} : _9,
|
|
12036
|
+
_10 = _a.verbiage,
|
|
12037
|
+
rawVerbiage = _10 === void 0 ? {} : _10,
|
|
12038
|
+
_11 = _a.debugMode,
|
|
12039
|
+
debugMode = _11 === void 0 ? false : _11;
|
|
12040
|
+
var _12 = useResizeObserver__default.default(),
|
|
12041
|
+
ref = _12.ref,
|
|
12042
|
+
_13 = _12.width,
|
|
12043
|
+
width = _13 === void 0 ? 1 : _13,
|
|
12044
|
+
_14 = _12.height,
|
|
12045
|
+
height = _14 === void 0 ? 1 : _14;
|
|
12046
|
+
var _15 = React.useContext(CameraStateContext),
|
|
12047
|
+
cameraRef = _15.cameraRef,
|
|
12048
|
+
videoRef = _15.videoRef,
|
|
12049
|
+
videoLoaded = _15.videoLoaded,
|
|
12050
|
+
cameraReady = _15.cameraReady,
|
|
12051
|
+
microphoneReady = _15.microphoneReady,
|
|
12052
|
+
audioStream = _15.audioStream,
|
|
12053
|
+
setVideoLoaded = _15.setVideoLoaded;
|
|
12054
|
+
var _16 = React.useState([]),
|
|
12055
|
+
detectedObjects = _16[0],
|
|
12056
|
+
setDetectedObjects = _16[1];
|
|
12057
|
+
var _17 = React.useState(null),
|
|
12058
|
+
face = _17[0],
|
|
12059
|
+
setFace = _17[1];
|
|
12060
|
+
var _18 = React.useContext(IdCaptureModelsContext),
|
|
12061
|
+
idModelsReady = _18.ready,
|
|
12062
|
+
startIdModels = _18.start,
|
|
12063
|
+
stopIdModels = _18.stop,
|
|
12064
|
+
onIdPredictionMade = _18.onPredictionMade,
|
|
12065
|
+
setThresholds = _18.setThresholds,
|
|
12066
|
+
setDocumentDetectionBoundaries = _18.setDocumentDetectionBoundaries,
|
|
12067
|
+
bestFrameDetails = _18.bestFrameDetails,
|
|
12068
|
+
resetBestFrame = _18.resetBestFrame,
|
|
12069
|
+
idModelError = _18.modelError;
|
|
12070
|
+
var _19 = React.useState(null),
|
|
12071
|
+
videoStartsAt = _19[0],
|
|
12072
|
+
setVideoStartsAt = _19[1];
|
|
12073
|
+
var _20 = React.useContext(SubmissionContext),
|
|
12074
|
+
setIdCaptureVideoAudioStartsAt = _20.setIdCaptureVideoAudioStartsAt,
|
|
12075
|
+
setExpectedAudioText = _20.setExpectedAudioText;
|
|
12076
|
+
var _21 = React.useContext(SelfieGuidanceModelsContext),
|
|
12077
|
+
startSelfieGuidance = _21.start,
|
|
12078
|
+
stopSelfieGuidance = _21.stop,
|
|
12079
|
+
onSelfiePredictionMade = _21.onPredictionMade,
|
|
12080
|
+
selfieModelError = _21.error;
|
|
12081
|
+
var _22 = useVideoRecorder(cameraRef.current, audioStream, mergeAVStreams),
|
|
12082
|
+
isRecordingVideo = _22.isRecordingVideo,
|
|
12083
|
+
startRecordingVideo = _22.startRecordingVideo,
|
|
12084
|
+
startRecordingAudio = _22.startRecordingAudio,
|
|
12085
|
+
stopRecordingVideo = _22.stopRecordingVideo,
|
|
12086
|
+
stopRecordingAudio = _22.stopRecordingAudio,
|
|
12087
|
+
videoRecordingUnintentionallyStopped = _22.videoRecordingUnintentionallyStopped,
|
|
12088
|
+
audioRecordingUnintentionallyStopped = _22.audioRecordingUnintentionallyStopped,
|
|
12089
|
+
videoUrl = _22.videoUrl,
|
|
12090
|
+
audioUrl = _22.audioUrl;
|
|
12061
12091
|
var countdownTimeoutRef = React.useRef(undefined);
|
|
12062
|
-
var
|
|
12063
|
-
countdownRemaining =
|
|
12064
|
-
setCountdownRemaining =
|
|
12092
|
+
var _23 = React.useState(-1),
|
|
12093
|
+
countdownRemaining = _23[0],
|
|
12094
|
+
setCountdownRemaining = _23[1];
|
|
12065
12095
|
React.useEffect(function () {
|
|
12066
12096
|
if (!isRecordingVideo && !videoUrl) {
|
|
12067
12097
|
startRecordingVideo();
|
|
@@ -12072,18 +12102,18 @@ var IdVideoCapture = function IdVideoCapture(_a) {
|
|
|
12072
12102
|
var needsAudio = !!readTextPrompt && !mergeAVStreams;
|
|
12073
12103
|
var audioReady = !needsAudio || audioUrl;
|
|
12074
12104
|
if (videoUrl && audioReady) {
|
|
12075
|
-
|
|
12105
|
+
setVideoLoaded(false);
|
|
12076
12106
|
onComplete === null || onComplete === void 0 ? void 0 : onComplete(videoUrl, audioUrl);
|
|
12077
12107
|
}
|
|
12078
|
-
}, [audioUrl, isRecordingVideo, mergeAVStreams, onComplete, readTextPrompt,
|
|
12108
|
+
}, [audioUrl, isRecordingVideo, mergeAVStreams, onComplete, readTextPrompt, setVideoLoaded, startRecordingVideo, videoUrl]);
|
|
12079
12109
|
React.useEffect(function () {
|
|
12080
12110
|
if (videoRecordingUnintentionallyStopped || audioRecordingUnintentionallyStopped) {
|
|
12081
12111
|
onRecordingFailed === null || onRecordingFailed === void 0 ? void 0 : onRecordingFailed();
|
|
12082
12112
|
}
|
|
12083
12113
|
}, [audioRecordingUnintentionallyStopped, onRecordingFailed, videoRecordingUnintentionallyStopped]);
|
|
12084
|
-
var
|
|
12085
|
-
requestedAction =
|
|
12086
|
-
setRequestedAction =
|
|
12114
|
+
var _24 = React.useState('SHOW_ID_FRONT'),
|
|
12115
|
+
requestedAction = _24[0],
|
|
12116
|
+
setRequestedAction = _24[1];
|
|
12087
12117
|
var shouldRunIdModels = idCaptureModelsEnabled && videoLoaded && cameraReady && idModelsReady && !idModelError && requestedAction !== 'READ_TEXT' && (!readTextPrompt || microphoneReady);
|
|
12088
12118
|
React.useEffect(function startModelsWhenCapturing() {
|
|
12089
12119
|
if (!shouldRunIdModels) return;
|
|
@@ -12103,18 +12133,18 @@ var IdVideoCapture = function IdVideoCapture(_a) {
|
|
|
12103
12133
|
bottom: 1
|
|
12104
12134
|
});
|
|
12105
12135
|
}, [setDocumentDetectionBoundaries]);
|
|
12106
|
-
var
|
|
12107
|
-
currentDetectionScore =
|
|
12108
|
-
setCurrentDetectionScore =
|
|
12109
|
-
var
|
|
12110
|
-
currentDetectedDocumentType =
|
|
12111
|
-
setCurrentDetectedDocumentType =
|
|
12112
|
-
var _26 = React.useState(0),
|
|
12113
|
-
currentFocusScore = _26[0],
|
|
12114
|
-
setCurrentFocusScore = _26[1];
|
|
12136
|
+
var _25 = React.useState(0),
|
|
12137
|
+
currentDetectionScore = _25[0],
|
|
12138
|
+
setCurrentDetectionScore = _25[1];
|
|
12139
|
+
var _26 = React.useState('none'),
|
|
12140
|
+
currentDetectedDocumentType = _26[0],
|
|
12141
|
+
setCurrentDetectedDocumentType = _26[1];
|
|
12115
12142
|
var _27 = React.useState(0),
|
|
12116
|
-
|
|
12117
|
-
|
|
12143
|
+
currentFocusScore = _27[0],
|
|
12144
|
+
setCurrentFocusScore = _27[1];
|
|
12145
|
+
var _28 = React.useState(0),
|
|
12146
|
+
goodFramesCount = _28[0],
|
|
12147
|
+
setGoodFramesCount = _28[1];
|
|
12118
12148
|
var goodFramesThreshold = requestedAction === 'SHOW_ID_FRONT' ? videoIdCaptureThresholds.goodFrames.idCardFront : videoIdCaptureThresholds.goodFrames.idCardBack;
|
|
12119
12149
|
var goodFramesThresholdMet = goodFramesCount >= goodFramesThreshold;
|
|
12120
12150
|
React.useEffect(function () {
|
|
@@ -12135,9 +12165,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
|
|
|
12135
12165
|
} : 0);
|
|
12136
12166
|
});
|
|
12137
12167
|
}, [idCaptureModelsEnabled, onIdPredictionMade, idModelError, requestedAction, videoIdCaptureThresholds.flipShortcutThreshold]);
|
|
12138
|
-
var
|
|
12139
|
-
idFrontCaptureStartedAt =
|
|
12140
|
-
setFirstGoodFrameTime =
|
|
12168
|
+
var _29 = React.useState(null),
|
|
12169
|
+
idFrontCaptureStartedAt = _29[0],
|
|
12170
|
+
setFirstGoodFrameTime = _29[1];
|
|
12141
12171
|
React.useEffect(function () {
|
|
12142
12172
|
if (goodFramesCount === 1) setFirstGoodFrameTime(new Date().getTime());
|
|
12143
12173
|
}, [goodFramesCount]);
|
|
@@ -12158,9 +12188,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
|
|
|
12158
12188
|
var frameHeight = (_e = (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.videoHeight) !== null && _e !== void 0 ? _e : 0;
|
|
12159
12189
|
var faceBox = face === null || face === void 0 ? void 0 : face.box;
|
|
12160
12190
|
var faceCentered = !faceBox || !frameWidth || faceBox.xMin > frameWidth * edgeBoundary && faceBox.yMin > frameHeight * edgeBoundary && faceBox.xMax < frameWidth * (1 - edgeBoundary) && faceBox.yMax < frameHeight * (1 - edgeBoundary);
|
|
12161
|
-
var
|
|
12162
|
-
countdownStartedAt =
|
|
12163
|
-
setCountdownStartedAt =
|
|
12191
|
+
var _30 = React.useState(),
|
|
12192
|
+
countdownStartedAt = _30[0],
|
|
12193
|
+
setCountdownStartedAt = _30[1];
|
|
12164
12194
|
var photoCanvas = React.useRef(null);
|
|
12165
12195
|
var frameLock = React.useRef(false);
|
|
12166
12196
|
var captureFrame = React.useCallback(function () {
|
|
@@ -12283,9 +12313,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
|
|
|
12283
12313
|
stopSelfieGuidance();
|
|
12284
12314
|
};
|
|
12285
12315
|
}, [startSelfieGuidance, stopSelfieGuidance]);
|
|
12286
|
-
var
|
|
12287
|
-
numFramesWithoutFaces =
|
|
12288
|
-
setNumFramesWithoutFaces =
|
|
12316
|
+
var _31 = React.useState(0),
|
|
12317
|
+
numFramesWithoutFaces = _31[0],
|
|
12318
|
+
setNumFramesWithoutFaces = _31[1];
|
|
12289
12319
|
onSelfiePredictionMade(useDebounce.useThrottledCallback(React.useCallback(function (_a) {
|
|
12290
12320
|
var face = _a.face;
|
|
12291
12321
|
if (selfieModelError) return;
|
|
@@ -12301,12 +12331,12 @@ var IdVideoCapture = function IdVideoCapture(_a) {
|
|
|
12301
12331
|
}
|
|
12302
12332
|
}, [disableFaceDetectionWhileAudioCapture, disableFaceDetectionWhileAudioCaptureMsDelay, numFramesWithoutFaces, onFaceNotDetected, timeoutStartedAt]);
|
|
12303
12333
|
var theme = styled.useTheme();
|
|
12304
|
-
var
|
|
12334
|
+
var _32 = useTranslations(rawVerbiage, {
|
|
12305
12335
|
faceNotCenteredText: 'Please move your face to the center...',
|
|
12306
12336
|
captureBtnText: 'Capture'
|
|
12307
12337
|
}),
|
|
12308
|
-
captureBtnText =
|
|
12309
|
-
faceNotCenteredText =
|
|
12338
|
+
captureBtnText = _32.captureBtnText,
|
|
12339
|
+
faceNotCenteredText = _32.faceNotCenteredText;
|
|
12310
12340
|
var debugScalingDetails = useDebugScalingDetails({
|
|
12311
12341
|
enabled: debugMode,
|
|
12312
12342
|
pageWidth: width,
|
|
@@ -12342,14 +12372,15 @@ var IdVideoCapture = function IdVideoCapture(_a) {
|
|
|
12342
12372
|
faceGuideBorderColor: satisfied ? colors.guidesSatisfiedColor : colors.guidesUnsatisfiedColor,
|
|
12343
12373
|
idCardGuideBorderColor: satisfied ? colors.guidesSatisfiedColor : colors.guidesUnsatisfiedColor
|
|
12344
12374
|
}), debugMode && capturingId && ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(ObjectDetectionDebugOverlayDiv, {
|
|
12345
|
-
"$flipX": !isRearFacing
|
|
12375
|
+
"$flipX": !((_l = cameraRef.current) === null || _l === void 0 ? void 0 : _l.isRearFacing)
|
|
12346
12376
|
}, detectedObjects.map(function (obj, i) {
|
|
12377
|
+
var _a;
|
|
12347
12378
|
return /*#__PURE__*/React__namespace.default.createElement(IdCaptureDetectedObjectDebugBox, {
|
|
12348
12379
|
key: i,
|
|
12349
12380
|
obj: obj,
|
|
12350
12381
|
scaling: debugScalingDetails,
|
|
12351
12382
|
color: "blue",
|
|
12352
|
-
flipX: !isRearFacing
|
|
12383
|
+
flipX: !((_a = cameraRef.current) === null || _a === void 0 ? void 0 : _a.isRearFacing)
|
|
12353
12384
|
});
|
|
12354
12385
|
})), /*#__PURE__*/React__namespace.default.createElement(DebugBoundingBoxOverlay, null, face && ( /*#__PURE__*/React__namespace.default.createElement(SelfieCaptureFaceDebugBox, {
|
|
12355
12386
|
face: face,
|
|
@@ -12358,9 +12389,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
|
|
|
12358
12389
|
className: classNames.guidanceMessageContainer
|
|
12359
12390
|
}, /*#__PURE__*/React__namespace.default.createElement(GuidanceMessage, {
|
|
12360
12391
|
className: classNames.guidanceMessage,
|
|
12361
|
-
"$background": (
|
|
12362
|
-
"$textColor": (
|
|
12363
|
-
}, guidanceText))), debugMode && ( /*#__PURE__*/React__namespace.default.createElement(DebugStatsPane, null,
|
|
12392
|
+
"$background": (_p = (_o = (_m = theme.guidanceMessages) === null || _m === void 0 ? void 0 : _m.negative) === null || _o === void 0 ? void 0 : _o.backgroundColor) !== null && _p !== void 0 ? _p : 'red',
|
|
12393
|
+
"$textColor": (_s = (_r = (_q = theme.guidanceMessages) === null || _q === void 0 ? void 0 : _q.negative) === null || _r === void 0 ? void 0 : _r.textColor) !== null && _s !== void 0 ? _s : 'white'
|
|
12394
|
+
}, guidanceText))), debugMode && ( /*#__PURE__*/React__namespace.default.createElement(DebugStatsPane, null, cameraRef.current ? ( /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React__namespace.default.createElement("br", null), isRecordingVideo ? '✅ Recording' : '❌ Not recording', /*#__PURE__*/React__namespace.default.createElement("br", null), goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', goodFramesCount, "/", goodFramesThreshold, /*#__PURE__*/React__namespace.default.createElement("br", null), "Document Type: ", currentDetectedDocumentType, /*#__PURE__*/React__namespace.default.createElement("br", null), "Detection Score: ", currentDetectionScore, /*#__PURE__*/React__namespace.default.createElement("br", null), "Focus Score: ", currentFocusScore, /*#__PURE__*/React__namespace.default.createElement("br", null), "Best Frame Detection Score:", ' ', (_u = (_t = bestFrameDetails.current) === null || _t === void 0 ? void 0 : _t.detectionScore) !== null && _u !== void 0 ? _u : 0, /*#__PURE__*/React__namespace.default.createElement("br", null), "Best Frame Focus Score: ", (_w = (_v = bestFrameDetails.current) === null || _v === void 0 ? void 0 : _v.focusScore) !== null && _w !== void 0 ? _w : 0)), countdownRemaining > 0 && capturingId && ( /*#__PURE__*/React__namespace.default.createElement(CountdownContainer, {
|
|
12364
12395
|
className: classNames.countdownContainer
|
|
12365
12396
|
}, /*#__PURE__*/React__namespace.default.createElement(Countdown, {
|
|
12366
12397
|
className: classNames.countdown
|
|
@@ -12657,14 +12688,16 @@ var VideoIdWizard = function VideoIdWizard(_a) {
|
|
|
12657
12688
|
className: "flex"
|
|
12658
12689
|
}, /*#__PURE__*/React__namespace.default.createElement(Spinner, null));
|
|
12659
12690
|
}
|
|
12660
|
-
return /*#__PURE__*/React__namespace.default.createElement(
|
|
12661
|
-
|
|
12691
|
+
return /*#__PURE__*/React__namespace.default.createElement(CameraProvider, {
|
|
12692
|
+
key: "".concat(isCapturingId ? 'id' : 'selfie', "-camera-").concat(attempt),
|
|
12693
|
+
preferContinuityCamera: isCapturingId,
|
|
12662
12694
|
preferFrontFacingCamera: !isCapturingId,
|
|
12663
12695
|
requireMicrophoneAccess: !isCapturingId && !!readTextPrompt,
|
|
12664
12696
|
maxVideoWidth: isCapturingId ? 1920 : 1280,
|
|
12665
12697
|
maxFps: isCapturingId ? 60 : 30,
|
|
12666
12698
|
onCameraAccessDenied: onCameraAccessDenied,
|
|
12667
|
-
onMicrophoneAccessDenied: onMicrophoneAccessDenied
|
|
12699
|
+
onMicrophoneAccessDenied: onMicrophoneAccessDenied,
|
|
12700
|
+
debugMode: debugMode
|
|
12668
12701
|
}, /*#__PURE__*/React__namespace.default.createElement(IdCaptureModelsProvider, {
|
|
12669
12702
|
autoStart: false,
|
|
12670
12703
|
documentDetectionModelUrl: (_g = (_f = idCaptureProps.assets) === null || _f === void 0 ? void 0 : _f.documentDetectionModelUrl) !== null && _g !== void 0 ? _g : '',
|
|
@@ -12675,7 +12708,7 @@ var VideoIdWizard = function VideoIdWizard(_a) {
|
|
|
12675
12708
|
autoStart: false,
|
|
12676
12709
|
onModelError: faceLivenessProps === null || faceLivenessProps === void 0 ? void 0 : faceLivenessProps.onModelError,
|
|
12677
12710
|
modelLoadTimeoutMs: faceLivenessProps === null || faceLivenessProps === void 0 ? void 0 : faceLivenessProps.modelLoadTimeoutMs,
|
|
12678
|
-
requireVerticalFaceCentering:
|
|
12711
|
+
requireVerticalFaceCentering: captureState === 'CHECKING_LIVENESS'
|
|
12679
12712
|
}, /*#__PURE__*/React__namespace.default.createElement(PageContainer, {
|
|
12680
12713
|
className: "flex ".concat((_k = classNames.container) !== null && _k !== void 0 ? _k : '')
|
|
12681
12714
|
}, ['CHECKING_LIVENESS', 'CAPTURING_VIDEO'].includes(captureState) && /*#__PURE__*/React__namespace.default.createElement(CameraVideoTag, {
|
|
@@ -12790,15 +12823,17 @@ function CompositeWizard(_a) {
|
|
|
12790
12823
|
_o = _a.captureSignatureVideo,
|
|
12791
12824
|
captureSignatureVideo = _o === void 0 ? false : _o,
|
|
12792
12825
|
onCameraAccessDenied = _a.onCameraAccessDenied,
|
|
12793
|
-
onMicrophoneAccessDenied = _a.onMicrophoneAccessDenied
|
|
12794
|
-
|
|
12795
|
-
|
|
12796
|
-
|
|
12797
|
-
|
|
12798
|
-
|
|
12799
|
-
|
|
12800
|
-
|
|
12801
|
-
|
|
12826
|
+
onMicrophoneAccessDenied = _a.onMicrophoneAccessDenied,
|
|
12827
|
+
_p = _a.debugMode,
|
|
12828
|
+
debugMode = _p === void 0 ? false : _p;
|
|
12829
|
+
var _q = React.useContext(SubmissionContext),
|
|
12830
|
+
submit = _q.submit,
|
|
12831
|
+
submissionStatus = _q.submissionStatus,
|
|
12832
|
+
setSignatureData = _q.setSignatureData,
|
|
12833
|
+
setAdditionalDocuments = _q.setAdditionalDocuments;
|
|
12834
|
+
var _r = React.useState(0),
|
|
12835
|
+
checkIndex = _r[0],
|
|
12836
|
+
setCheckIndex = _r[1];
|
|
12802
12837
|
var checks = React.useMemo(function () {
|
|
12803
12838
|
var _a, _b;
|
|
12804
12839
|
var checks = __spreadArray([], userChecks, true);
|
|
@@ -12876,6 +12911,16 @@ function CompositeWizard(_a) {
|
|
|
12876
12911
|
return i + 1;
|
|
12877
12912
|
});
|
|
12878
12913
|
}, [onVideoSignatureCompleteProp]);
|
|
12914
|
+
var _s = React.useState(0),
|
|
12915
|
+
videoSignatureAttempts = _s[0],
|
|
12916
|
+
setVideoSignatureAttempts = _s[1];
|
|
12917
|
+
var onVideoSignatureRetryProp = videoSignatureCaptureProps.onRetryClicked;
|
|
12918
|
+
var onVideoSignatureRetry = React.useCallback(function () {
|
|
12919
|
+
onVideoSignatureRetryProp === null || onVideoSignatureRetryProp === void 0 ? void 0 : onVideoSignatureRetryProp();
|
|
12920
|
+
setVideoSignatureAttempts(function (n) {
|
|
12921
|
+
return n + 1;
|
|
12922
|
+
});
|
|
12923
|
+
}, [onVideoSignatureRetryProp]);
|
|
12879
12924
|
var onAdditionalDocumentCaptureCompleteProp = additionalDocumentCaptureProps === null || additionalDocumentCaptureProps === void 0 ? void 0 : additionalDocumentCaptureProps.onComplete;
|
|
12880
12925
|
var onAdditionalDocumentCaptureComplete = React.useCallback(function (uploadedDocuments) {
|
|
12881
12926
|
setAdditionalDocuments(uploadedDocuments);
|
|
@@ -12904,9 +12949,11 @@ function CompositeWizard(_a) {
|
|
|
12904
12949
|
}
|
|
12905
12950
|
switch (checks[checkIndex]) {
|
|
12906
12951
|
case 'IdCapture':
|
|
12907
|
-
return /*#__PURE__*/React__namespace.default.createElement(
|
|
12952
|
+
return /*#__PURE__*/React__namespace.default.createElement(CameraProvider, {
|
|
12953
|
+
key: "IdCaptureCamera",
|
|
12908
12954
|
onCameraAccessDenied: onCameraAccessDenied,
|
|
12909
|
-
onMicrophoneAccessDenied: onMicrophoneAccessDenied
|
|
12955
|
+
onMicrophoneAccessDenied: onMicrophoneAccessDenied,
|
|
12956
|
+
debugMode: debugMode
|
|
12910
12957
|
}, /*#__PURE__*/React__namespace.default.createElement(IdCaptureModelsProvider, {
|
|
12911
12958
|
autoStart: false,
|
|
12912
12959
|
documentDetectionModelUrl: (_d = (_c = idCaptureProps.assets) === null || _c === void 0 ? void 0 : _c.documentDetectionModelUrl) !== null && _d !== void 0 ? _d : '',
|
|
@@ -12923,11 +12970,13 @@ function CompositeWizard(_a) {
|
|
|
12923
12970
|
onMicrophoneAccessDenied: onMicrophoneAccessDenied
|
|
12924
12971
|
}));
|
|
12925
12972
|
case 'FaceLiveness':
|
|
12926
|
-
return /*#__PURE__*/React__namespace.default.createElement(
|
|
12973
|
+
return /*#__PURE__*/React__namespace.default.createElement(CameraProvider, {
|
|
12974
|
+
key: "FaceLivenessCamera",
|
|
12927
12975
|
preferFrontFacingCamera: true,
|
|
12928
|
-
|
|
12976
|
+
preferContinuityCamera: false,
|
|
12929
12977
|
onCameraAccessDenied: onCameraAccessDenied,
|
|
12930
|
-
onMicrophoneAccessDenied: onMicrophoneAccessDenied
|
|
12978
|
+
onMicrophoneAccessDenied: onMicrophoneAccessDenied,
|
|
12979
|
+
debugMode: debugMode
|
|
12931
12980
|
}, /*#__PURE__*/React__namespace.default.createElement(SelfieGuidanceModelsProvider, {
|
|
12932
12981
|
autoStart: false,
|
|
12933
12982
|
onModelError: faceLivenessProps.onModelError,
|
|
@@ -12940,13 +12989,15 @@ function CompositeWizard(_a) {
|
|
|
12940
12989
|
onAccept: onSignatureCaptureSuccess
|
|
12941
12990
|
}));
|
|
12942
12991
|
case 'VideoSignatureCapture':
|
|
12943
|
-
return /*#__PURE__*/React__namespace.default.createElement(
|
|
12944
|
-
|
|
12992
|
+
return /*#__PURE__*/React__namespace.default.createElement(CameraProvider, {
|
|
12993
|
+
key: "SignatureKycCamera-".concat(videoSignatureAttempts),
|
|
12994
|
+
preferContinuityCamera: false,
|
|
12945
12995
|
preferFrontFacingCamera: true,
|
|
12946
12996
|
maxVideoWidth: 1280,
|
|
12947
12997
|
maxFps: 30,
|
|
12948
12998
|
onCameraAccessDenied: onCameraAccessDenied,
|
|
12949
|
-
onMicrophoneAccessDenied: onMicrophoneAccessDenied
|
|
12999
|
+
onMicrophoneAccessDenied: onMicrophoneAccessDenied,
|
|
13000
|
+
debugMode: debugMode
|
|
12950
13001
|
}, /*#__PURE__*/React__namespace.default.createElement(SelfieGuidanceModelsProvider, {
|
|
12951
13002
|
autoStart: false,
|
|
12952
13003
|
throttleMs: 250,
|
|
@@ -12954,7 +13005,8 @@ function CompositeWizard(_a) {
|
|
|
12954
13005
|
modelLoadTimeoutMs: videoSignatureCaptureProps.modelLoadTimeoutMs,
|
|
12955
13006
|
requireVerticalFaceCentering: false
|
|
12956
13007
|
}, /*#__PURE__*/React__namespace.default.createElement(VideoSignatureWizard, _assign({}, videoSignatureCaptureProps, {
|
|
12957
|
-
onComplete: onVideoSignatureComplete
|
|
13008
|
+
onComplete: onVideoSignatureComplete,
|
|
13009
|
+
onRetryClicked: onVideoSignatureRetry
|
|
12958
13010
|
}))));
|
|
12959
13011
|
case 'AdditionalDocumentCapture':
|
|
12960
13012
|
return /*#__PURE__*/React__namespace.default.createElement(AdditionalDocumentCaptureWizard, _assign({}, additionalDocumentCaptureProps, {
|
|
@@ -13405,7 +13457,8 @@ var IdValidation = function IdValidation(_a) {
|
|
|
13405
13457
|
videoSignatureCaptureProps: videoSignatureCaptureProps,
|
|
13406
13458
|
captureSignature: captureSignature,
|
|
13407
13459
|
captureSignatureVideo: captureSignatureVideo,
|
|
13408
|
-
onCameraAccessDenied: onCameraAccessDenied
|
|
13460
|
+
onCameraAccessDenied: onCameraAccessDenied,
|
|
13461
|
+
debugMode: debugMode
|
|
13409
13462
|
}))));
|
|
13410
13463
|
};
|
|
13411
13464
|
|
|
@@ -13511,7 +13564,8 @@ var FaceValidation = function FaceValidation(_a) {
|
|
|
13511
13564
|
return ['FaceLiveness'];
|
|
13512
13565
|
}, []),
|
|
13513
13566
|
faceLivenessProps: faceLivenessProps,
|
|
13514
|
-
onCameraAccessDenied: onCameraAccessDenied
|
|
13567
|
+
onCameraAccessDenied: onCameraAccessDenied,
|
|
13568
|
+
debugMode: debugMode
|
|
13515
13569
|
}))));
|
|
13516
13570
|
};
|
|
13517
13571
|
|
|
@@ -13744,7 +13798,8 @@ var IdAndFaceValidation = function IdAndFaceValidation(_a) {
|
|
|
13744
13798
|
additionalDocumentCaptureProps: additionalDocumentCaptureProps,
|
|
13745
13799
|
captureSignature: captureSignature,
|
|
13746
13800
|
captureSignatureVideo: captureSignatureVideo,
|
|
13747
|
-
onCameraAccessDenied: onCameraAccessDenied
|
|
13801
|
+
onCameraAccessDenied: onCameraAccessDenied,
|
|
13802
|
+
debugMode: debugMode
|
|
13748
13803
|
}))));
|
|
13749
13804
|
};
|
|
13750
13805
|
|
|
@@ -13999,7 +14054,8 @@ var CustomerIdAndBiometricsEnrollment = function CustomerIdAndBiometricsEnrollme
|
|
|
13999
14054
|
videoSignatureCaptureProps: videoSignatureCaptureProps,
|
|
14000
14055
|
captureSignature: captureSignature,
|
|
14001
14056
|
captureSignatureVideo: captureSignatureVideo,
|
|
14002
|
-
onCameraAccessDenied: onCameraAccessDenied
|
|
14057
|
+
onCameraAccessDenied: onCameraAccessDenied,
|
|
14058
|
+
debugMode: debugMode
|
|
14003
14059
|
}))));
|
|
14004
14060
|
};
|
|
14005
14061
|
|
|
@@ -14331,7 +14387,7 @@ var CustomerVerificationWizard = function CustomerVerificationWizard(_a) {
|
|
|
14331
14387
|
var _l = React.useState('LOADING'),
|
|
14332
14388
|
captureState = _l[0],
|
|
14333
14389
|
setCaptureState = _l[1];
|
|
14334
|
-
var _m =
|
|
14390
|
+
var _m = React.useContext(CameraStateContext),
|
|
14335
14391
|
cameraAccessDenied = _m.cameraAccessDenied,
|
|
14336
14392
|
releaseCameraAccess = _m.releaseCameraAccess;
|
|
14337
14393
|
var _o = React.useContext(SelfieGuidanceModelsContext),
|
|
@@ -14537,9 +14593,10 @@ var CustomerVerification = function CustomerVerification(_a) {
|
|
|
14537
14593
|
onSubmit: onSubmit,
|
|
14538
14594
|
geolocationEnabled: geolocationEnabled,
|
|
14539
14595
|
geolocationRequired: geolocationRequired
|
|
14540
|
-
}, /*#__PURE__*/React__namespace.default.createElement(
|
|
14596
|
+
}, /*#__PURE__*/React__namespace.default.createElement(CameraProvider, {
|
|
14541
14597
|
preferFrontFacingCamera: true,
|
|
14542
|
-
onCameraAccessDenied: onCameraAccessDenied
|
|
14598
|
+
onCameraAccessDenied: onCameraAccessDenied,
|
|
14599
|
+
debugMode: debugMode
|
|
14543
14600
|
}, /*#__PURE__*/React__namespace.default.createElement(SelfieGuidanceModelsProvider, {
|
|
14544
14601
|
autoStart: false,
|
|
14545
14602
|
onModelError: onModelError,
|
|
@@ -14888,7 +14945,7 @@ var CustomerIdentificationWizard = function CustomerIdentificationWizard(_a) {
|
|
|
14888
14945
|
var _l = React.useState('LOADING'),
|
|
14889
14946
|
captureState = _l[0],
|
|
14890
14947
|
setCaptureState = _l[1];
|
|
14891
|
-
var _m =
|
|
14948
|
+
var _m = React.useContext(CameraStateContext),
|
|
14892
14949
|
cameraAccessDenied = _m.cameraAccessDenied,
|
|
14893
14950
|
releaseCameraAccess = _m.releaseCameraAccess;
|
|
14894
14951
|
var _o = React.useContext(SelfieGuidanceModelsContext),
|
|
@@ -15092,9 +15149,10 @@ var CustomerIdentification = function CustomerIdentification(_a) {
|
|
|
15092
15149
|
onSubmit: onSubmit,
|
|
15093
15150
|
geolocationEnabled: geolocationEnabled,
|
|
15094
15151
|
geolocationRequired: geolocationRequired
|
|
15095
|
-
}, /*#__PURE__*/React__namespace.default.createElement(
|
|
15152
|
+
}, /*#__PURE__*/React__namespace.default.createElement(CameraProvider, {
|
|
15096
15153
|
preferFrontFacingCamera: true,
|
|
15097
|
-
onCameraAccessDenied: onCameraAccessDenied
|
|
15154
|
+
onCameraAccessDenied: onCameraAccessDenied,
|
|
15155
|
+
debugMode: debugMode
|
|
15098
15156
|
}, /*#__PURE__*/React__namespace.default.createElement(SelfieGuidanceModelsProvider, {
|
|
15099
15157
|
autoStart: false,
|
|
15100
15158
|
modelLoadTimeoutMs: modelLoadTimeoutMs,
|
|
@@ -15421,7 +15479,8 @@ var VideoIdValidation = function VideoIdValidation(_a) {
|
|
|
15421
15479
|
captureSignature: captureSignature,
|
|
15422
15480
|
captureSignatureVideo: captureSignatureVideo,
|
|
15423
15481
|
onCameraAccessDenied: onCameraAccessDenied,
|
|
15424
|
-
onMicrophoneAccessDenied: onMicrophoneAccessDenied
|
|
15482
|
+
onMicrophoneAccessDenied: onMicrophoneAccessDenied,
|
|
15483
|
+
debugMode: debugMode
|
|
15425
15484
|
}))));
|
|
15426
15485
|
};
|
|
15427
15486
|
|
|
@@ -15578,7 +15637,8 @@ var CustomerBiometricsEnrollment = function CustomerBiometricsEnrollment(_a) {
|
|
|
15578
15637
|
videoSignatureCaptureProps: videoSignatureCaptureProps,
|
|
15579
15638
|
captureSignature: captureSignature,
|
|
15580
15639
|
captureSignatureVideo: captureSignatureVideo,
|
|
15581
|
-
onCameraAccessDenied: onCameraAccessDenied
|
|
15640
|
+
onCameraAccessDenied: onCameraAccessDenied,
|
|
15641
|
+
debugMode: debugMode
|
|
15582
15642
|
}))));
|
|
15583
15643
|
};
|
|
15584
15644
|
|
|
@@ -15636,10 +15696,11 @@ var DocumentCapture = function DocumentCapture(_a) {
|
|
|
15636
15696
|
onDocumentUploadFailed: onDocumentUploadFailed,
|
|
15637
15697
|
geolocationEnabled: geolocationEnabled,
|
|
15638
15698
|
geolocationRequired: geolocationRequired
|
|
15639
|
-
}, /*#__PURE__*/React__namespace.default.createElement(
|
|
15699
|
+
}, /*#__PURE__*/React__namespace.default.createElement(CameraProvider, {
|
|
15640
15700
|
requestAccessAutomatically: false,
|
|
15641
|
-
|
|
15642
|
-
onCameraAccessDenied: onCameraAccessDenied
|
|
15701
|
+
preferContinuityCamera: true,
|
|
15702
|
+
onCameraAccessDenied: onCameraAccessDenied,
|
|
15703
|
+
debugMode: debugMode
|
|
15643
15704
|
}, /*#__PURE__*/React__namespace.default.createElement(DocumentCaptureWizard, {
|
|
15644
15705
|
onSuccess: onComplete,
|
|
15645
15706
|
onExitCapture: onExitCapture,
|