opencv (얼굴인식) + RN "react-native-vision-camera” 2번째 시도

react-native webview + 카메라 이용해서 opencv 코드와 통신하며 카메라 권한, 카메라 대체

How to use camera through Webview? · Issue #508 · react-native-webview/react-native-webview

위는 동일한 어려움을 겪는 사람들의 토론.

해결하지 못함

WEBVIEW에 HTML,JS 코드를 전부 쓰면 되지않냐고? 안된다.
웹 브라우저에서 지원되는 기능은 순전히 웹에서만 동작.

javascript opencv에서의 비디오 스트림 권한을 얻고 처리하며, 얼굴을 식별하는 코드

 function requestCameraPermissionFromWebView() {
    navigator.mediaDevices.getUserMedia({ video: true, audio: false })
        .then(function (stream) {
          camera.srcObject = stream;
          camera.onloadedmetadata = function (e) {
            camera.play();
          };
        })
        .catch(function (error) {
          console.error('Error starting camera:', error);
        });
  }

  var camera = document.createElement("video");
  camera.setAttribute("width", 640);
  camera.setAttribute("height", 480);
  var output = document.getElementById('output');
  output.appendChild(camera);

ReactNative webview를 이용해서 하려고 시도를 여러차례 했었고, 지금부터 내가 한 시도들을 적어나가겠음.

아래 방식은. webview에 카메라 권한을 부여해서 하려고 했지만, 에러 발생 에러내용은 아래에.

import React, {useEffect, useRef} from 'react';
import {PermissionsAndroid} from 'react-native';
import WebView from 'react-native-webview';

const MyWebViewScreen = () => {
  const webViewRef = useRef();

  const onNavigationStateChange = webViewState => {
    // Check if the URL matches the page where camera and gallery access is required
    if (
      webViewState.url.includes(
        '내 ip/keyosk_camera-main/index.html',
      )
    ) {
      requestCameraAndGalleryPermission();
    }
  };

  const requestCameraAndGalleryPermission = async () => {
    try {
      const cameraPermission = await PermissionsAndroid.check(
        PermissionsAndroid.PERMISSIONS.CAMERA,
      );
      const storagePermission = await PermissionsAndroid.check(
        PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
      );

      console.log('camera permission granted:', cameraPermission);
      console.log('storage permission granted:', storagePermission);

      if (!cameraPermission || !storagePermission) {
        const permissions = [
          PermissionsAndroid.PERMISSIONS.CAMERA,
          PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
        ];
        const granted = await PermissionsAndroid.requestMultiple(permissions);

        if (
          granted[PermissionsAndroid.PERMISSIONS.CAMERA] ===
            PermissionsAndroid.RESULTS.GRANTED &&
          granted[PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE] ===
            PermissionsAndroid.RESULTS.GRANTED
        ) {
          console.log('Camera and Storage permissions granted');
        } else {
          console.log('Camera and Storage permissions denied');
        }
      }
    } catch (err) {
      console.warn(err);
    }
  };

  useEffect(() => {
    webViewRef.current.onNavigationStateChange = onNavigationStateChange;
  }, []);

  return (
    <WebView
      ref={webViewRef}
      source={{uri: '내 ip/keyosk_camera-main/index.html'}}
      mixedContentMode="compatibility"
        mediaPlaybackRequiresUserAction={false} // 이 부분 추가
      javaScriptEnabled={true}
      webContentsDebuggingEnabled={true}
      onError={error => console.error('WebView Error:', error)}
      useWebKit={true}
    />
  );
};

export default MyWebViewScreen;

문제 발견

내 휴대폰을 c to c 로 노트북에 연결하여 애뮬레이터 대신 빌드했다.
그리고 앱안의 webview를 디버그 하기 위해 chrome://inspect/#devices 에 들어가서 현재 실행중인 웹뷰를 디버깅해보니
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'getUserMedia')
다음과 같은 에러 발생.
Web에서는 잘 동작하는게 WebView (앱환경)에서는 카메라 권한을 얻어오지 못해서
카메라가 켜지지 않는 현상 발생.