Как заставить веб-представление React поддерживать камеру и самоподписанный сертификат с локального сервера? - PullRequest
Новая
       102

Как заставить веб-представление React поддерживать камеру и самоподписанный сертификат с локального сервера?

0 голосов
/ 03 августа 2020

Допустим, у меня есть веб-приложение с библиотекой камеры Instrascan , работающее на моем локальном сервере + HTTPS (используйте самозаверяющий сертификат).

Я хотел бы сделать ReactNative WebView для запуска веб-приложения с моего локального сервера, и теперь проблема, с которой я сталкиваюсь, заключается в том, что Instascan lib пытается вызвать функцию navigator.mediaDevices.enumerateDevices() для получения мультимедийных устройств, например камеры и микрофона (с HTTP результат enumerateDevices() всегда пустой array)

поэтому, когда 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>

это мой компонент webview с поддержкой реакции 

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

, чтобы обобщить мою проблему, теперь я столкнулся с двумя проблемами:

  1. проблема SSL error: The certificate authority is not trusted при использовании самозаверяющего сертификата .
  2. Когда я попробовал какое-то веб-приложение для тестирования камеры ниже th Кажется, что камера работает, но не может передавать изображения. при инициализации камеры отображается только статическое c изображение первого изображения.

Пожалуйста, дайте мне несколько советов?

Спасибо

...