React native vision camera ultra wide device doesn't work

Question

I am trying to implement use of ultra wide camera on iphone 12 with react native vision camera but can't get camera to show ultra wide like it does on phone camera when select 0.5x zoom. This is camera data:

{
  "devices": [
    "ultra-wide-angle-camera",
    "wide-angle-camera"
  ],
  "hasFlash": true,
  "hasTorch": true,
  "id": "com.apple.avfoundation.avcapturedevice.built-in_video:6",
  "isMultiCam": true,
  "maxZoom": 123.75,
  "minZoom": 1,
  "name": "Back Dual Wide Camera",
  "neutralZoom": 2,
  "position": "back",
  "supportsDepthCapture": false,
  "supportsFocus": true,
  "supportsLowLightBoost": false,
  "supportsParallelVideoProcessing": true,
  "supportsRawCapture": false
}

This is my code: const devices = useCameraDevices("ultra-wide-angle-camera"); const device = devices.back;

<Camera enableZoomGesture style={StyleSheet.absoluteFill} device={device} isActive={true}/>

It just shows normal camera zoom and if i zoom out max I don't get that ultra wide view. i don't know what I am missing?

score 0 · Answer 1 · answered Apr 25 '23 at 16:10

I had the same issue. I did not register the default with ultra-wide-angle-camera, but instead:

const devices = useCameraDevices()

and then, followed the https://www.react-native-vision-camera.com/docs/guides/zooming where i had to make buttons for the user to select:

// This just maps the zoom factor to a percentage value.
  // so e.g. for [min, neutr., max] values [1, 2, 128] this would result in [0, 0.0081, 1]
  const minZoom = device?.minZoom ?? 1;
  const maxZoom = Math.min(device?.maxZoom ?? 1, MAX_ZOOM_FACTOR);
  const zoom = useSharedValue(device?.neutralZoom || 2);

const handleZoomLevel = (level: ZOOM_LEVELS) => {
    zoom.value = level;
    setZoomLevel(level);
  };

<>
              <PinchGestureHandler onGestureEvent={onPinchGesture} enabled={isActive}>
                <ReanimatedCamera
                  // Do not add enableZoomGesture since using the Animated lib
                  // enableZoomGesture
                  style={{ ...styles.cameraPreview }}
                  ref={cameraRef}
                  photo
                  device={device}
                  isActive={isActive}
                  format={formats?.[0]}
                  animatedProps={animatedProps}
                />
              </PinchGestureHandler>
              <StyleView style={styles.actionButtonsContainer} bottom={8}>
                <StyleView margin={8}>
                  <WideAngleButton onPress={() => handleZoomLevel(ZOOM_LEVELS.WIDE)}/>
                </StyleView>
                <StyleView margin={8}>
                  <NormalButton onPress={() => handleZoomLevel(ZOOM_LEVELS.NORMAL)}/>
                </StyleView>
                <StyleView margin={8}>
                  <TeleButton onPress={() => handleZoomLevel(ZOOM_LEVELS.TELE)}/>
                </StyleView>
                <StyleView margin={8}>
                  <FlashIcon />
                </StyleView>
              </StyleView>
            </>

React native vision camera ultra wide device doesn't work

1 Answers1