Search code examples
androidreact-nativetext-recognitionreact-native-camera

RNCamera text recognition fails on Portrait mode


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.


Solution

  • 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.