Node.jsの環境を作っておく
QRコードリーダーの作り方の記事にはnpxとかいきなり出てくるので、Node.jsの環境はあらかじめ構築しておく必要はあります。
最近はyarnを使うと速いのでそれを使ったりする。yarn自体にもインストーラーがありますが、Chocolateyからyarnをインストールするというのもあります。
QRコードリーダーを作る
作り方は↓を参照。基本的にはこれで作れます。PCからはlocalhost:3000でアクセスできます(Webカメラがついていれば)が、iPhoneと同様Androidのスマホでもhttpsでなければカメラにはアクセスできません(権限の確認もない)。
react-qr-reader を利用したQRコードリーダーの作成
WindowsのReactをHTTPSで使うには
SET HTTPS=true&&yarn start
などとします。実行するディレクトリ/フォルダは上の記事で作ったqrcode-reader直下です。Windowsのファイヤーウォールの設定もいじったかも。
はまったこと
HTTPSで動かすと、見事に下の不具合にぶち当たりました。
create-react-appで作ったアプリがhttpsだと動かない
現時点ではまだreact-scriptの3.3.1は出ていないので、記事に書いてある更新後のpackage.jsonに書き換えて、
npm install
で無事動作するようになりました。あとは、自分の目的に応じてApp.jsを書き換えましょう。