Camera.getAvailableCameraTypesAsync() does not work on the web and native

Please provide the following:

1. SDK Version: 36
2. Platforms(Android/iOS/web/all): all

I am working on a react-native application and I want to get the camera types (front and back) on the web and native.

In the documentation, it is written:

Camera.getAvailableCameraTypesAsync(): string[] Returns a list of camera types ['front', 'back']. This is useful for desktop browsers which only have front-facing cameras.

import { Camera } from 'expo-camera';

const types = await Camera.getAvailableCameraTypesAsync();

This is my Camera.js:

import React, { useState, useEffect } from 'react';
import { Platform, View, TouchableOpacity } from 'react-native';
import { FAB, Text } from 'react-native-paper';
import { Camera } from 'expo-camera';

export default function CoreCamera() {
  const [hasPermission, setHasPermission] = useState(null);
  const [type, setType] = useState(Camera.Constants.Type.back);
  const [types, setTypes] = useState(null);
  useEffect(() => {
    (async () => {
      const types = await Camera.getAvailableCameraTypesAsync();
      alert(JSON.stringify(types));
      setTypes(types);
      if (Platform.OS === 'web') {
        setHasPermission(true);
      } else {
        const { status } = await Camera.requestPermissionsAsync();
        setHasPermission(status === 'granted');
      }
    })();
  }, []);

  if (hasPermission === null) {
    return <View />;
  }
  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }

  return (
    <View style={{ flex: 1 }}>
      <Camera style={{ flex: 1 }} type={type}>
        <View
          style={{
            flex: 1,
            backgroundColor: 'transparent',
            flexDirection: 'row',
          }}
        >
          <TouchableOpacity
            style={{
              flex: 0.1,
              alignSelf: 'flex-end',
              alignItems: 'center',
            }}
            onPress={() => {
              setType(
                type === Camera.Constants.Type.back
                  ? Camera.Constants.Type.front
                  : Camera.Constants.Type.back,
              );
            }}
          >
            <FAB
              style={{ marginBottom: 20 }}
              icon="camera-switch"
            />
          </TouchableOpacity>
        </View>
      </Camera>
    </View>
  );
}

On Android, it gives me the following error:

[Unhandled promise rejection: Error: The method or property expo-camera.getAvailableCameraTypesAsync is not available on android, are you sure you've linked all the native dependencies properly?]

On iOS, it gives me the following error:

[Unhandled promise rejection: Error: The method or property expo-camera.getAvailableCameraTypesAsync is not available on ios, are you sure you've linked all the native dependencies properly?]

On the web, it gives me the following error:

bundle.js:73612 Uncaught (in promise) TypeError: Cannot read property 'getAvailableCameraTypesAsync' of undefined
    at getAvailableCameraTypesAsync$ (bundle.js:73612)
    at tryCatch (bundle.js:185959)

I have tried to replace:

-import { Camera } from 'expo-camera';
+import Camera from 'expo-camera/build/Camera';

Now the alert shows an empty array on the web.

How can I test the presence of the back camera on the web with expo?

expo-camera version 8.0.0

edit

I have tried to update expo-camera@8.2.0 and it does the same.

[cruzach]

it looks like the problem is the permissions request, if you use expo-permissions it works - https://snack.expo.io/@charliecruzan/dc282b?platform=android&name=Basic Camera usage&sdkVersion=36.0.0&dependencies=expo-camera&sourceUrl=https%3A%2F%2Fdocs.expo.io%2Fstatic%2Fexamples%2Fv36.0.0%2Fcamera.js

[cruzach]

Looks like we need to update the documentation, that method is Web only (it’s really only helpful on Web, since most smart phones have both front and back cameras)

As for your web error, could you share a repro? I tested it locally, on chrome, and didn’t have any issues