【WebRTC】ブラウザだけで動作するバーコード読み取り機能を実装してみた！｜Labo｜株式会社トライム

WebRTCという言葉をご存知でしょうか？
WebRTCとは、Web Real Time Communicationsの略で、ブラウザ上で音声や映像やファイルのやり取りなどをリアルタイムで行うことができる技術で、ビデオチャットツールなどに利用されている技術です。

今回の記事では、このWebRTCを活用してWebブラウザ上でのバーコード読み取り機能をWebアプリとして実装した事例についてご説明していきます。

WebRTCの詳しい説明についてはこちらをご参照ください。

実装したバーコード読み取り機能の仕様について

まず、バーコード読み取りを行うことが可能なデモサイトを制作しました。実装仕様は下記のとおりです。

• QRコードではなく、一次元バーコード（普通のバーコード）の読み取りをスマホなどのカメラを介しブラウザ上で行う
• 読み取りにWebRTCを利用し、リアルタイムでスキャンを行う
• 読み取った結果として、値（JANコード）を取得・表示できるように
• PWA化させて、スマホにインストールしてアプリのようにも使えるように

あくまでデモサイトであるため、ここでは値を取得するところまでを目的としていますが、実際に活用する際はAPIなどと連携させて様々な機能を実装することが可能です。
それによってECサイトや在庫管理システムとの連携が可能となるでしょう。

また、PWAに関してはバーコード読み取りに関係する機能ではありませんが、スマホやタブレットでの利用を想定し、利便性を上げるために実装しました。

利用したJSライブラリについて

バーコード読み取り機能の実装にあたり、QuaggaJSというライブラリを利用しています。
このライブラリには様々な種類のバーコードを読み取る機能が含まれており、下記の図のような流れでページ上に取得した値を返すことができます。

このライブラリで読み取ることが可能なバーコードは下記のリストのとおりです。

様々な範囲で活用することが可能なことが伺えます。
また、より技術的な実装の詳細はこちらからご確認ください。

バーコード読み取り：デモサイト

上記のライブラリを活用して作成したデモサイトの映像が以下のキャプチャです。

仕様は、

1. ページ上のScanボタンを押下することで、カメラ起動の許可を尋ねられるため、これを許可する。
2. カメラの枠内に任意のバーコードを収めることで、バーコードの値を取得することができます。

というシンプルなもので、取得した値を画面上に表示します。
キャプチャの通り、問題なく動作させることができました。

案件での活用事例について

上記のデモサイトでは、バーコードの読み取りを行い、その値を画面上へ表示するという機能を実装しました。そして、この仕様を応用して実際に案件でWebアプリを制作する機会があったため、その詳細についてもご紹介します。

要件と仕様について

某アパレルブランドから依頼いただいた案件となり、WebRTCを利用したバーコード読み取り機能を実装するご要望をいただきました。具体的には、実店舗でスタッフが商品バーコードを読み取り、EC在庫も含めた在庫のマスターデータにアクセスし検索できるようにしたい、というもので、デモサイトの機能を活用することで対応が可能でした。

実装にあたり、まず利便性を高めるために、デモサイトの仕様を踏襲しつつも精度を向上させること当面の目的として、タブレットの実機と実際の商品のバーコードを利用し読み取りテストを実施。

そのまま店舗スタッフ向けWebアプリへ、バーコード読み取りにより、ECのバックエンドデータと連携し商品在庫を検索できる機能を実装する対応を行いました。

今回の実装ではPWA機能を利用する必要はありませんでしたが、結果として、実装した読み取り機能によって実店舗スタッフの業務効率化へと貢献することができました。

活用方法など -まとめ-

ここまで、バーコードの読み取りを行うアプリと、実際に案件で活用した事例を紹介いたしました。
読み取った結果を表示するデモと、ECサイトのデータと連携する事例を紹介しましたが、在庫管理システムなどとの連携も必要に応じて実装することが可能です。

例えば、書籍検索APIやAmazon API（PA-API）など、必要に応じて様々な活用が可能になる技術ですので、要件に応じた形でバーコード読み取り機能をUIに落とし込み、便利な機能を持たせることで様々な業務の効率化につながることでしょう。

実際に興味を持たれた方は、お問い合わせフォームよりご相談ください！