Как создать собственный компонент React Native с помощью модуля Android Java Camera View? - PullRequest
Новая
       49

Как создать собственный компонент React Native с помощью модуля Android Java Camera View?

0 голосов
/ 01 мая 2020

Я пытаюсь создать собственное приложение android для целей дополненной реальности, для которого мне нужен предварительный просмотр камеры в реальном времени на экране. Поэтому я пытаюсь создать свой собственный Android компонент камеры вместо стандартного пакета React Native-response-native-camera. Это потому, что мне нужен модуль камеры, который позволял бы мне получать кадры камеры в режиме реального времени, обнаруживать маркеры Aruco, рисовать на кадре изображения и отображать его на предпросмотре камеры в естественном режиме. Поэтому, читая руководства и статьи, я попытался создать класс диспетчера представлений и класс ReactPackage, чтобы соединить мой Android вид с камеры. К вашему сведению, класс CameraBridgeViewBase является классом OpenCV, который расширяет SurfaceView, который находится в этой библиотеке: 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} />
    }
  }

Приложение. 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>
    );
  }
}
...