Getting Started

()

Install

yarn add lampug_scanner_qr or npm i lampug_scanner_qr

Demo:

You can try it at https://camera-zoom-next-idptj6qzw-hoangvanlams-projects.vercel.app/

How to use

import ScannerQr from "lampug_scanner_qr";

- Set zoom level for the camera
ScannerQr.setZoom(zoomLevel)

- Set to open the light of the camera
ScannerQr.setTorch(true) // This function is updating.

- Start running the camera
ScannerQr.startCamera(
  videoDom,
  facingMode, // "user", "environment", "left", "right"
  wResolution, // Resolution width of the camera (640, 1280, 1920, 3840)
  hResolution, // Resolution height of the camera (480, 720, 1080, 2160)
  selectedCameraIndex
)

- Read data from the camera when scan the QR
ScannerQr.readerData(
  videoDom,
  videoId,
  videoConstraints,
  delayTime,
  onResult // Call back function to get data from the camera
)

Example Usage

import ScannerQr from "lampug_scanner_qr";
...
const constrainVideo = {
  facingMode: { exact: "environment" },
  advanced: [{ zoom: 6 }],
};
const videoDom = document.getElementById("videoScanner");

if (videoDom) {
  ScannerQr.checks(videoDom);
  ScannerQr.setZoom(6);
  ScannerQr.startCamera(videoDom, "environment", 280, 280, 0);
  // Read data from scan video
  ScannerQr.readerData(
    videoDom,
    "videoScanner", // This is id of the video
    constrainVideo,
    0,
    (data) => {
      alert("🚀 ~ useEffect ~ data: " + JSON.stringify(data));
    }
  );
}

// Choose the image and scanning data
function chooseImageFile(event) {
  const file = event.target.files[0];
  if (file) {
    const fileURL = URL.createObjectURL(file);
    ScannerQr.readerDataImage(fileURL, (data) => {
      alert("🚀 ~ chooseImageFile: " + JSON.stringify(data));
    });
  }
}

...
<video
  id="videoScanner"
  className="w-[280px] h-[280px] mx-auto my-10 block"
  width="100%"
  autoPlay
  playsInline
></video>
<input
  type="file"
  id="fileChoose"
  accept="image/png, image/jpeg"
  onChange={chooseImageFile}
/>

🌵 Good luck 🌵

Create By Lãm Hoàng

Please contact via [email protected]