Question

假设我有一个带有相机库Instrascan的Web应用程序，它在本地服务器+ HTTPS上运行（使用自签名证书）。

我想让ReactNative WebView从本地服务器运行Web应用程序，现在我面临的问题是Instascan lib试图调用navigator.mediaDevices.enumerateDevices()函数来获取媒体设备，例如相机和麦克风（使用HTTP，enumerateDevices()的结果始终是一个空数组）

因此，当ReactNative WebView从我的本地服务器（URL = https：//192.168.1.200：9999）打开我的应用程序时，出现以下错误：

{"canGoBack": false, "canGoForward": false, "code": 3, "description": "SSL error: The certificate authority is not trusted", "loading": false, "target": 9, "title": "", "url": "https://192.168.1.200:9999"}

我已将network_security_config添加到android/app/src/main/res/xml/network_security_config.xml

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="true">
        <trust-anchors>
            <certificates src="system" />
        </trust-anchors>
    </base-config>
</network-security-config>

这是我的AndroidManifest.xml文件

<manifest ...>
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

    <application ... android:networkSecurityConfig="@xml/network_security_config">
      ...
    </application>
</manifest>

这是我的react-native webview component

<WebView
  source={{ uri: 'https://192.168.1.200:9999' }}
  javaScriptEnabled
  allowsInlineMediaPlayback
  mediaPlaybackRequiresUserAction={false}
  originWhitelist={['*']}
  useWebKit
  startInLoadingState
  scalesPageToFit
  onError={syntheticEvent => {
    const { nativeEvent } = syntheticEvent;
    console.warn('WebView error: ', nativeEvent);
  }}
/>

这是我的依赖项：

"@react-native-community/masked-view": "^0.1.10"
"@react-navigation/native": "^5.7.1"
"@react-navigation/stack": "^5.7.1"
"prop-types": "^15.7.2"
"react": "16.13.1"
"react-native": "0.63.2"
"react-native-camera": "^3.35.0"
"react-native-gesture-handler": "^1.7.0"
"react-native-permissions": "^2.1.5"
"react-native-reanimated": "^1.10.1"
"react-native-safe-area-context": "^3.1.1"
"react-native-screens": "^2.9.0"
"react-native-webview": "^10.3.2"

总结我的问题，现在我面临以下两个问题：

使用自签名证书时SSL error: The certificate authority is not trusted的问题。
当我尝试使用某些Web应用程序进行相机下面的相机测试时，相机似乎可以正常工作，但无法传输图像。初始化相机时，它只会显示第一张图片的静态图片。

请有人给我一些建议吗？

谢谢

如何使React本机Web视图支持本地服务器的相机和自签名证书？

0 个答案: