A not yet working implementation of the Quagga2 QR code reader.

App.tsx

import React, { useEffect, useState } from 'react';
import Quagga, { QuaggaJSConfigObject } from '@ericblade/quagga2';
import QrCodeReader from '@ericblade/quagga2-reader-qr';
import './App.css';
import code128test from './code128.png';
import qrcodetest from './qrcode.png';

Quagga.registerReader('qrcode', QrCodeReader);

const qconfig:QuaggaJSConfigObject = {
	inputStream: {
		type : "LiveStream",
		constraints: {
			width: {min: 640},
			height: {min: 480},
			facingMode: "environment",
			aspectRatio: {min: 1, max: 2}
		},
		singleChannel: false
	},
	locator: {
		patchSize: "medium",
		halfSample: true
	},
	numOfWorkers: 0	,
	frequency: 10,
	decoder: {
		readers: ['qrcode'],
		debug: {
			  drawBoundingBox: true,
			  showFrequency: true,
			  drawScanline: true,
			  showPattern: true
		  }
	},
	locate: true
};

function App() {
  const [barcode, setBarcode] = useState('');
  const [qrcode, setQrcode] = useState('');

  useEffect(() => {
  // simultaneous decoding is BROKEN, see https://github.com/ericblade/quagga2/issues/5
    async function decode() {
      const [bc, qr] = await Promise.all([
        Quagga.decodeSingle({ ...qconfig, src: code128test }),
        Quagga.decodeSingle({ ...qconfig, src: qrcodetest }),
      ]);
      //   const bc = await Quagga.decodeSingle({ ...qconfig, src: code128test });
      // const qr = await Quagga.decodeSingle({ ...qconfig, src: qrcodetest });
      setBarcode(bc.codeResult.code);
      setQrcode(qr.codeResult.code);
    };
	Quagga.init(qconfig, function(err){
		if(err){
			console.log(err);
		}	
		Quagga.start();
		Quagga.onDetected(function(data){
			alert('yes');
			console.log(data.codeResult.code);
		});
		Quagga.onProcessed(function(result){
			console.log('process');
			var drawingCtx = Quagga.canvas.ctx.overlay,
            drawingCanvas = Quagga.canvas.dom.overlay;

			if (result) {
				if (result.boxes) {
					result.boxes.filter(function (box) {
						return box !== result.box;
					}).forEach(function (box) {
						Quagga.ImageDebug.drawPath(box, {x: 0, y: 1}, drawingCtx, {color: "green", lineWidth: 2});
					});
				}

				if (result.box) {
					Quagga.ImageDebug.drawPath(result.box, {x: 0, y: 1}, drawingCtx, {color: "#00F", lineWidth: 2});
				}

				if (result.codeResult && result.codeResult.code) {
					Quagga.ImageDebug.drawPath(result.line, {x: 'x', y: 'y'}, drawingCtx, {color: 'red', lineWidth: 3});
				}
			}
		});
		console.log('started');
	});
  }, []);

  return (
    <div className="App">
      <header className="App-header">
		<div id="interactive" className="viewport"></div>
      </header>
    </div>
  );
}

export default App;