Camera access on IOS devices does not work

Bug description:

When the webpage tries to access the camera using react-native-webview, even giving the proper permissions, I can’t open the cameras, I can’t even get their names on IOS devices

To Reproduce:

Test 1 :

import React, { useState, useEffect, useRef } from 'react';
import { Text, View, StyleSheet, BackHandler, Alert, StatusBar, Platform, Linking } from 'react-native';
import { WebView } from 'react-native-webview';
import { ActivityIndicator } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import {check, PERMISSIONS, request, RESULTS} from 'react-native-permissions';

export default function WebViewUsrLogado() {

  /* ==========================> Variaveis utilizadas <========================= */
  
  const webViewRef = useRef<any | null>(null)
  const statusBarRef = useRef<any | null>(null)
  const [cameraGranted, setCameraGranted] = useState(false);
  const [newurl, setNewUrl] = useState<any | null>(null);
  const navigation = useNavigation();
  const isIOS = Platform.OS === 'ios' ? true : false
;  const Spinner = () => (
    <View style={styles.activityContainer}>
      <ActivityIndicator size="large" color="#f29900" />
    </View>
  );
  const handleCameraPermission = async () => {
    const permission = Platform.OS === 'ios' ? PERMISSIONS.IOS.CAMERA : PERMISSIONS.ANDROID.CAMERA
    console.log(permission)
    const res = await check(permission);
    if (res === RESULTS.GRANTED) {
      setCameraGranted(true);
    } else if (res === RESULTS.DENIED) {
      const res2 = await request(permission);
      res2 === RESULTS.GRANTED ? setCameraGranted(true) : setCameraGranted(false);
    }    
  };

  const handleAcessExternalStoragePermission = async () => {
    const permission = Platform.OS === 'ios' ? PERMISSIONS.IOS.PHOTO_LIBRARY : PERMISSIONS.ANDROID.WRITE_EXTERNAL_STORAGE
    console.log(permission)
    const res = await check(permission);
    if (res === RESULTS.GRANTED) {
      setCameraGranted(true);
    } else if (res === RESULTS.DENIED) {
      const res2 = await request(permission);
      res2 === RESULTS.GRANTED ? setCameraGranted(true) : setCameraGranted(false);
    }    
  };

  const handlePhotoLibraryAddPermission = async () => {
    const permission = PERMISSIONS.IOS.PHOTO_LIBRARY_ADD_ONLY
    console.log(permission)
    const res = await check(permission);
    if (res === RESULTS.GRANTED) {
      console.log( `Permitido`)
      setCameraGranted(true);
    } else if (res === RESULTS.DENIED) {
      const res2 = await request(permission);
      res2 === RESULTS.GRANTED ? setCameraGranted(true) : setCameraGranted(false);
    }    
  };

  const handleMicrophonePermission = async () => {
    const permission = PERMISSIONS.IOS.MICROPHONE
    console.log(permission)
    const res = await check(permission);
    if (res === RESULTS.GRANTED) {
      setCameraGranted(true);
    } else if (res === RESULTS.DENIED) {
      const res2 = await request(permission);
      res2 === RESULTS.GRANTED ? setCameraGranted(true) : setCameraGranted(false);
    }    
  };
  
  /* ==============================> Observaveis <============================= */

  //Verificação de permissão
  useEffect(() => {
    handleCameraPermission();
    handleAcessExternalStoragePermission();
    if (Platform.OS == `ios`) {
      handlePhotoLibraryAddPermission();
      handleMicrophonePermission();
    }
  }, []);

  

  /* ========================> Retorno de Visualização <======================== */
  if (cameraGranted) {
    return (
      <View style={styles.container}>
        <StatusBar backgroundColor="#1c4154" />
        <WebView
          source={{ uri: 'https://schmich.github.io/instascan/' }}
          ref={webViewRef}
          style={styles.view}
          originWhitelist={['*']}
          allowsInlineMediaPlayback
          javaScriptEnabled
          scalesPageToFit
          mediaPlaybackRequiresUserAction={false}
          javaScriptEnabledAndroid
          useWebkit
          startInLoadingState={true}
          renderLoading={Spinner}
        />
      </View>
    );
  } else {
    return <Text>No access to camera</Text>;
  }
}

/* ==============================> Estilização <============================= */

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor:'#1c4154',
    paddingTop:20
  },
  activityContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    position: 'absolute',
    top: 0,
    left: 0,
    backgroundColor: '#fff',
    height: '100%',
    width: '100%'
  },
  view: {
    borderColor: 'red',
  }
});

info.plist:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>CFBundleDevelopmentRegion</key>
	<string>en</string>
	<key>CFBundleDisplayName</key>
	<string>WCard</string>
	<key>CFBundleExecutable</key>
	<string>$(EXECUTABLE_NAME)</string>
	<key>CFBundleIdentifier</key>
	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
	<key>CFBundleInfoDictionaryVersion</key>
	<string>6.0</string>
	<key>CFBundleName</key>
	<string>$(PRODUCT_NAME)</string>
	<key>CFBundlePackageType</key>
	<string>APPL</string>
	<key>CFBundleShortVersionString</key>
	<string>1.0</string>
	<key>CFBundleSignature</key>
	<string>????</string>
	<key>CFBundleVersion</key>
	<string>1</string>
	<key>LSRequiresIPhoneOS</key>
	<true/>
	<key>NSAppTransportSecurity</key>
	<dict>
		<key>NSAllowsArbitraryLoads</key>
		<true/>
	</dict>
	<key>NSCameraUsageDescription</key>
	<string>Permissao para captura de imagens, leitura de codigoQR e afins</string>
	<key>NSLocationWhenInUseUsageDescription</key>
	<string/>
	<key>NSMicrophoneUsageDescription</key>
	<string>YOUR TEXPermissao para captura de audio</string>
	<key>NSPhotoLibraryAddUsageDescription</key>
	<string>Save pictures for certain activities.</string>
	<key>NSPhotoLibraryUsageDescription</key>
	<string>Permissao de acesso a galeria</string>
	<key>UIBackgroundModes</key>
	<array>
		<string>fetch</string>
		<string>remote-notification</string>
	</array>
	<key>UILaunchStoryboardName</key>
	<string>LaunchScreen</string>
	<key>UIRequiredDeviceCapabilities</key>
	<array>
		<string>armv7</string>
	</array>
	<key>UISupportedInterfaceOrientations</key>
	<array>
		<string>UIInterfaceOrientationPortrait</string>
		<string>UIInterfaceOrientationLandscapeLeft</string>
		<string>UIInterfaceOrientationLandscapeRight</string>
	</array>
	<key>UIViewControllerBasedStatusBarAppearance</key>
	<false/>
	<key>UIAppFonts</key>
	<array>
		<string>AntDesign.ttf</string>
		<string>Entypo.ttf</string>
		<string>EvilIcons.ttf</string>
		<string>Feather.ttf</string>
		<string>FontAwesome.ttf</string>
		<string>FontAwesome5_Brands.ttf</string>
		<string>FontAwesome5_Regular.ttf</string>
		<string>FontAwesome5_Solid.ttf</string>
		<string>Fontisto.ttf</string>
		<string>Foundation.ttf</string>
		<string>Ionicons.ttf</string>
		<string>MaterialCommunityIcons.ttf</string>
		<string>MaterialIcons.ttf</string>
		<string>Octicons.ttf</string>
		<string>SimpleLineIcons.ttf</string>
		<string>Zocial.ttf</string>
	</array>

</dict>
</plist>

PodFile:

permissions_path = '../node_modules/react-native-permissions/ios'
  pod 'Permission-Camera', :path => "#{permissions_path}/Camera"
  pod 'Permission-Microphone', :path => "#{permissions_path}/Microphone"
  pod 'Permission-PhotoLibrary', :path => "#{permissions_path}/PhotoLibrary"
  pod 'Permission-PhotoLibraryAddOnly', :path => "#{permissions_path}/PhotoLibraryAddOnly"
  pod 'Permission-StoreKit', :path => "#{permissions_path}/StoreKit"
  pod 'RNCPushNotificationIOS', :path => '../node_modules/@react-native-community/push-notification-ios' 

AndroidManifest:

<uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
    <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />
    <uses-permission android:name="android.permission.VIBRATE" />
    <uses-permission android:name="android.permission.ACCESS_NOTIFICATION_POLICY" />
    <uses-permission android:name="android.permission.BIND_NOTIFICATION_LISTENER_SERVICE" />
    <uses-permission android:name="android.permission.CAMERA" android:required="false" />
    <uses-feature android:name="android.hardware.camera" android:required="false" />
    <uses-feature android:name="android.hardware.camera.front" android:required="false" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Test 2:

Test 2 (Using Expo Go): Tesying React-native-webview with camera

Expected behavior:

I expected that just like on Android devices, when accessing a camera through the webivew it would return the view of the cameras. Allowing the webpage to capture their names (This is a necessary requirement for android too)

Screenshots/Videos:

In IOS, the screen is all blue, no camera image and no cameras detected

Environment:

OS: Android 10 and IOS 12.5.4 Devices: Xiaomi Redmi note 9t, MotoG7 Play, Xiaomi mi9, iPhone6s, iPhone5s, IPad Pro Website: JAVA 8 and Primefaces 8 Xcode:12.5.1 react": 17.0.1, react-native: 0.64.2,

[devinsg]

hey @HerickRaposo , please upgrade IOS version >=14.5, then try again.

[wmaca]

Still a problem. There are other issues reporting the same problem.