0

I'm developing an app in ionic 6 with Angular and I'm trying to combine the camera-preview plugin with a js library capable of recognizing a Barcode in real time. Unfortunately, while trying some libraries, the yield is not the desired one (out of 10 barcodes, only 1 is returned). I've already tried the QuaggaJS and Zxing libraries but they show problems on iOS devices. Has anyone had a case like this before? How can I combine camera-preview customization with live barcode reading in Ionic 6? A thousand thanks.

I tried libraries like ZXing and QuaggaJS but they are not compatible or too slow on iOS and Android devices.

2 Answers2

0

Can you tried this plugin for your camera function?

https://capacitorjs.com/docs/apis/camera

Install the plugin:

npm install @capacitor/camera

npx cap sync

Example code:

import { Camera, CameraResultType } from '@capacitor/camera';

const takePicture = async () => {
  const image = await Camera.getPhoto({
    quality: 90,
    allowEditing: true,
    resultType: CameraResultType.Uri
  });

  // image.webPath will contain a path that can be set as an image src.
  // You can access the original file using image.path, which can be
  // passed to the Filesystem API to read the raw data of the image,
  // if desired (or pass resultType: CameraResultType.Base64 to getPhoto)
  var imageUrl = image.webPath;

  // Can be set to the src of an image now
  imageElement.src = imageUrl;
};
Fearcoder
  • 753
  • 3
  • 15
  • 47
  • Hi Fearcoder! thanks for the response, unfortunately my problem is not related only to the integration of the camera plugin, but it is related to the combination of the camera plugin and the barcode recognition library. Especially in iOS the camera cannot be customized (leaving buttons and labels), it is limited to open the native camera in live. But I see that many apps manage to customize. – Giuseppe Taormina Mar 06 '23 at 13:21
  • Do you have sample code for what you have tried? – Fearcoder Mar 06 '23 at 13:54
0

How can I combine camera-preview customization with live barcode reading in Ionic 6?

You can't unless you edit both plugins native codes to work in conjunction with each other. In which this is not the ideal case and would take a lot of work, your best bet is to just come up with a better user flow.