@unif/react-native-camera 1.2.5 → 2.0.0

package/src/camera/Camera.tsx

@@ -1,364 +1,237 @@
-/*
- * @Author: 刘利军
- * @Date: 2024-12-02 13:48:40
- * @LastEditors: 刘利军
- * @LastEditTime: 2025-01-17 08:44:43
- * @Description:
- * @PageName:
- */
-
-import { StyleSheet, Pressable } from 'react-native';
-import React, { useCallback, useRef, useState, useEffect } from 'react';
 import {
-  CameraRuntimeError,
-  Camera as VisionCamera,
-  useCameraDevice,
-  useCameraFormat,
-} from 'react-native-vision-camera';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
-import NoCamera from './NoCamera';
-import FocusIndicator from './FocusIndicator';
-
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import { StyleSheet, View } from 'react-native';
 import {
-  type CameraBack,
-  type CameraMode,
+  Camera as VisionCamera,
+  useMicrophonePermission,
+  usePhotoOutput,
+  useVideoOutput,
+  type CameraRef,
+  type CameraDevice,
   type CameraProps,
-  type CameraType,
-  type CustomPhotoFile,
-  type FlashMode,
-  type Resolution,
+  type FocusOptions,
+  type Recorder,
+} from 'react-native-vision-camera';
+import { runOnJS, useSharedValue } from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import type {
+  CameraMode,
+  CustomPhotoFile,
+  PhotoQuality,
+  Point,
 } from '../utils';
-import { Footer } from './footer';
-import { SetUp } from './setup';
-import { PreView, PreViewContainer, SinglePre } from './preview';
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import { useConfirm } from '../hooks';
-import { ViewShotWatermark, WaterMarkRender } from './watermark';
-import Error from './Error';
-
-export const PhotoAspectRatio: { [key: number]: number } = {
-  4: 4 / 3,
-  16: 16 / 9,
-};
-
-let enableShutterSound = false;
-let flash: FlashMode = 'off';
-const Camera: React.FC<{
-  data: CameraProps;
-  back: () => void;
-  onChange: (data: CameraBack) => void;
-}> = ({ data, back, onChange }) => {
-  const { cameraMode, dataRetainedMode } = data;
+import { buildPhotoFile } from '../utils';
+import { capturePhotoToFile } from './capturePhotoHelper';
+import { FocusIndicator } from './FocusIndicator';
+import type { AspectRatio, FlashMode } from './setup';
 
-  const [position, setPosition] = useState<CameraType>(
-    cameraMode?.[0]?.type || 'back'
-  );
-  const [preVis, setPreVis] = useState(false);
+const NEUTRAL_ZOOM = 1;
 
-  const [photoResolution, setPhotoResolution] = useState<
-    Resolution | undefined
-  >(cameraMode?.[0]?.photoResolution);
+export type CameraHandle = {
+  capture: () => Promise<CustomPhotoFile | null>;
+  startVideo: () => Promise<void>;
+  stopVideo: () => Promise<CustomPhotoFile | null>;
+};
 
-  const [videoResolution, setVideoResolution] = useState<
-    Resolution | undefined
-  >(cameraMode?.[0]?.videoResolution);
+type Props = {
+  device: CameraDevice;
+  currentMode: CameraMode;
+  isActive?: boolean;
+  flash?: FlashMode;
+  aspectRatio?: AspectRatio;
+  zoomShared?: SharedValue<number>;
+};
 
-  const [watermarkUriVis, setWatermarkUriVis] = useState(false);
-  const device = useCameraDevice(position, {
-    physicalDevices: [
-      'ultra-wide-angle-camera',
-      'wide-angle-camera',
-      'telephoto-camera',
-    ],
+export const Camera = forwardRef<CameraHandle, Props>(function Camera(
+  { device, currentMode, isActive = true, flash, aspectRatio, zoomShared },
+  ref
+) {
+  const cameraRef = useRef<CameraRef>(null);
+
+  const targetResolution =
+    (aspectRatio ?? '4:3') === '4:3'
+      ? { width: 1080, height: 1440 }
+      : { width: 1080, height: 1920 };
+
+  const photoOutput = usePhotoOutput({
+    qualityPrioritization: (currentMode.photoQuality ??
+      'speed') as PhotoQuality,
+    quality: currentMode.jpegQuality ?? 0.9,
+    targetResolution,
   });
-  const onError = useCallback((error: CameraRuntimeError) => {
-    setCameraError(error);
-  }, []);
-
-  const [aspectRatio, setAspectRatio] = useState<number>(16);
-  const [resizeMode, setResizeMode] = useState<
-    'cover' | 'contain' | undefined
-  >();
-
-  const [zoom, setZoom] = useState(device?.neutralZoom);
-  const format = useCameraFormat(device, [
-    { photoAspectRatio: PhotoAspectRatio[aspectRatio] },
-    { videoAspectRatio: PhotoAspectRatio[aspectRatio] },
-    { videoResolution: videoResolution || 'max' },
-    { photoResolution: photoResolution || 'max' },
-  ]);
-  const camera = useRef<VisionCamera>(null);
-  const [photos, setPhotos] = useState<CustomPhotoFile[]>([]);
-  const [mode, setMode] = useState(cameraMode?.[0]?.mode as CameraMode);
 
-  const { confirmApi, contextHolder } = useConfirm();
-  const [cameraError, setCameraError] = useState<CameraRuntimeError>();
-
-  // 聚焦点状态
-  const [focusPoint, setFocusPoint] = useState<{ x: number; y: number } | null>(
-    null
-  );
-
-  // 防抖定时器
-  const focusTimerRef = useRef<NodeJS.Timeout | null>(null);
-
-  // 点击聚焦处理（带防抖）
-  const handleFocus = useCallback((x: number, y: number) => {
-    // 清除之前的防抖定时器
-    if (focusTimerRef.current) {
-      clearTimeout(focusTimerRef.current);
-    }
+  const videoOutput = useVideoOutput();
+  const { hasPermission: hasMic, requestPermission: requestMic } =
+    useMicrophonePermission();
+
+  const activeRecorderRef = useRef<Recorder | null>(null);
+  const preparedRecorderRef = useRef<Recorder | null>(null);
+  const finishResolverRef = useRef<
+    ((file: CustomPhotoFile | null) => void) | null
+  >(null);
+
+  const internalZoom = useSharedValue(NEUTRAL_ZOOM);
+  const zoom = zoomShared ?? internalZoom;
+  const zoomOffset = useSharedValue(0);
+
+  const pinchGesture = Gesture.Pinch()
+    .onBegin(() => {
+      'worklet';
+      zoomOffset.value = zoom.value;
+    })
+    .onUpdate((e) => {
+      'worklet';
+      const z = zoomOffset.value * e.scale;
+      zoom.value = Math.min(Math.max(z, device.minZoom), device.maxZoom);
+    });
 
-    // 更新聚焦指示器位置
-    setFocusPoint({ x, y });
+  const [focusPoint, setFocusPoint] = useState<Point | null>(null);
 
-    // 防抖延迟执行聚焦
-    focusTimerRef.current = setTimeout(async () => {
+  const handleFocus = useCallback(
+    async (x: number, y: number) => {
+      if (!device.supportsFocusMetering) return;
+      setFocusPoint({ x, y });
       try {
-        await camera.current?.focus({ x, y });
-      } catch (error) {
-        // 忽略 focus-canceled 错误
-        if (
-          error &&
-          typeof error === 'object' &&
-          'code' in error &&
-          error.code !== 'capture/focus-canceled'
-        ) {
-          console.error('Focus error:', error);
-        }
+        await cameraRef.current?.focusTo({ x, y }, {
+          responsiveness: 'snappy',
+          adaptiveness: 'continuous',
+          autoResetAfter: 3,
+        } satisfies FocusOptions);
+      } catch (e) {
+        console.warn('focusTo failed', e);
       }
-      // 延迟清除指示器
-      setTimeout(() => setFocusPoint(null), 400);
-    }, 300);
-  }, []);
+    },
+    [device.supportsFocusMetering]
+  );
 
-  useEffect(() => {
-    return () => {
-      if (focusTimerRef.current) {
-        clearTimeout(focusTimerRef.current);
-      }
-    };
-  }, []);
+  const tapGesture = Gesture.Tap().onEnd(({ x, y }) => {
+    'worklet';
+    runOnJS(handleFocus)(x, y);
+  });
 
-  if (cameraError) {
-    return (
-      <Error data={cameraError} onPress={() => setCameraError(undefined)} />
-    );
-  }
-  if (device == null) {
-    return <NoCamera />;
-  }
+  const composed = Gesture.Simultaneous(pinchGesture, tapGesture);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      capture: async () => {
+        try {
+          const raw = await capturePhotoToFile(photoOutput, {
+            flashMode: flash ?? 'off',
+            enableShutterSound: true,
+          });
+          return buildPhotoFile(
+            { path: raw.path, width: raw.width, height: raw.height },
+            currentMode.mode
+          );
+        } catch (e) {
+          console.warn('capturePhoto failed', e);
+          return null;
+        }
+      },
 
-  const commonBack = () => {
-    setPreVis(false);
-  };
-  const signleBack = () => {
-    setPhotos([]);
-    commonBack();
-  };
+      startVideo: async () => {
+        if (!hasMic) {
+          await requestMic().catch(() => {});
+        }
+        try {
+          let recorder = preparedRecorderRef.current;
+          if (recorder == null) {
+            recorder = await videoOutput.createRecorder({});
+          }
+          preparedRecorderRef.current = null;
+          if (activeRecorderRef.current != null) return;
+          activeRecorderRef.current = recorder;
+
+          await recorder.startRecording(
+            (filePath, _reason) => {
+              const file = buildPhotoFile(
+                { path: filePath, width: 0, height: 0 },
+                'video',
+                true
+              );
+              activeRecorderRef.current = null;
+              finishResolverRef.current?.(file);
+              finishResolverRef.current = null;
+            },
+            (error) => {
+              console.warn('recorder error', error);
+              activeRecorderRef.current = null;
+              finishResolverRef.current?.(null);
+              finishResolverRef.current = null;
+            },
+            () => {},
+            () => {}
+          );
+
+          preparedRecorderRef.current = await videoOutput.createRecorder({});
+        } catch (e) {
+          console.warn('startRecording failed', e);
+          activeRecorderRef.current = null;
+        }
+      },
+
+      stopVideo: async () => {
+        const active = activeRecorderRef.current;
+        if (active == null) return null;
+        try {
+          const durationSec = active.recordedDuration;
+          const finishedPromise = new Promise<CustomPhotoFile | null>(
+            (resolve) => {
+              finishResolverRef.current = (file) => {
+                if (file != null && durationSec != null) {
+                  resolve({ ...file, duration: durationSec });
+                } else {
+                  resolve(file);
+                }
+              };
+            }
+          );
+          await active.stopRecording();
+          return await finishedPromise;
+        } catch (e) {
+          console.warn('stopRecording failed', e);
+          activeRecorderRef.current = null;
+          return null;
+        }
+      },
+    }),
+    [photoOutput, videoOutput, currentMode.mode, hasMic, requestMic, flash]
+  );
 
-  const isSingle = () => dataRetainedMode === 'clear' && mode === 'single';
-  const showPreview = () => {
-    setPreVis(true);
-  };
-  const showVideo = () => cameraMode.some((item) => item.mode === 'video');
+  const outputs = currentMode.mode === 'video' ? [videoOutput] : [photoOutput];
 
-  const confirm = () => {
-    onChange({
-      code: 200,
-      data: photos.map((item) => ({
-        cameraMode: item.mode,
-        id: new Date().getTime().toString(),
-        cameraType: item.cameraType,
-        path: item.path,
-      })),
-      message: '保存成功',
-    });
-  };
-  const openViewShotWatermark = () => {
-    setWatermarkUriVis((val) => !val);
-  };
   return (
-    <GestureHandlerRootView>
-      <SafeAreaProvider>
+    <GestureDetector gesture={composed}>
+      <View style={StyleSheet.absoluteFill}>
         <VisionCamera
-          onError={onError}
-          zoom={zoom}
-          preview={true}
-          ref={camera}
-          style={styles.camera}
+          ref={cameraRef}
+          style={StyleSheet.absoluteFill}
           device={device}
-          isActive={true}
-          enableZoomGesture={true}
-          photoQualityBalance="speed"
-          photo={true}
-          video={showVideo()}
-          audio={showVideo()}
-          resizeMode={resizeMode}
-          format={format}
-        />
-
-        <Pressable
-          style={styles.cameraOverlay}
-          onPress={(event) => {
-            const { locationX, locationY } = event.nativeEvent;
-            handleFocus(locationX, locationY);
-          }}
-        />
-
-        <SetUp
-          isMultiCam={false}
-          onChange={(val) => (flash = val)}
-          onAspectRationChange={setAspectRatio}
-          onScreenChange={setResizeMode}
-          onVolumeChange={(val) => (enableShutterSound = val)}
-          onFishEyeOpen={(val) => {
-            if (val === 'fishEye') {
-              setZoom(device.minZoom);
-            }
-            if (val === 'default') {
-              setZoom(device.neutralZoom);
-            }
-          }}
-        />
-        <Footer
-          cameraMode={cameraMode}
-          photos={photos}
-          backPress={async () => {
-            if (photos.length > 0) {
-              const isBack = await confirmApi.open({
-                text: '返回会清空已拍摄数据,请确认!',
-              });
-              if (isBack) {
-                back();
-              }
-            } else {
-              back();
-            }
-          }}
-          thumbnailPress={showPreview}
-          onChange={(item) => {
-            if (dataRetainedMode === 'clear') {
-              setPhotos([]);
-            }
-            setMode(item.mode);
-            setPhotoResolution(item.photoResolution);
-            setVideoResolution(item.videoResolution);
-          }}
-          takePress={async () => {
-            const photo = await camera.current?.takePhoto({
-              flash,
-              enableShutterSound: enableShutterSound,
-            });
-            if (photo) {
-              setPhotos((p) => [
-                ...p,
-                {
-                  ...photo,
-                  frontTime: new Date().getTime(),
-                  mode,
-                  cameraType: position,
-                },
-              ]);
-            }
-            // 拍照后进行水印
-            if (data.watermark) {
-              openViewShotWatermark();
-            } else {
-              if (isSingle()) {
-                showPreview();
-              }
-            }
-          }}
-          savePress={() => confirm()}
-          rotatePress={() => {
-            setPosition((val) => {
-              if (val === 'back') {
-                return 'front';
-              }
-              return 'back';
-            });
-          }}
+          isActive={isActive}
+          outputs={outputs as CameraProps['outputs']}
+          constraints={[{ photoHDR: false }]}
+          zoom={zoom}
+          torchMode={
+            currentMode.mode === 'video' && flash === 'on' ? 'on' : 'off'
+          }
+          onSubjectAreaChanged={() => cameraRef.current?.resetFocus()}
+          nativeID="vision-camera"
         />
-
-        {watermarkUriVis && (
-          <ViewShotWatermark
-            resizeMode={resizeMode}
-            data={photos.at(-1)}
-            watermark={data.watermark}
-            onChange={(value) => {
-              setPhotos((photosList) => {
-                return photosList.map((item) => {
-                  if (item.frontTime === value.frontTime) {
-                    return value;
-                  }
-                  return item;
-                });
-              });
-              openViewShotWatermark();
-              if (isSingle()) {
-                showPreview();
-              }
-            }}
-          />
-        )}
-
-        <PreViewContainer visible={preVis}>
-          {isSingle() ? (
-            <SinglePre
-              resizeMode={resizeMode}
-              uri={photos[0]?.path as string}
-              onBack={() => signleBack()}
-              onSave={() => confirm()}
-            />
-          ) : (
-            <PreView
-              cameraMode={cameraMode}
-              data={photos}
-              onBack={() => commonBack()}
-              onDel={async (snapItem) => {
-                const isConfirm = await confirmApi.open({
-                  text: '图片删除后无法恢复,请确认!',
-                });
-                if (isConfirm) {
-                  setPhotos((photoList) => {
-                    return photoList.filter(
-                      (photo) => photo.path !== snapItem?.path
-                    );
-                  });
-                  return isConfirm;
-                }
-                return isConfirm;
-              }}
-            />
-          )}
-        </PreViewContainer>
-        {data.watermark && <WaterMarkRender data={data.watermark} />}
-        {contextHolder}
-
-        {/* 聚焦指示器 */}
         {focusPoint && (
           <FocusIndicator
             key={`${focusPoint.x}-${focusPoint.y}`}
-            x={focusPoint.x}
-            y={focusPoint.y}
+            point={focusPoint}
+            onAnimationEnd={() => setFocusPoint(null)}
           />
         )}
-      </SafeAreaProvider>
-    </GestureHandlerRootView>
+      </View>
+    </GestureDetector>
   );
-};
-
-export default Camera;
-
-const styles = StyleSheet.create({
-  camera: { flex: 1, backgroundColor: '#000' },
-  cameraOverlay: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    zIndex: 1,
-  },
 });