# Getting Started

(![lampug_scanner_qr](https://cdn3.iconfinder.com/data/icons/digital-banking-solid-fast-transfer/512/barcode_scan_payment-256.png))

## 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 hoangvanlam9988@gmail.com`