Detect edges in real time

[kavypharma]

Feature Request

The library is fantastic and works fine. But the scanner does not scans the document in real time when the user is on camera screen in android, which results in an inaccurately cropped image. Which is why user has to take the picture a couple of times to get a perfect crop and it is costing me user experience.

Wouldn't it be nice if user could see the detected edges in real time. Any workaround or solution would be appreciated. I need something like CamScanner or DocScanner.

Thanks

My code snippet

export default ({
  navigation,
  route,
}: NativeStackScreenProps<RootStackPageList, 'Capture'>) => {
  const dispatch = useDispatch();
  const scanDocument = async () => {
    const result = await DocumentScanner.scanDocument({
      responseType: ResponseType.Base64,
      croppedImageQuality: 10,
    });

    const {scannedImages} = result;
    if (scannedImages && scannedImages.length > 0) {
      const image = 'data:image/jpg;base64,' + scannedImages[0];
      dispatch(setPrescriptionField({image}));
      navigation.navigate('PreviewImage');
    }
  };
  return (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        marginTop: 20,
      }}>
      <Surface elevation={3} style={styles.surface}>
        <Text style={{fontWeight: 'bold', fontSize: 20,textAlign:'center'}} >
          {'Add Prescription/Bill\nPhoto'}
        </Text>

        <TouchableRipple
          onPress={scanDocument}
          style={{backgroundColor: '#2565B3', borderRadius: 100,display:'flex',justifyContent:'center',alignContent:'center',alignItems:'center'}}>
          {/* <Button onPress={scanDocument} style={{borderRadius:100,height}} textColor='white'   mode='contained'></Button> */}
          <Text
            style={{
              backgroundColor: '#2565B3',
              textAlignVertical:'center',
              color: 'white',
              textAlign: 'center',
              justifyContent: 'center',
              width: 45,
              height: 45,
              borderRadius: 100,
              fontSize: 30,
            }}>
            +
          </Text>
        </TouchableRipple>
      </Surface>
    </View>
  );
};

[harbolaez]

@kavypharma did you find any solution for this?

[imhassan]

I also need this feature, is there anyone who has solution to support real time edge detection. Please help @dmarcs

[dmarcs]

real-time edge detection is available in 1.0.0 https://github.com/WebsiteBeaver/react-native-document-scanner-plugin/pull/113