React liveness/provide default device info

.changeset/chilly-olives-dress.md

@@ -0,0 +1,5 @@
+---
+'@aws-amplify/ui-react-liveness': minor
+---
+
+Pass default device info using ID and label; prioritize label over ID. Emit detailed device info on camera selection/change. Add warnings for default device not found and camera change events.

packages/react-liveness/src/components/FaceLivenessDetector/LivenessCheck/LivenessCameraModule.tsx

@@ -145,6 +145,40 @@ export const LivenessCameraModule = (
     recording: 'flashFreshnessColors',
   });
 
+  // Update the device if the selectedDeviceId changes
+  React.useEffect(() => {
+    if (
+      selectedDeviceId &&
+      Array.isArray(selectableDevices) &&
+      selectableDevices.length > 0
+    ) {
+      const device = selectableDevices.find(
+        (d) => d.deviceId === selectedDeviceId
+      );
+      if (device) {
+        // Update the device in the state machine
+        const changeCamera = async () => {
+          try {
+            const newStream = await navigator.mediaDevices.getUserMedia({
+              video: {
+                ...videoConstraints,
+                deviceId: { exact: selectedDeviceId },
+              },
+              audio: false,
+            });
+            send({
+              type: 'UPDATE_DEVICE_AND_STREAM',
+              data: { newDeviceId: selectedDeviceId, newStream },
+            });
+          } catch (error: any) {
+            throw new Error('Error updating device:');
+          }
+        };
+        changeCamera();
+      }
+    }
+  }, [selectedDeviceId, selectableDevices, send, videoConstraints]);
+
   // Android/Firefox and iOS flip the values of width/height returned from
   // getUserMedia, so we'll reset these in useLayoutEffect with the videoRef
   // element's intrinsic videoWidth and videoHeight attributes

packages/react-liveness/src/components/FaceLivenessDetector/LivenessCheck/__tests__/LivenessCameraModule.test.tsx

@@ -1,8 +1,14 @@
 import * as React from 'react';
-import { screen, waitFor } from '@testing-library/react';
+import {
+  screen,
+  waitFor,
+  fireEvent,
+  act,
+  render,
+} from '@testing-library/react';
 import { when, resetAllWhenMocks } from 'jest-when';
 import { LivenessClassNames } from '../../types/classNames';
-
+import { mockVideoMediaStream } from '../../service/utils/__mocks__/testUtils';
 import {
   renderWithLivenessProvider,
   getMockedFunction,
@@ -28,6 +34,7 @@ import { FaceMatchState } from '../../service';
 import * as Device from '../../utils/device';
 import { getDisplayText } from '../../utils/getDisplayText';
 import { selectIsRecordingStopped } from '../LivenessCheck';
+import { selectErrorState } from '../../shared';
 
 jest.mock('../../hooks');
 jest.mock('../../hooks/useLivenessSelector');
@@ -41,6 +48,15 @@ const mockUseLivenessActor = getMockedFunction(useLivenessActor);
 const mockUseLivenessSelector = getMockedFunction(useLivenessSelector);
 const mockUseMediaStreamInVideo = getMockedFunction(useMediaStreamInVideo);
 
+// Mock navigator.mediaDevices.getUserMedia
+const mockGetUserMedia = jest.fn();
+Object.defineProperty(global.navigator, 'mediaDevices', {
+  value: {
+    getUserMedia: mockGetUserMedia,
+  },
+  writable: true,
+});
+
 const mockDevices = [
   {
     deviceId: '123',
@@ -80,6 +96,23 @@ describe('LivenessCameraModule', () => {
   } = getDisplayText(undefined);
   const { cancelLivenessCheckText, recordingIndicatorText } = streamDisplayText;
 
+  const mockVideoConstraints = {
+    width: { ideal: 1280 },
+    height: { ideal: 720 },
+    facingMode: 'user',
+  };
+
+  const mockSelectableDevices = [
+    { deviceId: 'device-1', label: 'Camera 1' },
+    { deviceId: 'device-2', label: 'Camera 2' },
+    { deviceId: 'device-3', label: 'Camera 3' },
+  ];
+
+  const mockMediaStream = {
+    getTracks: jest.fn(() => []),
+    getVideoTracks: jest.fn(() => []),
+  };
+
   function mockStateMatchesAndSelectors() {
     when(mockActorState.matches)
       .calledWith('initCamera')
@@ -96,8 +129,18 @@ describe('LivenessCameraModule', () => {
       .mockReturnValue(isNotRecording)
       .calledWith('start')
       .mockReturnValue(isStart)
+      .calledWith('userCancel')
+      .mockReturnValue(false)
+      .calledWith('waitForDOMAndCameraDetails')
+      .mockReturnValue(false)
+      .calledWith('detectFaceBeforeStart')
+      .mockReturnValue(false)
       .calledWith('recording')
-      .mockReturnValue(isRecording);
+      .mockReturnValue(isRecording)
+      .calledWith('checkSucceeded')
+      .mockReturnValue(false)
+      .calledWith({ recording: 'flashFreshnessColors' })
+      .mockReturnValue(false);
   }
 
   beforeEach(() => {
@@ -109,6 +152,7 @@ describe('LivenessCameraModule', () => {
       videoHeight: 100,
       videoWidth: 100,
     });
+    mockGetUserMedia.mockResolvedValue(mockMediaStream);
     drawStaticOvalSpy.mockClear();
     (global.navigator.mediaDevices as any) = {
       getUserMedia: jest.fn(),
@@ -736,4 +780,80 @@ describe('LivenessCameraModule', () => {
     });
     expect(drawStaticOvalSpy).toHaveBeenCalledTimes(1);
   });
+  describe('Camera Device Switching', () => {
+    it('should call getUserMedia with correct constraints when camera changes', async () => {
+      // Reset all mocks before test
+      jest.clearAllMocks();
+      isStart = true;
+      mockStateMatchesAndSelectors();
+
+      const newDeviceId = 'new-camera-device-id';
+      const mockGetUserMedia = jest
+        .fn()
+        .mockResolvedValue(mockVideoMediaStream);
+
+      // Mock navigator.mediaDevices using Object.defineProperty
+      Object.defineProperty(global.navigator, 'mediaDevices', {
+        value: {
+          getUserMedia: mockGetUserMedia,
+          enumerateDevices: jest.fn(),
+        },
+        writable: true,
+      });
+
+      // Mock the selectors to return multiple devices and video constraints
+      mockUseLivenessSelector.mockImplementation((selector) => {
+        if (selector === selectSelectableDevices) {
+          return [
+            { deviceId: 'device-1', label: 'Camera 1' },
+            { deviceId: newDeviceId, label: 'Camera 2' },
+          ];
+        }
+        if (selector === selectSelectedDeviceId) {
+          return 'device-1';
+        }
+        if (selector === selectVideoConstraints) {
+          return mockVideoConstraints;
+        }
+        return undefined;
+      });
+
+      await waitFor(() => {
+        renderWithLivenessProvider(
+          <LivenessCameraModule
+            isMobileScreen={false}
+            isRecordingStopped={false}
+            hintDisplayText={hintDisplayText}
+            streamDisplayText={streamDisplayText}
+            errorDisplayText={errorDisplayText}
+            cameraDisplayText={cameraDisplayText}
+            instructionDisplayText={instructionDisplayText}
+          />
+        );
+      });
+
+      const videoEl = screen.getByTestId('video');
+      await waitFor(() => {
+        videoEl.dispatchEvent(new Event('loadedmetadata'));
+      });
+
+      // Find the camera selector dropdown
+      const cameraSelector = screen.getByRole('combobox') as HTMLSelectElement;
+      expect(cameraSelector).toBeInTheDocument();
+
+      // Simulate changing the camera selection
+      fireEvent.change(cameraSelector, { target: { value: newDeviceId } });
+
+      // Verify getUserMedia was called with the correct constraints
+      await waitFor(() => {
+        expect(mockGetUserMedia).toHaveBeenCalledWith({
+          video: {
+            ...mockVideoConstraints,
+            deviceId: { exact: newDeviceId },
+          },
+          audio: false,
+        });
+      });
+    });
+  });
 });