无法通过 react-native-webview 访问相机

Question

I am using react-native-webview version 4.0.2. So I have a webview that contains an add button that allows us to take picture with the camera but when clicking at that button nothing is shown and no camera permission shown. This is on android side but working very well on ios (i can see permission and access to camera ).

In my AndroidManifest.xml I do have:

<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" android:required="false"/>
<uses-feature android:name="android.hardware.camera.autofocus" android:required="false"/> 

So please do you have any suggestion?

Answer 1

Try using:

<uses-sdk
    android:minSdkVersion="23"
    android:targetSdkVersion="__APILEVEL__" />

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"
android:maxSdkVersion="18" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"
android:maxSdkVersion="18" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO"
android:maxSdkVersion="18" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"
android:maxSdkVersion="18" />

Answer 2

1st step: use this in AndroidManifest.xml file

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

2nd step: Grant multiple permission in App.js file

const granted = await PermissionsAndroid.requestMultiple([
  PermissionsAndroid.PERMISSIONS.CAMERA,
  PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
  PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION,
]);

3rd step: use these properties inside webview

geolocationEnabled={true}
mediaPlaybackRequiresUserAction={false}
javaScriptEnabled={true}

Answer 3

你也需要在 webview mediaPlaybackRequiresUserAction={false} 中添加这个

Answer 4

If you use Expo, in my case, temporarily, I solve it by doing this. In the website's code, not the react-native code, change

navigator.mediaDevices.getUserMedia({video : true, audio:true})

to

navigator.mediaDevices.getUserMedia({video : true})

In the long term, if you use Expo, you should switch to React Native cli