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

5us2dqdw  于 2023-09-28  发布在  Android
关注(0)|答案(5)|浏览(197)

我使用的是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"/>

请问您有什么建议吗?

iaqfqrcu

iaqfqrcu1#

第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,
]);

第3步:在webview中使用这些属性

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

aurhwmvo2#

尝试使用:

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

bfhwhh0e3#

如果你服务的网站不是通过localhost,那么这个 * 在本地是不可能的 *。Chrome拒绝所有非localhost/非https的设备(摄像头)访问!
故事是这样的:
我创建了一个包含本地信息的Webview:
我注入了HTML并将第三方JavaScript文件加载到WebView中(通过unpkg导入)。
navigator.getUserMedia在不通过https或localhost提供服务时未定义。
在React Native中进行开发时,您并不总是可以访问localhost(特别是如果您使用手机通过WiFi进行开发)。

解决方案将内容托管在远程后台,通过https提供服务。

j9per5c4

j9per5c44#

您也需要在webview mediaPlaybackRequiresUserAction={false}中添加此内容

nom7f22z

nom7f22z5#

如果你使用Expo,在我的情况下,暂时,我通过这样做来解决它。在网站的代码中,而不是react-native代码中,更改

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

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

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

相关问题