I tried barcode scanning using Rails + React + QuaggaJS


We are gathering with people who want to develop teams and creating apps using Ruby on Rails and React. Since I was in charge of implementing the barcode reading function, I tried to make it roughly work.



rails _6.0.3_ new barcode_app -d postgresql

cd barcode_app 

yarn add quagga

rails webpacker:install
rails webpacker:install:react
rails generate react:install


  "inputStream": {
    "type": "LiveStream",
    "constraints": {
      "width": { "min": 450 },
      "height": { "min": 300 },
      "facingMode": "environment",
      "aspectRatio": { "min": 1, "max": 2 }
  "locator": {
    "patchSize": "medium",
    "halfSample": true
  "numOfWorkers": 2,
  "frequency": 10,
  "decoder": {
    "readers": ["ean_reader"]
  "locate": true


import React, { useState } from "react";
import Scanner from "./Scanner";

const Index = () => {
  const [camera, setCamera] = useState(true);
  const [result, setResult] = useState(null);

  const onDetected = result => {
    window.location.href = '/scanners/' + result

  return (
    <section className="section-wrapper">
      <div className="section-title">
        <h1 className="section-title-text">
          {camera ? <Scanner onDetected={onDetected} /> : <p>Loading...</p> }

export default Index


import React, { useEffect } from "react";
import config from "./config.json";
import Quagga from "quagga";

const Scanner = props => {
  const { onDetected } = props;

  useEffect(() => {
    Quagga.init(config, err => {
      if (err) {
        console.log(err, "error msg");
      return () => {

    Quagga.onProcessed(result => {
      var drawingCtx = Quagga.canvas.ctx.overlay,
        drawingCanvas = Quagga.canvas.dom.overlay;

      if (result) {
        if (result.boxes) {
            .filter(function(box) {
              return box !== result.box;
            .forEach(function(box) {
              Quagga.ImageDebug.drawPath(box, { x: 0, y: 1 }, drawingCtx, {
                color: "green",
                lineWidth: 2

        if (result.box) {
          Quagga.ImageDebug.drawPath(result.box, { x: 0, y: 1 }, drawingCtx, {
            color: "#00F",
            lineWidth: 2

        if (result.codeResult && result.codeResult.code) {
            { x: "x", y: "y" },
            { color: "red", lineWidth: 3 }

  }, []);

  const detected = result => {

  return (
    <div id="interactive" className="viewport" />

export default Scanner;

The addicted point

スクリーンショット 2021-01-09 22.40.19.png

Referenced articles


Corresponding part


const { environment } = require('@rails/webpacker')


module.exports = environment


ezgif.com-gif-maker (4) (1).gif

GitHub https://github.com/yodev21/scanner_app

Reference article

Try scanning barcodes in your browser using WebRTC

Recommended Posts

I tried barcode scanning using Rails + React + QuaggaJS
I tried using Gson
I tried using TestNG
I tried using Galasa
I tried using azure cloud-init
I tried Rails beginner [Chapter 1]
I tried using Apache Wicket
I tried using Java REPL
I tried Rails beginner [Chapter 2]
I tried unit testing Rails app using RSpec and FactoryBot
[Rails] I tried using the button_to method for the first time
I tried using Hotwire to make Rails 6.1 scaffold a SPA
[Rails] I tried to implement "Like function" using rails and js
I tried using anakia + Jing now
I tried using Spring + Mybatis + DbUnit
I tried using JOOQ with Gradle
[Rails] I tried deleting the application
I tried using Java8 Stream API
I tried using JWT in Java
[Android] I tried using Coordinator Layout.
I tried using Pari gp container
I tried using WebAssembly Stadio (2018/4/17 version)
I tried using Java memo LocalDate
I tried using GoogleHttpClient of Java
I tried to build a simple application using Dockder + Rails Scaffold
I tried to introduce CircleCI 2.0 to Rails app
I tried using Realm with Swift UI
I tried using Java's diagnostic tool Arthas
I tried using UICollectionViewListCell added from Xcode12.
I tried using Scalar DL with Docker
I tried using OnlineConverter with SpringBoot + JODConverter
It's new, but I tried using Groonga
I tried using OpenCV with Java + Tomcat
I tried using Docker for the first time
I tried using Junit on Mac VScode Maven
[For beginners] I tried using DBUnit in Eclipse
[Rails] I tried to raise the Rails version from 5.0 to 5.2
[For beginners] I tried using JUnit 5 in Eclipse
I tried to organize the session in Rails
I tried writing CRUD with Rails + Vue + devise_token_auth
[Android] I quit SQLite and tried using Realm
I made blackjack with Ruby (I tried using minitest)
[Rails] I made a draft function using enum
[API] I tried using the zip code search API
I tried to implement a server using Netty
I tried using the profiler of IntelliJ IDEA
[Rails] How to connect to an external API using HTTP Client (I tried connecting to Qiita API)
I tried Spring.
I tried tomcat
I tried youtubeDataApi.
I tried refactoring ①
I tried FizzBuzz.
I tried JHipster 5.1
I tried using a database connection in Android development
I tried using the Server Push function of Servlet 4.0
I tried using Alibaba Cloud's KMS (Key Management Service) service
I tried using Google Cloud Vision API in Java
I tried to operate SQS using AWS Java SDK
[Rails] I tried playing with the comment send button
I tried using the Migration Toolkit for Application Binaries
I tried using Log4j2 on a Java EE server