如何使用 Android Java Camera View 模块创建自定义 React Native 组件？

Posted 2023-03-11

【中文标题】如何使用 Android Java Camera View 模块创建自定义 React Native 组件？

【英文标题】：How to create a custom React Native component with Android Java Camera View module?

【发布时间】：2020-05-01 02:27:22

【问题描述】：

我正在尝试为增强现实目的构建一个 react-native android 应用程序，我需要在屏幕上显示实时摄像头预览。所以我正在尝试制作自己的 Android 相机组件，而不是使用 React Native 的默认 react-native-camera 包。这是因为我需要一个摄像头模块，它可以让我实时获取摄像头帧，检测 Aruco 标记，在图像帧上绘图，并将其显示在 react-native 的摄像头预览中。 因此，通过阅读教程和文章，我尝试创建一个视图管理器类和一个 ReactPackage 类来桥接我的 Android 相机视图。仅供参考，CameraBridgeViewBase 类是扩展 SurfaceView 的 OpenCV 类，可在此库中找到：https://github.com/quickbirdstudios/opencv-android/tree/master/opencv3_4_4_contrib

当我运行该应用程序时，我只是一直黑屏，没有相机预览。在创建视图之前，我确实授予了相机权限。如果有任何建议或任何在这方面有经验的人可以提供帮助。非常感谢，谢谢。

查看管理器类：

public class JavaCameraViewManager extends SimpleViewManager<CameraBridgeViewBase> implements CameraBridgeViewBase.CvCameraViewListener2 

    public static final String REACT_CLASS = "JavaCameraView";
    public CameraBridgeViewBase javaCameraView;

    @Override
    public String getName() 
        return REACT_CLASS;
    

    @Override
    protected CameraBridgeViewBase createViewInstance(ThemedReactContext reactContext) 
        javaCameraView = new JavaCameraView(reactContext, null);
        javaCameraView.setVisibility(SurfaceView.VISIBLE);
        javaCameraView.setCvCameraViewListener(this);
        return javaCameraView;
    

    @Override
    public void onCameraViewStarted(int width, int height)

    @Override
    public void onCameraViewStopped()

    @Override
    public Mat onCameraFrame(CameraBridgeViewBase.CvCameraViewFrame inputFrame)
        System.out.println("onCameraFrame$");
        return inputFrame.rgba();
    

React 包类：

public class JavaCameraViewPackage implements ReactPackage 

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) 
        return Collections.emptyList();
    
    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) 
        return Collections.<ViewManager>singletonList(
                new JavaCameraViewManager()
        );
    

React Native Camera View 组件类：

import React,  Component  from 'react'
import  requireNativeComponent from 'react-native';

const JavaCameraView = requireNativeComponent('JavaCameraView', JavaCameraViewView);

export default class JavaCameraViewView extends Component 
    render () 
      return <JavaCameraView ...this.props />
    
  

App.js：

'use strict';
import React, Component from 'react';
import Platform, StyleSheet, Text, View from 'react-native';
import  NativeModules, AppRegistry, TouchableOpacity from 'react-native';
import JavaCameraView from './src/JavaCameraViewNativeView'

export default class App extends Component  

  render() 
    return (
      <View style=styles.container>
        <JavaCameraView style= flex: 1, width: '100%', height: '100%', backgroundColor:'blue' /> 
      </View>
    );
  

【问题讨论】：

你设法让它工作了吗？

是的，我已经让它工作了。将发布解决方案

【参考方案1】：

我找到了一个 opencv 项目，它有一个关于如何设置 android openCV java 摄像头预览以桥接反应本机的解决方案。查看https://github.com/RobertSasak/react-native-openalpr

【参考方案2】：

如果您再添加几行代码，应该能够使其正常工作。 我已经在一个博览会（SDK 44）裸工作流项目上使用 OpenCV v4.5.4 和 v3.4.10 对此进行了测试。我在使用 OpenCV v4.5.4 的 onCameraFrame 函数中的 Impgroc 函数遇到了一些错误，并且自从降级到 v3.4.10 后没有任何问题。

// Class should extend SimpleViewManager<JavaCameraView>
public class JavaCameraViewManager extends SimpleViewManager<JavaCameraView> implements CameraBridgeViewBase.CvCameraViewListener2 
    ...
    // public CameraBridgeViewBase javaCameraView;
    public JavaCameraView javaCameraView;
    ...
    @Override
    public JavaCameraView createViewInstance(ThemedReactContext reactContext)  
        javaCameraView = new JavaCameraView(reactContext, -1);
        javaCameraView.setCvCameraViewListener(this);
        // javaCameraView.setCameraPermissionGranted(); // Only required on newer versions of OpenCV
        javaCameraView.enableView();
        return javaCameraView;
    
    ...

您还应确保根据您的需要在 AndroidManifest.xml 中授予相机权限

  <!-- Camera & mic & flashlight permissions -->
  <uses-permission android:name="android.permission.CAMERA" />
  <uses-permission android:name="android.permission.RECORD_AUDIO"/>
  <uses-permission android:name="android.permission.FLASHLIGHT" />

希望这可以帮助任何努力设置它的人。