React Native：有没有办法使用 React Native 相机检测文档边框并更改框架内文档的覆盖颜色？

Question

我是反应原生的新手。我目前正在尝试实现可以​​扫描和捕获身份证图像的代码。基本上我可以使用反应本机相机拍摄图像并保存到图库，但我不知道如何检测身份证边框。我正在寻求帮助来指导我有关卡片边框检测或一些可以实现此类功能的开源库。

基本上，我已经尝试实现react-native-documentscanner-android和rn-doc-scanner-android库。但是react-native-documentscanner-android库我未能实现，并且rn-doc-scanner-android没有卡边框检测功能。

这是我的代码：

import React, {Component} from 'react';
import { RNCamera } from 'react-native-camera';
import {
  StyleSheet,
  View,
  Text,
  TouchableOpacity,
  ToastAndroid
} from 'react-native';

import {
  Colors
} from 'react-native/Libraries/NewAppScreen';
import Dimensions from 'Dimensions';
import CameraRoll from "@react-native-community/cameraroll";

export default class App extends Component {
 constructor(props){
   super(props)
 }
  state = {
    barcodes: [],
  }
render(){
    const { height, width } = Dimensions.get('window');
    const maskRowHeight = Math.round((height - 500) / 20);
    const maskColWidth = (width - 300) / 2;
  return (
    <View style={styles.container}>
      <RNCamera
           ref={ref => {
             this.camera = ref;
           }}
           style={{
             flex: 1,
             width: '100%',
             justifyContent: "center"
           }}
         > 
         <View style={styles.maskOutter}>
            <View style={[{ flex: maskRowHeight  }, styles.maskRow, styles.maskFrame]} />
             <View style={[{ flex: 30 }, styles.maskCenter]}>
             <View style={[{ width: maskColWidth }, styles.maskFrame]} />
             <View style={styles.maskInner} />
            <View style={[{ width: maskColWidth }, styles.maskFrame]} />
          </View>
        <View style={[{ flex: maskRowHeight }, styles.maskRow, styles.maskFrame]} />
      </View>         
      </RNCamera>
      <View style={{ flex: 0, flexDirection: 'row', justifyContent: 'center', backgroundColor: '#2E8B57', margin: 5}}>
          <TouchableOpacity onPress={this.takePicture.bind(this)} style={styles.capture}>
            <Text style={{ fontSize: 14 }}> SNAP </Text>
          </TouchableOpacity>
        </View>
    </View>
  );
}
takePicture = async() => {
  if (this.camera) {
    const options = { quality: 0.5, base64: true };
    const data = await this.camera.takePictureAsync(options);
    console.log(data.uri);
    ToastAndroid.show(data.uri, ToastAndroid.LONG);
    if(data.uri!= null){
      console.log('not null')
    }else{
      console.log('null')
    }
    CameraRoll.saveToCameraRoll(data.uri);
  }

};
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#2E8B57",
    overflow: 'hidden',
    //width: 350,
    //height: 150,  
},
  camera: {
  flex: 1,
  alignItems: "center",
  justifyContent: "center"
},
  scrollView: {
    backgroundColor: Colors.lighter,
  },
  engine: {
    right: 0,
  },
  body: {
    backgroundColor: Colors.white,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: Colors.dark,
  },
  highlight: {
    fontWeight: '700',
  },
  footer: {
    color: Colors.dark,
    fontSize: 12,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',
  },
  maskOutter: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    alignItems: 'center',
    justifyContent: 'space-around',
  },
  maskInner: {
    width: 300,
    //height: 300,
    backgroundColor: 'transparent',
    borderColor: '#DC143C',
    borderWidth: 1,
  },
  maskFrame: {
    backgroundColor: 'rgba(1,1,1,0.6)',
  },
  maskRow: {
    width: '100%',
  },
  maskCenter: { flexDirection: 'row' },
});