android - 如何使用 Android Java Camera View 模块创建自定义 React Native 组件?
问题描述
我正在尝试为增强现实目的构建一个 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();
}
}
反应包类:
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} />
}
}
应用程序.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>
);
}
}
解决方案
我找到了一个 opencv 项目,它有一个关于如何设置 android openCV java 相机预览以桥接反应原生的解决方案。查看https://github.com/RobertSasak/react-native-openalpr
推荐阅读
- flutter - Flutter web:防止父级消费事件
- interbase - 算术异常无法使用 IB.NETDataProvider 在字符集之间音译字符
- angular - (change)="onSortedSelected($event.target.value) 在 Agular 上出错,“EventTarget”类型上不存在属性值
- google-apps-script - 我可以减少 6 分钟的超时时间吗?
- html - 如何将链接对齐到右下角?
- postgresql - 在heroku上部署时npx create-react-app不起作用
- reactjs - 如何使用 React 从 DRF 获取不记名令牌?
- python - 我想用每一个用于预测的新数据来不断训练模型
- mongodb - 如何在 mongo 文本索引中进行精确的完整文本匹配,而不是精确的子字符串匹配
- reactjs - 无法显示来自 API 对象的数据