Can't access to camera through 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 ?

Check the answer posted here. Thanks https://stackoverflow.com/a/64789794/1161998 — Adheep, Nov 12 '20 at 05:35

score 4 · Answer 1 · edited Jul 28 '20 at 07:45

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}

score 3 · Accepted Answer · edited Apr 13 '20 at 06:06

3

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" />

edited Apr 13 '20 at 06:06

Ramesh R

7,009
4
25
38

answered Sep 11 '19 at 15:55

OsamaD

453
7
12

i have tried your code ousama but not working still no camera permissions – stuudd Sep 11 '19 at 16:11
Can you check this [link](https://github.com/react-native-community/react-native-webview/pull/719)? I hope you'll get something out of it. – OsamaD Sep 11 '19 at 16:27

score 0 · Answer 3 · answered Jul 02 '20 at 08:49

0

you need to add this too inside webview mediaPlaybackRequiresUserAction={false}

answered Jul 02 '20 at 08:49

Sahil Prabhakar

31
6

T H · Answer 4 · 2022-06-12T01:18:04.303

0

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

edited Jun 12 '22 at 01:18

answered Jun 06 '22 at 00:02

T H

423
4
7

score 0 · Answer 5 · answered Jul 05 '23 at 14:15

This isn't possibly locally as Chrome rejects all the non-localhost/non-https for devices (camera) access!

Here's the story:

I created a Webview with local information:

I injected the HTML and then loaded a third-party JavaScript file into the WebView (Through an import via unpkg).

navigator.getUserMedia is undefined when it's not served via https or localhost.

When developing in React Native, you won't always have access to localhost (especially if you're developing via WiFi using your phone).

Therefore, a solution is to host the content on a remote backend and serve it through https.

Can't access to camera through react-native-webview

5 Answers5