无法通过React Native WebView访问相机

Question

我正在使用 react-native-webview 版本 4.0.2。我有一个包含添加按钮的 webview，该按钮允许我们使用相机拍照，但当单击该按钮时，没有任何显示和相机权限显示。这在 Android 端上是存在问题的，但在 iOS 上运行非常良好（我可以看到权限并访问相机）。

在我的 AndroidManifest.xml 中，我确实有：

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

那么请问您有什么建议吗？

- stuudd

---

请查看此处发布的答案。谢谢。https://dev59.com/0lYN5IYBdhLWcg3wNFt4#64789794 - Adheep

Answer 1

第一步： 在AndroidManifest.xml文件中使用以下内容。

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

第二步： 在App.js文件中授予多个权限。

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

第三步： 在webview中使用这些属性。

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

- zarif rahman

Answer 2

尝试使用:

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

- OsamaD

---

我尝试了你的代码Ousama，但仍然不起作用，仍然没有相机权限。 - stuudd

你能检查一下这个链接吗？希望你能从中得到一些收获。 - OsamaD

Answer 3

这在本地是不可能的，因为Chrome拒绝所有非本地主机/非https的设备（相机）访问！

故事如下：

我创建了一个包含本地信息的Webview：

我注入了HTML，然后将第三方JavaScript文件加载到WebView中（通过unpkg进行导入）。

当未通过https或localhost提供时，navigator.getUserMedia未定义。

在React Native开发中，您并不总是能够访问localhost（特别是如果您使用手机通过WiFi进行开发）。

因此，一种解决方案是将内容托管在远程后端，并通过https提供。

- Jose A

---

非常感谢，兄弟。这真是帮了我大忙。 - undefined

Answer 4

如果您使用Expo，像我一样，暂时可以通过以下方式解决。在网站的代码中（而不是React Native代码），更改：

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

到

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

从长远来看，如果您使用Expo，应该切换到React Native cli

- T H

Answer 5

你需要在 WebView 中添加 mediaPlaybackRequiresUserAction={false}。

- Sahil Prabhakar