今回はWebRTCを活用してWebサイト上でバーコード読み取り機能を実装してみました。
WebRTCとは、Web Real Time Communicationsの略で、ブラウザ上で音声や映像やファイルのやり取りなどをリアルタイムで行うことができる技術で、ビデオチャットツールなどに利用されています。
この記事では、実装してみたバーコード読み取り機能の詳細について説明したいと思います。

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

使い方は、

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

活用方法など -まとめ-

前項までで、バーコードの読み取りと読み取った結果の表示までをブラウザ上へと実装することができました。
今回はただ読み取った結果を表示するだけの単純なデモアプリを作成しましたが、要件によって様々な応用が可能だと思います。

例えば、書籍検索APIやAmazon API（PA-API）、あるいはECサイトから吐き出されるAPIなどと連携を行うことで、商品の料金や商品が持っている情報を表示させたり、実際の店頭で商品のバーコードを読み取ることで、ECサイトの商品詳細ページに遷移させるといったことも可能です。

要件に応じた形でバーコード読み取り機能をUIデザインに落とし込み、便利な機能を持たせることでWebサービスのさらなるUXの向上が見込めるでしょう。

バーコード読み取り機能に興味ある方は、お問い合わせフォームよりお気軽にご連絡ください！