🐛 External Camera not showing under available devices

[Korangamanish4]

What's happening?

I want my app to have a feature to access external camera, Since in docs this library mentioned about external camera, I tried using it but not able to see external camera under available devices. Although the external camera shows in other apps that I downloaded from play store.

My RN version is "0.70.13" and this library's version is "^2.15.4".

Reproduceable Code

/* eslint-disable react-native/no-inline-styles */
import {Camera, useCameraDevices} from 'react-native-vision-camera';
import {Linking, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import React, {useState} from 'react';

const App = () => {
  const device = useCameraDevices();

  console.log('DEVICE ', device);
  const [cameraPosition, setCameraPosition] = useState('');
  const [currentPosition, setCurrentPosition] = useState('');

  React.useEffect(() => {
    requestCameraPermission();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  React.useEffect(() => {
    setCameraPosition(device.front);
    setCurrentPosition('front');
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [device]);

  const requestCameraPermission = React.useCallback(async () => {
    const permission = await Camera.requestCameraPermission();

    if (permission === 'denied') {
      console.log('Permission not granted');
      await Linking.openSettings();
    }
  }, []);

  return (
    <>
      {cameraPosition !== undefined && cameraPosition !== '' && (
        <Camera
          style={styles.body}
          device={cameraPosition ? cameraPosition : device.front}
          isActive={true}
        />
      )}
      <TouchableOpacity
        style={styles.button}
        onPress={() => {
          setCurrentPosition(currentPosition === 'front' ? 'back' : 'front');
          setCameraPosition(
            currentPosition === 'front' ? device.back : device.front,
          );
        }}>
        <Text style={styles.text}>CHANGE CAMERA</Text>
      </TouchableOpacity>
      <TouchableOpacity
        style={styles.button}
        onPress={() => {
          if (device.external !== undefined) {
            setCameraPosition(device.external);
          }
        }}>
        <Text style={styles.text}>CHANGE TO EXTERNAL</Text>
      </TouchableOpacity>
      <Text style={{alignSelf: 'center', fontWeight: 'bold', marginTop: 15}}>
        AVAILABLE DEVICES
      </Text>
      <View style={{paddingHorizontal: 20, marginTop: 10}}>
        <Text>{device.front?.name}</Text>
        <Text>{device.back?.name}</Text>
        <Text>{device.external?.name}</Text>
        <Text>{device.unspecified?.name}</Text>
      </View>
    </>
  );
};

export default App;

const styles = StyleSheet.create({
  body: {
    flex: 1,
  },
  button: {
    marginTop: 20,
    padding: 10,
    alignSelf: 'center',
    backgroundColor: 'green',
    borderRadius: 5,
  },
  text: {
    color: 'white',
    fontWeight: 'bold',
  },
});

Relevant log output

NA

Camera Device

DEVICE  {"back": {"devices": ["wide-angle-camera"], "formats": [[Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object]], "hasFlash": true, "hasTorch": true, "id": "0", "isMultiCam": false, "maxZoom": 10, "minZoom": 1, "name": "back (0)", "neutralZoom": 1, "position": "back", "supportsDepthCapture": false, "supportsFocus": true, "supportsLowLightBoost": false, "supportsParallelVideoProcessing": true, "supportsRawCapture": true}, "external": undefined, "front": {"devices": ["wide-angle-camera"], "formats": [[Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object]], "hasFlash": false, "hasTorch": false, "id": "1", "isMultiCam": false, "maxZoom": 4, "minZoom": 1, "name": "front (1)", "neutralZoom": 1, "position": "front", "supportsDepthCapture": false, "supportsFocus": true, "supportsLowLightBoost": false, "supportsParallelVideoProcessing": true, "supportsRawCapture": true}, "unspecified": undefined}

Device

Realme x7 max

VisionCamera Version

^2.15.4

Can you reproduce this issue in the VisionCamera Example app?

Yes, I can reproduce the same issue in the Example app here

Additional information

• [ ] I am using Expo
• [ ] I have enabled Frame Processors (react-native-worklets-core)
• [X] I have read the Troubleshooting Guide
• [X] I agree to follow this project's Code of Conduct
• [X] I searched for similar issues in this repository and found none.

[rodgomesc]

hey @Korangamanish4 the documentation that shows support for external camera if referring to the last version of this lib 3.x.x, v2 is not maintained anymore :/

i'm not 100% sure but i think v2 didn't offer external camera support

[Korangamanish4]

@rodgomesc I can't update my RN version. I tried using V3 of this library but was not even able to compile it. Moreover external camera is not showing in your example app as well.

[rodgomesc]

Understood. Unfortunately, I'm unable to assist further in this case. However, if you encounter any issues with the example not building, please feel free to open an issue, as the example seems to be working fine on my end.

[rodgomesc]

@mrousavy can you confirm if v2 has a external camera access feature?

[Korangamanish4]

@rodgomesc IN v2 I can see external camera object when using useCameraDevices but it's undefined. So probably v2 has external camera support.

[Korangamanish4]

@rodgomesc Can you send me the the example apk here that you built to test this. And please tell me the external camera modal that you used.

[mkoranga1]

Hi @rodgomesc, Can I please have something here so that I can proceed

[mkoranga1]

@rodgomesc @mrousavy ,anything on this ?

[Sathishkumargrc]

I'm also facing this issue while I'm using external camera for taking pics but it can't show the external camera so how to integrate and use this package for external camera here i'm using the version of 3.6.14 but only shows front and back cameras not showing the External camera kindly look around this issue and fix this @mrousavy

[mrousavy]

Hey - not sure if v2 had externals, but v3 has external camera support. The external camera needs to support the UVC (USB Video Class) protocol.

[mrousavy]

Btw: Read this doc for more information about USB Cameras in Android