perf: Choose more efficient Camera Format, Use optical Video Stabilization

src/App.tsx

@@ -25,6 +25,12 @@ import {TapGestureHandler} from 'react-native-gesture-handler';
 import StaticSafeAreaInsets from 'react-native-static-safe-area-insets';
 import {AnimatedStatusBar} from './components/AnimatedStatusBar';
 import {BlurView} from '@react-native-community/blur';
+import {
+  getBestVideoStabilizationMode,
+  logDevice,
+  logFormat,
+  sortFormats,
+} from './utils/sortFormats';
 
 const IS_IOS = Platform.OS === 'ios';
 const BackgroundView = IS_IOS
@@ -74,6 +80,20 @@ export function App() {
     console.log('Camera initialized!');
   }, []);
 
+  const format = useMemo(() => {
+    if (device == null) {
+      return undefined;
+    }
+    const formats = sortFormats(device.formats);
+    return formats[0];
+  }, [device]);
+  const videoStabilizationMode = useMemo(() => {
+    if (format == null) {
+      return undefined;
+    }
+    return getBestVideoStabilizationMode(format.videoStabilizationModes);
+  }, [format]);
+
   const isActiveAnimation = useDerivedValue(
     () =>
       withSpring(isHolding.value ? 0 : 1, {
@@ -192,12 +212,15 @@ export function App() {
     };
   }, [isPageActive, isHolding]);
 
+  useEffect(() => {
+    logDevice(device);
+    logFormat(format);
+  }, [device, format]);
+
   if (device == null) {
     return <View style={styles.blackscreen} />;
   }
 
-  console.log(`Camera Device: ${device.name}`);
-
   return (
     <TapGestureHandler
       onBegan={onTapBegin}
@@ -216,6 +239,8 @@ export function App() {
           device={device}
           isActive={true} // <-- overriden by animatedProps
           frameProcessor={frameProcessor}
+          format={format}
+          videoStabilizationMode={videoStabilizationMode}
           style={styles.camera}
           onError={onCameraError}
           onInitialized={onCameraInitialized}

src/utils/sortFormats.ts

@@ -0,0 +1,127 @@
+import {Dimensions, PixelRatio} from 'react-native';
+import type {
+  CameraDevice,
+  CameraDeviceFormat,
+  VideoStabilizationMode,
+} from 'react-native-vision-camera';
+
+export function getBestVideoStabilizationMode(
+  stabilizationModes: VideoStabilizationMode[],
+): VideoStabilizationMode | undefined {
+  if (stabilizationModes.includes('cinematic-extended')) {
+    return 'cinematic-extended';
+  }
+  if (stabilizationModes.includes('cinematic')) {
+    return 'cinematic';
+  }
+  if (stabilizationModes.includes('standard')) {
+    return 'standard';
+  }
+  if (stabilizationModes.includes('auto')) {
+    return 'auto';
+  }
+  return undefined;
+}
+
+function getVideoStabilizationModeScore(
+  stabilizationMode: VideoStabilizationMode,
+): number {
+  switch (stabilizationMode) {
+    case 'cinematic-extended':
+      return 4;
+    case 'cinematic':
+      return 3;
+    case 'standard':
+      return 2;
+    case 'auto':
+      return 1;
+    case 'off':
+    default:
+      return 0;
+  }
+}
+
+const SCREEN_HEIGHT = Dimensions.get('window').height * PixelRatio.get();
+
+/**
+ * Custom Format sorter function. Copies the array instead of sorting in-place.
+ *
+ * Sorts by:
+ * * Better/More "stable" Video Stabilization Mode
+ * * Lower video resolution for faster processing.
+ */
+export function sortFormats(
+  deviceFormats: readonly CameraDeviceFormat[],
+): CameraDeviceFormat[] {
+  const formats = [...deviceFormats];
+  formats.sort((left, right) => {
+    let leftScore = 0;
+    let rightScore = 0;
+
+    const leftBestStabilizationMode = getBestVideoStabilizationMode(
+      left.videoStabilizationModes,
+    );
+    const rightBestStabilizationMode = getBestVideoStabilizationMode(
+      right.videoStabilizationModes,
+    );
+    const leftVideoStabilizationScore = getVideoStabilizationModeScore(
+      leftBestStabilizationMode ?? 'off',
+    );
+    const rightVideoStabilizationScore = getVideoStabilizationModeScore(
+      rightBestStabilizationMode ?? 'off',
+    );
+    if (rightVideoStabilizationScore > leftVideoStabilizationScore) {
+      rightScore += 1;
+    } else if (leftVideoStabilizationScore > rightVideoStabilizationScore) {
+      leftScore += 1;
+    }
+
+    const leftPixelsDiff = SCREEN_HEIGHT - left.videoWidth;
+    const rightPixelsDiff = SCREEN_HEIGHT - right.videoWidth;
+    if (rightPixelsDiff < leftPixelsDiff) {
+      rightScore += 1;
+    } else if (leftPixelsDiff < rightPixelsDiff) {
+      leftScore += 1;
+    }
+
+    return rightScore - leftScore;
+  });
+  return formats;
+}
+
+export function logDevice(device: CameraDevice | undefined) {
+  if (device == null) {
+    console.log('No Camera Device!');
+  } else {
+    console.log(`Camera Device: ${device.name} (${device.id})`);
+  }
+}
+
+export function logFormat(format: CameraDeviceFormat | undefined) {
+  if (format == null) {
+    console.log('No Camera Format!');
+  } else {
+    const resolution = `${format.videoWidth}x${format.videoHeight}`;
+    const videoStabilizationMode = getBestVideoStabilizationMode(
+      format.videoStabilizationModes,
+    );
+    const minFpsSorted = format.frameRateRanges.sort(
+      (left, right) => left.minFrameRate - right.minFrameRate,
+    );
+    const minFps = minFpsSorted[0]?.minFrameRate ?? 0;
+    const maxFpsSorted = format.frameRateRanges.sort(
+      (left, right) => left.maxFrameRate - right.maxFrameRate,
+    );
+    const maxFps = maxFpsSorted[maxFpsSorted.length - 1]?.maxFrameRate ?? 0;
+    const colorSpaces = `[${format.colorSpaces.join(', ')}]`;
+
+    console.log(
+      `Device Format: ${resolution} (` +
+        `Video Stabilization: ${videoStabilizationMode} | ` +
+        `Color Spaces: ${colorSpaces} | ` +
+        `FPS: ${minFps} FPS - ${maxFps} FPS | ` +
+        `ISO: ${format.minISO} - ${format.maxISO} | ` +
+        `Supports Video HDR: ${format.supportsVideoHDR})`,
+    );
+  }
+}