diff --git a/wasm_module/.gitignore b/wasm_module/.gitignore index 15551e3..883c776 100644 --- a/wasm_module/.gitignore +++ b/wasm_module/.gitignore @@ -24,4 +24,5 @@ package-lock.json npm-debug.log* yarn-debug.log* yarn-error.log* -.idea \ No newline at end of file +.idea +.nvmrc \ No newline at end of file diff --git a/wasm_module/.prettierignore b/wasm_module/.prettierignore new file mode 100644 index 0000000..3a9a2eb --- /dev/null +++ b/wasm_module/.prettierignore @@ -0,0 +1,4 @@ +build +coverage +dist +public \ No newline at end of file diff --git a/wasm_module/.prettierrc b/wasm_module/.prettierrc index 94d737c..afd1e2d 100644 --- a/wasm_module/.prettierrc +++ b/wasm_module/.prettierrc @@ -1,3 +1,5 @@ { - "printWidth": 120 + "printWidth": 120, + "semi": false, + "arrowParens": "avoid" } \ No newline at end of file diff --git a/wasm_module/package.json b/wasm_module/package.json index 40c6529..5762ed0 100644 --- a/wasm_module/package.json +++ b/wasm_module/package.json @@ -28,7 +28,8 @@ "prebuild": "cp -R ./node_modules/@privateid/cryptonets-web-sdk-alpha/wasm public/ && cp -R ./node_modules/@privateid/cryptonets-web-sdk-alpha/workers public/", "build": "react-scripts build", "test": "react-scripts test", - "eject": "react-scripts eject" + "eject": "react-scripts eject", + "prettier": "prettier --write \"src/**/*.{js,jsx,json,css,scss}\"" }, "eslintConfig": { "extends": [ @@ -47,5 +48,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "prettier": "^3.5.3" } -} +} \ No newline at end of file diff --git a/wasm_module/src/context/DebugContext.jsx b/wasm_module/src/context/DebugContext.jsx index da068b4..7f0b3a0 100644 --- a/wasm_module/src/context/DebugContext.jsx +++ b/wasm_module/src/context/DebugContext.jsx @@ -1,33 +1,26 @@ import React, { createContext, useMemo, useState } from "react" - export const DebugContext = createContext({ - functionLoop: true, - setFuctionLoop: (functionLoop)=>{}, - showDebugOptions: false, - setShowDebugOptions: (showDebugOptions)=>{} + functionLoop: true, + setFuctionLoop: functionLoop => {}, + showDebugOptions: false, + setShowDebugOptions: showDebugOptions => {}, }) +const DebugContextProvider = ({ children }) => { + const [functionLoop, setFuctionLoop] = useState(true) + const [showDebugOptions, setShowDebugOptions] = useState(false) -const DebugContextProvider = ({children})=>{ - - const [functionLoop, setFuctionLoop] = useState(true); - const [showDebugOptions, setShowDebugOptions] = useState(false); - - const values = { - functionLoop, - setFuctionLoop, - showDebugOptions, - setShowDebugOptions - } + const values = { + functionLoop, + setFuctionLoop, + showDebugOptions, + setShowDebugOptions, + } - const memoizedValue = useMemo(()=>values,[values]) + const memoizedValue = useMemo(() => values, [values]) - return( - - {children} - - ) + return {children} } -export default DebugContextProvider; \ No newline at end of file +export default DebugContextProvider diff --git a/wasm_module/src/hooks/index.js b/wasm_module/src/hooks/index.js index 797aa9a..482cda4 100644 --- a/wasm_module/src/hooks/index.js +++ b/wasm_module/src/hooks/index.js @@ -1,11 +1,11 @@ -export { default as useCamera } from "./useCamera"; -export { default as useContinuousPredict } from "./useContinuousAuthentication"; -export { default as useDelete } from "./useDelete"; -export { default as useEnroll } from "./useEnroll"; -export { default as useIsValid } from "./useIsValid"; -export { default as usePredict } from "./usePredict"; -export { default as useScanBackDocument } from "./useScanBackDocument"; -export { default as useScanFrontDocument } from "./useScanFrontDocument"; -export { default as useWasm } from "./useWasm"; -export { default as usePredictAge } from "./usePredictAge"; -export { default as useScanFrontDocumentWithoutPredict } from "./useScanFrontDocument"; +export { default as useCamera } from "./useCamera" +export { default as useContinuousPredict } from "./useContinuousAuthentication" +export { default as useDelete } from "./useDelete" +export { default as useEnroll } from "./useEnroll" +export { default as useIsValid } from "./useIsValid" +export { default as usePredict } from "./usePredict" +export { default as useScanBackDocument } from "./useScanBackDocument" +export { default as useScanFrontDocument } from "./useScanFrontDocument" +export { default as useWasm } from "./useWasm" +export { default as usePredictAge } from "./usePredictAge" +export { default as useScanFrontDocumentWithoutPredict } from "./useScanFrontDocument" diff --git a/wasm_module/src/hooks/useCamera.js b/wasm_module/src/hooks/useCamera.js index 346c7ab..a18d314 100644 --- a/wasm_module/src/hooks/useCamera.js +++ b/wasm_module/src/hooks/useCamera.js @@ -1,8 +1,8 @@ /* eslint-disable */ -import { useState } from "react"; -import { openCamera } from "@privateid/cryptonets-web-sdk-alpha"; -import { mapDevices } from "../utils"; -import platform, { os } from "platform"; +import { useState } from "react" +import { openCamera } from "@privateid/cryptonets-web-sdk-alpha" +import { mapDevices } from "../utils" +import platform, { os } from "platform" const useCamera = ( element = "userVideo", @@ -28,28 +28,27 @@ const useCamera = ( setCameraSettingsList, ) => { // Initialize the state - const [ready, setReady] = useState(false); - const [devices, setDevices] = useState([]); - const [device, setDevice] = useState(""); - const [faceMode, setFaceMode] = useState(false); - const [cameraFeatures, setCameraFeatures] = useState({}); - + const [ready, setReady] = useState(false) + const [devices, setDevices] = useState([]) + const [device, setDevice] = useState("") + const [faceMode, setFaceMode] = useState(false) + const [cameraFeatures, setCameraFeatures] = useState({}) const isSurfaceProWindows = () => { - if(navigator.platform === "windows"){ - return true; + if (navigator.platform === "windows") { + return true } - if(navigator.oscpu === "win32"){ + if (navigator.oscpu === "win32") { return true } } const init = async (requireHd = false) => { - if (ready) return; + if (ready) return - console.log("Platform: ", navigator.platform); - console.log("OS CPU: ", navigator.oscpu); + console.log("Platform: ", navigator.platform) + console.log("OS CPU: ", navigator.oscpu) console.log("User Agent: ", navigator.userAgent) try { const { @@ -60,48 +59,52 @@ const useCamera = ( stream, errorMessage, capabilities, - } = await openCamera({ videoElementId: element, requestFaceMode: isSurfaceProWindows()? "front" : "", canvasResolution:{ - width:1440, - height:1440 - } } ); - setCameraFeatures({ settings, capabilities }); - setFaceMode(faceMode); - console.log({ devices, faceMode, settings, status, stream, errorMessage, capabilities }); - console.log("hasError??", { status, errorMessage }); + } = await openCamera({ + videoElementId: element, + requestFaceMode: isSurfaceProWindows() ? "front" : "", + canvasResolution: { + width: 1440, + height: 1440, + }, + }) + setCameraFeatures({ settings, capabilities }) + setFaceMode(faceMode) + console.log({ devices, faceMode, settings, status, stream, errorMessage, capabilities }) + console.log("hasError??", { status, errorMessage }) if (devices.length > 0) { - const options = devices.map(mapDevices); - setDevices(options); - setDevice(settings.deviceId); + const options = devices.map(mapDevices) + setDevices(options) + setDevice(settings.deviceId) } - setReady(true); - console.log(platform.os.family); - const setCameraFocus = async () => { - try { - const video = document.getElementById("userVideo"); - const mediaStream = video.srcObject; - const track = await mediaStream.getTracks()[0]; - const capabilities = track.getCapabilities(); - if (typeof capabilities.focusDistance !== "undefined") { - await track.applyConstraints({ - advanced: [ - { - focusMode: capabilities.focusMode.includes("continuous") ? "continuous" : "manual", - focusDistance: 50, - }, - ], - }); - } - } catch (e) { - // eslint-disable-next-line no-console - console.log(e); + setReady(true) + console.log(platform.os.family) + const setCameraFocus = async () => { + try { + const video = document.getElementById("userVideo") + const mediaStream = video.srcObject + const track = await mediaStream.getTracks()[0] + const capabilities = track.getCapabilities() + if (typeof capabilities.focusDistance !== "undefined") { + await track.applyConstraints({ + advanced: [ + { + focusMode: capabilities.focusMode.includes("continuous") ? "continuous" : "manual", + focusDistance: 50, + }, + ], + }) } - }; - await setCameraFocus(); + } catch (e) { + // eslint-disable-next-line no-console + console.log(e) + } + } + await setCameraFocus() //} - console.log("capabilities:", capabilities); - console.log("settings", settings); + console.log("capabilities:", capabilities) + console.log("settings", settings) if (capabilities) { - let cameraSettings ={ + let cameraSettings = { focusDistance: false, exposureTime: false, sharpness: false, @@ -110,49 +113,49 @@ const useCamera = ( contrast: false, } if (capabilities.focusDistance) { - setCameraFocusMin(capabilities.focusDistance.min); - setCameraFocusMax(capabilities.focusDistance.max); - setCameraFocusCurrent(settings.focusDistance); - cameraSettings = {...settings, focusDistance: true}; + setCameraFocusMin(capabilities.focusDistance.min) + setCameraFocusMax(capabilities.focusDistance.max) + setCameraFocusCurrent(settings.focusDistance) + cameraSettings = { ...settings, focusDistance: true } } if (capabilities.exposureTime) { - setCameraExposureTimeMin(Math.ceil(capabilities.exposureTime.min)); - setCameraExposureTimeMax(Math.ceil(capabilities.exposureTime.max)); - setCameraExposureTimeCurrent(Math.ceil(settings.exposureTime)); - cameraSettings = {...settings, exposureTime: true}; + setCameraExposureTimeMin(Math.ceil(capabilities.exposureTime.min)) + setCameraExposureTimeMax(Math.ceil(capabilities.exposureTime.max)) + setCameraExposureTimeCurrent(Math.ceil(settings.exposureTime)) + cameraSettings = { ...settings, exposureTime: true } } - if (capabilities.sharpness){ - setCameraSharpnessMin(Math.ceil(capabilities.sharpness.min)); - setCameraSharpnessMax(Math.ceil(capabilities.sharpness.max)); - setCameraSharpnessCurrent(Math.ceil(settings.sharpness)); - cameraSettings = {...settings, sharpness: true}; + if (capabilities.sharpness) { + setCameraSharpnessMin(Math.ceil(capabilities.sharpness.min)) + setCameraSharpnessMax(Math.ceil(capabilities.sharpness.max)) + setCameraSharpnessCurrent(Math.ceil(settings.sharpness)) + cameraSettings = { ...settings, sharpness: true } } - if (capabilities.brightness){ - setCameraBrightnessMin(Math.ceil(capabilities.brightness.min)); - setCameraBrightnessMax(Math.ceil(capabilities.brightness.max)); - setCameraBrightnessCurrent(Math.ceil(settings.brightness)); - cameraSettings = {...settings, brightness: true}; + if (capabilities.brightness) { + setCameraBrightnessMin(Math.ceil(capabilities.brightness.min)) + setCameraBrightnessMax(Math.ceil(capabilities.brightness.max)) + setCameraBrightnessCurrent(Math.ceil(settings.brightness)) + cameraSettings = { ...settings, brightness: true } } - if (capabilities.saturation){ - setCameraSaturationMin(Math.ceil(capabilities.saturation.min)); - setCameraSaturationMax(Math.ceil(capabilities.saturation.max)); - setCameraSaturationCurrent(Math.ceil(settings.saturation)); - cameraSettings = {...settings, saturation: true}; + if (capabilities.saturation) { + setCameraSaturationMin(Math.ceil(capabilities.saturation.min)) + setCameraSaturationMax(Math.ceil(capabilities.saturation.max)) + setCameraSaturationCurrent(Math.ceil(settings.saturation)) + cameraSettings = { ...settings, saturation: true } } - if (capabilities.contrast){ - setCameraContrastMin(Math.ceil(capabilities.contrast.min)); - setCameraContrastMax(Math.ceil(capabilities.contrast.max)); - setCameraContrastCurrent(Math.ceil(settings.contrast)); - cameraSettings = {...settings, contrast: true}; + if (capabilities.contrast) { + setCameraContrastMin(Math.ceil(capabilities.contrast.min)) + setCameraContrastMax(Math.ceil(capabilities.contrast.max)) + setCameraContrastCurrent(Math.ceil(settings.contrast)) + cameraSettings = { ...settings, contrast: true } } - setCameraSettingsList(cameraSettings); + setCameraSettingsList(cameraSettings) } } catch (e) { - console.log("Error Message", e); + console.log("Error Message", e) } - }; + } - return { ready, init, devices, device, setDevice, faceMode, ...cameraFeatures, setReady }; -}; + return { ready, init, devices, device, setDevice, faceMode, ...cameraFeatures, setReady } +} -export default useCamera; +export default useCamera diff --git a/wasm_module/src/hooks/useContinuousAuthentication.js b/wasm_module/src/hooks/useContinuousAuthentication.js index a0d3498..edfd439 100644 --- a/wasm_module/src/hooks/useContinuousAuthentication.js +++ b/wasm_module/src/hooks/useContinuousAuthentication.js @@ -52,7 +52,7 @@ // result.returnValue.PI.uuid, // result.returnValue.PI.guid // ); - + // } else { // const { message } = result.returnValue; // setContinuousPredictMessage(message); diff --git a/wasm_module/src/hooks/useContinuousPredictWithoutRestriction.js b/wasm_module/src/hooks/useContinuousPredictWithoutRestriction.js index 082f9b3..d97df4a 100644 --- a/wasm_module/src/hooks/useContinuousPredictWithoutRestriction.js +++ b/wasm_module/src/hooks/useContinuousPredictWithoutRestriction.js @@ -1,45 +1,45 @@ -import { useState } from "react"; -import { continuousPredictWithoutRestrictions } from "@privateid/cryptonets-web-sdk-alpha"; -let loop = true; -const useContinuousPredictWithoutRestrictions = (setShowSuccess) => { - const [continuousPredictWithoutRestrictionsMessage, setContinuousPredictWithoutRestrictionsMessage] = useState(""); +import { useState } from "react" +import { continuousPredictWithoutRestrictions } from "@privateid/cryptonets-web-sdk-alpha" +let loop = true +const useContinuousPredictWithoutRestrictions = setShowSuccess => { + const [continuousPredictWithoutRestrictionsMessage, setContinuousPredictWithoutRestrictionsMessage] = useState("") const [ continuousPredictWithoutRestrictionsValidationStatus, setContinuousPredictWithoutRestrictionsValidationStatus, - ] = useState(""); - const [continuousPredictWithoutRestrictionsGUID, setContinuousPredictWithoutRestrictionsGUID] = useState(""); - const [continuousPredictWithoutRestrictionsPUID, setContinuousPredictWithoutRestrictionsPUID] = useState(""); + ] = useState("") + const [continuousPredictWithoutRestrictionsGUID, setContinuousPredictWithoutRestrictionsGUID] = useState("") + const [continuousPredictWithoutRestrictionsPUID, setContinuousPredictWithoutRestrictionsPUID] = useState("") - const callback = async (result) => { - console.log("predict callback hook result:", result); + const callback = async result => { + console.log("predict callback hook result:", result) switch (result.status) { case "WASM_RESPONSE": if (result.returnValue?.status === 0) { - const { message } = result.returnValue; - setContinuousPredictWithoutRestrictionsMessage(message); - setShowSuccess(true); - setContinuousPredictWithoutRestrictionsValidationStatus(result.returnValue.status); - setContinuousPredictWithoutRestrictionsGUID(result.returnValue.guid); - setContinuousPredictWithoutRestrictionsPUID(result.returnValue.puid); + const { message } = result.returnValue + setContinuousPredictWithoutRestrictionsMessage(message) + setShowSuccess(true) + setContinuousPredictWithoutRestrictionsValidationStatus(result.returnValue.status) + setContinuousPredictWithoutRestrictionsGUID(result.returnValue.guid) + setContinuousPredictWithoutRestrictionsPUID(result.returnValue.puid) } if (result.returnValue?.status !== 0) { - const { status, message } = result.returnValue; - setContinuousPredictWithoutRestrictionsMessage(message); - setShowSuccess(false); - setContinuousPredictWithoutRestrictionsValidationStatus(result.returnValue.status); - setContinuousPredictWithoutRestrictionsGUID(result.returnValue.guid); - setContinuousPredictWithoutRestrictionsPUID(result.returnValue.puid); + const { status, message } = result.returnValue + setContinuousPredictWithoutRestrictionsMessage(message) + setShowSuccess(false) + setContinuousPredictWithoutRestrictionsValidationStatus(result.returnValue.status) + setContinuousPredictWithoutRestrictionsGUID(result.returnValue.guid) + setContinuousPredictWithoutRestrictionsPUID(result.returnValue.puid) } - break; + break default: } - }; + } const doContinuousPredictWithoutRestrictions = async () => { // eslint-disable-next-line no-unused-vars - await continuousPredictWithoutRestrictions(callback); - }; + await continuousPredictWithoutRestrictions(callback) + } return { doContinuousPredictWithoutRestrictions, @@ -47,7 +47,7 @@ const useContinuousPredictWithoutRestrictions = (setShowSuccess) => { continuousPredictWithoutRestrictionsValidationStatus, continuousPredictWithoutRestrictionsGUID, continuousPredictWithoutRestrictionsPUID, - }; -}; + } +} -export default useContinuousPredictWithoutRestrictions; +export default useContinuousPredictWithoutRestrictions diff --git a/wasm_module/src/hooks/useDelete.js b/wasm_module/src/hooks/useDelete.js index 7b8ef42..d9c58fd 100644 --- a/wasm_module/src/hooks/useDelete.js +++ b/wasm_module/src/hooks/useDelete.js @@ -1,21 +1,21 @@ -import { useState } from "react"; -import { deleteUser } from "@privateid/cryptonets-web-sdk-alpha"; +import { useState } from "react" +import { deleteUser } from "@privateid/cryptonets-web-sdk-alpha" // useDelete const useDelete = (onDeleteEnd, ready) => { - const [loading, setLoading] = useState(false); + const [loading, setLoading] = useState(false) // eslint-disable-next-line react-hooks/exhaustive-deps - const callback = (result) => { - setLoading(false); - onDeleteEnd(result.returnValue.status === 0 ? "success" : result.returnValue.message); - }; + const callback = result => { + setLoading(false) + onDeleteEnd(result.returnValue.status === 0 ? "success" : result.returnValue.message) + } - const onDeleteUser = async (puid) => { - deleteUser({uuid: puid, callback:callback}); - }; + const onDeleteUser = async puid => { + deleteUser({ uuid: puid, callback: callback }) + } - return { loading, onDeleteUser }; -}; + return { loading, onDeleteUser } +} -export default useDelete; +export default useDelete diff --git a/wasm_module/src/hooks/useEnroll.js b/wasm_module/src/hooks/useEnroll.js index 39f42ec..b952cdc 100644 --- a/wasm_module/src/hooks/useEnroll.js +++ b/wasm_module/src/hooks/useEnroll.js @@ -1,80 +1,80 @@ -import { convertCroppedImage, enroll } from "@privateid/cryptonets-web-sdk-alpha"; -import { useState } from "react"; +import { convertCroppedImage, enroll } from "@privateid/cryptonets-web-sdk-alpha" +import { useState } from "react" -let skipAntispoofProcess = false; -let identifierGlobal = undefined; -let collectionNameGlobal = undefined; +let skipAntispoofProcess = false +let identifierGlobal = undefined +let collectionNameGlobal = undefined -let threshold_user_too_close = 0.8; -let threshold_user_too_far = 0.2; -let threshold_profile_enroll = 0.6; -let threshold_high_vertical_enroll = -0.1; -let threshold_down_vertical_enroll = 0.1; +let threshold_user_too_close = 0.8 +let threshold_user_too_far = 0.2 +let threshold_profile_enroll = 0.6 +let threshold_high_vertical_enroll = -0.1 +let threshold_down_vertical_enroll = 0.1 -let stop = false; +let stop = false const useEnroll = ({ disableButtons, skipAntispoof = false }) => { - const [enrollAntispoofPerformed, setEnrollAntispoofPerformed] = useState(false); - const [enrollAntispoofStatus, setEnrollAntispoofStatus] = useState(""); + const [enrollAntispoofPerformed, setEnrollAntispoofPerformed] = useState(false) + const [enrollAntispoofStatus, setEnrollAntispoofStatus] = useState("") - const [enrollValidationStatus, setEnrollValidationStatus] = useState(""); + const [enrollValidationStatus, setEnrollValidationStatus] = useState("") - const [enrollGUID, setEnrollGUID] = useState(""); - const [enrollPUID, setEnrollPUID] = useState(""); - const [enrollToken, setEnrollToken] = useState(""); + const [enrollGUID, setEnrollGUID] = useState("") + const [enrollPUID, setEnrollPUID] = useState("") + const [enrollToken, setEnrollToken] = useState("") - const [enrollImageData, setEnrollImageData] = useState(""); + const [enrollImageData, setEnrollImageData] = useState("") - let enrollCount = 0; - let enrollTokenCurrent; + let enrollCount = 0 + let enrollTokenCurrent - const callback = async (result) => { - console.log("enroll callback hook result:", result); - console.log("skipping antispoof?", skipAntispoofProcess); + const callback = async result => { + console.log("enroll callback hook result:", result) + console.log("skipping antispoof?", skipAntispoofProcess) if (result.enroll_performed) { - setEnrollGUID(result.guid); - setEnrollPUID(result.puid); - disableButtons(false); + setEnrollGUID(result.guid) + setEnrollPUID(result.puid) + disableButtons(false) } else { - setEnrollValidationStatus(result.face_validation_status); - setEnrollAntispoofStatus(result.antispoof_status); + setEnrollValidationStatus(result.face_validation_status) + setEnrollAntispoofStatus(result.antispoof_status) - if(!stop){ - enrollUserOneFa(result.mf_token, skipAntispoofProcess, collectionNameGlobal, identifierGlobal); + if (!stop) { + enrollUserOneFa(result.mf_token, skipAntispoofProcess, collectionNameGlobal, identifierGlobal) } } - }; + } const enrollUserOneFa = async ( token = "", skipAntispoof = false, collectionName = undefined, - identifier = undefined + identifier = undefined, ) => { - enrollTokenCurrent = token; - skipAntispoofProcess = skipAntispoof; - collectionNameGlobal = collectionName; - identifierGlobal = identifier; - disableButtons(true); + enrollTokenCurrent = token + skipAntispoofProcess = skipAntispoof + collectionNameGlobal = collectionName + identifierGlobal = identifier + disableButtons(true) // eslint-disable-next-line no-unused-vars - console.log("enroll call config:",{ + console.log("enroll call config:", { input_image_format: "rgba", mf_token: token, collection_name: collectionNameGlobal, skip_antispoof: skipAntispoof, identifier: identifierGlobal, - anti_spoofing_threshold:0.75, + anti_spoofing_threshold: 0.75, threshold_user_too_close, threshold_user_too_far, threshold_profile_enroll, threshold_high_vertical_enroll, threshold_down_vertical_enroll, - },) + }) - stop = false; + stop = false const bestImage = await enroll({ callback: callback, config: { @@ -83,51 +83,50 @@ const useEnroll = ({ disableButtons, skipAntispoof = false }) => { collection_name: collectionNameGlobal, skip_antispoof: skipAntispoof, identifier: identifierGlobal, - anti_spoofing_threshold:0.75, + anti_spoofing_threshold: 0.75, threshold_user_too_close, threshold_user_too_far, threshold_profile_enroll, threshold_high_vertical_enroll, threshold_down_vertical_enroll, }, - }); + }) if (bestImage) { - setEnrollImageData(new ImageData(bestImage.imageData, bestImage.width, bestImage.height)); - const bestImagePortrait = await convertCroppedImage(bestImage.imageData, bestImage.width, bestImage.height); - console.log("enroll image:", bestImagePortrait); + setEnrollImageData(new ImageData(bestImage.imageData, bestImage.width, bestImage.height)) + const bestImagePortrait = await convertCroppedImage(bestImage.imageData, bestImage.width, bestImage.height) + console.log("enroll image:", bestImagePortrait) } - }; + } const changeThresholdEnroll = ({ name, newValue }) => { - // stop = true; - console.log("Changing Config:", {name, newValue}) + console.log("Changing Config:", { name, newValue }) switch (name) { case "threshold_user_too_close": - console.log("threshold_user_too_close:", newValue); - threshold_user_too_close = newValue; - break; + console.log("threshold_user_too_close:", newValue) + threshold_user_too_close = newValue + break case "threshold_user_too_far": - console.log("threshold_user_too_far:", newValue); - threshold_user_too_far = newValue; - break; + console.log("threshold_user_too_far:", newValue) + threshold_user_too_far = newValue + break case "threshold_profile_enroll": - console.log("threshold_profile_enroll:", newValue); - threshold_profile_enroll = newValue; - break; + console.log("threshold_profile_enroll:", newValue) + threshold_profile_enroll = newValue + break case "threshold_high_vertical_enroll": - console.log("threshold_high_vertical_enroll:", newValue); - threshold_high_vertical_enroll = newValue; - break; + console.log("threshold_high_vertical_enroll:", newValue) + threshold_high_vertical_enroll = newValue + break case "threshold_down_vertical_enroll": - console.log("threshold_down_vertical_enroll:", newValue); - threshold_down_vertical_enroll = newValue; - break; + console.log("threshold_down_vertical_enroll:", newValue) + threshold_down_vertical_enroll = newValue + break } - }; + } return { enrollGUID, @@ -139,7 +138,7 @@ const useEnroll = ({ disableButtons, skipAntispoof = false }) => { enrollUserOneFa, enrollImageData, changeThresholdEnroll, - }; -}; + } +} -export default useEnroll; +export default useEnroll diff --git a/wasm_module/src/hooks/useEnrollWithAge.js b/wasm_module/src/hooks/useEnrollWithAge.js index 4758a46..800bb63 100644 --- a/wasm_module/src/hooks/useEnrollWithAge.js +++ b/wasm_module/src/hooks/useEnrollWithAge.js @@ -1,135 +1,135 @@ -import { useEffect, useState } from "react"; -import { enroll, predictImageAge } from "@privateid/cryptonets-web-sdk-alpha"; +import { useEffect, useState } from "react" +import { enroll, predictImageAge } from "@privateid/cryptonets-web-sdk-alpha" -let skipAntispoofProcess = false; +let skipAntispoofProcess = false const useEnrollWithAge = ( element = "userVideo", onSuccess, retryTimes = 4, deviceId = null, setShowSuccess, - disableButtons + disableButtons, ) => { - const [ewaAntispoofPerformed, setEwaAntispoofPerformed] = useState(false); - const [ewaAntispoofStatus, setEwaAntispoofStatus] = useState(""); + const [ewaAntispoofPerformed, setEwaAntispoofPerformed] = useState(false) + const [ewaAntispoofStatus, setEwaAntispoofStatus] = useState("") - const [ewaValidationStatus, setEwaValidationStatus] = useState(""); + const [ewaValidationStatus, setEwaValidationStatus] = useState("") - const [ewaGUID, setEwaGUID] = useState(""); - const [ewaPUID, setEwaPUID] = useState(""); - const [ewaToken, setEwaToken] = useState(""); + const [ewaGUID, setEwaGUID] = useState("") + const [ewaPUID, setEwaPUID] = useState("") + const [ewaToken, setEwaToken] = useState("") - const [ewaImageData, setEwaImageData] = useState(""); - const [ewaAge, setEwaAge] = useState(null); + const [ewaImageData, setEwaImageData] = useState("") + const [ewaAge, setEwaAge] = useState(null) - const [doAge, setDoAge] = useState(false); + const [doAge, setDoAge] = useState(false) - let enrollTokenCurrent; + let enrollTokenCurrent const enrollWithAge = async (token = "") => { - enrollTokenCurrent = token; - disableButtons(true); + enrollTokenCurrent = token + disableButtons(true) // eslint-disable-next-line no-unused-vars const bestImage = await enroll(callback, { input_image_format: "rgba", mf_token: token, - }); + }) if (bestImage) { - setEwaImageData(new ImageData(bestImage.imageData, bestImage.width, bestImage.height)); + setEwaImageData(new ImageData(bestImage.imageData, bestImage.width, bestImage.height)) } - }; + } - const callback = async (result) => { - console.log("enroll callback hook result:", result); - console.log("skipping antispoof?", skipAntispoofProcess); + const callback = async result => { + console.log("enroll callback hook result:", result) + console.log("skipping antispoof?", skipAntispoofProcess) if (result.returnValue.status === 0) { if (result.returnValue.guid && result.returnValue.puid) { - setEwaGUID(result.returnValue.guid); - setEwaPUID(result.returnValue.puid); - setEwaAntispoofPerformed(); - setEwaAntispoofStatus(""); - setEwaValidationStatus(""); - setDoAge(true); + setEwaGUID(result.returnValue.guid) + setEwaPUID(result.returnValue.puid) + setEwaAntispoofPerformed() + setEwaAntispoofStatus("") + setEwaValidationStatus("") + setDoAge(true) } else { if (result.returnValue.validation_status.length > 0) { - setEwaToken(result.returnValue.validation_status[0].enroll_token); - setEwaAntispoofPerformed(result.returnValue.validation_status[0].anti_spoof_performed); - setEwaAntispoofStatus(result.returnValue.validation_status[0].anti_spoof_status); - setEwaValidationStatus(result.returnValue.validation_status[0].status); + setEwaToken(result.returnValue.validation_status[0].enroll_token) + setEwaAntispoofPerformed(result.returnValue.validation_status[0].anti_spoof_performed) + setEwaAntispoofStatus(result.returnValue.validation_status[0].anti_spoof_status) + setEwaValidationStatus(result.returnValue.validation_status[0].status) if ( result.returnValue.validation_status[0].anti_spoof_performed && result.returnValue.validation_status[0].anti_spoof_status === 0 && result.returnValue.validation_status[0].status === 0 ) { - enrollWithAge(result.returnValue.validation_status[0].enroll_token, skipAntispoofProcess); + enrollWithAge(result.returnValue.validation_status[0].enroll_token, skipAntispoofProcess) } else { - enrollWithAge("", skipAntispoofProcess); + enrollWithAge("", skipAntispoofProcess) } } else { - setEwaToken(""); - setEwaAntispoofPerformed(""); - setEwaAntispoofStatus(""); - setEwaValidationStatus(""); + setEwaToken("") + setEwaAntispoofPerformed("") + setEwaAntispoofStatus("") + setEwaValidationStatus("") } } } else { if (result.returnValue.validation_status.length > 0) { - setEwaToken(result.returnValue.validation_status[0].enroll_token); - setEwaAntispoofPerformed(result.returnValue.validation_status[0].anti_spoof_performed); - setEwaAntispoofStatus(result.returnValue.validation_status[0].anti_spoof_status); - setEwaValidationStatus(result.returnValue.validation_status[0].status); - enrollWithAge(result.returnValue.validation_status[0].enroll_token, skipAntispoofProcess); + setEwaToken(result.returnValue.validation_status[0].enroll_token) + setEwaAntispoofPerformed(result.returnValue.validation_status[0].anti_spoof_performed) + setEwaAntispoofStatus(result.returnValue.validation_status[0].anti_spoof_status) + setEwaValidationStatus(result.returnValue.validation_status[0].status) + enrollWithAge(result.returnValue.validation_status[0].enroll_token, skipAntispoofProcess) } else { - setEwaToken(""); - setEwaAntispoofPerformed(""); - setEwaAntispoofStatus(""); - setEwaValidationStatus(""); - enrollWithAge("", skipAntispoofProcess); + setEwaToken("") + setEwaAntispoofPerformed("") + setEwaAntispoofStatus("") + setEwaValidationStatus("") + enrollWithAge("", skipAntispoofProcess) } } - }; + } function convertBase64ToImageData(imageSrc, setImageData) { - const newImg = new Image(); - newImg.src = imageSrc; + const newImg = new Image() + newImg.src = imageSrc newImg.onload = async () => { const imgSize = { w: newImg.width, h: newImg.height, - }; + } // alert(imgSize.w + " " + imgSize.h); - const canvas = document.createElement("canvas"); - canvas.width = imgSize.w; - canvas.height = imgSize.h; - const ctx = canvas.getContext("2d"); - ctx?.drawImage(newImg, 0, 0); - const imageData = ctx?.getImageData(0, 0, imgSize.w, imgSize.h); - setEwaImageData(imageData); - }; + const canvas = document.createElement("canvas") + canvas.width = imgSize.w + canvas.height = imgSize.h + const ctx = canvas.getContext("2d") + ctx?.drawImage(newImg, 0, 0) + const imageData = ctx?.getImageData(0, 0, imgSize.w, imgSize.h) + setEwaImageData(imageData) + } } - const handleAgeCallback = (response) => { - console.log("EWA Age:", response); + const handleAgeCallback = response => { + console.log("EWA Age:", response) if ( (!response?.returnValue?.faces[0].anti_spoof_performed && response?.returnValue?.faces[0].status === 0) || response?.returnValue?.faces[0].status === 20 || response?.returnValue?.faces[0].status === 21 ) { if (response?.returnValue?.faces[0].age > 0) { - setEwaAge(response?.returnValue?.faces[0].age); - setShowSuccess(true); + setEwaAge(response?.returnValue?.faces[0].age) + setShowSuccess(true) } } - disableButtons(false); - }; + disableButtons(false) + } useEffect(() => { if (doAge && ewaImageData?.data && ewaImageData?.height) { - predictImageAge(ewaImageData, handleAgeCallback); + predictImageAge(ewaImageData, handleAgeCallback) } - }, [ewaImageData,doAge]); + }, [ewaImageData, doAge]) return { ewaGUID, @@ -140,7 +140,7 @@ const useEnrollWithAge = ( ewaToken, enrollWithAge, ewaAge, - }; -}; + } +} -export default useEnrollWithAge; +export default useEnrollWithAge diff --git a/wasm_module/src/hooks/useFaceLogin.js b/wasm_module/src/hooks/useFaceLogin.js index ca8140f..866de87 100644 --- a/wasm_module/src/hooks/useFaceLogin.js +++ b/wasm_module/src/hooks/useFaceLogin.js @@ -1,50 +1,50 @@ -import { useState } from "react"; -import { faceLogin } from "@privateid/cryptonets-web-sdk-alpha"; +import { useState } from "react" +import { faceLogin } from "@privateid/cryptonets-web-sdk-alpha" const useFaceLogin = ( element = "userVideo", onSuccess, retryTimes = 4, deviceId = null, setShowSuccess, - disableButtons + disableButtons, ) => { - const [faceLoginMessage, setFaceLoginMessage] = useState(""); + const [faceLoginMessage, setFaceLoginMessage] = useState("") - const [faceLoginAntispoofPerformed, setFaceLoginAntispoofPerformed] = useState(""); - const [faceLoginAntispoofStatus, setFaceLoginAntispoofStatus] = useState(""); - const [faceLoginValidationStatus, setFaceLoginValidationStatus] = useState(""); - const [faceLoginGUID, setFaceLoginGUID] = useState(""); - const [faceLoginPUID, setFaceLoginPUID] = useState(""); - let skipAntispoofProcess = false; + const [faceLoginAntispoofPerformed, setFaceLoginAntispoofPerformed] = useState("") + const [faceLoginAntispoofStatus, setFaceLoginAntispoofStatus] = useState("") + const [faceLoginValidationStatus, setFaceLoginValidationStatus] = useState("") + const [faceLoginGUID, setFaceLoginGUID] = useState("") + const [faceLoginPUID, setFaceLoginPUID] = useState("") + let skipAntispoofProcess = false - const callback = async (result) => { - console.log("faceLogin callback hook result:", result); + const callback = async result => { + console.log("faceLogin callback hook result:", result) if (result.guid && result.puid) { - setFaceLoginGUID(result.guid); - setFaceLoginPUID(result.puid); - setFaceLoginAntispoofStatus(result.antispoof_status); - setFaceLoginValidationStatus(result.face_validation_status); - setShowSuccess(true); - disableButtons(false); - onSuccess(); + setFaceLoginGUID(result.guid) + setFaceLoginPUID(result.puid) + setFaceLoginAntispoofStatus(result.antispoof_status) + setFaceLoginValidationStatus(result.face_validation_status) + setShowSuccess(true) + disableButtons(false) + onSuccess() } else { - setFaceLoginAntispoofStatus(result.antispoof_status); - setFaceLoginValidationStatus(result.face_validation_status); - doFaceLogin(skipAntispoofProcess, true); + setFaceLoginAntispoofStatus(result.antispoof_status) + setFaceLoginValidationStatus(result.face_validation_status) + doFaceLogin(skipAntispoofProcess, true) } - }; + } const doFaceLogin = async (skipAntispoof = true, isRunning = false) => { // eslint-disable-next-line no-unused-vars - skipAntispoofProcess = skipAntispoof; + skipAntispoofProcess = skipAntispoof if (!isRunning) { - setFaceLoginAntispoofPerformed(""); - setFaceLoginAntispoofStatus(""); - setFaceLoginValidationStatus(""); - setFaceLoginGUID(""); - setFaceLoginPUID(""); - disableButtons(true); + setFaceLoginAntispoofPerformed("") + setFaceLoginAntispoofStatus("") + setFaceLoginValidationStatus("") + setFaceLoginGUID("") + setFaceLoginPUID("") + disableButtons(true) } await faceLogin({ @@ -55,8 +55,8 @@ const useFaceLogin = ( anti_spoofing_threshold: 0.75, send_original_images: true, }, - }); - }; + }) + } return { doFaceLogin, @@ -66,7 +66,7 @@ const useFaceLogin = ( faceLoginValidationStatus, faceLoginGUID, faceLoginPUID, - }; -}; + } +} -export default useFaceLogin; +export default useFaceLogin diff --git a/wasm_module/src/hooks/useIsValid.js b/wasm_module/src/hooks/useIsValid.js index 067375e..88e7bc2 100644 --- a/wasm_module/src/hooks/useIsValid.js +++ b/wasm_module/src/hooks/useIsValid.js @@ -1,24 +1,24 @@ -import { useState } from "react"; -import { isValid } from "@privateid/cryptonets-web-sdk-alpha"; +import { useState } from "react" +import { isValid } from "@privateid/cryptonets-web-sdk-alpha" const useIsValid = (element = "userVideo", deviceId = null) => { - const [antispoofPerformed, setAntispoofPerformed] = useState(""); - const [antispoofStatus, setAntispoofStatus] = useState(""); - const [isValidStatus, setIsValidStatus] = useState(""); + const [antispoofPerformed, setAntispoofPerformed] = useState("") + const [antispoofStatus, setAntispoofStatus] = useState("") + const [isValidStatus, setIsValidStatus] = useState("") - const callback = (response) => { - console.log("isValid Response:", response); + const callback = response => { + console.log("isValid Response:", response) if (response?.call_status === 0) { - setAntispoofStatus(response?.antispoof_status); - setIsValidStatus(response?.face_validation_status); + setAntispoofStatus(response?.antispoof_status) + setIsValidStatus(response?.face_validation_status) } else { - setAntispoofPerformed(""); - setAntispoofStatus(""); - setIsValidStatus(""); + setAntispoofPerformed("") + setAntispoofStatus("") + setIsValidStatus("") } - isValidCall(); - }; + isValidCall() + } const isValidCall = async (skipAntispoof = true) => { // eslint-disable-next-line no-unused-vars @@ -27,10 +27,10 @@ const useIsValid = (element = "userVideo", deviceId = null) => { config: { input_image_format: "rgba", }, - }); - }; + }) + } - return { antispoofPerformed, antispoofStatus, isValidStatus, isValidCall }; -}; + return { antispoofPerformed, antispoofStatus, isValidStatus, isValidCall } +} -export default useIsValid; +export default useIsValid diff --git a/wasm_module/src/hooks/useLivenessCheck.js b/wasm_module/src/hooks/useLivenessCheck.js index 6a82dc4..9a4164b 100644 --- a/wasm_module/src/hooks/useLivenessCheck.js +++ b/wasm_module/src/hooks/useLivenessCheck.js @@ -1,13 +1,13 @@ -import { livenessCheck } from "@privateid/cryptonets-web-sdk-alpha"; -import { useState } from "react"; +import { livenessCheck } from "@privateid/cryptonets-web-sdk-alpha" +import { useState } from "react" -let possitiveCount = 0; -let reset = false; +let possitiveCount = 0 +let reset = false const useLivenessCheck = () => { - const [result, setResult] = useState(null); - const [resultMessage, setResultMessage] = useState(""); - const [livenessProgress, setLivenessProgress] = useState(0); - const [finalResult, setFinalResult] = useState(""); + const [result, setResult] = useState(null) + const [resultMessage, setResultMessage] = useState("") + const [livenessProgress, setLivenessProgress] = useState(0) + const [finalResult, setFinalResult] = useState("") // RESULT_GENERIC_ERROR = -100, // RESULT_INVALID_FACE = -4, @@ -17,92 +17,92 @@ const useLivenessCheck = () => { // RESULT_NO_SPOOF_DETECTED = 0, // RESULT_SPOOF_DETECTED = 1 - const livenessCheckCallback = async (res) => { - console.log("liveness result:", res); - reset = false; + const livenessCheckCallback = async res => { + console.log("liveness result:", res) + reset = false while (possitiveCount <= 40 && !reset) { - setResult(res.returnValue.result); + setResult(res.returnValue.result) switch (res.returnValue.result) { case -100: - setResultMessage("GENERIC ERROR"); - setFinalResult("FAILED"); - possitiveCount = 0; - reset = true; + setResultMessage("GENERIC ERROR") + setFinalResult("FAILED") + possitiveCount = 0 + reset = true // setTimeout(()=> { doLivenessCheck(); }, 200); - return; + return case -4: - setResultMessage("INVALID FACE"); - setFinalResult("FAILED"); - possitiveCount = 0; - reset = true; + setResultMessage("INVALID FACE") + setFinalResult("FAILED") + possitiveCount = 0 + reset = true // setTimeout(()=> { doLivenessCheck(); }, 200); - return; + return case -3: - setResultMessage("FACE TOO CLOSE TO EDGE"); - setFinalResult("FAILED"); - possitiveCount = 0; - reset = true; + setResultMessage("FACE TOO CLOSE TO EDGE") + setFinalResult("FAILED") + possitiveCount = 0 + reset = true // setTimeout(()=> { doLivenessCheck(); }, 200); - return; + return case -2: - setResultMessage("MOBILE PHONE DETECTED"); - setFinalResult("FAILED"); - possitiveCount = 0; - reset = true; + setResultMessage("MOBILE PHONE DETECTED") + setFinalResult("FAILED") + possitiveCount = 0 + reset = true // setTimeout(()=> { doLivenessCheck(); }, 200); - return; + return case -1: - setResultMessage("NO FACE DETECTED"); - setFinalResult("FAILED"); - possitiveCount = 0; - reset = true; + setResultMessage("NO FACE DETECTED") + setFinalResult("FAILED") + possitiveCount = 0 + reset = true // setTimeout(()=> { doLivenessCheck(); }, 200); - return; + return case 0: - possitiveCount++; - setResultMessage("REAL"); - const progress = Math.round(Math.min((possitiveCount * 100) / 40, 100)); - setLivenessProgress(progress); - doLivenessCheck(); - return; + possitiveCount++ + setResultMessage("REAL") + const progress = Math.round(Math.min((possitiveCount * 100) / 40, 100)) + setLivenessProgress(progress) + doLivenessCheck() + return case 1: - setResultMessage("SPOOF DETECTED"); - setFinalResult("FAILED"); - possitiveCount = 0; - reset = true; + setResultMessage("SPOOF DETECTED") + setFinalResult("FAILED") + possitiveCount = 0 + reset = true // setTimeout(()=> { doLivenessCheck(); }, 200) - return; + return default: - setResultMessage(""); - setFinalResult("Something went wrong"); - possitiveCount = 0; - reset = true; + setResultMessage("") + setFinalResult("Something went wrong") + possitiveCount = 0 + reset = true // setTimeout(()=> { doLivenessCheck(); }, 200) - return; + return } } if (possitiveCount >= 40) { - setFinalResult("Real"); + setFinalResult("Real") } if (reset) { - possitiveCount = 0; + possitiveCount = 0 } - }; + } const doLivenessCheck = async () => { - await livenessCheck(livenessCheckCallback, { input_image_format: "rgba", antispoof_face_margin: "2" }); - }; + await livenessCheck(livenessCheckCallback, { input_image_format: "rgba", antispoof_face_margin: "2" }) + } const resetAllLivenessValues = async () => { - possitiveCount = 0; - reset = false; - setResult(null); - setResultMessage(""); - setLivenessProgress(0); - setFinalResult(""); - }; + possitiveCount = 0 + reset = false + setResult(null) + setResultMessage("") + setLivenessProgress(0) + setFinalResult("") + } return { doLivenessCheck, @@ -111,7 +111,7 @@ const useLivenessCheck = () => { livenessProgress, finalResult, resetAllLivenessValues, - }; -}; + } +} -export default useLivenessCheck; +export default useLivenessCheck diff --git a/wasm_module/src/hooks/useMultiFramePredictAge.js b/wasm_module/src/hooks/useMultiFramePredictAge.js index 766320a..a6a9271 100644 --- a/wasm_module/src/hooks/useMultiFramePredictAge.js +++ b/wasm_module/src/hooks/useMultiFramePredictAge.js @@ -1,41 +1,40 @@ -import { useState } from "react"; -import { predictAge } from "@privateid/cryptonets-web-sdk-alpha"; +import { useState } from "react" +import { predictAge } from "@privateid/cryptonets-web-sdk-alpha" -let skipAntispoofGlobal = false; -let multiFrameToken = ""; +let skipAntispoofGlobal = false +let multiFrameToken = "" const useMultiFramePredictAge = () => { - const [age, setAge] = useState(null); - const [antispoofPerformed, setAntispoofPerformed] = useState(false); - const [antispoofStatus, setAntispoofStatus] = useState(""); - const [validationStatus, setValidationStatus] = useState(""); + const [age, setAge] = useState(null) + const [antispoofPerformed, setAntispoofPerformed] = useState(false) + const [antispoofStatus, setAntispoofStatus] = useState("") + const [validationStatus, setValidationStatus] = useState("") - const mfCallback = (result) => { - console.log(result); + const mfCallback = result => { + console.log(result) - if(result.age && result.age > 0){ - setAntispoofStatus(result.antispoof_status); - setValidationStatus(result.face_validation_status); - setAge(result.age); + if (result.age && result.age > 0) { + setAntispoofStatus(result.antispoof_status) + setValidationStatus(result.face_validation_status) + setAge(result.age) + } else { + setAntispoofStatus(result.antispoof_status) + setValidationStatus(result.face_validation_status) + doPredictAge(skipAntispoofGlobal, result.mf_token) } - else{ - setAntispoofStatus(result.antispoof_status); - setValidationStatus(result.face_validation_status); - doPredictAge(skipAntispoofGlobal, result.mf_token); - } - }; + } const doPredictAge = async (skipAntispoof = false, mfToken = "") => { - skipAntispoofGlobal = skipAntispoof; + skipAntispoofGlobal = skipAntispoof await predictAge({ callback: mfCallback, config: { // skip_antispoof: true, mf_token: mfToken, }, - }); - }; + }) + } - return { doPredictAge, age, antispoofPerformed, antispoofStatus, validationStatus }; -}; + return { doPredictAge, age, antispoofPerformed, antispoofStatus, validationStatus } +} -export default useMultiFramePredictAge; +export default useMultiFramePredictAge diff --git a/wasm_module/src/hooks/useMultiframePredict.js b/wasm_module/src/hooks/useMultiframePredict.js index 79ddeea..b60385b 100644 --- a/wasm_module/src/hooks/useMultiframePredict.js +++ b/wasm_module/src/hooks/useMultiframePredict.js @@ -1,63 +1,54 @@ -import { useState } from "react"; -import { predict } from "@privateid/cryptonets-web-sdk-alpha"; -import { getStatusMessage } from "@privateid/cryptonets-web-sdk-alpha/dist/utils"; +import { useState } from "react" +import { predict } from "@privateid/cryptonets-web-sdk-alpha" +import { getStatusMessage } from "@privateid/cryptonets-web-sdk-alpha/dist/utils" -let loop = true; -let skipAntispoofProcess = false; -let identifierGlobal = undefined; -let collectionNameGlobal = undefined; +let loop = true +let skipAntispoofProcess = false +let identifierGlobal = undefined +let collectionNameGlobal = undefined -const useMultiframePredict = ( - { - onSuccess, - disableButtons - } -) => { - const [multiframePredictMessage, setPredictMessage] = useState(""); +const useMultiframePredict = ({ onSuccess, disableButtons }) => { + const [multiframePredictMessage, setPredictMessage] = useState("") - const [multiframePredictAntispoofPerformed, setPredictAntispoofPerformed] = useState(""); - const [multiframePredictAntispoofStatus, setPredictAntispoofStatus] = useState(""); - const [multiframePredictValidationStatus, setPredictValidationStatus] = useState(""); - const [multiframePredictGUID, setPredictGUID] = useState(""); - const [multiframePredictPUID, setPredictPUID] = useState(""); - const [multiframePredictMfToken, setMultiframePredictMfToken] = useState(""); + const [multiframePredictAntispoofPerformed, setPredictAntispoofPerformed] = useState("") + const [multiframePredictAntispoofStatus, setPredictAntispoofStatus] = useState("") + const [multiframePredictValidationStatus, setPredictValidationStatus] = useState("") + const [multiframePredictGUID, setPredictGUID] = useState("") + const [multiframePredictPUID, setPredictPUID] = useState("") + const [multiframePredictMfToken, setMultiframePredictMfToken] = useState("") - const callback = async (result) => { - console.log("predict callback hook result:", result); + const callback = async result => { + console.log("predict callback hook result:", result) if (result.guid && result.puid) { - setPredictGUID(result.guid); - setPredictPUID(result.puid); - setPredictAntispoofStatus(result.antispoof_status); - setPredictValidationStatus(result.face_validation_status); - setPredictMessage(getStatusMessage(result.face_validation_status)); - disableButtons(false); - onSuccess(); + setPredictGUID(result.guid) + setPredictPUID(result.puid) + setPredictAntispoofStatus(result.antispoof_status) + setPredictValidationStatus(result.face_validation_status) + setPredictMessage(getStatusMessage(result.face_validation_status)) + disableButtons(false) + onSuccess() } else { - setPredictAntispoofStatus(result.antispoof_status); - setPredictValidationStatus(result.face_validation_status); - setPredictMessage(getStatusMessage(result.face_validation_status)); - if(loop){ - multiframePredictUserOneFa({mf_token:result?.mf_token}); + setPredictAntispoofStatus(result.antispoof_status) + setPredictValidationStatus(result.face_validation_status) + setPredictMessage(getStatusMessage(result.face_validation_status)) + if (loop) { + multiframePredictUserOneFa({ mf_token: result?.mf_token }) } } - }; - - const multiframePredictUserOneFa = async ({ - mf_token, } - - ) => { + + const multiframePredictUserOneFa = async ({ mf_token }) => { // skipAntispoofProcess = skipAntispoof; // collectionNameGlobal = collectionName; // identifierGlobal = identifier; // eslint-disable-next-line no-unused-vars - setPredictAntispoofPerformed(""); - setPredictAntispoofStatus(""); - setPredictValidationStatus(""); - setPredictGUID(""); - setPredictPUID(""); - disableButtons(true); + setPredictAntispoofPerformed("") + setPredictAntispoofStatus("") + setPredictValidationStatus("") + setPredictGUID("") + setPredictPUID("") + disableButtons(true) // if(image){ // loop = false; @@ -66,15 +57,15 @@ const useMultiframePredict = ( await predict({ callback, config: { - // collection_name: collectionNameGlobal, - // skip_antispoof: skipAntispoofProcess, - // identifier, - disable_predict_mf:false, + // collection_name: collectionNameGlobal, + // skip_antispoof: skipAntispoofProcess, + // identifier, + disable_predict_mf: false, mf_token: mf_token || "", }, //image: image, - }); - }; + }) + } return { multiframePredictUserOneFa, @@ -84,7 +75,7 @@ const useMultiframePredict = ( multiframePredictValidationStatus, multiframePredictGUID, multiframePredictPUID, - }; -}; + } +} -export default useMultiframePredict; +export default useMultiframePredict diff --git a/wasm_module/src/hooks/useMultiframeTwoStepFaceLogin.js b/wasm_module/src/hooks/useMultiframeTwoStepFaceLogin.js index d02d98d..5bedd11 100644 --- a/wasm_module/src/hooks/useMultiframeTwoStepFaceLogin.js +++ b/wasm_module/src/hooks/useMultiframeTwoStepFaceLogin.js @@ -1,71 +1,74 @@ -import { useState } from "react"; -import { multiframeTwoStepFaceLogin } from "@privateid/cryptonets-web-sdk-alpha"; -import { getStatusMessage } from "@privateid/cryptonets-web-sdk-alpha/dist/utils"; +import { useState } from "react" +import { multiframeTwoStepFaceLogin } from "@privateid/cryptonets-web-sdk-alpha" +import { getStatusMessage } from "@privateid/cryptonets-web-sdk-alpha/dist/utils" const useMultiframeTwoStepFaceLogin = (setShowSuccess = () => {}) => { - const [faceLoginMessage, setFaceLoginMessage] = useState(""); + const [faceLoginMessage, setFaceLoginMessage] = useState("") - const [faceLoginAntispoofPerformed, setFaceLoginAntispoofPerformed] = useState(""); - const [faceLoginAntispoofStatus, setFaceLoginAntispoofStatus] = useState(""); - const [faceLoginValidationStatus, setFaceLoginValidationStatus] = useState(""); - const [faceLoginGUID, setFaceLoginGUID] = useState(""); - const [faceLoginPUID, setFaceLoginPUID] = useState(""); - let skipAntispoofProcess = false; + const [faceLoginAntispoofPerformed, setFaceLoginAntispoofPerformed] = useState("") + const [faceLoginAntispoofStatus, setFaceLoginAntispoofStatus] = useState("") + const [faceLoginValidationStatus, setFaceLoginValidationStatus] = useState("") + const [faceLoginGUID, setFaceLoginGUID] = useState("") + const [faceLoginPUID, setFaceLoginPUID] = useState("") + let skipAntispoofProcess = false - const callback = async (result) => { - console.log("twoStepFaceLogin callback hook result:", result); + const callback = async result => { + console.log("twoStepFaceLogin callback hook result:", result) if (result?.processing) { - setFaceLoginMessage("PROCESSING ! ! !"); + setFaceLoginMessage("PROCESSING ! ! !") } else if (result?.guid && result?.puid) { - setFaceLoginMessage("Valid Face"); - setShowSuccess(true); - setFaceLoginAntispoofStatus(result?.antispoof_status); - setFaceLoginValidationStatus(result?.face_validation_status); - setFaceLoginGUID(result.guid); - setFaceLoginPUID(result.puid); + setFaceLoginMessage("Valid Face") + setShowSuccess(true) + setFaceLoginAntispoofStatus(result?.antispoof_status) + setFaceLoginValidationStatus(result?.face_validation_status) + setFaceLoginGUID(result.guid) + setFaceLoginPUID(result.puid) } else { if (result?.noFaceFound) { - setFaceLoginMessage(getStatusMessage(-1)); - setFaceLoginAntispoofStatus(result?.antispoof_status); - setFaceLoginValidationStatus(result?.face_validation_status); - setFaceLoginGUID(result.guid); - setFaceLoginPUID(result.puid); - doTwoStepFaceLogin(skipAntispoofProcess, true); + setFaceLoginMessage(getStatusMessage(-1)) + setFaceLoginAntispoofStatus(result?.antispoof_status) + setFaceLoginValidationStatus(result?.face_validation_status) + setFaceLoginGUID(result.guid) + setFaceLoginPUID(result.puid) + doTwoStepFaceLogin(skipAntispoofProcess, true) } else if (result.valid_frame) { - setFaceLoginMessage("Please hold still"); + setFaceLoginMessage("Please hold still") // setShowSuccess(true); - setFaceLoginAntispoofStatus(result?.antispoof_status); - setFaceLoginValidationStatus(result?.face_validation_status); - setFaceLoginGUID(result.guid); - setFaceLoginPUID(result.puid); - doTwoStepFaceLogin(skipAntispoofProcess, true); + setFaceLoginAntispoofStatus(result?.antispoof_status) + setFaceLoginValidationStatus(result?.face_validation_status) + setFaceLoginGUID(result.guid) + setFaceLoginPUID(result.puid) + doTwoStepFaceLogin(skipAntispoofProcess, true) } else { - setFaceLoginMessage(getStatusMessage(result?.face_validation_status)); - setFaceLoginAntispoofStatus(result?.antispoof_status); - setFaceLoginValidationStatus(result?.face_validation_status); - setFaceLoginGUID(result.guid); - setFaceLoginPUID(result.puid); - doTwoStepFaceLogin(skipAntispoofProcess, true); + setFaceLoginMessage(getStatusMessage(result?.face_validation_status)) + setFaceLoginAntispoofStatus(result?.antispoof_status) + setFaceLoginValidationStatus(result?.face_validation_status) + setFaceLoginGUID(result.guid) + setFaceLoginPUID(result.puid) + doTwoStepFaceLogin(skipAntispoofProcess, true) } } - }; + } const doTwoStepFaceLogin = async (skipAntispoof = true, isRunning = false) => { // eslint-disable-next-line no-unused-vars - skipAntispoofProcess = skipAntispoof; + skipAntispoofProcess = skipAntispoof if (!isRunning) { - setFaceLoginAntispoofPerformed(""); - setFaceLoginAntispoofStatus(""); - setFaceLoginValidationStatus(""); - setFaceLoginGUID(""); - setFaceLoginPUID(""); + setFaceLoginAntispoofPerformed("") + setFaceLoginAntispoofStatus("") + setFaceLoginValidationStatus("") + setFaceLoginGUID("") + setFaceLoginPUID("") } - await multiframeTwoStepFaceLogin({ callback, config: { - send_original_images: true, - } }); - }; + await multiframeTwoStepFaceLogin({ + callback, + config: { + send_original_images: true, + }, + }) + } return { doTwoStepFaceLogin, @@ -75,8 +78,7 @@ const useMultiframeTwoStepFaceLogin = (setShowSuccess = () => {}) => { faceLoginValidationStatus, faceLoginGUID, faceLoginPUID, - }; -}; - -export default useMultiframeTwoStepFaceLogin; + } +} +export default useMultiframeTwoStepFaceLogin diff --git a/wasm_module/src/hooks/useOscarLogin.js b/wasm_module/src/hooks/useOscarLogin.js index e07d0bb..12f69bb 100644 --- a/wasm_module/src/hooks/useOscarLogin.js +++ b/wasm_module/src/hooks/useOscarLogin.js @@ -1,64 +1,71 @@ -import { useState } from "react"; -import { faceLogin } from "@privateid/cryptonets-web-sdk-alpha"; -const useOscarLogin = (element = "userVideo", onSuccess, retryTimes = 4, deviceId = null, setShowSuccess, disableButtons) => { - const [oscarLoginMessage, setFaceLoginMessage] = useState(""); +import { useState } from "react" +import { faceLogin } from "@privateid/cryptonets-web-sdk-alpha" +const useOscarLogin = ( + element = "userVideo", + onSuccess, + retryTimes = 4, + deviceId = null, + setShowSuccess, + disableButtons, +) => { + const [oscarLoginMessage, setFaceLoginMessage] = useState("") - const [oscarLoginAntispoofPerformed, setFaceLoginAntispoofPerformed] = useState(""); - const [oscarLoginAntispoofStatus, setFaceLoginAntispoofStatus] = useState(""); - const [oscarLoginValidationStatus, setFaceLoginValidationStatus] = useState(""); - const [oscarLoginGUID, setFaceLoginGUID] = useState(""); - const [oscarLoginPUID, setFaceLoginPUID] = useState(""); - let skipAntispoofProcess = false; + const [oscarLoginAntispoofPerformed, setFaceLoginAntispoofPerformed] = useState("") + const [oscarLoginAntispoofStatus, setFaceLoginAntispoofStatus] = useState("") + const [oscarLoginValidationStatus, setFaceLoginValidationStatus] = useState("") + const [oscarLoginGUID, setFaceLoginGUID] = useState("") + const [oscarLoginPUID, setFaceLoginPUID] = useState("") + let skipAntispoofProcess = false - const callback = async (result) => { - console.log("faceLogin callback hook result:", result); + const callback = async result => { + console.log("faceLogin callback hook result:", result) switch (result.status) { case "WASM_RESPONSE": if (result.returnValue?.status === 0) { - const { message } = result.returnValue; - setFaceLoginMessage(message); - onSuccess(result.returnValue); - setShowSuccess(true); - setFaceLoginAntispoofPerformed(result.returnValue.anti_spoof_performed || ""); - setFaceLoginAntispoofStatus(result.returnValue.anti_spoof_status || ""); - setFaceLoginValidationStatus(result.returnValue.status); - setFaceLoginGUID(result.returnValue.guid); - setFaceLoginPUID(result.returnValue.puid); - disableButtons(false); + const { message } = result.returnValue + setFaceLoginMessage(message) + onSuccess(result.returnValue) + setShowSuccess(true) + setFaceLoginAntispoofPerformed(result.returnValue.anti_spoof_performed || "") + setFaceLoginAntispoofStatus(result.returnValue.anti_spoof_status || "") + setFaceLoginValidationStatus(result.returnValue.status) + setFaceLoginGUID(result.returnValue.guid) + setFaceLoginPUID(result.returnValue.puid) + disableButtons(false) } if (result.returnValue?.status !== 0) { - const { status, message } = result.returnValue; - setFaceLoginMessage(message); - setFaceLoginAntispoofPerformed(result.returnValue.anti_spoof_performed); - setFaceLoginAntispoofStatus(result.returnValue.anti_spoof_status); - setFaceLoginValidationStatus(result.returnValue.status); - setFaceLoginGUID(result.returnValue.guid); - setFaceLoginPUID(result.returnValue.puid); - doOscarLogin(skipAntispoofProcess, true); + const { status, message } = result.returnValue + setFaceLoginMessage(message) + setFaceLoginAntispoofPerformed(result.returnValue.anti_spoof_performed) + setFaceLoginAntispoofStatus(result.returnValue.anti_spoof_status) + setFaceLoginValidationStatus(result.returnValue.status) + setFaceLoginGUID(result.returnValue.guid) + setFaceLoginPUID(result.returnValue.puid) + doOscarLogin(skipAntispoofProcess, true) } - break; + break default: } - }; + } - const doOscarLogin = async (skipAntispoof=true, isRunning = false) => { + const doOscarLogin = async (skipAntispoof = true, isRunning = false) => { // eslint-disable-next-line no-unused-vars - skipAntispoofProcess = skipAntispoof; - if(!isRunning){ - setFaceLoginAntispoofPerformed(""); - setFaceLoginAntispoofStatus(""); - setFaceLoginValidationStatus(""); - setFaceLoginGUID(""); - setFaceLoginPUID(""); - disableButtons(true); + skipAntispoofProcess = skipAntispoof + if (!isRunning) { + setFaceLoginAntispoofPerformed("") + setFaceLoginAntispoofStatus("") + setFaceLoginValidationStatus("") + setFaceLoginGUID("") + setFaceLoginPUID("") + disableButtons(true) } - + await faceLogin(callback, { skipAntispoof: skipAntispoof, context_string: "oscar_login", - }); - }; + }) + } return { doOscarLogin, @@ -68,7 +75,7 @@ const useOscarLogin = (element = "userVideo", onSuccess, retryTimes = 4, deviceI oscarLoginGUID, oscarLoginPUID, oscarLoginMessage, - }; -}; + } +} -export default useOscarLogin; +export default useOscarLogin diff --git a/wasm_module/src/hooks/usePredict.js b/wasm_module/src/hooks/usePredict.js index a2ef4f4..6a62b88 100644 --- a/wasm_module/src/hooks/usePredict.js +++ b/wasm_module/src/hooks/usePredict.js @@ -1,65 +1,60 @@ -import { useState } from "react"; -import { predict } from "@privateid/cryptonets-web-sdk-alpha"; -import { getStatusMessage } from "@privateid/cryptonets-web-sdk-alpha/dist/utils"; +import { useState } from "react" +import { predict } from "@privateid/cryptonets-web-sdk-alpha" +import { getStatusMessage } from "@privateid/cryptonets-web-sdk-alpha/dist/utils" -let loop = true; -let skipAntispoofProcess = false; -let identifierGlobal = undefined; -let collectionNameGlobal = undefined; +let loop = true +let skipAntispoofProcess = false +let identifierGlobal = undefined +let collectionNameGlobal = undefined -const usePredict = ( - { - onSuccess, - disableButtons - } -) => { - const [predictMessage, setPredictMessage] = useState(""); +const usePredict = ({ onSuccess, disableButtons }) => { + const [predictMessage, setPredictMessage] = useState("") - const [predictAntispoofPerformed, setPredictAntispoofPerformed] = useState(""); - const [predictAntispoofStatus, setPredictAntispoofStatus] = useState(""); - const [predictValidationStatus, setPredictValidationStatus] = useState(""); - const [predictGUID, setPredictGUID] = useState(""); - const [predictPUID, setPredictPUID] = useState(""); + const [predictAntispoofPerformed, setPredictAntispoofPerformed] = useState("") + const [predictAntispoofStatus, setPredictAntispoofStatus] = useState("") + const [predictValidationStatus, setPredictValidationStatus] = useState("") + const [predictGUID, setPredictGUID] = useState("") + const [predictPUID, setPredictPUID] = useState("") - const callback = async (result) => { - console.log("predict callback hook result:", result); + const callback = async result => { + console.log("predict callback hook result:", result) if (result.guid && result.puid) { - setPredictGUID(result.guid); - setPredictPUID(result.puid); - setPredictAntispoofStatus(result.antispoof_status); - setPredictValidationStatus(result.face_validation_status); - setPredictMessage(getStatusMessage(result.face_validation_status)); - disableButtons(false); - onSuccess(); + setPredictGUID(result.guid) + setPredictPUID(result.puid) + setPredictAntispoofStatus(result.antispoof_status) + setPredictValidationStatus(result.face_validation_status) + setPredictMessage(getStatusMessage(result.face_validation_status)) + disableButtons(false) + onSuccess() } else { - setPredictAntispoofStatus(result.antispoof_status); - setPredictValidationStatus(result.face_validation_status); - if(loop){ - predictUserOneFa(skipAntispoofProcess, collectionNameGlobal, identifierGlobal); + setPredictAntispoofStatus(result.antispoof_status) + setPredictValidationStatus(result.face_validation_status) + if (loop) { + predictUserOneFa(skipAntispoofProcess, collectionNameGlobal, identifierGlobal) } } - }; + } const predictUserOneFa = async ( skipAntispoof = false, collectionName = undefined, identifier = undefined, - image = undefined + image = undefined, ) => { - skipAntispoofProcess = skipAntispoof; - collectionNameGlobal = collectionName; - identifierGlobal = identifier; + skipAntispoofProcess = skipAntispoof + collectionNameGlobal = collectionName + identifierGlobal = identifier // eslint-disable-next-line no-unused-vars - setPredictAntispoofPerformed(""); - setPredictAntispoofStatus(""); - setPredictValidationStatus(""); - setPredictGUID(""); - setPredictPUID(""); - disableButtons(true); + setPredictAntispoofPerformed("") + setPredictAntispoofStatus("") + setPredictValidationStatus("") + setPredictGUID("") + setPredictPUID("") + disableButtons(true) - if(image){ - loop = false; + if (image) { + loop = false } await predict({ @@ -70,8 +65,8 @@ const usePredict = ( identifier, }, image: image, - }); - }; + }) + } return { predictUserOneFa, @@ -81,7 +76,7 @@ const usePredict = ( predictValidationStatus, predictGUID, predictPUID, - }; -}; + } +} -export default usePredict; +export default usePredict diff --git a/wasm_module/src/hooks/usePredictAge.js b/wasm_module/src/hooks/usePredictAge.js index 49c2970..56dbcad 100644 --- a/wasm_module/src/hooks/usePredictAge.js +++ b/wasm_module/src/hooks/usePredictAge.js @@ -1,15 +1,15 @@ -import { useState } from "react"; -import { predictAge } from "@privateid/cryptonets-web-sdk-alpha"; +import { useState } from "react" +import { predictAge } from "@privateid/cryptonets-web-sdk-alpha" -let skipAntispoofGlobal = false; +let skipAntispoofGlobal = false const usePredictAge = () => { - const [age, setAge] = useState(null); - const [antispoofPerformed, setAntispoofPerformed] = useState(false); - const [antispoofStatus, setAntispoofStatus] = useState(""); - const [validationStatus, setValidationStatus] = useState(""); + const [age, setAge] = useState(null) + const [antispoofPerformed, setAntispoofPerformed] = useState(false) + const [antispoofStatus, setAntispoofStatus] = useState("") + const [validationStatus, setValidationStatus] = useState("") - const callback = (response) => { - console.log("predict Age Callback", response); + const callback = response => { + console.log("predict Age Callback", response) // if (response?.returnValue?.faces.length > 0) { // setAge(response?.returnValue?.faces[0].age); @@ -24,20 +24,20 @@ const usePredictAge = () => { // } // doPredictAge(skipAntispoofGlobal); - }; + } const doPredictAge = async (skipAntispoof = false) => { - skipAntispoofGlobal = skipAntispoof; + skipAntispoofGlobal = skipAntispoof await predictAge({ callback, config: { skip_antispoof: true, mf_count: 1, }, - }); - }; + }) + } - return { doPredictAge, age, antispoofPerformed, antispoofStatus, validationStatus }; -}; + return { doPredictAge, age, antispoofPerformed, antispoofStatus, validationStatus } +} -export default usePredictAge; +export default usePredictAge diff --git a/wasm_module/src/hooks/usePrividFaceISO.js b/wasm_module/src/hooks/usePrividFaceISO.js index caf9233..ec6e1c5 100644 --- a/wasm_module/src/hooks/usePrividFaceISO.js +++ b/wasm_module/src/hooks/usePrividFaceISO.js @@ -1,54 +1,54 @@ -import { useEffect, useState } from "react"; -import { faceISO, convertCroppedImage } from "@privateid/cryptonets-web-sdk-alpha"; +import { useEffect, useState } from "react" +import { faceISO, convertCroppedImage } from "@privateid/cryptonets-web-sdk-alpha" -let loop = true; +let loop = true const usePrividFaceISO = () => { - const [faceISOData, setFaceISOData] = useState(null); - const [faceISOHeight, setFaceISOHeight] = useState(null); - const [faceISOWidth, setFaceISOWidth] = useState(null); - const [isSuccess, setIsSuccess] = useState(false); - const [faceISOImageData, setFaceISOImageData] = useState(null); - const [inputImage, setInputImage] = useState(null); - const [faceISOStatus, setFaceISOStatus] = useState(null); + const [faceISOData, setFaceISOData] = useState(null) + const [faceISOHeight, setFaceISOHeight] = useState(null) + const [faceISOWidth, setFaceISOWidth] = useState(null) + const [isSuccess, setIsSuccess] = useState(false) + const [faceISOImageData, setFaceISOImageData] = useState(null) + const [inputImage, setInputImage] = useState(null) + const [faceISOStatus, setFaceISOStatus] = useState(null) - const [faceISOError, setFaceISOError] = useState(null); + const [faceISOError, setFaceISOError] = useState(null) - const faceISOCallback = (response) => { - console.log("==========> FACE_ISO_RESPONSE", response); + const faceISOCallback = response => { + console.log("==========> FACE_ISO_RESPONSE", response) try { - setFaceISOStatus(response.returnValue.status); - setFaceISOError(response.returnValue.error); + setFaceISOStatus(response.returnValue.status) + setFaceISOError(response.returnValue.error) } catch (e) { - setFaceISOStatus(null); + setFaceISOStatus(null) } if (response.returnValue) { if (response.returnValue.status === 0) { - setFaceISOError(response.returnValue.error); - setFaceISOHeight(response.returnValue.iso_image_height); - setFaceISOWidth(response.returnValue.iso_image_width); + setFaceISOError(response.returnValue.error) + setFaceISOHeight(response.returnValue.iso_image_height) + setFaceISOWidth(response.returnValue.iso_image_width) // setInputImage(response.portrait); - setIsSuccess(true); + setIsSuccess(true) } else { - setFaceISOHeight(null); - setFaceISOWidth(null); - setFaceISOData(null); - setIsSuccess(false); - setInputImage(null); + setFaceISOHeight(null) + setFaceISOWidth(null) + setFaceISOData(null) + setIsSuccess(false) + setInputImage(null) } if (loop) { - doFaceISO(); + doFaceISO() } } - }; + } const convertImage = async (imageData, width, height, setState) => { if (imageData.length === width * height * 4) { - const convertedImage = await convertCroppedImage(imageData, width, height); - setState(convertedImage); + const convertedImage = await convertCroppedImage(imageData, width, height) + setState(convertedImage) } else { - console.log("CANNOT PROCESS DUE TO HEIGHT AND WIDTH ISSUE!!"); + console.log("CANNOT PROCESS DUE TO HEIGHT AND WIDTH ISSUE!!") } - }; + } useEffect(() => { if (isSuccess && faceISOData && faceISOWidth && faceISOHeight) { @@ -56,29 +56,29 @@ const usePrividFaceISO = () => { faceISOData, faceISOWidth, faceISOHeight, - }); - convertImage(faceISOData, faceISOWidth, faceISOHeight, setFaceISOImageData); + }) + convertImage(faceISOData, faceISOWidth, faceISOHeight, setFaceISOImageData) } - }, [isSuccess, faceISOData, faceISOWidth, faceISOHeight]); + }, [isSuccess, faceISOData, faceISOWidth, faceISOHeight]) useEffect(() => { - console.log("IMAGE RESULT", { faceISOImageData }); - }, [faceISOImageData]); + console.log("IMAGE RESULT", { faceISOImageData }) + }, [faceISOImageData]) const doFaceISO = async (functionLoop = true) => { - loop = functionLoop; + loop = functionLoop const { imageOutput } = await faceISO({ callback: faceISOCallback, config: { input_image_format: "rgba", skip_antispoof: true, }, - }); + }) // console.log("FACE ISO RESULT:", { result, imageOutput }); - setFaceISOData(imageOutput); - }; + setFaceISOData(imageOutput) + } - return { doFaceISO, inputImage, faceISOImageData, faceISOStatus, faceISOError }; -}; + return { doFaceISO, inputImage, faceISOImageData, faceISOStatus, faceISOError } +} -export default usePrividFaceISO; +export default usePrividFaceISO diff --git a/wasm_module/src/hooks/useScanBackDocument.js b/wasm_module/src/hooks/useScanBackDocument.js index 3d27d46..3b2143d 100644 --- a/wasm_module/src/hooks/useScanBackDocument.js +++ b/wasm_module/src/hooks/useScanBackDocument.js @@ -1,73 +1,69 @@ -import { useEffect, useState } from "react"; -import { convertCroppedImage, backScanDocument } from "@privateid/cryptonets-web-sdk-alpha"; -import { CANVAS_SIZE } from "../utils"; +import { useEffect, useState } from "react" +import { convertCroppedImage, backScanDocument } from "@privateid/cryptonets-web-sdk-alpha" +import { CANVAS_SIZE } from "../utils" -let internalCanvasSize; -let loop = true; -const useScanBackDocument = (setShowSuccess) => { - const [scannedCodeData, setScannedCodeData] = useState(null); - const [isFound, setIsFound] = useState(false); +let internalCanvasSize +let loop = true +const useScanBackDocument = setShowSuccess => { + const [scannedCodeData, setScannedCodeData] = useState(null) + const [isFound, setIsFound] = useState(false) // Input image - const [inputImageData, setInputImageData] = useState(null); - const [inputImage, setInputImage] = useState(null); + const [inputImageData, setInputImageData] = useState(null) + const [inputImage, setInputImage] = useState(null) // Cropped Document - const [croppedDocumentImageData, setCroppedDocumentImageData] = useState(null); - const [croppedDocumentImage, setCroppedDocumentImage] = useState(null); + const [croppedDocumentImageData, setCroppedDocumentImageData] = useState(null) + const [croppedDocumentImage, setCroppedDocumentImage] = useState(null) // Cropped Barcode - const [croppedBarcodeImageData, setCroppedBarcodeImageData] = useState(null); - const [croppedBarcodeImage, setCroppedBarcodeImage] = useState(null); + const [croppedBarcodeImageData, setCroppedBarcodeImageData] = useState(null) + const [croppedBarcodeImage, setCroppedBarcodeImage] = useState(null) - const [barcodeStatusCode, setBarcodeStatusCode] = useState(null); - const [returnValue, setResultValue] = useState(null); + const [barcodeStatusCode, setBarcodeStatusCode] = useState(null) + const [returnValue, setResultValue] = useState(null) - const documentCallback = (result) => { - console.log("--------- Back scan callback result:", result); + const documentCallback = result => { + console.log("--------- Back scan callback result:", result) - if(result.barcode_scan){ + if (result.barcode_scan) { if (result.barcode_detection_status === 0) { - setBarcodeStatusCode(0); - setIsFound(true); - setResultValue(result); - setScannedCodeData(result); + setBarcodeStatusCode(0) + setIsFound(true) + setResultValue(result) + setScannedCodeData(result) } else { - setBarcodeStatusCode(result.document_validation_status || result.barcode_detection_status); - doScanBackDocument(); + setBarcodeStatusCode(result.document_validation_status || result.barcode_detection_status) + doScanBackDocument() } - } - else{ - if(result.doc_validation_status === 0){ - setBarcodeStatusCode(0); - setIsFound(true); - setResultValue(result); - setScannedCodeData(result); - } - else{ - setBarcodeStatusCode(result.doc_validation_status); - doScanBackDocument(); + } else { + if (result.doc_validation_status === 0) { + setBarcodeStatusCode(0) + setIsFound(true) + setResultValue(result) + setScannedCodeData(result) + } else { + setBarcodeStatusCode(result.doc_validation_status) + doScanBackDocument() } } - - - }; + } const doConvert = async (message, imageData) => { try { if (imageData.data.length === imageData.width * imageData.height * 4) { - const b64Converted = await convertCroppedImage(imageData.data, imageData.width, imageData.height); - console.log(`${message}`, b64Converted); - return b64Converted; + const b64Converted = await convertCroppedImage(imageData.data, imageData.width, imageData.height) + console.log(`${message}`, b64Converted) + return b64Converted } } catch (e) { - console.log(e); + console.log(e) } - }; + } useEffect(() => { if (isFound && croppedDocumentImageData && returnValue) { - console.log("cropped document start: ", { isFound, croppedDocumentImageData, returnValue }); + console.log("cropped document start: ", { isFound, croppedDocumentImageData, returnValue }) if (croppedDocumentImageData?.length && returnValue?.cropped_document?.width) { if ( croppedDocumentImageData.length === @@ -76,25 +72,25 @@ const useScanBackDocument = (setShowSuccess) => { const image = new ImageData( croppedDocumentImageData, returnValue.cropped_document.width, - returnValue.cropped_document.height - ); - console.log("cropped document image:", image); - setCroppedDocumentImageData(image); + returnValue.cropped_document.height, + ) + console.log("cropped document image:", image) + setCroppedDocumentImageData(image) if (image?.data?.length) { - const b64 = doConvert("cropped document image:", image); - setCroppedDocumentImage(b64); + const b64 = doConvert("cropped document image:", image) + setCroppedDocumentImage(b64) } } } } - }, [isFound, croppedDocumentImageData, returnValue]); + }, [isFound, croppedDocumentImageData, returnValue]) useEffect(() => { if (isFound && croppedBarcodeImageData && returnValue) { - console.log("cropped barcode start: ", { isFound, croppedBarcodeImageData, returnValue }); - console.log("data length:", croppedBarcodeImageData?.length); + console.log("cropped barcode start: ", { isFound, croppedBarcodeImageData, returnValue }) + console.log("data length:", croppedBarcodeImageData?.length) if (croppedBarcodeImageData?.length && returnValue?.cropped_barcode?.width) { - console.log("converting?"); + console.log("converting?") if ( croppedBarcodeImageData.length === returnValue.cropped_barcode.width * returnValue.cropped_barcode.height * 4 @@ -102,27 +98,27 @@ const useScanBackDocument = (setShowSuccess) => { const image = new ImageData( croppedBarcodeImageData, returnValue.cropped_barcode.width, - returnValue.cropped_barcode.height - ); - console.log("cropped barcode image:", image); - setCroppedDocumentImageData(image); + returnValue.cropped_barcode.height, + ) + console.log("cropped barcode image:", image) + setCroppedDocumentImageData(image) if (image?.data?.length) { - const b64 = doConvert("cropped barcode image:", image); - setCroppedDocumentImage(b64); + const b64 = doConvert("cropped barcode image:", image) + setCroppedDocumentImage(b64) } } } } - }, [isFound, croppedBarcodeImageData, returnValue]); + }, [isFound, croppedBarcodeImageData, returnValue]) useEffect(() => { if (isFound && inputImageData) { if (isFound && inputImageData?.data?.length) { - const b64 = doConvert("input image:", inputImageData); - setCroppedDocumentImage(b64); + const b64 = doConvert("input image:", inputImageData) + setCroppedDocumentImage(b64) } } - }, [isFound, inputImageData]); + }, [isFound, inputImageData]) const doScanBackDocument = async (canvasSize, functionLoop = false, uploadData = undefined) => { // const canvasObj = canvasSize ? CANVAS_SIZE[canvasSize] : internalCanvasSize ? CANVAS_SIZE[internalCanvasSize] : {}; @@ -139,25 +135,25 @@ const useScanBackDocument = (setShowSuccess) => { fingers_over_document_threshold: 0.3, barcode_margin: 0.1, }, - }); - console.log({ croppedBarcode, croppedDocument, imageData }); - setCroppedBarcodeImageData(croppedBarcode); - setCroppedDocumentImageData(croppedDocument); - setInputImageData(imageData); - }; + }) + console.log({ croppedBarcode, croppedDocument, imageData }) + setCroppedBarcodeImageData(croppedBarcode) + setCroppedDocumentImageData(croppedDocument) + setInputImageData(imageData) + } const clearStatusBackScan = () => { - setIsFound(false); - setScannedCodeData(null); - setInputImageData(null); - setInputImage(null); - setCroppedDocumentImageData(null); - setCroppedDocumentImage(null); - setCroppedBarcodeImageData(null); - setCroppedBarcodeImage(null); - setBarcodeStatusCode(null); - setResultValue(null); - }; + setIsFound(false) + setScannedCodeData(null) + setInputImageData(null) + setInputImage(null) + setCroppedDocumentImageData(null) + setCroppedDocumentImage(null) + setCroppedBarcodeImageData(null) + setCroppedBarcodeImage(null) + setBarcodeStatusCode(null) + setResultValue(null) + } return { scanBackDocument: doScanBackDocument, @@ -167,7 +163,7 @@ const useScanBackDocument = (setShowSuccess) => { croppedBarcodeImage, barcodeStatusCode, clearStatusBackScan, - }; -}; + } +} -export default useScanBackDocument; +export default useScanBackDocument diff --git a/wasm_module/src/hooks/useScanFrontDocument.js b/wasm_module/src/hooks/useScanFrontDocument.js index e26d631..792b435 100644 --- a/wasm_module/src/hooks/useScanFrontDocument.js +++ b/wasm_module/src/hooks/useScanFrontDocument.js @@ -1,100 +1,100 @@ -import { useEffect, useState } from "react"; -import { convertCroppedImage, scanFrontDocument as scanFrontDocumentModule } from "@privateid/cryptonets-web-sdk-alpha"; - -let loop = true; -const useScanFrontDocumentWithoutPredict = (setShowSuccess) => { - const [scanResult, setScanResult] = useState(null); - const [scannedIdData, setScannedIdData] = useState(null); - const [isFound, setIsFound] = useState(false); - const [isMugshotFound, setIsMugshotFound] = useState(null); - const [inputImageData, setInputImageData] = useState(null); - const [inputImage, setInputImage] = useState(null); +import { useEffect, useState } from "react" +import { convertCroppedImage, scanFrontDocument as scanFrontDocumentModule } from "@privateid/cryptonets-web-sdk-alpha" + +let loop = true +const useScanFrontDocumentWithoutPredict = setShowSuccess => { + const [scanResult, setScanResult] = useState(null) + const [scannedIdData, setScannedIdData] = useState(null) + const [isFound, setIsFound] = useState(false) + const [isMugshotFound, setIsMugshotFound] = useState(null) + const [inputImageData, setInputImageData] = useState(null) + const [inputImage, setInputImage] = useState(null) // Getting mugshot from document scan - const [predictMugshotRaw, setPredictMugshotRaw] = useState(null); - const [predictMugshotImageData, setPredictMugshotImageData] = useState(null); - const [predictMugshotImage, setPredictMugshotImage] = useState(null); + const [predictMugshotRaw, setPredictMugshotRaw] = useState(null) + const [predictMugshotImageData, setPredictMugshotImageData] = useState(null) + const [predictMugshotImage, setPredictMugshotImage] = useState(null) // Cropped Front Document - const [croppedDocumentImageData, setCroppedDocumentImageData] = useState(null); - const [croppedDocumentImage, setCroppedDocumentImage] = useState(null); - const [returnValue, setResultValue] = useState(null); + const [croppedDocumentImageData, setCroppedDocumentImageData] = useState(null) + const [croppedDocumentImage, setCroppedDocumentImage] = useState(null) + const [returnValue, setResultValue] = useState(null) - const [frontScanData, setFrontScanData] = useState(null); + const [frontScanData, setFrontScanData] = useState(null) - const documentCallback = (result) => { - console.log("Front scan callback result:", result); - setFrontScanData(result); - setScanResult(result.doc_validation_status); + const documentCallback = result => { + console.log("Front scan callback result:", result) + setFrontScanData(result) + setScanResult(result.doc_validation_status) if (result.doc_validation_status === 0) { - setIsFound(true); - setResultValue(result); + setIsFound(true) + setResultValue(result) } else { - scanFrontDocument(); + scanFrontDocument() } - }; + } const doConvert = async (message, imageData) => { try { if (imageData.data.length === imageData.width * imageData.height * 4) { - const b64Converted = await convertCroppedImage(imageData.data, imageData.width, imageData.height); - console.log(`${message}`, b64Converted); - return b64Converted; + const b64Converted = await convertCroppedImage(imageData.data, imageData.width, imageData.height) + console.log(`${message}`, b64Converted) + return b64Converted } } catch (e) { - console.log(e); + console.log(e) } - }; + } // Cropped Document useEffect(() => { if (isFound && croppedDocumentImageData && returnValue) { - if (croppedDocumentImageData?.length && returnValue?.cropped_document?.width) { + if (croppedDocumentImageData?.length && returnValue?.cropped_document?.width) { const image = new ImageData( croppedDocumentImageData, returnValue.cropped_document.width, - returnValue.cropped_document.height - ); - console.log("cropped document image:", image); - setCroppedDocumentImageData(image); + returnValue.cropped_document.height, + ) + console.log("cropped document image:", image) + setCroppedDocumentImageData(image) if (image?.data?.length) { - const b64 = doConvert("cropped document image:", image); + const b64 = doConvert("cropped document image:", image) setCroppedDocumentImage(b64) } } } - }, [isFound, croppedDocumentImageData, returnValue]); + }, [isFound, croppedDocumentImageData, returnValue]) useEffect(() => { if (isFound && predictMugshotRaw && returnValue) { - console.log("before converting:", { isFound, predictMugshotRaw, returnValue }); - console.log("w x h", { w: returnValue?.cropped_mugshot?.width, h: returnValue.cropped_mugshot.height }); + console.log("before converting:", { isFound, predictMugshotRaw, returnValue }) + console.log("w x h", { w: returnValue?.cropped_mugshot?.width, h: returnValue.cropped_mugshot.height }) const image = new ImageData( predictMugshotRaw, returnValue.cropped_mugshot.width, - returnValue.cropped_mugshot.height - ); - console.log("MugshotImageData", image); - setPredictMugshotImageData(image); - setIsMugshotFound(true); + returnValue.cropped_mugshot.height, + ) + console.log("MugshotImageData", image) + setPredictMugshotImageData(image) + setIsMugshotFound(true) if (image?.data?.length) { - const b64 = doConvert("cropped mugshot image:", image); + const b64 = doConvert("cropped mugshot image:", image) setPredictMugshotImage(b64) } } - }, [isFound, predictMugshotRaw, returnValue]); + }, [isFound, predictMugshotRaw, returnValue]) // Cropped Document useEffect(() => { if (isFound && inputImageData) { if (inputImage?.data?.lengh) { - doConvert(inputImageData); + doConvert(inputImageData) } } - }, [isFound, inputImageData]); + }, [isFound, inputImageData]) const scanFrontDocument = async (functionLoop = true, uploadData = undefined) => { - loop = functionLoop; + loop = functionLoop const { result: resultData, croppedDocument, @@ -105,16 +105,16 @@ const useScanFrontDocumentWithoutPredict = (setShowSuccess) => { image: uploadData, config: { blur_threshold_doc: 1450, - } - }); + }, + }) - setPredictMugshotRaw(croppedMugshot); - setCroppedDocumentImageData(croppedDocument); - setInputImageData(imageData); - console.log(croppedDocument, croppedMugshot, imageData); + setPredictMugshotRaw(croppedMugshot) + setCroppedDocumentImageData(croppedDocument) + setInputImageData(imageData) + console.log(croppedDocument, croppedMugshot, imageData) - console.log("Validate DL", resultData); - }; + console.log("Validate DL", resultData) + } return { scanResult, @@ -126,9 +126,7 @@ const useScanFrontDocumentWithoutPredict = (setShowSuccess) => { predictMugshotImage, croppedDocumentImage, frontScanData, - }; -}; - -export default useScanFrontDocumentWithoutPredict; - + } +} +export default useScanFrontDocumentWithoutPredict diff --git a/wasm_module/src/hooks/useScanFrontDocumentOCR.js b/wasm_module/src/hooks/useScanFrontDocumentOCR.js index edc877a..6a4077d 100644 --- a/wasm_module/src/hooks/useScanFrontDocumentOCR.js +++ b/wasm_module/src/hooks/useScanFrontDocumentOCR.js @@ -1,102 +1,102 @@ -import { useEffect, useState } from "react"; -import { convertCroppedImage, scanFrontDocument as scanFrontDocumentModule } from "@privateid/cryptonets-web-sdk-alpha"; +import { useEffect, useState } from "react" +import { convertCroppedImage, scanFrontDocument as scanFrontDocumentModule } from "@privateid/cryptonets-web-sdk-alpha" -let loop = true; -const useScanFrontDocumentOCR = (setShowSuccess) => { - const [scanResult, setScanResult] = useState(null); - const [scannedIdData, setScannedIdData] = useState(null); - const [isFound, setIsFound] = useState(false); - const [isMugshotFound, setIsMugshotFound] = useState(null); - const [inputImageData, setInputImageData] = useState(null); - const [inputImage, setInputImage] = useState(null); +let loop = true +const useScanFrontDocumentOCR = setShowSuccess => { + const [scanResult, setScanResult] = useState(null) + const [scannedIdData, setScannedIdData] = useState(null) + const [isFound, setIsFound] = useState(false) + const [isMugshotFound, setIsMugshotFound] = useState(null) + const [inputImageData, setInputImageData] = useState(null) + const [inputImage, setInputImage] = useState(null) // Getting mugshot from document scan - const [predictMugshotRaw, setPredictMugshotRaw] = useState(null); - const [predictMugshotImageData, setPredictMugshotImageData] = useState(null); - const [predictMugshotImage, setPredictMugshotImage] = useState(null); + const [predictMugshotRaw, setPredictMugshotRaw] = useState(null) + const [predictMugshotImageData, setPredictMugshotImageData] = useState(null) + const [predictMugshotImage, setPredictMugshotImage] = useState(null) // Cropped Front Document - const [croppedDocumentImageData, setCroppedDocumentImageData] = useState(null); - const [croppedDocumentImage, setCroppedDocumentImage] = useState(null); - const [returnValue, setResultValue] = useState(null); + const [croppedDocumentImageData, setCroppedDocumentImageData] = useState(null) + const [croppedDocumentImage, setCroppedDocumentImage] = useState(null) + const [returnValue, setResultValue] = useState(null) - const [frontScanData, setFrontScanData] = useState(null); - const [ageOCR, setAge] = useState(null); + const [frontScanData, setFrontScanData] = useState(null) + const [ageOCR, setAge] = useState(null) - const documentCallback = (result) => { - console.log("Front scan callback result:", result); - setFrontScanData(result); + const documentCallback = result => { + console.log("Front scan callback result:", result) + setFrontScanData(result) if (result.doc_validation_status === 0 && result.age_from_ocr_text) { - console.log(result.age_from_ocr_text, '------result.age_from_ocr_text------') + console.log(result.age_from_ocr_text, "------result.age_from_ocr_text------") setAge(result.age_from_ocr_text) - setIsFound(true); - setResultValue(result); + setIsFound(true) + setResultValue(result) } else { - scanFrontDocument(); + scanFrontDocument() } - }; + } const doConvert = async (message, imageData) => { try { if (imageData.data.length === imageData.width * imageData.height * 4) { - const b64Converted = await convertCroppedImage(imageData.data, imageData.width, imageData.height); - console.log(`${message}`, b64Converted); - return b64Converted; + const b64Converted = await convertCroppedImage(imageData.data, imageData.width, imageData.height) + console.log(`${message}`, b64Converted) + return b64Converted } } catch (e) { - console.log(e); + console.log(e) } - }; + } // Cropped Document useEffect(() => { if (isFound && croppedDocumentImageData && returnValue) { - if (croppedDocumentImageData?.length && returnValue?.cropped_document?.width) { + if (croppedDocumentImageData?.length && returnValue?.cropped_document?.width) { const image = new ImageData( - croppedDocumentImageData, - returnValue.cropped_document.width, - returnValue.cropped_document.height - ); - console.log("cropped document image:", image); - setCroppedDocumentImageData(image); + croppedDocumentImageData, + returnValue.cropped_document.width, + returnValue.cropped_document.height, + ) + console.log("cropped document image:", image) + setCroppedDocumentImageData(image) if (image?.data?.length) { - const b64 = doConvert("cropped document image:", image); + const b64 = doConvert("cropped document image:", image) setCroppedDocumentImage(b64) } } } - }, [isFound, croppedDocumentImageData, returnValue]); + }, [isFound, croppedDocumentImageData, returnValue]) useEffect(() => { if (isFound && predictMugshotRaw && returnValue) { - console.log("before converting:", { isFound, predictMugshotRaw, returnValue }); - console.log("w x h", { w: returnValue?.cropped_mugshot?.width, h: returnValue.cropped_mugshot.height }); + console.log("before converting:", { isFound, predictMugshotRaw, returnValue }) + console.log("w x h", { w: returnValue?.cropped_mugshot?.width, h: returnValue.cropped_mugshot.height }) const image = new ImageData( - predictMugshotRaw, - returnValue.cropped_mugshot.width, - returnValue.cropped_mugshot.height - ); - console.log("MugshotImageData", image); - setPredictMugshotImageData(image); - setIsMugshotFound(true); + predictMugshotRaw, + returnValue.cropped_mugshot.width, + returnValue.cropped_mugshot.height, + ) + console.log("MugshotImageData", image) + setPredictMugshotImageData(image) + setIsMugshotFound(true) if (image?.data?.length) { - const b64 = doConvert("cropped mugshot image:", image); + const b64 = doConvert("cropped mugshot image:", image) setPredictMugshotImage(b64) } } - }, [isFound, predictMugshotRaw, returnValue]); + }, [isFound, predictMugshotRaw, returnValue]) // Cropped Document useEffect(() => { if (isFound && inputImageData) { if (inputImage?.data?.lengh) { - doConvert(inputImageData); + doConvert(inputImageData) } } - }, [isFound, inputImageData]); + }, [isFound, inputImageData]) const scanFrontDocument = async (functionLoop = true, uploadData = undefined) => { - loop = functionLoop; + loop = functionLoop const { result: resultData, croppedDocument, @@ -106,17 +106,17 @@ const useScanFrontDocumentOCR = (setShowSuccess) => { callback: documentCallback, image: uploadData, config: { - calculate_age_from_ocr_text: true - } - }); + calculate_age_from_ocr_text: true, + }, + }) - setPredictMugshotRaw(croppedMugshot); - setCroppedDocumentImageData(croppedDocument); - setInputImageData(imageData); - console.log(croppedDocument, croppedMugshot, imageData); + setPredictMugshotRaw(croppedMugshot) + setCroppedDocumentImageData(croppedDocument) + setInputImageData(imageData) + console.log(croppedDocument, croppedMugshot, imageData) - console.log("Validate DL", resultData); - }; + console.log("Validate DL", resultData) + } return { scanResult, @@ -128,8 +128,8 @@ const useScanFrontDocumentOCR = (setShowSuccess) => { predictMugshotImage, croppedDocumentImage, frontScanData, - ageOCR - }; -}; + ageOCR, + } +} -export default useScanFrontDocumentOCR; +export default useScanFrontDocumentOCR diff --git a/wasm_module/src/hooks/useScanHealthcareCard.js b/wasm_module/src/hooks/useScanHealthcareCard.js index d5ea9fe..be19b0c 100644 --- a/wasm_module/src/hooks/useScanHealthcareCard.js +++ b/wasm_module/src/hooks/useScanHealthcareCard.js @@ -1,35 +1,35 @@ -import { convertCroppedImage, scanHealthcareCard } from "@privateid/cryptonets-web-sdk-alpha"; -import React, { useEffect, useState } from "react"; -let scanOnce = false; +import { convertCroppedImage, scanHealthcareCard } from "@privateid/cryptonets-web-sdk-alpha" +import React, { useEffect, useState } from "react" +let scanOnce = false const useScanHealthcareCard = (setShowSuccess = () => {}) => { // cropped document base 64 - const [croppedDocumentBase64, setCroppedDocumentBase64] = useState(null); + const [croppedDocumentBase64, setCroppedDocumentBase64] = useState(null) - const [scanHealthcareCardSuccess, setScanHealthcareCardSuccess] = useState(false); + const [scanHealthcareCardSuccess, setScanHealthcareCardSuccess] = useState(false) // Data - const [croppedDocumentImageData, setCroppedDocumentImageData] = useState(null); - const [croppedDocumentHeight, setCroppedDocumentHeight] = useState(null); - const [croppedDocumentWidth, setCroppedDocumentWidth] = useState(null); + const [croppedDocumentImageData, setCroppedDocumentImageData] = useState(null) + const [croppedDocumentHeight, setCroppedDocumentHeight] = useState(null) + const [croppedDocumentWidth, setCroppedDocumentWidth] = useState(null) // input image base 64 - const [inputImageBase64, setTnputImageBase64] = useState(null); + const [inputImageBase64, setTnputImageBase64] = useState(null) // Data - const [inputImageData, setInputImageData] = useState(null); - const [inputImagetHeight, setInputImagetHeight] = useState(null); - const [inputImageWidth, setInputImageWidth] = useState(null); + const [inputImageData, setInputImageData] = useState(null) + const [inputImagetHeight, setInputImagetHeight] = useState(null) + const [inputImageWidth, setInputImageWidth] = useState(null) const doConvert = async (data, width, height, setState = () => {}, messege = "Image:") => { try { if (width * height * 4 === data.length) { - const result = await convertCroppedImage(data, width, height); - console.log(messege, result); - setState(result); + const result = await convertCroppedImage(data, width, height) + console.log(messege, result) + setState(result) } } catch (e) { - console.log(e); + console.log(e) } - }; + } useEffect(() => { if ((scanHealthcareCardSuccess, croppedDocumentImageData && croppedDocumentHeight && croppedDocumentWidth)) { @@ -38,24 +38,24 @@ const useScanHealthcareCard = (setShowSuccess = () => {}) => { croppedDocumentWidth, croppedDocumentHeight, setCroppedDocumentBase64, - "croppedDocument: " - ); + "croppedDocument: ", + ) } - }, [scanHealthcareCardSuccess, croppedDocumentImageData, croppedDocumentHeight, croppedDocumentWidth]); + }, [scanHealthcareCardSuccess, croppedDocumentImageData, croppedDocumentHeight, croppedDocumentWidth]) useEffect(() => { if ((scanHealthcareCardSuccess, inputImageData && inputImagetHeight && inputImageWidth)) { - doConvert(inputImageData, inputImageWidth, inputImagetHeight, setInputImageData, "inputImage: "); + doConvert(inputImageData, inputImageWidth, inputImagetHeight, setInputImageData, "inputImage: ") } - }, [scanHealthcareCardSuccess, inputImageData, inputImagetHeight, inputImageWidth]); + }, [scanHealthcareCardSuccess, inputImageData, inputImagetHeight, inputImageWidth]) - const callback = (result) => { - console.log("Healthcare Card Scan Result:", result); + const callback = result => { + console.log("Healthcare Card Scan Result:", result) - console.log("======= Healthcare Card Scan Result: =================="); - console.log("result.returnValue.conf_level : " + result.returnValue.conf_level); - console.log("result.returnValue.op_status: " + result.returnValue.op_status); - console.log("======================================================"); + console.log("======= Healthcare Card Scan Result: ==================") + console.log("result.returnValue.conf_level : " + result.returnValue.conf_level) + console.log("result.returnValue.op_status: " + result.returnValue.op_status) + console.log("======================================================") // if (result.returnValue.conf_level < 0.8 && result.returnValue.op_status===0){ // console.log('=======PROBLEMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM==================\n'); // console.log(result); @@ -63,45 +63,45 @@ const useScanHealthcareCard = (setShowSuccess = () => {}) => { // } if (result.returnValue.validation_status === 0 && result.returnValue.cropped_doc_width) { - setShowSuccess(true); - setCroppedDocumentHeight(result.returnValue.cropped_doc_height); - setCroppedDocumentWidth(result.returnValue.cropped_doc_width); - setScanHealthcareCardSuccess(true); - setInputImageWidth(result.returnValue.image_width); - setInputImagetHeight(result.returnValue.image_height); + setShowSuccess(true) + setCroppedDocumentHeight(result.returnValue.cropped_doc_height) + setCroppedDocumentWidth(result.returnValue.cropped_doc_width) + setScanHealthcareCardSuccess(true) + setInputImageWidth(result.returnValue.image_width) + setInputImagetHeight(result.returnValue.image_height) } else { - setCroppedDocumentImageData(null); - setCroppedDocumentHeight(null); - setCroppedDocumentWidth(null); + setCroppedDocumentImageData(null) + setCroppedDocumentHeight(null) + setCroppedDocumentWidth(null) if (!scanOnce) { - doScanHealthcareCard(); + doScanHealthcareCard() } } - }; + } const doScanHealthcareCard = async (image = undefined, loop = true) => { - setCroppedDocumentHeight(null); - setCroppedDocumentWidth(null); - if (image) scanOnce = true; - else if (!loop) scanOnce = true; + setCroppedDocumentHeight(null) + setCroppedDocumentWidth(null) + if (image) scanOnce = true + else if (!loop) scanOnce = true const result = await scanHealthcareCard( callback, { input_image_format: "rgba", }, - image - ); - const { imageData, croppedDocument } = result; - console.log("Result:", result); - setCroppedDocumentImageData(croppedDocument); - setInputImageData(imageData); - }; + image, + ) + const { imageData, croppedDocument } = result + console.log("Result:", result) + setCroppedDocumentImageData(croppedDocument) + setInputImageData(imageData) + } return { inputImageBase64, croppedDocumentBase64, doScanHealthcareCard, - }; -}; + } +} -export default useScanHealthcareCard; +export default useScanHealthcareCard diff --git a/wasm_module/src/hooks/useTwoStepFaceLogin.js b/wasm_module/src/hooks/useTwoStepFaceLogin.js index 3553c54..d00e73e 100644 --- a/wasm_module/src/hooks/useTwoStepFaceLogin.js +++ b/wasm_module/src/hooks/useTwoStepFaceLogin.js @@ -1,63 +1,61 @@ -import { useState } from "react"; -import { twoStepFaceLogin } from "@privateid/cryptonets-web-sdk-alpha"; -import { getStatusMessage } from "@privateid/cryptonets-web-sdk-alpha/dist/utils"; +import { useState } from "react" +import { twoStepFaceLogin } from "@privateid/cryptonets-web-sdk-alpha" +import { getStatusMessage } from "@privateid/cryptonets-web-sdk-alpha/dist/utils" const useTwoStepFaceLogin = (setShowSuccess = () => {}) => { - const [faceLoginMessage, setFaceLoginMessage] = useState(""); + const [faceLoginMessage, setFaceLoginMessage] = useState("") - const [faceLoginAntispoofPerformed, setFaceLoginAntispoofPerformed] = useState(""); - const [faceLoginAntispoofStatus, setFaceLoginAntispoofStatus] = useState(""); - const [faceLoginValidationStatus, setFaceLoginValidationStatus] = useState(""); - const [faceLoginGUID, setFaceLoginGUID] = useState(""); - const [faceLoginPUID, setFaceLoginPUID] = useState(""); - let skipAntispoofProcess = false; + const [faceLoginAntispoofPerformed, setFaceLoginAntispoofPerformed] = useState("") + const [faceLoginAntispoofStatus, setFaceLoginAntispoofStatus] = useState("") + const [faceLoginValidationStatus, setFaceLoginValidationStatus] = useState("") + const [faceLoginGUID, setFaceLoginGUID] = useState("") + const [faceLoginPUID, setFaceLoginPUID] = useState("") + let skipAntispoofProcess = false - const callback = async (result) => { - console.log("twoStepFaceLogin callback hook result:", result); + const callback = async result => { + console.log("twoStepFaceLogin callback hook result:", result) if (result?.processing) { - setFaceLoginMessage("PROCESSING ! ! !"); + setFaceLoginMessage("PROCESSING ! ! !") } else { - if(result?.noFaceFound){ - setFaceLoginMessage(getStatusMessage(-1)); - setFaceLoginAntispoofStatus(result?.antispoof_status); - setFaceLoginValidationStatus(result?.face_validation_status); - setFaceLoginGUID(result.guid); - setFaceLoginPUID(result.puid); - doTwoStepFaceLogin(skipAntispoofProcess, true); - } - else if (result?.face_validation_status === 0 && result?.antispoof_status === 0) { - setFaceLoginMessage("Valid Face"); - setShowSuccess(true); - setFaceLoginAntispoofStatus(result?.antispoof_status); - setFaceLoginValidationStatus(result?.face_validation_status); - setFaceLoginGUID(result.guid); - setFaceLoginPUID(result.puid); - } - else { - setFaceLoginMessage(getStatusMessage(result?.face_validation_status)); - setFaceLoginAntispoofStatus(result?.antispoof_status); - setFaceLoginValidationStatus(result?.face_validation_status); - setFaceLoginGUID(result.guid); - setFaceLoginPUID(result.puid); - doTwoStepFaceLogin(skipAntispoofProcess, true); + if (result?.noFaceFound) { + setFaceLoginMessage(getStatusMessage(-1)) + setFaceLoginAntispoofStatus(result?.antispoof_status) + setFaceLoginValidationStatus(result?.face_validation_status) + setFaceLoginGUID(result.guid) + setFaceLoginPUID(result.puid) + doTwoStepFaceLogin(skipAntispoofProcess, true) + } else if (result?.face_validation_status === 0 && result?.antispoof_status === 0) { + setFaceLoginMessage("Valid Face") + setShowSuccess(true) + setFaceLoginAntispoofStatus(result?.antispoof_status) + setFaceLoginValidationStatus(result?.face_validation_status) + setFaceLoginGUID(result.guid) + setFaceLoginPUID(result.puid) + } else { + setFaceLoginMessage(getStatusMessage(result?.face_validation_status)) + setFaceLoginAntispoofStatus(result?.antispoof_status) + setFaceLoginValidationStatus(result?.face_validation_status) + setFaceLoginGUID(result.guid) + setFaceLoginPUID(result.puid) + doTwoStepFaceLogin(skipAntispoofProcess, true) } } - }; + } const doTwoStepFaceLogin = async (skipAntispoof = true, isRunning = false) => { // eslint-disable-next-line no-unused-vars - skipAntispoofProcess = skipAntispoof; + skipAntispoofProcess = skipAntispoof if (!isRunning) { - setFaceLoginAntispoofPerformed(""); - setFaceLoginAntispoofStatus(""); - setFaceLoginValidationStatus(""); - setFaceLoginGUID(""); - setFaceLoginPUID(""); + setFaceLoginAntispoofPerformed("") + setFaceLoginAntispoofStatus("") + setFaceLoginValidationStatus("") + setFaceLoginGUID("") + setFaceLoginPUID("") } - await twoStepFaceLogin(callback); - }; + await twoStepFaceLogin(callback) + } return { doTwoStepFaceLogin, @@ -67,7 +65,7 @@ const useTwoStepFaceLogin = (setShowSuccess = () => {}) => { faceLoginValidationStatus, faceLoginGUID, faceLoginPUID, - }; -}; + } +} -export default useTwoStepFaceLogin; +export default useTwoStepFaceLogin diff --git a/wasm_module/src/hooks/useWasm.js b/wasm_module/src/hooks/useWasm.js index a8c5cf6..7780769 100644 --- a/wasm_module/src/hooks/useWasm.js +++ b/wasm_module/src/hooks/useWasm.js @@ -1,19 +1,19 @@ -import { useState } from "react"; +import { useState } from "react" -import { loadPrivIdModule } from "@privateid/cryptonets-web-sdk-alpha"; -import { getUrlParameter } from "../utils"; +import { loadPrivIdModule } from "@privateid/cryptonets-web-sdk-alpha" +import { getUrlParameter } from "../utils" const useWasm = () => { // Initialize the state - const [ready, setReady] = useState(false); - const [deviceSupported, setDeviceSupported] = useState({ isChecking: true }); + const [ready, setReady] = useState(false) + const [deviceSupported, setDeviceSupported] = useState({ isChecking: true }) const init = async () => { - console.log(process.env.REACT_APP_API_KEY, process.env.REACT_APP_API_URL); - const apiKey = process.env.REACT_APP_API_KEY; - const apiUrl = getUrlParameter("api_url", null) || process.env.REACT_APP_API_URL; - const loadSimd = getUrlParameter("loadSimd", null); - console.log("FORCE LOAD SIMD?", loadSimd); - const parseBool = loadSimd !== null ? (loadSimd === "false" ? false : loadSimd === "true" ? true : null) : null; + console.log(process.env.REACT_APP_API_KEY, process.env.REACT_APP_API_URL) + const apiKey = process.env.REACT_APP_API_KEY + const apiUrl = getUrlParameter("api_url", null) || process.env.REACT_APP_API_URL + const loadSimd = getUrlParameter("loadSimd", null) + console.log("FORCE LOAD SIMD?", loadSimd) + const parseBool = loadSimd !== null ? (loadSimd === "false" ? false : loadSimd === "true" ? true : null) : null const isSupported = await loadPrivIdModule({ api_url: { collections: { @@ -37,16 +37,16 @@ const useWasm = () => { }, }, api_key: apiKey, - }); + }) if (isSupported.support) { - setReady(true); - setDeviceSupported({ supported: true, isChecking: false }); + setReady(true) + setDeviceSupported({ supported: true, isChecking: false }) } else { - setDeviceSupported({ supported: false, isChecking: false, messege: isSupported.message }); + setDeviceSupported({ supported: false, isChecking: false, messege: isSupported.message }) } - }; + } - return { ready, deviceSupported, init }; -}; + return { ready, deviceSupported, init } +} -export default useWasm; +export default useWasm diff --git a/wasm_module/src/index.css b/wasm_module/src/index.css index 460846c..4d89edc 100644 --- a/wasm_module/src/index.css +++ b/wasm_module/src/index.css @@ -1,15 +1,14 @@ body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; + font-family: + -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", + "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } /* The switch - the box around the slider */ @@ -36,8 +35,8 @@ code { right: 0; bottom: 0; background-color: #ccc; - -webkit-transition: .4s; - transition: .4s; + -webkit-transition: 0.4s; + transition: 0.4s; } .slider:before { @@ -48,17 +47,17 @@ code { left: 4px; bottom: 4px; background-color: white; - -webkit-transition: .4s; - transition: .4s; + -webkit-transition: 0.4s; + transition: 0.4s; } input:checked + .slider { - background-color: #2196F3; + background-color: #2196f3; } input:focus + .slider { - box-shadow: 0 0 1px #2196F3; -} + box-shadow: 0 0 1px #2196f3; +} input:checked + .slider:before { -webkit-transform: translateX(26px); @@ -73,4 +72,4 @@ input:checked + .slider:before { .slider.round:before { border-radius: 50%; -} \ No newline at end of file +} diff --git a/wasm_module/src/index.js b/wasm_module/src/index.js index 79f8c9e..8db9d9d 100644 --- a/wasm_module/src/index.js +++ b/wasm_module/src/index.js @@ -1,13 +1,13 @@ -import React from "react"; -import ReactDOM from "react-dom/client"; -import "./index.css"; -import router from "./routes/router"; -import { RouterProvider } from "react-router-dom"; -import DebugContextProvider from "./context/DebugContext"; +import React from "react" +import ReactDOM from "react-dom/client" +import "./index.css" +import router from "./routes/router" +import { RouterProvider } from "react-router-dom" +import DebugContextProvider from "./context/DebugContext" -const root = ReactDOM.createRoot(document.getElementById("root")); +const root = ReactDOM.createRoot(document.getElementById("root")) root.render( - - -); + + , +) diff --git a/wasm_module/src/pages/CompareFlow.jsx b/wasm_module/src/pages/CompareFlow.jsx index a422863..a025cb0 100644 --- a/wasm_module/src/pages/CompareFlow.jsx +++ b/wasm_module/src/pages/CompareFlow.jsx @@ -53,7 +53,7 @@ // useEffect(() => { // console.log("useEffect starting wasm and camera"); // console.log("--- wasm status ", wasmReady, ready); -// if (!wasmReady) { +// if (!wasmReady) { // if(!callingWasm){ // console.log("init wasm called:"); // initWasm(); @@ -74,7 +74,7 @@ // console.log("COMPARE RESULT: ", result); // setConfidenceScore(result.returnValue.conf_score); // }; - + // console.log("Image Data:", { enrollImageData, predictMugshotImageData }); // if (enrollImageData && predictMugshotImageData) { // await faceCompareLocal(callback, enrollImageData, predictMugshotImageData, { input_image_format: "rgba" }); diff --git a/wasm_module/src/pages/TestingPage.jsx b/wasm_module/src/pages/TestingPage.jsx index 2d2555c..f8ae602 100644 --- a/wasm_module/src/pages/TestingPage.jsx +++ b/wasm_module/src/pages/TestingPage.jsx @@ -1,13 +1,14 @@ -/* eslint-disable */ -import { useContext, useEffect, useMemo, useRef, useState } from "react"; +import { useContext, useEffect, useMemo, useRef, useState } from "react" +import { useParams } from "react-router-dom" + import { switchCamera, - setStopLoopContinuousAuthentication, closeCamera, - faceCompareLocal, documentMugshotFaceCompare, -} from "@privateid/cryptonets-web-sdk-alpha"; -import platform, { os } from "platform"; +} from "@privateid/cryptonets-web-sdk-alpha" +import { + getRawFaceValidationStatus, +} from "@privateid/cryptonets-web-sdk-alpha/dist/utils" import { useCamera, @@ -16,47 +17,37 @@ import { useIsValid, useEnroll, usePredict, - useScanFrontDocument, useScanBackDocument, -} from "../hooks"; + useScanFrontDocumentWithoutPredict, + useScanFrontDocumentOCR, + usePrividFaceISO, + useFaceLogin, + useScanHealthcareCard, + useContinuousPredictWithoutRestrictions, + useMultiFramePredictAge, + useOscarLogin, + useEnrollWithAge, + useTwoStepFaceLogin, + useMultiframeTwoStepFaceLogin, + useMultiframePredict, +} from "../hooks" +import { DebugContext } from "../context/DebugContext" import { - CANVAS_SIZE, canvasSizeOptions, isBackCamera, - isMobile, setMax2KForMobile, - WIDTH_TO_STANDARDS, -} from "../utils"; - -import "./styles.css"; -import usePredictAge from "../hooks/usePredictAge"; -import useScanFrontDocumentWithoutPredict from "../hooks/useScanFrontDocument"; -import useScanFrontDocumentOCR from "../hooks/useScanFrontDocumentOCR"; -import usePrividFaceISO from "../hooks/usePrividFaceISO"; -import useFaceLogin from "../hooks/useFaceLogin"; -import useScanHealthcareCard from "../hooks/useScanHealthcareCard"; -import { - getEnrollFaceMessage, - getFaceValidationMessage, - getFrontDocumentStatusMessage, - getRawFaceValidationStatus, -} from "@privateid/cryptonets-web-sdk-alpha/dist/utils"; -import { DebugContext } from "../context/DebugContext"; -import useContinuousPredictWithoutRestrictions from "../hooks/useContinuousPredictWithoutRestriction"; -import useMultiFramePredictAge from "../hooks/useMultiFramePredictAge"; -import useOscarLogin from "../hooks/useOscarLogin"; -import { useParams } from "react-router-dom"; -import useEnrollWithAge from "../hooks/useEnrollWithAge"; -import useTwoStepFaceLogin from "../hooks/useTwoStepFaceLogin"; -import useMultiframeTwoStepFaceLogin from "../hooks/useMultiframeTwoStepFaceLogin"; -import useMultiframePredict from "../hooks/useMultiframePredict"; - -let callingWasm = false; + WIDTH_TO_STANDARDS +} from "../utils" + +import "./styles.css" + +let callingWasm = false + const Ready = () => { - const debugContext = useContext(DebugContext); - let { loadSimd } = useParams(); - console.log(loadSimd); - const { ready: wasmReady, deviceSupported, init: initWasm } = useWasm(); + const debugContext = useContext(DebugContext) + let { loadSimd } = useParams() + console.log(loadSimd) + const { ready: wasmReady, deviceSupported, init: initWasm } = useWasm() const [cameraSettingsList, setCameraSettingsList] = useState({ focusDistance: false, @@ -65,31 +56,31 @@ const Ready = () => { brightness: false, saturation: false, contrast: false, - }); + }) - const [cameraFocusMin, setCameraFocusMin] = useState(0); - const [cameraFocusMax, setCameraFocusMax] = useState(0); - const [cameraFocusCurrent, setCameraFocusCurrent] = useState(0); + const [cameraFocusMin, setCameraFocusMin] = useState(0) + const [cameraFocusMax, setCameraFocusMax] = useState(0) + const [cameraFocusCurrent, setCameraFocusCurrent] = useState(0) - const [cameraExposureTimeMin, setCameraExposureTimeMin] = useState(0); - const [cameraExposureTimeMax, setCameraExposureTimeMax] = useState(0); - const [cameraExposureTimeCurrent, setCameraExposureTimeCurrent] = useState(0); + const [cameraExposureTimeMin, setCameraExposureTimeMin] = useState(0) + const [cameraExposureTimeMax, setCameraExposureTimeMax] = useState(0) + const [cameraExposureTimeCurrent, setCameraExposureTimeCurrent] = useState(0) - const [cameraSharpnessMin, setCameraSharpnessMin] = useState(0); - const [cameraSharpnessMax, setCameraSharpnessMax] = useState(0); - const [cameraSharpnessCurrent, setCameraSharpnessCurrent] = useState(0); + const [cameraSharpnessMin, setCameraSharpnessMin] = useState(0) + const [cameraSharpnessMax, setCameraSharpnessMax] = useState(0) + const [cameraSharpnessCurrent, setCameraSharpnessCurrent] = useState(0) - const [cameraBrightnessMin, setCameraBrightnessMin] = useState(0); - const [cameraBrightnessMax, setCameraBrightnessMax] = useState(0); - const [cameraBrightnessCurrent, setCameraBrightnessCurrent] = useState(0); + const [cameraBrightnessMin, setCameraBrightnessMin] = useState(0) + const [cameraBrightnessMax, setCameraBrightnessMax] = useState(0) + const [cameraBrightnessCurrent, setCameraBrightnessCurrent] = useState(0) - const [cameraSaturationMin, setCameraSaturationMin] = useState(0); - const [cameraSaturationMax, setCameraSaturationMax] = useState(0); - const [cameraSaturationCurrent, setCameraSaturationCurrent] = useState(0); + const [cameraSaturationMin, setCameraSaturationMin] = useState(0) + const [cameraSaturationMax, setCameraSaturationMax] = useState(0) + const [cameraSaturationCurrent, setCameraSaturationCurrent] = useState(0) - const [cameraContrastMin, setCameraContrastMin] = useState(0); - const [cameraContrastMax, setCameraContrastMax] = useState(0); - const [cameraContrastCurrent, setCameraContrastCurrent] = useState(0); + const [cameraContrastMin, setCameraContrastMin] = useState(0) + const [cameraContrastMax, setCameraContrastMax] = useState(0) + const [cameraContrastCurrent, setCameraContrastCurrent] = useState(0) const { ready: cameraReady, @@ -120,107 +111,107 @@ const Ready = () => { setCameraContrastMin, setCameraContrastMax, setCameraContrastCurrent, - setCameraSettingsList - ); + setCameraSettingsList, + ) - const [disableButtons, setDisableButtons] = useState(false); + const [disableButtons, setDisableButtons] = useState(false) function getUrlParameter(sParam, defaultValue = undefined) { - const sPageURL = window.location.search.substring(1); - const sURLVariables = sPageURL.split("&"); - let sParameterName; - let i; + const sPageURL = window.location.search.substring(1) + const sURLVariables = sPageURL.split("&") + let sParameterName + let i for (i = 0; i < sURLVariables.length; i++) { - sParameterName = sURLVariables[i].split("="); + sParameterName = sURLVariables[i].split("=") if (sParameterName[0] === sParam) { - return typeof sParameterName[1] === undefined ? defaultValue : decodeURIComponent(sParameterName[1]); + return typeof sParameterName[1] === undefined ? defaultValue : decodeURIComponent(sParameterName[1]) } } - return defaultValue; + return defaultValue } useEffect(() => { - const debug_type = getUrlParameter("debug_type", null); + const debug_type = getUrlParameter("debug_type", null) if (debug_type) { - debugContext.setShowDebugOptions(true); + debugContext.setShowDebugOptions(true) } - }, []); + }, []) - const [showSuccess, setShowSuccess] = useState(false); + const [showSuccess, setShowSuccess] = useState(false) - const [deviceCapabilities, setDeviceCapabilities] = useState(capabilities); + const [deviceCapabilities, setDeviceCapabilities] = useState(capabilities) const canvasSizeList = useMemo(() => { - let canvasList = [...canvasSizeOptions]; - const maxHeight = deviceCapabilities?.height?.max || capabilities?.height?.max; - let label = WIDTH_TO_STANDARDS[setMax2KForMobile(deviceCapabilities?.width?.max || capabilities?.width?.max)]; - const sliceIndex = canvasList.findIndex((option) => option.value === label); - const slicedArr = canvasList.slice(sliceIndex); + let canvasList = [...canvasSizeOptions] + const maxHeight = deviceCapabilities?.height?.max || capabilities?.height?.max + let label = WIDTH_TO_STANDARDS[setMax2KForMobile(deviceCapabilities?.width?.max || capabilities?.width?.max)] + const sliceIndex = canvasList.findIndex(option => option.value === label) + const slicedArr = canvasList.slice(sliceIndex) if (label === "FHD" && maxHeight === 1440) { - return [{ label: "iPhoneCC", value: "iPhoneCC" }, ...slicedArr]; + return [{ label: "iPhoneCC", value: "iPhoneCC" }, ...slicedArr] } - return slicedArr; - }, [capabilities, deviceCapabilities]); - const initialCanvasSize = WIDTH_TO_STANDARDS[settings?.width]; - const isBack = isBackCamera(devices, device); - const [deviceId, setDeviceId] = useState(device); - const [devicesList] = useState(devices); + return slicedArr + }, [capabilities, deviceCapabilities]) + const initialCanvasSize = WIDTH_TO_STANDARDS[settings?.width] + const isBack = isBackCamera(devices, device) + const [deviceId, setDeviceId] = useState(device) + const [devicesList] = useState(devices) - const [canvasSize, setCanvasSize] = useState(); + const [canvasSize, setCanvasSize] = useState() // Use Continuous Predict - const predictRetryTimes = 1; - const [continuousPredictUUID, setContinuousPredictUUID] = useState(null); - const [continuousPredictGUID, setContinuousPredictGUID] = useState(null); + const predictRetryTimes = 1 + const [continuousPredictUUID, setContinuousPredictUUID] = useState(null) + const [continuousPredictGUID, setContinuousPredictGUID] = useState(null) const continuousPredictSuccess = (UUID, GUID) => { - setContinuousPredictUUID(UUID); - setContinuousPredictGUID(GUID); - }; + setContinuousPredictUUID(UUID) + setContinuousPredictGUID(GUID) + } const continuousOnNotFoundAndFailure = () => { - setContinuousPredictUUID(null); - setContinuousPredictGUID(null); - }; + setContinuousPredictUUID(null) + setContinuousPredictGUID(null) + } - const [currentAction, setCurrentAction] = useState(null); - const [skipAntiSpoof, setSkipAntispoof] = useState(false); + const [currentAction, setCurrentAction] = useState(null) + const [skipAntiSpoof, setSkipAntispoof] = useState(false) useEffect(() => { - console.log("useEffect starting wasm and camera"); - console.log("--- wasm status ", wasmReady, cameraReady); + console.log("useEffect starting wasm and camera") + console.log("--- wasm status ", wasmReady, cameraReady) if (wasmReady && cameraReady) { - return; + return } if (!wasmReady) { if (!callingWasm) { // NOTE: MAKE SURE THAT WASM IS ONLY LOADED ONCE - initWasm(loadSimd); - callingWasm = true; + initWasm(loadSimd) + callingWasm = true } - return; + return } if (!cameraReady) { - initCamera(); + initCamera() } - }, [wasmReady, cameraReady]); + }, [wasmReady, cameraReady]) const { isValidCall, antispoofPerformed: isValidAntispoofPerformed, antispoofStatus: isValidAntispoofStatus, isValidStatus: isValidStatus, - } = useIsValid("userVideo"); + } = useIsValid("userVideo") // isValid const handleIsValid = async () => { - setShowSuccess(false); - setCurrentAction("isValid"); - await isValidCall(skipAntiSpoof); - }; + setShowSuccess(false) + setCurrentAction("isValid") + await isValidCall(skipAntiSpoof) + } // Enroll ONEFA const useEnrollSuccess = () => { - console.log("=======ENROLL SUCCESS======="); - setShowSuccess(true); - }; + console.log("=======ENROLL SUCCESS=======") + setShowSuccess(true) + } const { enrollGUID, enrollPUID, @@ -231,22 +222,22 @@ const Ready = () => { enrollUserOneFa, enrollImageData, changeThresholdEnroll, - } = useEnroll({ onSuccess: useEnrollSuccess, disableButtons: setDisableButtons }); + } = useEnroll({ onSuccess: useEnrollSuccess, disableButtons: setDisableButtons }) const handleEnrollOneFa = async () => { - setShowSuccess(false); - setCurrentAction("useEnrollOneFa"); - enrollUserOneFa("", skipAntiSpoof); - }; + setShowSuccess(false) + setCurrentAction("useEnrollOneFa") + enrollUserOneFa("", skipAntiSpoof) + } - const handleEnrollUrl = async (url) => { - setShowSuccess(false); - setCurrentAction("useEnrollOneFa"); - enrollUserOneFa("", skipAntiSpoof, url, "test"); - }; + const handleEnrollUrl = async url => { + setShowSuccess(false) + setCurrentAction("useEnrollOneFa") + enrollUserOneFa("", skipAntiSpoof, url, "test") + } const handlePredictSuccess = () => { - console.log("======PREDICT SUCCESS========"); - }; + console.log("======PREDICT SUCCESS========") + } const { predictAntispoofPerformed, predictAntispoofStatus, @@ -255,34 +246,34 @@ const Ready = () => { predictValidationStatus, predictMessage, predictUserOneFa, - } = usePredict({ onSuccess: handlePredictSuccess, disableButtons: setDisableButtons }); + } = usePredict({ onSuccess: handlePredictSuccess, disableButtons: setDisableButtons }) const handlePredictOneFa = async () => { - console.log("PREDICTING"); - setShowSuccess(false); - setCurrentAction("usePredictOneFa"); - predictUserOneFa(skipAntiSpoof); - }; - - const handlePredictUrl = async (url) => { - console.log("PREDICTING"); - setShowSuccess(false); - setCurrentAction("usePredictWithUrl"); - predictUserOneFa(skipAntiSpoof, url, "test"); - }; - - const handleSwitchCamera = async (e) => { - setDeviceId(e.target.value); - const { capabilities = {}, settings = {}, devices } = await switchCamera(null, e.target.value); - setDeviceCapabilities(capabilities); + console.log("PREDICTING") + setShowSuccess(false) + setCurrentAction("usePredictOneFa") + predictUserOneFa(skipAntiSpoof) + } + + const handlePredictUrl = async url => { + console.log("PREDICTING") + setShowSuccess(false) + setCurrentAction("usePredictWithUrl") + predictUserOneFa(skipAntiSpoof, url, "test") + } + + const handleSwitchCamera = async e => { + setDeviceId(e.target.value) + const { capabilities = {}, settings = {}, devices } = await switchCamera(null, e.target.value) + setDeviceCapabilities(capabilities) // setDevicesList(devices.map(mapDevices)); - console.log("switch camera capabilities:", capabilities); - console.log("switch camera settings:", settings); + console.log("switch camera capabilities:", capabilities) + console.log("switch camera settings:", settings) if (currentAction === "useScanDocumentFront") { - let width = WIDTH_TO_STANDARDS[settings?.width]; + let width = WIDTH_TO_STANDARDS[settings?.width] if (width === "FHD" && settings?.height === 1440) { - width = "iPhoneCC"; + width = "iPhoneCC" } - await handleCanvasSize({ target: { value: width } }, true); + await handleCanvasSize({ target: { value: width } }, true) } try { @@ -294,73 +285,73 @@ const Ready = () => { brightness: false, saturation: false, contrast: false, - }; + } if (capabilities.focusDistance) { - setCameraFocusMin(capabilities.focusDistance.min); - setCameraFocusMax(capabilities.focusDistance.max); - setCameraFocusCurrent(settings.focusDistance); - cameraSettings = { ...settings, focusDistance: true }; + setCameraFocusMin(capabilities.focusDistance.min) + setCameraFocusMax(capabilities.focusDistance.max) + setCameraFocusCurrent(settings.focusDistance) + cameraSettings = { ...settings, focusDistance: true } } if (capabilities.exposureTime) { - setCameraExposureTimeMin(Math.ceil(capabilities.exposureTime.min)); - setCameraExposureTimeMax(Math.ceil(capabilities.exposureTime.max)); - setCameraExposureTimeCurrent(Math.ceil(settings.exposureTime)); - cameraSettings = { ...settings, exposureTime: true }; + setCameraExposureTimeMin(Math.ceil(capabilities.exposureTime.min)) + setCameraExposureTimeMax(Math.ceil(capabilities.exposureTime.max)) + setCameraExposureTimeCurrent(Math.ceil(settings.exposureTime)) + cameraSettings = { ...settings, exposureTime: true } } if (capabilities.sharpness) { - setCameraSharpnessMin(Math.ceil(capabilities.sharpness.min)); - setCameraSharpnessMax(Math.ceil(capabilities.sharpness.max)); - setCameraSharpnessCurrent(Math.ceil(settings.sharpness)); - cameraSettings = { ...settings, sharpness: true }; + setCameraSharpnessMin(Math.ceil(capabilities.sharpness.min)) + setCameraSharpnessMax(Math.ceil(capabilities.sharpness.max)) + setCameraSharpnessCurrent(Math.ceil(settings.sharpness)) + cameraSettings = { ...settings, sharpness: true } } if (capabilities.brightness) { - setCameraBrightnessMin(Math.ceil(capabilities.brightness.min)); - setCameraBrightnessMax(Math.ceil(capabilities.brightness.max)); - setCameraBrightnessCurrent(Math.ceil(settings.brightness)); - cameraSettings = { ...settings, brightness: true }; + setCameraBrightnessMin(Math.ceil(capabilities.brightness.min)) + setCameraBrightnessMax(Math.ceil(capabilities.brightness.max)) + setCameraBrightnessCurrent(Math.ceil(settings.brightness)) + cameraSettings = { ...settings, brightness: true } } if (capabilities.saturation) { - setCameraSaturationMin(Math.ceil(capabilities.saturation.min)); - setCameraSaturationMax(Math.ceil(capabilities.saturation.max)); - setCameraSaturationCurrent(Math.ceil(settings.saturation)); - cameraSettings = { ...settings, saturation: true }; + setCameraSaturationMin(Math.ceil(capabilities.saturation.min)) + setCameraSaturationMax(Math.ceil(capabilities.saturation.max)) + setCameraSaturationCurrent(Math.ceil(settings.saturation)) + cameraSettings = { ...settings, saturation: true } } if (capabilities.contrast) { - setCameraContrastMin(Math.ceil(capabilities.contrast.min)); - setCameraContrastMax(Math.ceil(capabilities.contrast.max)); - setCameraContrastCurrent(Math.ceil(settings.contrast)); - cameraSettings = { ...settings, contrast: true }; + setCameraContrastMin(Math.ceil(capabilities.contrast.min)) + setCameraContrastMax(Math.ceil(capabilities.contrast.max)) + setCameraContrastCurrent(Math.ceil(settings.contrast)) + cameraSettings = { ...settings, contrast: true } } - setCameraSettingsList(cameraSettings); + setCameraSettingsList(cameraSettings) } } catch (e) { // } - }; + } // Use Delete // for useDelete, first we need to get the UUID of the user by doing a predict - const [deletionStatus, setDeletionStatus] = useState(null); - const useDeleteCallback = (deleteStatus) => { - setDeletionStatus(deleteStatus); - }; - const { loading, onDeleteUser } = useDelete(useDeleteCallback, wasmReady); + const [deletionStatus, setDeletionStatus] = useState(null) + const useDeleteCallback = deleteStatus => { + setDeletionStatus(deleteStatus) + } + const { loading, onDeleteUser } = useDelete(useDeleteCallback, wasmReady) const handleDelete = async () => { - setShowSuccess(false); - setDeletionStatus(null); - setCurrentAction("useDelete"); - predictUserOneFa(); - }; + setShowSuccess(false) + setDeletionStatus(null) + setCurrentAction("useDelete") + predictUserOneFa() + } // deleting useEffect(() => { if (currentAction === "useDelete") { if (predictPUID) { - onDeleteUser(predictPUID); + onDeleteUser(predictPUID) } } - }, [currentAction, predictPUID]); + }, [currentAction, predictPUID]) // Scan Document Back const { @@ -370,14 +361,14 @@ const Ready = () => { croppedBarcodeImage: croppedBarcodeBase64, croppedDocumentImage: croppedBackDocumentBase64, clearStatusBackScan, - } = useScanBackDocument(setShowSuccess); + } = useScanBackDocument(setShowSuccess) const handleScanDocumentBack = async () => { // setShowSuccess(false); - clearStatusBackScan(); - setCurrentAction("useScanDocumentBack"); - await scanBackDocument(); - }; + clearStatusBackScan() + setCurrentAction("useScanDocumentBack") + await scanBackDocument() + } // const isDocumentOrBackCamera = // ["useScanDocumentBack", "useScanDocumentFront", "useScanDocumentFrontValidity"].includes(currentAction) || isBack; @@ -401,13 +392,13 @@ const Ready = () => { antispoofPerformed: predictAgeAntispoofPerformed, antispoofStatus: predictAgeAntispoofStatus, validationStatus: predictAgeValidationStatus, - } = useMultiFramePredictAge(); + } = useMultiFramePredictAge() const handlePredictAge = async () => { - setShowSuccess(false); - setCurrentAction("usePredictAge"); - await doPredictAge(skipAntiSpoof); - }; + setShowSuccess(false) + setCurrentAction("usePredictAge") + await doPredictAge(skipAntiSpoof) + } // to start and stop predictAge call when on loop useEffect(() => { @@ -427,7 +418,7 @@ const Ready = () => { // } else { // setPredictAgeHasFinished(false); // } - }, [currentAction, predictAgeHasFinished, debugContext.functionLoop]); + }, [currentAction, predictAgeHasFinished, debugContext.functionLoop]) // Scan Front DL without predict @@ -441,18 +432,18 @@ const Ready = () => { predictMugshotImage, predictMugshotImageData, frontScanData, - } = useScanFrontDocumentWithoutPredict(setShowSuccess); + } = useScanFrontDocumentWithoutPredict(setShowSuccess) const handleFrontDLValidity = async () => { - setCurrentAction("useScanDocumentFrontValidity"); - await scanFrontValidity(debugContext.functionLoop); - }; + setCurrentAction("useScanDocumentFrontValidity") + await scanFrontValidity(debugContext.functionLoop) + } - const { isFound: isfoundOCR, scanFrontDocument: scanFrontOCR, ageOCR } = useScanFrontDocumentOCR(setShowSuccess); + const { isFound: isfoundOCR, scanFrontDocument: scanFrontOCR, ageOCR } = useScanFrontDocumentOCR(setShowSuccess) const handleFrontDLOCR = async () => { - setCurrentAction("useScanDocumentFrontOCR"); - await scanFrontOCR(debugContext.functionLoop); - }; + setCurrentAction("useScanDocumentFrontOCR") + await scanFrontOCR(debugContext.functionLoop) + } // const handleCanvasSize = async (e, skipSwitchCamera = false) => { // if (currentAction === "useScanFrontValidity" || currentAction === "useScanDocumentBack") { @@ -477,129 +468,129 @@ const Ready = () => { // } // }; - const { doFaceISO, inputImage, faceISOImageData, faceISOStatus, faceISOError } = usePrividFaceISO(); + const { doFaceISO, inputImage, faceISOImageData, faceISOStatus, faceISOError } = usePrividFaceISO() const handlePrividFaceISO = () => { - setCurrentAction("privid_face_iso"); - doFaceISO(debugContext.functionLoop); - }; + setCurrentAction("privid_face_iso") + doFaceISO(debugContext.functionLoop) + } const handleReopenCamera = async () => { - setReady(false); - await closeCamera(); - await init(); - }; + setReady(false) + await closeCamera() + await init() + } const handleCloseCamera = async () => { - await closeCamera(); - }; + await closeCamera() + } - const [uploadImage1, setUploadImage1] = useState(null); - const [uploadImage2, setUploadImage2] = useState(null); + const [uploadImage1, setUploadImage1] = useState(null) + const [uploadImage2, setUploadImage2] = useState(null) - const handleUploadImage1 = async (e) => { - console.log("clicked"); - console.log(e.target.files); - const imageRegex = /image[/]jpg|image[/]png|image[/]jpeg/; + const handleUploadImage1 = async e => { + console.log("clicked") + console.log(e.target.files) + const imageRegex = /image[/]jpg|image[/]png|image[/]jpeg/ if (e.target.files.length > 0) { if (imageRegex.test(e.target.files[0].type)) { - const imageUrl = URL.createObjectURL(e.target.files[0]); - console.log(e.target.files[0]); + const imageUrl = URL.createObjectURL(e.target.files[0]) + console.log(e.target.files[0]) - const getBase64 = (file) => { + const getBase64 = file => { return new Promise((resolve, reject) => { - var reader = new FileReader(); - reader.readAsDataURL(file); + var reader = new FileReader() + reader.readAsDataURL(file) reader.onload = function () { - resolve(reader.result); - }; + resolve(reader.result) + } reader.onerror = function (error) { - reject(error); - }; - }); - }; - - const base64 = await getBase64(e.target.files[0]); // prints the base64 string - var newImg = new Image(); - newImg.src = base64; + reject(error) + } + }) + } + + const base64 = await getBase64(e.target.files[0]) // prints the base64 string + var newImg = new Image() + newImg.src = base64 newImg.onload = async () => { var imgSize = { w: newImg.width, h: newImg.height, - }; - alert(imgSize.w + " " + imgSize.h); - const canvas = document.createElement("canvas"); - canvas.setAttribute("height", `${imgSize.h}`); - canvas.setAttribute("width", `${imgSize.w}`); - var ctx = canvas.getContext("2d"); - ctx.drawImage(newImg, 0, 0); - - const imageData = ctx.getImageData(0, 0, imgSize.w, imgSize.h); - console.log("imageData", imageData); - setUploadImage1(imageData); - }; + } + alert(imgSize.w + " " + imgSize.h) + const canvas = document.createElement("canvas") + canvas.setAttribute("height", `${imgSize.h}`) + canvas.setAttribute("width", `${imgSize.w}`) + var ctx = canvas.getContext("2d") + ctx.drawImage(newImg, 0, 0) + + const imageData = ctx.getImageData(0, 0, imgSize.w, imgSize.h) + console.log("imageData", imageData) + setUploadImage1(imageData) + } } else { - console.log("INVALID IMAGE TYPE"); + console.log("INVALID IMAGE TYPE") } } - }; - const handleUploadImage2 = async (e) => { - console.log(e.target.files); - const imageRegex = /image[/]jpg|image[/]png|image[/]jpeg|image[/]gif/; + } + const handleUploadImage2 = async e => { + console.log(e.target.files) + const imageRegex = /image[/]jpg|image[/]png|image[/]jpeg|image[/]gif/ if (e.target.files.length > 0) { if (imageRegex.test(e.target.files[0].type)) { - const imageUrl = URL.createObjectURL(e.target.files[0]); + const imageUrl = URL.createObjectURL(e.target.files[0]) - console.log(e.target.files[0]); + console.log(e.target.files[0]) - const getBase64 = (file) => { + const getBase64 = file => { return new Promise((resolve, reject) => { - var reader = new FileReader(); - reader.readAsDataURL(file); + var reader = new FileReader() + reader.readAsDataURL(file) reader.onload = function () { - resolve(reader.result); - }; + resolve(reader.result) + } reader.onerror = function (error) { - reject(error); - }; - }); - }; - - const base64 = await getBase64(e.target.files[0]); // prints the base64 string - console.log("====> GIF TEST: ", { base64 }); - var newImg = new Image(); - newImg.src = base64; + reject(error) + } + }) + } + + const base64 = await getBase64(e.target.files[0]) // prints the base64 string + console.log("====> GIF TEST: ", { base64 }) + var newImg = new Image() + newImg.src = base64 newImg.onload = async () => { var imgSize = { w: newImg.width, h: newImg.height, - }; - alert(imgSize.w + " " + imgSize.h); - const canvas = document.createElement("canvas"); - canvas.setAttribute("height", `${imgSize.h}`); - canvas.setAttribute("width", `${imgSize.w}`); - var ctx = canvas.getContext("2d"); - ctx.drawImage(newImg, 0, 0); - - const imageData = ctx.getImageData(0, 0, imgSize.w, imgSize.h); - console.log("imageData", imageData); - setUploadImage2(imageData); - }; + } + alert(imgSize.w + " " + imgSize.h) + const canvas = document.createElement("canvas") + canvas.setAttribute("height", `${imgSize.h}`) + canvas.setAttribute("width", `${imgSize.w}`) + var ctx = canvas.getContext("2d") + ctx.drawImage(newImg, 0, 0) + + const imageData = ctx.getImageData(0, 0, imgSize.w, imgSize.h) + console.log("imageData", imageData) + setUploadImage2(imageData) + } } else { - console.log("INVALID IMAGE TYPE"); + console.log("INVALID IMAGE TYPE") } } - }; + } const handleDoCompare = async () => { - const callback = (result) => { - console.log("COMPARE RESULT", result); - }; + const callback = result => { + console.log("COMPARE RESULT", result) + } - await documentMugshotFaceCompare(callback, uploadImage1, uploadImage2); - }; + await documentMugshotFaceCompare(callback, uploadImage1, uploadImage2) + } // Face Login const { @@ -610,13 +601,13 @@ const Ready = () => { faceLoginMessage, faceLoginPUID, faceLoginValidationStatus, - } = useFaceLogin("userVideo", () => {}, null, deviceId, setShowSuccess, setDisableButtons); + } = useFaceLogin("userVideo", () => { }, null, deviceId, setShowSuccess, setDisableButtons) const handleFaceLogin = async () => { - setShowSuccess(false); - setCurrentAction("useFaceLogin"); - doFaceLogin(skipAntiSpoof); - }; + setShowSuccess(false) + setCurrentAction("useFaceLogin") + doFaceLogin(skipAntiSpoof) + } // Face Login const { @@ -627,26 +618,26 @@ const Ready = () => { oscarLoginMessage, oscarLoginPUID, oscarLoginValidationStatus, - } = useOscarLogin("userVideo", () => {}, null, deviceId, setShowSuccess, setDisableButtons); + } = useOscarLogin("userVideo", () => { }, null, deviceId, setShowSuccess, setDisableButtons) const handleOscarLogin = async () => { - setShowSuccess(false); - setCurrentAction("useOscarLogin"); - doOscarLogin(skipAntiSpoof); - }; + setShowSuccess(false) + setCurrentAction("useOscarLogin") + doOscarLogin(skipAntiSpoof) + } // Scan Healthcare Card - const { croppedDocumentBase64, doScanHealthcareCard } = useScanHealthcareCard(setShowSuccess); + const { croppedDocumentBase64, doScanHealthcareCard } = useScanHealthcareCard(setShowSuccess) const handleUseScanHealhcareCard = async () => { - setShowSuccess(false); - setCurrentAction("useScanHealthcareCard"); - doScanHealthcareCard(undefined, debugContext.functionLoop); - }; + setShowSuccess(false) + setCurrentAction("useScanHealthcareCard") + doScanHealthcareCard(undefined, debugContext.functionLoop) + } - const handleCopyToClipboard = (text) => { - navigator.clipboard.writeText(text); - }; + const handleCopyToClipboard = text => { + navigator.clipboard.writeText(text) + } // const handleLivenessCheck = async () => { // setCurrentAction("livenessCheck"); @@ -660,19 +651,19 @@ const Ready = () => { continuousPredictWithoutRestrictionsPUID, continuousPredictWithoutRestrictionsValidationStatus, doContinuousPredictWithoutRestrictions, - } = useContinuousPredictWithoutRestrictions(setShowSuccess); + } = useContinuousPredictWithoutRestrictions(setShowSuccess) const handleBurningMan = () => { - setCurrentAction("useContinuousPredictWithoutRestrictions"); - doContinuousPredictWithoutRestrictions(); - }; + setCurrentAction("useContinuousPredictWithoutRestrictions") + doContinuousPredictWithoutRestrictions() + } - const handleFocusChange = async (val) => { + const handleFocusChange = async val => { try { - const video = document.getElementById("userVideo"); - const mediaStream = video.srcObject; - const track = await mediaStream.getTracks()[0]; - const capabilities = track.getCapabilities(); + const video = document.getElementById("userVideo") + const mediaStream = video.srcObject + const track = await mediaStream.getTracks()[0] + const capabilities = track.getCapabilities() await track.applyConstraints({ advanced: [ @@ -681,22 +672,22 @@ const Ready = () => { focusDistance: val, }, ], - }); - const newSettings = await track.getSettings(); + }) + const newSettings = await track.getSettings() - console.log("new Settings", newSettings); + console.log("new Settings", newSettings) } catch (e) { // eslint-disable-next-line no-console - console.log(e); + console.log(e) } - }; + } - const handleExposureTimeChange = async (val) => { + const handleExposureTimeChange = async val => { try { - const video = document.getElementById("userVideo"); - const mediaStream = video.srcObject; - const track = await mediaStream.getTracks()[0]; - const capabilities = track.getCapabilities(); + const video = document.getElementById("userVideo") + const mediaStream = video.srcObject + const track = await mediaStream.getTracks()[0] + const capabilities = track.getCapabilities() await track.applyConstraints({ advanced: [ { @@ -704,84 +695,84 @@ const Ready = () => { exposureTime: val, }, ], - }); - const newSettings = await track.getSettings(); + }) + const newSettings = await track.getSettings() } catch (e) { // eslint-disable-next-line no-console - console.log(e); + console.log(e) } - }; + } - const handleSharpnessChange = async (val) => { + const handleSharpnessChange = async val => { try { - const video = document.getElementById("userVideo"); - const mediaStream = video.srcObject; - const track = await mediaStream.getTracks()[0]; - const capabilities = track.getCapabilities(); + const video = document.getElementById("userVideo") + const mediaStream = video.srcObject + const track = await mediaStream.getTracks()[0] + const capabilities = track.getCapabilities() await track.applyConstraints({ advanced: [ { sharpness: val, }, ], - }); - const newSettings = await track.getSettings(); + }) + const newSettings = await track.getSettings() - console.log("new Settings", newSettings); + console.log("new Settings", newSettings) } catch (e) { // eslint-disable-next-line no-console - console.log(e); + console.log(e) } - }; + } - const handleBrightnessChange = async (val) => { + const handleBrightnessChange = async val => { try { - const video = document.getElementById("userVideo"); - const mediaStream = video.srcObject; - const track = await mediaStream.getTracks()[0]; - const capabilities = track.getCapabilities(); + const video = document.getElementById("userVideo") + const mediaStream = video.srcObject + const track = await mediaStream.getTracks()[0] + const capabilities = track.getCapabilities() await track.applyConstraints({ advanced: [ { brightness: val, }, ], - }); - const newSettings = await track.getSettings(); + }) + const newSettings = await track.getSettings() } catch (e) { // eslint-disable-next-line no-console - console.log(e); + console.log(e) } - }; + } - const handleSaturationChange = async (val) => { + const handleSaturationChange = async val => { try { - const video = document.getElementById("userVideo"); - const mediaStream = video.srcObject; - const track = await mediaStream.getTracks()[0]; - const capabilities = track.getCapabilities(); + const video = document.getElementById("userVideo") + const mediaStream = video.srcObject + const track = await mediaStream.getTracks()[0] + const capabilities = track.getCapabilities() await track.applyConstraints({ advanced: [ { saturation: val, }, ], - }); - const newSettings = await track.getSettings(); + }) + const newSettings = await track.getSettings() - console.log("new Settings", newSettings); + console.log("new Settings", newSettings) } catch (e) { // eslint-disable-next-line no-console - console.log(e); + console.log(e) } - }; + } - const handleContrastChange = async (val) => { + const handleContrastChange = async val => { try { - const video = document.getElementById("userVideo"); - const mediaStream = video.srcObject; - const track = await mediaStream.getTracks()[0]; - const capabilities = track.getCapabilities(); + const video = document.getElementById("userVideo") + const mediaStream = video.srcObject + const track = await mediaStream.getTracks()[0] + const capabilities = track.getCapabilities() await track.applyConstraints({ advanced: [ @@ -789,15 +780,15 @@ const Ready = () => { contrast: val, }, ], - }); - const newSettings = await track.getSettings(); + }) + const newSettings = await track.getSettings() - console.log("new Settings", newSettings); + console.log("new Settings", newSettings) } catch (e) { // eslint-disable-next-line no-console - console.log(e); + console.log(e) } - }; + } // Enroll With Age const { @@ -809,125 +800,125 @@ const Ready = () => { ewaToken, ewaValidationStatus, enrollWithAge, - } = useEnrollWithAge("userVideo", () => {}, null, deviceId, setShowSuccess, setDisableButtons); + } = useEnrollWithAge("userVideo", () => { }, null, deviceId, setShowSuccess, setDisableButtons) const handleEnrollWithAge = async () => { - setCurrentAction("enrollWithAge"); - await enrollWithAge(""); - }; - - const [uploadImage3, setUploadImage3] = useState(null); - const handleUploadImage3 = async (e) => { - console.log(e.target.files); - const imageRegex = /image[/]jpg|image[/]png|image[/]jpeg|image[/]gif/; + setCurrentAction("enrollWithAge") + await enrollWithAge("") + } + + const [uploadImage3, setUploadImage3] = useState(null) + const handleUploadImage3 = async e => { + console.log(e.target.files) + const imageRegex = /image[/]jpg|image[/]png|image[/]jpeg|image[/]gif/ if (e.target.files.length > 0) { if (imageRegex.test(e.target.files[0].type)) { - const imageUrl = URL.createObjectURL(e.target.files[0]); + const imageUrl = URL.createObjectURL(e.target.files[0]) - console.log(e.target.files[0]); + console.log(e.target.files[0]) - const getBase64 = (file) => { + const getBase64 = file => { return new Promise((resolve, reject) => { - var reader = new FileReader(); - reader.readAsDataURL(file); + var reader = new FileReader() + reader.readAsDataURL(file) reader.onload = function () { - resolve(reader.result); - }; + resolve(reader.result) + } reader.onerror = function (error) { - reject(error); - }; - }); - }; - - const base64 = await getBase64(e.target.files[0]); // prints the base64 string - console.log("====> GIF TEST: ", { base64 }); - var newImg = new Image(); - newImg.src = base64; + reject(error) + } + }) + } + + const base64 = await getBase64(e.target.files[0]) // prints the base64 string + console.log("====> GIF TEST: ", { base64 }) + var newImg = new Image() + newImg.src = base64 newImg.onload = async () => { var imgSize = { w: newImg.width, h: newImg.height, - }; - alert(imgSize.w + " " + imgSize.h); - const canvas = document.createElement("canvas"); - canvas.setAttribute("height", `${imgSize.h}`); - canvas.setAttribute("width", `${imgSize.w}`); - var ctx = canvas.getContext("2d"); - ctx.drawImage(newImg, 0, 0); - - const imageData = ctx.getImageData(0, 0, imgSize.w, imgSize.h); - console.log("imageData", imageData); - setUploadImage3(imageData); - }; + } + alert(imgSize.w + " " + imgSize.h) + const canvas = document.createElement("canvas") + canvas.setAttribute("height", `${imgSize.h}`) + canvas.setAttribute("width", `${imgSize.w}`) + var ctx = canvas.getContext("2d") + ctx.drawImage(newImg, 0, 0) + + const imageData = ctx.getImageData(0, 0, imgSize.w, imgSize.h) + console.log("imageData", imageData) + setUploadImage3(imageData) + } } else { - console.log("INVALID IMAGE TYPE"); + console.log("INVALID IMAGE TYPE") } } - }; + } const handlePredictWithImage = () => { - predictUserOneFa(false, undefined, undefined, uploadImage3); - }; + predictUserOneFa(false, undefined, undefined, uploadImage3) + } - const doBackDlScanFromImage = () => {}; + const doBackDlScanFromImage = () => { } - const [uploadImage4, setUploadImage4] = useState(null); - const handleUploadImage4 = async (e) => { - console.log(e.target.files); - const imageRegex = /image[/]jpg|image[/]png|image[/]jpeg|image[/]gif/; + const [uploadImage4, setUploadImage4] = useState(null) + const handleUploadImage4 = async e => { + console.log(e.target.files) + const imageRegex = /image[/]jpg|image[/]png|image[/]jpeg|image[/]gif/ if (e.target.files.length > 0) { if (imageRegex.test(e.target.files[0].type)) { - const imageUrl = URL.createObjectURL(e.target.files[0]); + const imageUrl = URL.createObjectURL(e.target.files[0]) - console.log(e.target.files[0]); + console.log(e.target.files[0]) - const getBase64 = (file) => { + const getBase64 = file => { return new Promise((resolve, reject) => { - var reader = new FileReader(); - reader.readAsDataURL(file); + var reader = new FileReader() + reader.readAsDataURL(file) reader.onload = function () { - resolve(reader.result); - }; + resolve(reader.result) + } reader.onerror = function (error) { - reject(error); - }; - }); - }; - - const base64 = await getBase64(e.target.files[0]); // prints the base64 string - console.log("====> GIF TEST: ", { base64 }); - var newImg = new Image(); - newImg.src = base64; + reject(error) + } + }) + } + + const base64 = await getBase64(e.target.files[0]) // prints the base64 string + console.log("====> GIF TEST: ", { base64 }) + var newImg = new Image() + newImg.src = base64 newImg.onload = async () => { var imgSize = { w: newImg.width, h: newImg.height, - }; - alert(imgSize.w + " " + imgSize.h); - const canvas = document.createElement("canvas"); - canvas.setAttribute("height", `${imgSize.h}`); - canvas.setAttribute("width", `${imgSize.w}`); - var ctx = canvas.getContext("2d"); - ctx.drawImage(newImg, 0, 0); - - const imageData = ctx.getImageData(0, 0, imgSize.w, imgSize.h); - console.log("imageData", imageData); - setUploadImage4(imageData); - }; + } + alert(imgSize.w + " " + imgSize.h) + const canvas = document.createElement("canvas") + canvas.setAttribute("height", `${imgSize.h}`) + canvas.setAttribute("width", `${imgSize.w}`) + var ctx = canvas.getContext("2d") + ctx.drawImage(newImg, 0, 0) + + const imageData = ctx.getImageData(0, 0, imgSize.w, imgSize.h) + console.log("imageData", imageData) + setUploadImage4(imageData) + } } else { - console.log("INVALID IMAGE TYPE"); + console.log("INVALID IMAGE TYPE") } } - }; + } - const doFrontDlScanFromImage = () => {}; + const doFrontDlScanFromImage = () => { } function iOS() { return ["iPad Simulator", "iPhone Simulator", "iPod Simulator", "iPad", "iPhone", "iPod"].includes( - navigator.platform - ); + navigator.platform, + ) } const { @@ -937,20 +928,20 @@ const Ready = () => { faceLoginPUID: twoStepFaceLoginPUID, faceLoginValidationStatus: twoStepFaceLoginStatus, faceLoginAntispoofStatus: twoStepFaceLoginAntispoofStatus, - } = useTwoStepFaceLogin(setShowSuccess); + } = useTwoStepFaceLogin(setShowSuccess) const handleTwoStepFaceLogin = async () => { - setCurrentAction("twoStepFaceLogin"); - await doTwoStepFaceLogin(); - }; + setCurrentAction("twoStepFaceLogin") + await doTwoStepFaceLogin() + } const handleDocumentMugshotFaceCompare = () => { - console.log("comparing start!!!"); - const callback = (result) => { - console.log("compare result", result); - }; - documentMugshotFaceCompare(callback, enrollImageData, predictMugshotImageData); - }; + console.log("comparing start!!!") + const callback = result => { + console.log("compare result", result) + } + documentMugshotFaceCompare(callback, enrollImageData, predictMugshotImageData) + } const { doTwoStepFaceLogin: doTwoStepMultiframeFaceLogin, @@ -960,12 +951,12 @@ const Ready = () => { faceLoginAntispoofStatus: twoStepMultiframeFaceLoginAntispoofStatus, faceLoginValidationStatus: twoStepMultiframeFaceLoginValidationStatus, faceLoginMessage: twoStepMultiframeFaceLoginMessage, - } = useMultiframeTwoStepFaceLogin(setShowSuccess); + } = useMultiframeTwoStepFaceLogin(setShowSuccess) const handleMultiframeTwoStepFaceLogin = () => { - setCurrentAction("useMultiframeTwoStepFaceLogin"); - doTwoStepMultiframeFaceLogin(); - }; + setCurrentAction("useMultiframeTwoStepFaceLogin") + doTwoStepMultiframeFaceLogin() + } const { multiframePredictAntispoofPerformed, @@ -975,18 +966,18 @@ const Ready = () => { multiframePredictPUID, multiframePredictUserOneFa, multiframePredictValidationStatus, - } = useMultiframePredict({ onSuccess: () => {}, disableButtons: setDisableButtons }); + } = useMultiframePredict({ onSuccess: () => { }, disableButtons: setDisableButtons }) const handleMultiframePredict = async () => { - setCurrentAction("useMultiframePredict"); - multiframePredictUserOneFa({ mf_token: "" }); - }; + setCurrentAction("useMultiframePredict") + multiframePredictUserOneFa({ mf_token: "" }) + } - const threshold_user_too_close_ref = useRef(); - const threshold_user_too_far_ref = useRef(); - const threshold_profile_enroll_ref = useRef(); - const threshold_high_vertical_enroll_ref = useRef(); - const threshold_down_vertical_enroll_ref = useRef(); + const threshold_user_too_close_ref = useRef() + const threshold_user_too_far_ref = useRef() + const threshold_profile_enroll_ref = useRef() + const threshold_high_vertical_enroll_ref = useRef() + const threshold_down_vertical_enroll_ref = useRef() return ( <> @@ -1005,15 +996,15 @@ const Ready = () => { }} > Do Loop? -