社区首页 >问答首页 >如何使用Android Java Camera View模块创建自定义React Native组件？

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

Stack Overflow用户

提问于 2020-05-01 02:27:23

回答 1查看 816关注 0票数 1

我试图建立一个反应原生的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本机摄像机视图组件类：

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>
    );
  }
}