Barcode Scanner - Round About Way using OCR

Hi All,

I was in need of a barcode scanner for one of the apps I was building and know there has been a bit of discussion around the implementation of a barcode scanner on Thunkable X… anyway I know this isn’t quite a barcode scanner, and has its flaws, but seems to work okay for me,

I have added screenshots and explanation below:

As you can see you call the camera, and take a picture of the barcode, use the “Photo” output of the camera as the “Media” input of the MediaDB (cloudinary).

You can then use this nifty little API Free OCR API to create your own API key. When you scan the barcode you won’t be actually scanning the barcode but the numbers beneath the barcode as this is an OCR reader.

Once this is done you want to set your Web_API URL as https://api.ocr.space/parse/imageurl?apikey=YOURAPIKEY&url=mediaURL

You need to use your own API that you have set on Free OCR API and your mediaURL output from the MediaDB

Then you will call back the result of that API and parse it like you would with any JSON format so that you only receive the number of the barcode. I have also added a Alert, so that it confirms with me whether the number matches the barcode, this is because if you scan more than just the number on the barcode the OCR will attempt to read the text,

Let me know how you go, I’d still like a real barcode component though :slight_smile:

Jacob

2 Likes

Thanks for sharing @jacob1, this looks really interesting - a very novel approach.

Have you tested it with a wider image that contains letters and words too by any chance?

Hi Domhnall,

Yes I have tested on various images that aren’t barcodes, and the OCR reader works quite well in pulling back text from the image,

So it might be quite valuable in applications where the user wants to dictate written text or pull data from imagery.

Jacob

1 Like

The thing is cloudinary has an OCR function. The problem with X is that after an upload we only get the MediaURL and not the entire JSON response back from Cloudinary.

If we got the actual response, we can then use the OCR function within Cloudinary more efficiently.

What I have to do now, is a separate call to the admin api of cloudinary, to get a list of files uploaded, then search for the mediaURL, then I can find the public_id. After that I can do an UPDATE query and get the JSON response that had the OCR, even though all that information was in the original response.

So here is the request. Please put a “response” option for the MediaDB (being Cloudinary)

3 Likes

Is there any way I get have a copy of this app to modify for a certain project I am doing?

Hey! Sure I’ll message you a remix link shortly!

Great! Thank you very much!

pasenmelo porfa el remix para editarlo no me sale

Hi @ana_luisa_aguilar, which remix link is not working for you?

i try to do this tutorial but its not working… i want this remix please

Ah, ok.

Take a look at our blog post that has an example of how to create a barcode scanner in a similar manner.

The remix link is at the end:

1 Like

thanks a lot =):relaxed:

hey!! this does not seem to be working on the new ui, could you help me with that?

2 posts were split to a new topic: How to display results of Get JSON From Object block?

I am able to upload the image to cloudinary, but get a netword request failed when i try to access ocr.space

This topic is two years old. Have you confirmed that you’re able to use that API by entering a url in a browser? That should always be your first step before connecting the API in Thunkable.

1 Like