#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 over 1 year ago:

Really cool episode! Thanks!

Michael Law said over 1 year 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 over 1 year ago:

Can you post the JS and Routes file?

Michael Law said over 1 year 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 over 1 year 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 over 1 year 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 over 1 year 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 over 1 year 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 over 1 year 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 over 1 year 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 over 1 year 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 over 1 year 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 over 1 year 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 over 1 year ago:

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

Dede said over 1 year 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 over 1 year 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 over 1 year 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 over 1 year 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 over 1 year 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 over 1 year 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 over 1 year 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 over 1 year ago:

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

Schwad said over 1 year ago:

Holy cow, that is an incredible episode, thanks!

Kris Chery said 6 months ago:

I am new to the rails + barcode projects . I am looking to build a member tracking system for a gym; the features are the same as this video initiate or retrieve based on barcodes . I am using the code from this forum to get things working. I cant seem to get the barcode reader to work properly. The barcode scanner is having a hard time capturing the barcode and when it does; it returns a false positive. ( It keeps scanning the same barcode but i get different results which isnt good for creating or retrieving records)

I am working on a mac book pro 2012 using the FaceTime Video Camera to barcodes. I am using chrome for a browser. I also made sure that the decoder is set up for code39 readers.

Is there any way someone can help me figure this out?

Login to Comment