Support for barcode reading

[alasdairmackenzie]

Is your feature request related to a problem? Please describe. Add support for handling barcode/QR detection

Describe the solution you'd like An additional configuration option to enable code detection.

const cameraPreviewOptions: CameraPreviewOptions = {
  codeDetection: true
};

CameraPreview.start(cameraPreviewOptions);

CameraPreview.addListener('codeReceived', (codeInfo: any) => {
  console.log('barcode info');
});

Describe alternatives you've considered There's a barcode scanner repo in this org by @tafelnl which is great but it lacks some features and has a reasonable overlap. I'm happy to create a PR for the iOS side of this but it'd be good to get some thoughts on whether it should be added/merged in to here at all before I do.

Additional context I had a quick look at the code and it looks like the changes required would be minimal for iOS.

iOS change summary Change the configureOutput function to add the AVCaptureMetadataOutput. Something like

self.metadataOutput = AVCaptureMetadataOutput()
self.metadataOutput!.setMetadataObjectsDelegate(self, queue: DispatchQueue.main)

 if captureSession.canAddOutput(self.metadataOutput!) {
   captureSession.addOutput(self.metadataOutput!)
   self.metadataOutput!.metadataObjectTypes = self.metadataOutput?.availableMetadataObjectTypes
}

Add the metadataOutput handle

extension CameraController: AVCaptureMetadataOutputObjectsDelegate {
    public func metadataOutput(_ captureOutput: AVCaptureMetadataOutput, didOutput metadataObjects: [AVMetadataObject], from connection: AVCaptureConnection) {
 // code to return a generic object
}

And add either a callback or trigger an event using call.resolve or self.bridge.triggerJSEvent

[tafelnl]

I think it is worth investigating this indeed. It could maybe even be considered to make the barcode scanning functionality a separate plugin for this plugin. So that all ZXing related logic is hosted in a dedicated repo.

[alasdairmackenzie]

@tafelnl that's a pretty cool idea. Are you thinking you install this project and this one has some sort of hook you can add extensions? Or that the barcode project you have could extend this one? Or something else?

[pbowyer]

Hi @alasdairmackenzie I really like this idea. Are you still up for contributing the code for iOS?

I've been messing around with adding face detection to this plugin and it and barcode scanning share many of the same needs (in terms of code interfaces, callbacks to JS etc). I'm impressed by what https://github.com/mrousavy/react-native-vision-camera is accomplishing (I don't understand its code though 😂) and it would be great to see similar capabilities come to Capacitor.

[xulihang]

I'm impressed by what https://github.com/mrousavy/react-native-vision-camera is accomplishing

The frame processor plugin feature of react-native-vision-camera is very cool and I've made a plugin. It holds a reference to the native (C++) Frame Image Buffer using JSI HostObject. As for Capacitor, I haven't found a similar approach. We have to pass base64-encoded content between the webview and the native side.

[pbowyer]

@xulihang Your plugin looks great! I am wondering if NativeScript could be used to do the same with Capacitor? I haven't explored what NativeScript can do to see if it is possible. https://capacitor.nativescript.org/