WebRTCとは、Web Real Time Communicationsの略で、ブラウザ上で音声や映像やファイルのやり取りなどをリアルタイムで行うことができる技術で、Zoomなどのビデオチャットツールなどに利用されています。
今回はそのWebRTCを活用してWebサイト上でバーコード読み取り機能を実装してみました。
この記事では、その詳細について説明したいと思います。
WebRTCの詳しい説明はこちらから
実装したバーコード読み取り機能の仕様について
今回は、以下の仕様でバーコード読み取り機能のデモを作成しました。
- QRコードではなく、一次元バーコードの読み取りをブラウザ上で行えるように
- WebRTCを利用し、リアルタイムでバーコードのスキャンができるように
- バーコード読み取り結果として、値（JANコード）を取得・表示できるように
- PWAに対応させて、インストールしてアプリのようにも使えるように
あくまでデモサイトであるため、値を取得するところまでを目的としていますが、実際に活用する際はAPIなどと連携させて様々な機能を実装することが可能です。
また、PWAに関してはバーコード読み取りに関係する機能ではありませんが、実装しておくことでよりアプリのように利用することが出来るようになります。
利用したライブラリについて
バーコード読み取り機能の実装にあたり、QuaggaJSというライブラリを利用しています。
このライブラリには様々な種類のバーコードを読みとる機能が含まれており、下記の図のような流れでページ上に取得した値を返すことができます。
このライブラリで読み取ることが可能なバーコードは以下リストの通りです。
| 特徴 | 使用例 | |
| JAN/EAN | JISにより規格化されている流通コードで、国際的な共通商品コード。UPCとの互換性がある | 生活用品のほぼ全て、書籍、雑誌、家電、アパレルなど |
| CODE 128 | あらゆる種類の文字が扱え、数字のみで表した際には最もサイズが小さくなる。（12桁以上） | 冷凍、チルド食品、医療品など |
| CODE 39 | アルファベットや記号が扱えて、品番などの表現に使用される | 工業用品など |
| EAN 8 | EANバーコードの短縮版で、8桁で構成される | ヨーロッパおよびその他の国での標準的な小売り製品など |
| UPC-A | 米国・カナダでの統一商品コードであり、JAN/EANのもとになったコード | 米国での標準的な小売製品など |
| UPC-E | UPC-A（12桁）を8桁に短縮したコード | 米国での標準的な小売製品など |
| I2of5 | インターリーブド2of5（Interleaved Two of Five）の略で、ITFとも呼ばれる | 段ボールに印刷されている物流商品コード用のバーコードなど |
| Standard I2of5 | I2of5の元になったコードで、サイズが大きいため現在はあまり使われていない。 | 物流管理用として利用あり |
| CODE 93 | CODE 39のバーコードを短くする為に開発されたバーコード | FA（生産ライン、在庫管理）など |
| CODABAR | いくつかのアルファベット、いくつかの記号が表現できる。 | 血液銀行、宅配便の伝票、DPE（写真の現像など）、図書館の貸し出し管理など |
より技術的な実装の詳細はこちらからご確認ください。
バーコード読み取り：デモサイト
上記のライブラリを活用して作成したデモサイトが以下のURLです。
https://developer.mozilla.org/ja/docs/Web/API/WebRTC_API
使い方は、
- ページ上のScanボタンを押すと、カメラを起動していいかを尋ねられるので、これを許可。
- 枠内に任意のバーコードを収めることで、バーコードの値を取得することができます。
活用方法など -まとめ-
前項までで、バーコードの読み取りと読み取った結果の表示までをブラウザ上へと実装することができました。
今回はただ読み取った結果を表示するだけの単純なデモアプリを作成しましたが、要件によって様々な応用が可能だと思います。
例えば、書籍検索APIやAmazon API（PA-API）、あるいはECサイトから吐き出されるAPIなどと連携を行うことで、商品の料金や商品が持っている情報を表示させたり、実際の店頭で商品のバーコードを読み取ることで、ECサイトの商品詳細ページに遷移させるといったことも可能です。
要件に応じた形でバーコード読み取り機能をUIデザインに落とし込み、便利な機能を持たせることでWebサービスのさらなるUXの向上が見込めるでしょう。