How to use barcode Scanner in web Application

Question

I would like to use barcode scanner in my Laravel application. This is an online Point of Sale Application. I know that barcode scanner returns just a string and press Enter But

Answer 1

You can capture the keypresses that the barcode reader sends with JavaScript.

Add an event listener to the window or document object to capture any keypresses anywhere in the document. Check the incoming characters for one which signals the end of the barcode (probably a new line).

This is some code I wrote for a similar task using an RFID reader. It depends on jQuery (mostly because the normalisation jQuery does on event.which makes identifying the character pressed convenient) but you can rewrite it to avoid that if you like.

It stores each keypress in an array unless the press is of Enter (which the RFID reader I was using sent after each scan). If it gets an Enter, it takes the scanned code and acts on it (I'm using Socket.IO to send it to the server, you can do whatever you like with it) and then clears the array so that the next scan can start from fresh.

var keybuffer = [];

function press(event) {
  if (event.which === 13) {
    return send();
  }
  var number = event.which - 48;
  if (number < 0 || number > 9) {
    return;
  }
  keybuffer.push(number);
}

$(document).on("keypress", press);

function send() {
  socket.emit('scan', keybuffer.join(""));
  keybuffer.length = 0;
}