#67 Decoding and Interacting with Barcodes


Using the QuaggaJS Library, learn how to scan and decode barcodes with your Ruby on Rails application. Using provided callbacks, interact with controller actions to provide a seamless experience.
rails javascript view ajax 11:40


application.css#barcode-scanner canvas.drawingBuffer, #barcode-scanner video.drawingBuffer {
  display: none;

#barcode-scanner canvas, #barcode-scanner video {
  width: 100%;
  height: auto;
application.js//= require quagga
//= require_tree .

function order_by_occurrence(arr) {
  var counts = {};
      if(!counts[value]) {
          counts[value] = 0;

  return Object.keys(counts).sort(function(curKey,nextKey) {
      return counts[curKey] < counts[nextKey];

function load_quagga(){
  if ($('#barcode-scanner').length > 0 && navigator.mediaDevices && typeof navigator.mediaDevices.getUserMedia === 'function') {

    var last_result = [];
    if (Quagga.initialized == undefined) {
      Quagga.onDetected(function(result) {
        var last_code = result.codeResult.code;
        if (last_result.length > 20) {
          code = order_by_occurrence(last_result)[0];
          last_result = [];
            type: "POST",
            url: '/products/get_barcode',
            data: { upc: code }

      inputStream : {
        name : "Live",
        type : "LiveStream",
        numOfWorkers: navigator.hardwareConcurrency,
        target: document.querySelector('#barcode-scanner')  
      decoder: {
          readers : ['ean_reader','ean_8_reader','code_39_reader','code_39_vin_reader','codabar_reader','upc_reader','upc_e_reader']
    },function(err) {
        if (err) { console.log(err); return }
        Quagga.initialized = true;

$(document).on('turbolinks:load', load_quagga);
visitors/index.html.erb<div id='barcode-scanner'></div>
routes.rbRails.application.routes.draw do
  resources :products do
    post :get_barcode, on: :collection
  root 'visitors#index'

# rake routes
#               Prefix Verb   URI Pattern                     Controller#Action
# get_barcode_products POST   /products/get_barcode(.:format) products#get_barcode
#             products GET    /products(.:format)             products#index
#                      POST   /products(.:format)             products#create
#          new_product GET    /products/new(.:format)         products#new
#         edit_product GET    /products/:id/edit(.:format)    products#edit
#              product GET    /products/:id(.:format)         products#show
#                      PATCH  /products/:id(.:format)         products#update
#                      PUT    /products/:id(.:format)         products#update
#                      DELETE /products/:id(.:format)         products#destroy
#                 root GET    /                               visitors#index
products_controller.rb  # GET /products/new
  def new
    @product = Product.new
    @product.upc = params[:upc]


  # POST /products/get_barcode
  def get_barcode
    @product = Product.find_or_initialize_by(upc: params[:upc])
    unless @product.new_record?
      redirect_to @product
      redirect_to new_product_path(upc: params[:upc])
Nickiam said 11 months ago:

Really cool episode! Thanks!

Michael Law said 11 months ago:

Hey, I was having trouble once the barcode is captured/scanned. In the console it has the error, ""POST http://localhost:3000/products/get_barcode 404 (Not Found)". I have checked my routes and run rake routes, and they are coming up correctly. Any idea why that may be?

kobaltz PRO said 11 months ago:

Can you post the JS and Routes file?

Michael Law said 11 months ago:

I copied and pasted the code as you have it below, except my routes have 'orders' where you have 'products', and I'm only trying to find already existing orders.

The only difference is that my 'orders' routes are actually nested.

In my JS file, I have everything else exactly the same except the url in the ajax request.

  type: "POST",
  url: '/orders/get_barcode',
  data: { upc: code }

Since my orders route is nested, when I run rake routes I get

get_barcode_ticket_orders ... POST ... /tickets/:ticket_id/orders/get_barcode(.:format) ... orders#get_barcode

In my routes file:

resources :tickets do
    resources :orders do
      post :get_barcode, on: :collection

kobaltz PRO said 11 months ago:

With a nested routes like that,

get_barcode_ticket_orders POST   /tickets/:ticket_id/orders/get_barcode(.:format) orders#get_barcode

You would need to also pass the parameter ticket_id into the data hash.  Is the ticket_id available at this point? If so, you could pass it into a data attribute and access it in the JS. Otherwise, you may want to reconsider the routes to look something like this (or similar):

resources :tickets do
  resources :orders
post '/orders/get_barcode',  as: :get_barcode, controller: :orders, action: :get_barcode
# get_barcode POST   /orders/get_barcode(.:format)         orders#get_barcode

Michael Law said 11 months ago:

I was just about to ask you if it was throwing the error because I'm not passing the ticket_id. I'm not the best with jQuery so I didn't know if the client required that, although as I type it this makes sense that it would.

What do you mean by "pass it into the data attribute"?

Are you saying that the client is throwing the original error I posted because it's trying to find the order, but doesn't have the ticket_id?

kobaltz PRO said 11 months ago:

Since you don't have the ticket_id, it's not a valid route.

In your HTML, if the ticket_id is available and you're already displaying it somewhere then you can create a data attribute like

<%= tag :div, id: 'some_name', data: { 'ticket-id': @ticket.id } %>

You can access the value of the ticket's id in jQuery like

var ticket_id = $('#some_name').data('ticket-id');

And then in the AJAX POST

data: { ticket_id: ticket_id, upc: code }

Michael Law said 11 months ago:

Hm. That's a problem because at this point the ticket_id is not accessible for me to put it in a div. Are there any other ways you can think of to do this? You don't have to write out the code, you can just let me know your ideas.

kobaltz PRO said 11 months ago:

Looks like you should remove the collection on the orders and instead do something like this

post '/orders/get_barcode',  as: :get_barcode, controller: :orders, action: :get_barcode

Since it sounds like you have a barcode which references a record in the Order model, you're not really going to be able to do a nested resource and have the collection on the Orders. Instead, you can create a manual path (as shown above) which goes to your orders#get_barcode action.

In the get_barcode action, you can look up the order and then get the ticket association.

It might look something like

def get_barcode
  @ticket = Order.includes(:ticket).find_by(barcode: params[:upc]).ticket

This is assuming that a Ticket has_many Orders and an Order belongs_to a Ticket.

The previous example will generate two queries and could be a bit slower. You could get fancy with your query and also do something like this which will create an inner join

@ticket = Ticket.joins(:orders).where(orders: {barcode: params[:upc]})

Michael Law said 11 months ago:

I wasn't able to figure it out, and even utilizing the hints you gave me didn't change much. All the errors are popping up in the console on the client. I'm not a jQuery guy, so I'll have to look into another solution for accomplishing this. Thanks for your help and the video is great!

Dede said 10 months ago:

the best tutorial ever my dear friend! do you have this same project in GitHub? thanks for share your knowledge!

In my case i copyed and paste all code in my project, and don't appear nothing in my view using this <div id='barcode-scanner'></div> there.

Do you know if have something else to do? because "i think" that have to appear my webcam in the view, right? or i need to do more things?


kobaltz PRO said 10 months ago:

I must have been exhausted when I was writing up the Resources section. Check it now, the source code link is posted.

Dede said 10 months ago:

I picked up your project and checked that it also does not work in production mode, and I noticed that you refer to quagga.js but I do not see it inside your project, I even looked at your gems but I did not find anything. Do you know what more can i do to fix it? thanks Kobaltz!

kobaltz PRO said 10 months ago:

It should be in the `vendor/assets/javascripts` folder.

Dede said 10 months ago:

i found now, but i don't understand why not works in production mode, in your project i had the same result... do you have some suggestion?

kobaltz PRO said 10 months ago:

Are you serving the site over SSL? Check the browser's developer tools to see if there are any warnings or errors.

Dede said 10 months ago:

Yes, i did it, nothing appear there too.. try to run your project in production mode, you gonna see that not is working too..

I did the same with your project.

kobaltz PRO said 10 months ago:

Hello Dede,

I've pulled down the code from github and ran it in production mode.

The only difference that I made in the source app was add a secrets key in the secrets.yml file and run the app with RAILS_ENV=production passenger start as this will mount the rails app under nginx (similar to how it would be on a production environment).

I was able to get the camera showing without any issues.

You may want to check your browser to ensure that the camera was shared.

Dede said 10 months ago:

In my project i don't use turbolinks, do you know what can i do to fix this part of the JS code?

$(document).on('turbolinks:load', load_quagga);

this is my application.js

//= require jquery

//= require jquery_ujs

//= require jquery-ui

//= require autocomplete-rails

//= require jquery.min

//= require bootstrap

//= require twitter/bootstrap

//= require bootstrap/modal

//= require bootstrap-datepicker

//= require bootstrap-datepicker/core

//= require maskedinput

//= require fusioncharts/fusioncharts

//= require fusioncharts/fusioncharts.charts

//= require fusioncharts/fusioncharts.theme.fint

//= require demo

//= require dash

//= require jquery.touchSwipe.min

//= require sweetalert

//= require dropzone

//= require progressbar

//= require quagga.min

//= require quagga

//= require_tree .

Dede said 10 months ago:

Thanks for the answer Kobaltz! everything is working fine in my project, i just found one problem, not work in production mode, do you know why? even making the "rails assets:precompile" don't appear the webcam in my view and i don't have any error in Chrome.

Any suggestion? thanks again!

Eric Verzel said 8 months ago:

Hi, I need to compare a UPC and then compares it to a database in order to get the informations related to the products and show them to the user.

I'm a begginer sorry if this is dead simple. 

kobaltz PRO said 8 months ago:

I'll consider covering an episode with scanning QR codes. Are there any particular libraries that you're interested in?

Schwad said 8 months ago:

Holy cow, that is an incredible episode, thanks!

Login to Comment