🐥
React+TypeScriptなWebアプリで、QRコード読み込みしてみる。(zxingで)
Abstract
React+TypescriptでQRコードを読み込む話をなるだけ簡素に。
"出来たよ!!"って記事は出てくるのに、React+Typescriptでってなると全然出てこなくって。
前に、jsQRライブラリで実装したんだけど、認識が弱かったので、zxingで再トライ。
結論
今回の成果物はココ↓
前提
- React+Typescriptの開発環境は構築済 Ubuntu22.04+VSCode+React+TypeScriptの開発環境を構築してみた。
- 空っぽプロジェクトにしててね。React+TypeScriptのプロジェクト雛形をgithubに置いとく話。
- ホストPC(Windows)のカメラ設定も忘れずに。
- [環境構築]VirtualBox上のLinux22.04でカメラを使う。
手順
1.プロジェクト生成 -> VSCodeで開く
めんどいから、プロジェクト雛形をgithubから持ってくる。React+TypeScriptのプロジェクト雛形をgithubに置いとく話。
2.生成したプロジェクトの場所でreact-zxingをインストール
$ cd プロジェクトのフォルダ
$ npm install
$ npm install react-zxing --save
3.App.tsxを修正
App.tsx
import React from 'react';
import './App.css';
+import { useState } from "react";
+import { useZxing } from "react-zxing";
function App() {
+ const [result, setResult] = useState("");
+ const { ref } = useZxing({
+ onDecodeResult(result) {
+ setResult(result.getText());
+ },
+ });
return (
<div className="App">
- hello world!!
+ <video ref={ref} />
+ <p>
+ <span>Last result:</span>
+ <span>{result}</span>
+ </p>
</div>
);
}
export default App;
↓
で実行。
↓
出来た!!
めっちゃ簡単。
感度も悪くない。
zxing、スゴ!!
Discussion