🎃
第1回 React+TypeScriptなWebアプリで、QRコードをARしてみた。(QRコード読み込み編)
[第2回]React+TypeScriptなWebアプリで、QRコードをARしてみた。(3Dキャラクタ表示編) ->
Abstract
React+TypescriptのWebアプリで、ARを実装してみた。
第1回の今回は、マーカをQRコードにすることで、既存のQRコードライブラリ(zxing)を使うことができるので実装が楽になりそう。
結論
今回の成果物はココ↓
前提
- React+Typescriptの開発環境は構築済 [環境構築]WindowsにVSCode+React+TypeScriptの開発環境を構築してみた。
- このスケルトンコードから始める。React-Ts-Template
- PCに挿すWebのカメラも準備しておく。
windwosで。
手順
1.ソースコードclone
$ cd プロジェクトのフォルダ
$ git clone https://github.com/aaaa1597/React-Ts-Template.git
2.生成したプロジェクトの場所でreact-zxingをインストール
$ ren React-Ts-Template プロジェクトフォルダ名
$ cd プロジェクトのフォルダ
$ npm install
$ npm install react-zxing --save
3.VSCodeでプロジェクトを開く
プロジェクトフォルダで右クリック -> Codeで開く。
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