Question: how do you read the drivers license image file? about parse-usdl

[mvayngrib]

cool, let me know how it performs!

another thing to try is zxing, which you would have to run server-side. It's not written in JS, but I see someone already created bindings for it

edit: seems like the node-zxing one is not true bindings, but invokes a java jar from node.js in a child process. But you can probably try it out and create bindings if it works

[mvayngrib]

@rafbgarcia happy to help, thanks for sharing your experiment

[mvayngrib]

@rafbgarcia iOS and Android detect barcodes automatically from the camera. For example, we're using the free react-native-camera module

do you need to take a static image and read the barcode from it?

[rafbgarcia]

We actually need to do that from the web, importing a file with an .

Do you know a way to achieving this?

Thanks for the help btw!

[mvayngrib]

does the processing have to be done in the browser or can it be done server-side? Does it have to detect a barcode in a live video stream or from a static image?

have you tried this one? https://github.com/PeculiarVentures/js-zxing-pdf417 (i haven't, it's just what google turned up)

[rafbgarcia]

Front or back end works. I’ve been searching for couple days and didn’t find that lib, wtf lol, apparently I suck at google searching.

Will try it out as soon as I get home, will let you know, thanks!

[rafbgarcia]

Hey @mvayngrib, got it working with a simple solution.

biginteger code
zxing code

import { parse } from 'parse-usdl'
import './biginteger'
import './zxing'

const DriversLicense = {}

DriversLicense.decodeBarcodeFromImage = (image) => {
  const canvas = document.createElement('canvas')
  const canvasContext = canvas.getContext('2d')
  canvas.width = image.naturalWidth;
  canvas.height = image.naturalHeight;
  canvasContext.drawImage(image, 0, 0, canvas.width, canvas.height);

  const source = new ZXing.BitmapLuminanceSource(canvasContext, image);
  const binarizer = new ZXing.Common.HybridBinarizer(source);
  const bitmap = new ZXing.BinaryBitmap(binarizer);

  // decodedBarcodes is an Array of decoded barcodes found in the image.
  // Since we're just looking for one instance of Pdf417 barcode in the
  // driver's license, it will only have one item in the array.
  const decodedBarcodes = ZXing.PDF417.PDF417Reader.decode(bitmap, null, false)
  return decodedBarcodes[0]
}

DriversLicense.parse = (decodedBarcode) => (
  parse(decodedBarcode, { suppressErrors: true })
)


// We need a FileReader to get the image's natural width and height
// used in `DriversLicense.decodeBarcodeFromImage`
const readFile = (file, callback) => {
  var reader = new FileReader
  reader.onload = () => {
    var img = new Image;
    img.src = reader.result
    img.onload = () => callback(img)
  }
  reader.readAsDataURL(file)
}

$('button').click(() => {
  const file = $('#file')[0].files[0]
  readFile(file, (image) => {
    const decodedBarcode = DriversLicense.decodeBarcodeFromImage(image)
    const parsedData = DriversLicense.parse(decodedBarcode.Text)
    console.log(parsedData)
  })
});

[rafbgarcia]

As for how it performs, I'm able to decode and parse the image below in ~100ms, is that what you asked?

[mvayngrib]

@rafbgarcia awesome! what's in the imported ./zxing module, is it just node-zxing re-exported?

ha, i don't remember what i meant by performs. Is it able to decode barcodes from worse inputs? like photos?

edit: oh, i see you linked to zxing code

[rafbgarcia]

Yea I tried to npm install the zxing github repo and big-integer but couldn't get it working, and since this is just a spike a don't wanna spend more time on it :)

Closing this issue, thanks, you really helped me sorting this out :)