fix: make mediaWidth/height logic more device agnostic (#727)

packages/react/src/components/Liveness/LivenessCheck/LivenessCameraModule.tsx

@@ -8,9 +8,9 @@ import {
   useLivenessSelector,
   createLivenessSelector,
   useMediaStreamInVideo,
+  useMediaDimensions,
 } from '../hooks';
 import { CancelButton, Instruction, RecordingIcon, Overlay } from '../shared';
-import { isFirefox, isAndroid, isIOS } from '../utils/device';
 import { Flex, Loader, Text, View } from '../../../primitives';
 import { LivenessClassNames } from '../types/classNames';
 
@@ -41,6 +41,12 @@ export const LivenessCameraModule = (
     videoStream,
     videoConstraints
   );
+
+  const { width: mediaWidth, height: mediaHeight } = useMediaDimensions(
+    videoWidth,
+    videoHeight
+  );
+
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const freshnessColorRef = useRef<HTMLDivElement | null>(null);
 
@@ -52,15 +58,6 @@ export const LivenessCameraModule = (
   const isRecording = state.matches('recording');
   const isCheckSucceeded = state.matches('checkSucceeded');
 
-  /**
-   * Temp fix: Firefox on Android + iOS returns opposite values you'd expect
-   * from getUserMedia().
-   */
-  const shouldFlipValues = (isAndroid() && isFirefox()) || isIOS();
-
-  const mediaHeight = shouldFlipValues ? videoWidth : videoHeight;
-  const mediaWidth = shouldFlipValues ? videoHeight : videoWidth;
-
   React.useLayoutEffect(() => {
     if (isCameraReady) {
       send({

packages/react/src/components/Liveness/LivenessCheck/__tests__/LivenessCameraModule.test.tsx

@@ -5,11 +5,13 @@ import { when, resetAllWhenMocks } from 'jest-when';
 import {
   renderWithLivenessProvider,
   getMockedFunction,
+  mockMatchMedia,
 } from '../../utils/test-utils';
 import {
   useLivenessActor,
   useLivenessSelector,
   useMediaStreamInVideo,
+  useMediaDimensions,
 } from '../../hooks';
 import {
   LivenessCameraModule,
@@ -25,6 +27,7 @@ jest.mock('../../shared/Instruction');
 const mockUseLivenessActor = getMockedFunction(useLivenessActor);
 const mockUseLivenessSelector = getMockedFunction(useLivenessSelector);
 const mockUseMediaStreamInVideo = getMockedFunction(useMediaStreamInVideo);
+const mockUseMediaDimensions = getMockedFunction(useMediaDimensions);
 
 describe('LivenessCameraModule', () => {
   const mockActorState: any = {
@@ -47,13 +50,18 @@ describe('LivenessCameraModule', () => {
   }
 
   beforeEach(() => {
+    mockMatchMedia();
     mockUseLivenessActor.mockReturnValue([mockActorState, mockActorSend]);
     mockUseLivenessSelector.mockReturnValueOnce({}).mockReturnValueOnce({});
     mockUseMediaStreamInVideo.mockReturnValue({
       videoRef: { current: document.createElement('video') },
       videoHeight: 100,
       videoWidth: 100,
     });
+    mockUseMediaDimensions.mockReturnValue({
+      width: 100,
+      height: 100,
+    });
   });
 
   afterEach(() => {

packages/react/src/components/Liveness/__tests__/LivenessFlow.test.tsx

@@ -3,9 +3,13 @@ import { render, screen } from '@testing-library/react';
 import { useActor } from '@xstate/react';
 
 import { FaceLivenessDetector, FaceLivenessDetectorProps } from '..';
-import { getMockedFunction } from '../utils/test-utils';
+import { getMockedFunction, mockMatchMedia } from '../utils/test-utils';
 import { getVideoConstraints } from '../StartLiveness/helpers';
-import { useMediaStreamInVideo, useLivenessActor } from '../hooks';
+import {
+  useMediaStreamInVideo,
+  useLivenessActor,
+  useMediaDimensions,
+} from '../hooks';
 
 jest.mock('../../../styles.css', () => ({}));
 jest.mock('@xstate/react');
@@ -16,6 +20,7 @@ const mockUseActor = getMockedFunction(useActor);
 const mockUseLivenessActor = getMockedFunction(useLivenessActor);
 const mockGetVideoConstraints = getMockedFunction(getVideoConstraints);
 const mockUseMediaStreamInVideo = getMockedFunction(useMediaStreamInVideo);
+const mockUseMediaDimensions = getMockedFunction(useMediaDimensions);
 const mockMatches = jest.fn().mockImplementation(() => {
   return true;
 });
@@ -33,6 +38,10 @@ describe('FaceLivenessDetector', () => {
     videoHeight: 100,
     videoWidth: 100,
   });
+  mockUseMediaDimensions.mockReturnValue({
+    width: 100,
+    height: 100,
+  });
 
   const mockVideoConstraints = {};
   mockGetVideoConstraints.mockReturnValue(mockVideoConstraints);
@@ -47,6 +56,10 @@ describe('FaceLivenessDetector', () => {
   const livenessTestId = 'liveness-detector';
   const livenessCheckTestId = 'liveness-detector-check';
 
+  beforeAll(() => {
+    mockMatchMedia();
+  });
+
   afterEach(() => {
     jest.clearAllMocks();
   });

packages/react/src/components/Liveness/hooks/__tests__/useMediaDimensions.test.ts

@@ -0,0 +1,99 @@
+import { renderHook } from '@testing-library/react-hooks';
+
+import { useMediaDimensions } from '../useMediaDimensions';
+import { getMockedFunction } from '../../utils/test-utils';
+import { isMobileScreen, isPortrait } from '../../utils/device';
+
+jest.mock('../../utils/device');
+const mockIsMobileScreen = getMockedFunction(isMobileScreen);
+const mockIsPortrait = getMockedFunction(isPortrait);
+
+describe('useMediaDimensions mobile portrait', () => {
+  beforeEach(() => {
+    mockIsMobileScreen.mockReturnValue(true);
+    mockIsPortrait.mockReturnValue(true);
+  });
+  it('should return portrait sized dimensions when width is less than height', () => {
+    const videoWidth = 360;
+    const videoHeight = 640;
+
+    const { result } = renderHook(() => {
+      return useMediaDimensions(videoWidth, videoHeight);
+    });
+
+    expect(result.current.width).toBe(360);
+    expect(result.current.height).toBe(640);
+  });
+  it('should return portrait sized dimensions when width is greater than height', () => {
+    const videoWidth = 640;
+    const videoHeight = 360;
+
+    const { result } = renderHook(() => {
+      return useMediaDimensions(videoWidth, videoHeight);
+    });
+
+    expect(result.current.width).toBe(360);
+    expect(result.current.height).toBe(640);
+  });
+});
+
+describe('useMediaDimensions mobile landscape', () => {
+  beforeEach(() => {
+    mockIsMobileScreen.mockReturnValue(true);
+    mockIsPortrait.mockReturnValue(false);
+  });
+  it('should return landscape sized dimensions when width is greater than height', () => {
+    const videoWidth = 640;
+    const videoHeight = 480;
+
+    const { result } = renderHook(() => {
+      return useMediaDimensions(videoWidth, videoHeight);
+    });
+
+    expect(result.current.width).toBe(640);
+    expect(result.current.height).toBe(480);
+  });
+  it('should return portrait sized dimensions when width is less than height', () => {
+    const videoWidth = 480;
+    const videoHeight = 640;
+
+    const { result } = renderHook(() => {
+      return useMediaDimensions(videoWidth, videoHeight);
+    });
+
+    expect(result.current.width).toBe(640);
+    expect(result.current.height).toBe(480);
+  });
+});
+
+describe('useMediaDimensions desktop', () => {
+  it('should return videoWidth and videoHeight as width and height on portrait', () => {
+    mockIsMobileScreen.mockReturnValue(false);
+    mockIsPortrait.mockReturnValue(true);
+
+    const videoWidth = 640;
+    const videoHeight = 480;
+
+    const { result } = renderHook(() => {
+      return useMediaDimensions(videoWidth, videoHeight);
+    });
+
+    expect(result.current.width).toBe(videoWidth);
+    expect(result.current.height).toBe(videoHeight);
+  });
+
+  it('should return videoWidth and videoHeight as width and height on landscape', () => {
+    mockIsMobileScreen.mockReturnValue(false);
+    mockIsPortrait.mockReturnValue(true);
+
+    const videoWidth = 480;
+    const videoHeight = 640;
+
+    const { result } = renderHook(() => {
+      return useMediaDimensions(videoWidth, videoHeight);
+    });
+
+    expect(result.current.width).toBe(videoWidth);
+    expect(result.current.height).toBe(videoHeight);
+  });
+});

packages/react/src/components/Liveness/hooks/index.ts

@@ -1,3 +1,4 @@
 export * from './useLivenessActor';
 export * from './useLivenessSelector';
 export * from './useMediaStreamInVideo';
+export * from './useMediaDimensions';

packages/react/src/components/Liveness/hooks/useMediaDimensions.ts

@@ -0,0 +1,43 @@
+import { useLayoutEffect, useState } from 'react';
+import { isPortrait, isMobileScreen } from '../utils/device';
+
+interface UseMediaDimensionsResults {
+  width: number;
+  height: number;
+}
+
+/**
+ * Calculate video dimensions based on the width and height values
+ * supplied in LivenessCameraModule from getUserMedia.
+ * In our testing, some devices and browser combos on mobile return
+ * opposite values than you would expect from getUserMedia so we need
+ * to manually test dimensions before setting the mediaWidth/Height
+ * for portrait and landscape.
+ * Known affected browsers:
+ * - Firefox on Android
+ * - iOS
+ */
+export function useMediaDimensions(
+  videoWidth: number,
+  videoHeight: number
+): UseMediaDimensionsResults {
+  const [width, setWidth] = useState<number>(videoWidth);
+  const [height, setHeight] = useState<number>(videoHeight);
+
+  useLayoutEffect(() => {
+    if (isMobileScreen()) {
+      if (isPortrait()) {
+        setWidth(videoWidth < videoHeight ? videoWidth : videoHeight);
+        setHeight(videoWidth < videoHeight ? videoHeight : videoWidth);
+      } else {
+        setWidth(videoWidth > videoHeight ? videoWidth : videoHeight);
+        setHeight(videoWidth > videoHeight ? videoHeight : videoWidth);
+      }
+    } else {
+      setWidth(videoWidth);
+      setHeight(videoHeight);
+    }
+  }, [videoWidth, videoHeight]);
+
+  return { width, height };
+}

packages/react/src/components/Liveness/utils/__tests__/device.test.ts

@@ -1,10 +1,4 @@
-import {
-  isAndroid,
-  isFirefox,
-  isIOS,
-  isMobileScreen,
-  isPortrait,
-} from '../device';
+import { isAndroid, isIOS, isMobileScreen, isPortrait } from '../device';
 
 const GOOGLE_PIXEL_FIREFOX =
   'Mozilla/5.0 (Linux; Android 12; Pixel 6 Build/SD1A.210817.023; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Firefox/94.0.4606.71 Mobile Safari/537.36';
@@ -88,12 +82,4 @@ describe('device', () => {
     (global.navigator as any).userAgent = IPHONE_12_SAFARI;
     expect(isAndroid()).toBe(false);
   });
-
-  it('isFirefox', () => {
-    (global.navigator as any).userAgent = GOOGLE_PIXEL_CHROME;
-    expect(isFirefox()).toBe(false);
-
-    (global.navigator as any).userAgent = GOOGLE_PIXEL_FIREFOX;
-    expect(isFirefox()).toBe(true);
-  });
 });

packages/react/src/components/Liveness/utils/device.ts

@@ -22,9 +22,6 @@ export function isIOS(): boolean {
 export function isAndroid(): boolean {
   return navigator.userAgent.indexOf('Android') != -1;
 }
-export function isFirefox(): boolean {
-  return navigator.userAgent.indexOf('Firefox') != -1;
-}
 
 export function isPortrait(): boolean {
   return window.matchMedia('(orientation: portrait)').matches;

packages/react/src/components/Liveness/utils/test-utils.tsx

@@ -42,3 +42,20 @@ export function getMockedFunction<T extends (...args: any[]) => any>(
 ): jest.MockedFunction<T> {
   return fn as jest.MockedFunction<T>;
 }
+
+export function mockMatchMedia(
+  mediaQuery: string = '',
+  matches: boolean = false
+): void {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation((query: string = mediaQuery) => ({
+      matches: matches,
+      media: query,
+      onchange: null,
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+    })),
+  });
+}