Help us understand the problem. What is going on with this article?

JavaScriptでQRコードをスキャンするライブラリまとめ

QRコードをブラウザで読み取ることができるJavaScriptのライブラリを調査しました。

調査したライブラリ

GitHub :star: Star :fork_and_knife: Fork :arrow_down: downloads in the last month at npm Demo
LazarSoft/jsqrcode 3.3k 1k 6344 or 44 https://webqr.com/
schmich/instascan 2k 636 181 https://schmich.github.io/instascan/
cozmo/jsQR 1.5k 241 14547 https://cozmo.github.io/jsQR/
JodusNodus/react-qr-reader 527 149 5351 https://thomasbilliet.com/react-qr-reader/

LazarSoft/jsqrcode

ZXing というJavaのライブラリをJavaScriptに移植したものです。

このライブラリ自体はCommonJS形式で書かれていないのですが,別の方がCommonJS形式への変換とnpmの登録をしてくれていて,edi9999/jsqrcodevicapow/jsqrcode という2種類のプロジェクトがあります。

このライブラリはテストコードが不十分ということで,edi9999/jsqrcode の作者は,後述する cozmo/jsQR の利用を推奨しています。

このライブラリは画像ファイルのDataURLからQRコードを読み込むところまでを対象としているので,Webカメラから画像を取得する処理は navigator.getUserMedia などを使って自分で書く必要があります。参考事例を2つ挙げておきます。

schmich/instascan

前述の LazarSoft/jsqrcode のもととなったライブラリである ZXing というJavaのライブラリをC++に移植した zxing-cpp をEmscriptenでJavaScriptに変換した zxing-cpp-emscripten のラッパーです(長い)。

このライブラリはWebカメラからの画像の取得までやってくれるようなのですが,READMEにはiOS Safariには対応していないという旨のことが書いてあります。これは,iOS Safariで navigator.getUserMedia が使えるようになったのが最近のこと(iOS11以降)だからです。 もしかすると現在のiOS Safariでは普通に使えるのかもしれません(手元にiOSが無いので検証できません)。 @syoyo さんの検証によるとiOS11でも動作しなかったようです。以下のPRが取り込まれていないのを見ても分かるように,最近は開発が停滞気味です。

cozmo/jsQR

最初からCommonJS形式で書かれていたり,テストコードがちゃんと書かれていたり,Typed Arrayが使われていたり,TypeScriptで記述されていたりと,モダンなライブラリとなっています。npmのダウンロード数の観点では最も人気があります。

使い方は画像データを ImageData 形式で準備してから jsQR(imageData, width, height) に渡すだけというシンプルなインターフェースになっていますが,これもjsqrcodeと同様にWebカメラから画像を取得する処理は自分で書く必要があります。

JodusNodus/react-qr-reader

前述の cozmo/jsQR をReactコンポーネントとしてラップしたものです。Webカメラからの画像取得からQRコードのデコードまでやってくれるeasyなライブラリです。

jsQRでQRコードをスキャンする処理はCPUで行われるので,シングルスレッドで駆動するJavaScriptにとって苦手な処理なのですが,このライブラリではjsQRでの処理をWeb Workerで別スレッドにオフロードすることでUIスレッドへの影響を小さくしています。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした