Build a React.js QR Code Scanner with Webcam & Image Upload Step by Step Tutorial Using JSX

App.jsx

import React, { useState } from 'react';
import { Container, Row, Col, Form, Button, Alert, Image, Modal } from 'react-bootstrap';
import QrReader from 'qrcode-reader';
import { QrReader as WebcamQrReader } from 'react-qr-reader'; // For webcam scanning
import "bootstrap/dist/css/bootstrap.min.css";

const QrCodeScanner = () => {
  const [qrImage, setQrImage] = useState(null);
  const [qrResult, setQrResult] = useState('');
  const [showWebcam, setShowWebcam] = useState(false); // For webcam modal

  // Handle file upload
  const handleImageUpload = (event) => {
    setQrResult('');
    const file = event.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        setQrImage(e.target.result);
        processQRCode(e.target.result);
      };
      reader.readAsDataURL(file);
    }
  };

  // Process QR code from image
  const processQRCode = (imageSrc) => {
    const img = document.createElement('img');
    img.src = imageSrc;

    img.onload = () => {
      const canvas = document.createElement('canvas');
      const context = canvas.getContext('2d');
      canvas.width = img.width;
      canvas.height = img.height;
      context.drawImage(img, 0, 0, img.width, img.height);

      const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
      const qrReader = new QrReader();

      qrReader.callback = (err, result) => {
        if (err) {
          setQrResult('Failed to read QR code from the image.');
        } else {
          setQrResult(result.result);
        }
      };

      qrReader.decode(imageData);
    };
  };

  // Handle webcam scanning
  const handleWebcamResult = (result, error) => {
    if (result) {
      setQrResult(result?.text || '');
      setShowWebcam(false); // Close the modal after a successful scan
    }
    if (error) {
      console.error(error);
    }
  };

  return (
    <Container className="mt-5">
      <Row className="justify-content-center">
        <Col md={6}>
          <h2 className="text-center mb-4">QR Code Scanner</h2>

          {/* File Upload */}
          <Form.Group controlId="formFile">
            <Form.Label>Select an Image with a QR Code</Form.Label>
            <Form.Control type="file" accept="image/*" onChange={handleImageUpload} />
          </Form.Group>

          {/* Display Selected Image */}
          {qrImage && (
            <div className="text-center mt-4">
              <h5>Selected Image:</h5>
              <Image
                style={{ width: "200px", height: "200px" }}
                src={qrImage}
                alt="Uploaded QR Code"
                fluid
                className="mb-3"
              />
            </div>
          )}

          {/* QR Code Result */}
          {qrResult && (
            <Alert variant="success" className="mt-4">
              <strong>QR Code Result:</strong> {qrResult}
            </Alert>
          )}

          {/* Webcam Button */}
          <Button
            variant="primary"
            className="mt-3"
            onClick={() => setShowWebcam(true)}
          >
            Scan QR Code with Webcam
          </Button>

          {/* Webcam Modal */}
          <Modal show={showWebcam} onHide={() => setShowWebcam(false)} centered>
            <Modal.Header closeButton>
              <Modal.Title>Scan QR Code with Webcam</Modal.Title>
            </Modal.Header>
            <Modal.Body>
              <WebcamQrReader
                onResult={handleWebcamResult}
                constraints={{ facingMode: 'environment' }}
                style={{ width: '100%' }}
              />
            </Modal.Body>
          </Modal>
        </Col>
      </Row>
    </Container>
  );
};

export default QrCodeScanner;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

import React, { useState } from 'react';

import { Container, Row, Col, Form, Button, Alert, Image, Modal } from 'react-bootstrap';

import QrReader from 'qrcode-reader';

import { QrReader as WebcamQrReader } from 'react-qr-reader'; // For webcam scanning

import "bootstrap/dist/css/bootstrap.min.css";

const QrCodeScanner = () => {

const [qrImage, setQrImage] = useState(null);

const [qrResult, setQrResult] = useState('');

const [showWebcam, setShowWebcam] = useState(false); // For webcam modal

// Handle file upload

const handleImageUpload = (event) => {

setQrResult('');

const file = event.target.files[0];

if (file) {

const reader = new FileReader();

reader.onload = (e) => {

setQrImage(e.target.result);

processQRCode(e.target.result);

};

reader.readAsDataURL(file);

}

};

// Process QR code from image

const processQRCode = (imageSrc) => {

const img = document.createElement('img');

img.src = imageSrc;

img.onload = () => {

const canvas = document.createElement('canvas');

const context = canvas.getContext('2d');

canvas.width = img.width;

canvas.height = img.height;

context.drawImage(img, 0, 0, img.width, img.height);

const imageData = context.getImageData(0, 0, canvas.width, canvas.height);

const qrReader = new QrReader();

qrReader.callback = (err, result) => {

if (err) {

setQrResult('Failed to read QR code from the image.');

} else {

setQrResult(result.result);

}

};

qrReader.decode(imageData);

};

// Handle webcam scanning

const handleWebcamResult = (result, error) => {

if (result) {

setQrResult(result?.text || '');

setShowWebcam(false); // Close the modal after a successful scan

}

if (error) {

console.error(error);

}

};

return (

<h2 className="text-center mb-4">QR Code Scanner</h2>

{/* File Upload */}

<Form.Group controlId="formFile">

<Form.Label>Select an Image with a QR Code</Form.Label>

<Form.Control type="file" accept="image/*" onChange={handleImageUpload} />

</Form.Group>

{/* Display Selected Image */}

{qrImage && (

<h5>Selected Image:</h5>

<Image

style={{ width: "200px", height: "200px" }}

src={qrImage}

alt="Uploaded QR Code"

fluid

className="mb-3"

</div>

)}

{/* QR Code Result */}

{qrResult && (

<strong>QR Code Result:</strong> {qrResult}

</Alert>

)}

{/* Webcam Button */}

<Button

variant="primary"

className="mt-3"

onClick={() => setShowWebcam(true)}

Scan QR Code with Webcam

</Button>

{/* Webcam Modal */}

<Modal show={showWebcam} onHide={() => setShowWebcam(false)} centered>

<Modal.Header closeButton>

<Modal.Title>Scan QR Code with Webcam</Modal.Title>

</Modal.Header>

<Modal.Body>

<WebcamQrReader

onResult={handleWebcamResult}

constraints={{ facingMode: 'environment' }}

style={{ width: '100%' }}

</Modal.Body>

</Modal>

</Col>

</Row>

</Container>

);

};

export default QrCodeScanner;

Build a React.js QR Code Scanner with Webcam & Image Upload Step by Step Tutorial Using JSX

Comments

Leave a Reply Cancel reply

Archives