Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

POC(liveness): allow back camera selection #5370

Draft
wants to merge 1 commit into
base: liveness/alpha
Choose a base branch
from
Draft

POC(liveness): allow back camera selection #5370

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions examples/next/pages/ui/components/liveness/components/LivenessDefault.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ export default function LivenessDefault({
endpointOverride:
'wss://streaming-rekognition-gamma.us-east-1.amazonaws.com',
}}
allowBackCamera={true}
/>
) : null}
</Flex>
Expand Down
3 changes: 2 additions & 1 deletion packages/react-liveness/src/components/FaceLivenessDetector/FaceLivenessDetectorCore.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export interface FaceLivenessDetectorCoreProps
export default function FaceLivenessDetectorCore(
props: FaceLivenessDetectorCoreProps
): JSX.Element {
const { components, config, displayText } = props;
const { allowBackCamera, components, config, displayText } = props;
const currElementRef = React.useRef<HTMLDivElement>(null);
const {
hintDisplayText,
Expand Down Expand Up @@ -54,6 +54,7 @@ export default function FaceLivenessDetectorCore(
streamDisplayText={streamDisplayText}
errorDisplayText={errorDisplayText}
components={components}
allowBackCamera={allowBackCamera}
/>
</Flex>
</FaceLivenessDetectorProvider>
Expand Down
65 changes: 34 additions & 31 deletions ...react-liveness/src/components/FaceLivenessDetector/LivenessCheck/LivenessCameraModule.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ export interface LivenessCameraModuleProps {
cameraDisplayText: Required<CameraDisplayText>;
components?: FaceLivenessDetectorComponents;
testId?: string;
allowBackCamera?: boolean;
}

const showMatchIndicatorStates = [
Expand Down Expand Up @@ -102,6 +103,7 @@ export const LivenessCameraModule = (
cameraDisplayText,
components: customComponents,
testId,
allowBackCamera,
} = props;

const { cancelLivenessCheckText, recordingIndicatorText } = streamDisplayText;
Expand Down Expand Up @@ -295,6 +297,12 @@ export const LivenessCameraModule = (

const shouldShowCenteredLoader = isInitCamera || isInitWebsocket;

const shouldAllowCameraSelection =
isStartView &&
selectableDevices &&
selectableDevices.length > 1 &&
(!isMobileScreen || (allowBackCamera && isFaceMovementChallenge));
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes sense to me, only allow camera selection on mobile if allowBackCamera and is face movement challenge

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1, this is a very readable conditional, nice work!


// We don't show full screen camera on the pre check screen (isStartView/isWaitingForCamera)
const shouldShowFullScreenCamera =
isMobileScreen && !isStartView && !shouldShowCenteredLoader;
Expand Down Expand Up @@ -418,38 +426,33 @@ export const LivenessCameraModule = (
<View as="canvas" ref={canvasRef} />
</Flex>

{isStartView &&
!isMobileScreen &&
selectableDevices &&
selectableDevices.length > 1 && (
<Flex className={LivenessClassNames.StartScreenCameraSelect}>
<View
className={
LivenessClassNames.StartScreenCameraSelectContainer
}
{shouldAllowCameraSelection && (
<Flex className={LivenessClassNames.StartScreenCameraSelect}>
<View
className={LivenessClassNames.StartScreenCameraSelectContainer}
>
<Label
htmlFor="amplify-liveness-camera-select"
className={`${LivenessClassNames.StartScreenCameraSelect}__label`}
>
<Label
htmlFor="amplify-liveness-camera-select"
className={`${LivenessClassNames.StartScreenCameraSelect}__label`}
>
Camera:
</Label>
<SelectField
id="amplify-liveness-camera-select"
label="Camera"
labelHidden
value={selectedDeviceId}
onChange={onCameraChange}
>
{selectableDevices?.map((device) => (
<option value={device.deviceId} key={device.deviceId}>
{device.label}
</option>
))}
</SelectField>
</View>
</Flex>
)}
Camera:
</Label>
<SelectField
id="amplify-liveness-camera-select"
label="Camera"
labelHidden
value={selectedDeviceId}
onChange={onCameraChange}
>
{selectableDevices?.map((device) => (
<option value={device.deviceId} key={device.deviceId}>
{device.label}
</option>
))}
</SelectField>
</View>
</Flex>
)}
</View>
</Flex>

Expand Down
3 changes: 3 additions & 0 deletions packages/react-liveness/src/components/FaceLivenessDetector/LivenessCheck/LivenessCheck.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ interface LivenessCheckProps {
streamDisplayText: Required<StreamDisplayText>;
errorDisplayText: Required<ErrorDisplayText>;
components?: FaceLivenessDetectorComponents;
allowBackCamera?: boolean;
}

export const LivenessCheck: React.FC<LivenessCheckProps> = ({
Expand All @@ -47,6 +48,7 @@ export const LivenessCheck: React.FC<LivenessCheckProps> = ({
streamDisplayText,
errorDisplayText,
components,
allowBackCamera,
}: LivenessCheckProps) => {
const [state, send] = useLivenessActor();
const errorState = useLivenessSelector(selectErrorState);
Expand Down Expand Up @@ -176,6 +178,7 @@ export const LivenessCheck: React.FC<LivenessCheckProps> = ({
errorDisplayText={errorDisplayText}
cameraDisplayText={cameraDisplayText}
components={components}
allowBackCamera={allowBackCamera}
/>
);
}
Expand Down
1 change: 1 addition & 0 deletions packages/react-liveness/src/components/FaceLivenessDetector/service/types/liveness.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ export interface FaceLivenessDetectorCoreProps {
* Optional parameter for advanced options for the component
*/
config?: FaceLivenessDetectorCoreConfig;
allowBackCamera?: boolean;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we will want to have a conversion about whether this should be in the config or a top level prop.

}

/**
Expand Down
Loading