0

I'm developing an app using react-native-camera, RNCamera, on ejected mode.

BTW, the text recognition feature is supposed to work only for Android.

On Portrait mode, it only detects Single or double characters on each detect event, like 'O', 'IC'.

When I rotate to landscape mode, it works perfectly.

Heres is how I handle the event and render it:

onTextRecognized = ({textBlocks}) => this.setState({ detectedTexts: textBlocks.map(b => b.value) })

renderDetectedText() {
    return (
      <View style={[styles.facesContainer,{left: 10, top:"50%"}]}>
        <Text style={styles.flipText}>{this.state.detectedTexts.join("\n")}</Text>
      </View>
    )
  }
renderCamera() {
<RNCamera
  ref={ref => {this.camera = ref;}}
  style={{flex: 1}}
  type={this.state.type}
  flashMode={this.state.flash}
  autoFocus={this.state.autoFocus}
  zoom={this.state.zoom}
  whiteBalance={this.state.whiteBalance}
  ratio={this.state.ratio}
  onTextRecognized={this.onTextRecognized}
  focusDepth={this.state.depth}
  permissionDialogTitle={'Permission to use camera'}
  permissionDialogMessage={'We need your permission to use your camera phone'}>
  {this.renderDetectedText()}
</RNCamera>
}

A'm testing int using a real Android 7.0 device

Here's the link for the React-native-community Issue gitHub page.

diogenesgg
  • 2,601
  • 2
  • 20
  • 29

1 Answers1

0

I was able to solve the problem by modifying some Java code. I noticed it had to do with the Rotation. It was trying to read the text bottom-up.

When I would rotate the phone from portrait to landscape, it would still try to recognise from the phone's bottom-up, which is now left to right.

On org.reactnative.camera.RNCameraView, (located on node_modules/react-native-camera/android/src ) I changed the onFramePreview method in order to remove the following code (commented out):

  @Override
  public void onFramePreview(CameraView cameraView, byte[] data, int width, int height, int rotation) {
    int correctRotation = RNCameraViewHelper.getCorrectCameraRotation(rotation, getFacing());
    int correctWidth = width;
    int correctHeight = height;
    byte[] correctData = data;
    //if (correctRotation == 90) {
    //  correctWidth = height;
    //  correctHeight = width;
    //  correctData = rotateImage(data, correctHeight, correctWidth);
    //}
    if (mShouldScanBarCodes && !barCodeScannerTaskLock && cameraView instanceof BarCodeScannerAsyncTaskDelegate) {
    //...
  }

I wonder if the rotation is suitable only for some device models.

diogenesgg
  • 2,601
  • 2
  • 20
  • 29
  • Hm, maybe that rotation is a fix for other react-native-camera features, like face detection.. – diogenesgg Aug 02 '18 at 00:54
  • I am getting similar issue, when the image is rotated, then camera is not recognizing text in android and ios. I checked the org.reactnative.camera.RNCameraView but there is no code lines that you mentioned in onFramePreview. How Can I archive this? – Shing Ho Tan Feb 14 '20 at 03:13
  • react-native-camera has changed a lot since then. I would encourage you to post a new question, and also share it in the GitHub issues page for react-native-camera. – diogenesgg Feb 14 '20 at 18:32