3

I have a webapp which has a mobile version to be accessed by people on safari browser. Is there a way to call any installed barcode scanner from the code on user action (button click), so that the barcode scanner can be called scan the barcode and then return the scanned value to the input on my webpage or atleast keep the value in clipboard so that the same may be pasted in the input on webpage. Has to work on safari on iPad!!

Ajo Koshy
  • 1,191
  • 2
  • 18
  • 31
  • Could you give some more information about what you've tried? http://stackoverflow.com/questions/6336641/html5-camera-access-through-browser-in-ios seems to suggest you can capture an image. Are you open to uploading it to a bar code service like https://webqr.com/index.html – Roy Falk May 22 '16 at 16:39
  • @RoyFalk i wish no photo capture. it has to be seamless photo decoding. I am still on the analysis stage, before committing to the client – Ajo Koshy May 23 '16 at 02:42

5 Answers5

2

On Safari 11 and above, you can use a library like Scandit SDK.

npmjs.com/package/scandit-sdk

Maiya S
  • 31
  • 2
  • Please add the main points of your solution instead of only a plain link. – pirho Nov 20 '17 at 13:30
  • This answer is correct. Scandit can now do web scanning. I tested it on iOS and it works (although slower to load vs a native app). You do have to pay for it though, and their prices are high. See: https://www.scandit.com/scandit-launches-barcode-scanner-sdk-for-web-brings-scanning-to-the-browser/ – Ethan Allen Feb 12 '18 at 17:39
  • 1
    They told me I'd have to buy 50 licenses to use their sdk. – Josh Usre Oct 19 '18 at 03:36
1

If the barcode app has enabled an url-scheme you can open it by opening link that they have specified, but that is not so reliable because it requires the user to have the specific app installed.

Instead what you could do is use some Javascript barcode scanner library like quaggaJS. https://serratus.github.io/quaggaJS/

Miro
  • 97
  • 3
  • safari will allow camera access? or will js from safari allow callback of an app and redirect back without refresh? keep in mind we dont have our own barcode scanner app – Ajo Koshy May 23 '16 at 08:44
  • They seem to support Safari too for static images at least https://serratus.github.io/quaggaJS/#browser-support – Miro May 23 '16 at 08:45
  • Miro, i need to access the camera, and not static images. – Ajo Koshy May 23 '16 at 08:57
1

AFAIK Apple doesn't make barcode reading available within Safari. Apparently you can access the camera to capture an image or video, though, so you may be able to cobble a solution together based on that.

Capture the image with:

<input id="imageinput" type="file" accept="image/*">

Then I'm guessing you can access the image data in JS using a FileReader.

And then you would run the image through a JS barcode scanning library to decode the barcode.

And finally you would insert the decoded value onto your page.

Community
  • 1
  • 1
Brett Donald
  • 2,888
  • 3
  • 18
  • 38
  • meaning what the client wants cannot be done.. i would need to atleast go for a hybrid app.? – Ajo Koshy May 24 '16 at 02:30
  • Don't say that, say "Apple doesn't provide this capability in a web app". Yes, you'll need to go hybrid or native. – Brett Donald May 24 '16 at 02:46
  • they wanted it directly from a webapp. have been looking at posts for days to find that. when i couldn't i posted here :) – Ajo Koshy May 24 '16 at 02:50
0

I just discovered Qrafter. It support same capabilities as zXing on Android.

You can open the app on click on an input and read the code back via the {code} param: https://qrafter.com/qrafter-x-callback-url/

Enjoy!

rollsappletree
  • 620
  • 1
  • 5
  • 14
-1

You may use the following link:

http://www.appcoda.com/qr-code-ios-programming-tutorial/

just set the MetadataObjectType to AVMetadataObjectTypeCode128Code from AVMetadataObjectTypeQRCode.

In -(BOOL)startReading method

replace 

[captureMetadataOutput setMetadataObjectTypes:[NSArray arrayWithObject:AVMetadataObjectTypeQRCode]];

with

[captureMetadataOutput setMetadataObjectTypes:[NSArray arrayWithObject:AVMetadataObjectTypeCode128Code]];

Also,in

-(void)captureOutput:(AVCaptureOutput *)captureOutput didOutputMetadataObjects:(NSArray *)metadataObjects fromConnection:(AVCaptureConnection *)connection method

replace

if ([[metaDataObj type] isEqualToString:AVMetadataObjectTypeQRCode])

with

if ([[metaDataObj type] isEqualToString:AVMetadataObjectTypeCode128Code])

I guess that should work.

The Pedestrian
  • 360
  • 1
  • 10