Barcode Scanner

Introduction:

Barcode Scanner Plugin

• Barcode Scanner
  • Reference
    • Method
      • Parameter
    • Usage Plugin

    ---

    • Method
      • Parameter
    • Usage WebComponent

Reference

Method

• createProcesser

  Create Control Handle

import { barcodeScannerPlugin } from "@plaoc/plugins";
const controller = await barcodeScannerPlugin.createProcesser();
// To decode, convert the image to blob data and pass it to the function for recognition. Supports Uint8Array, Blob
controller.process(new Uint8Array());
// Method to stop decoding barcode data
controller.stop();

• process

  Decode, requires converting the image to blob data and passing it to the function for recognition.

import { barcodeScannerPlugin } from "@plaoc/plugins";

await barcodeScannerPlugin.process(new Uint8Array());

• stop

  Method to stop decoding barcode data

import { barcodeScannerPlugin } from "@plaoc/plugins";
await barcodeScannerPlugin.stop();

Parameter

• SupportedFormat

  Supported barcode types

import { SupportedFormat } from "@plaoc/plugins";
SupportedFormat.QR_CODE;

Usage Plugin

<script setup lang="ts">
import { onMounted } from "vue";
import { barcodeScannerPlugin, ScannerProcesser } from "@plaoc/plugins";

let controller: ScannerProcesser;
onMounted(async () => {
  // Get controller
  controller = await barcodeScannerPlugin.createProcesser();
});
async function onFileChanged($event: Event) {
  const target = $event.target as HTMLInputElement;
  if (target && target.files?.[0]) {
    const img = target.files[0];
    const res = await controller.process(img);
  }
}
</script>
<template>
  <input type="file" @change="onFileChanged($event)" accept="image/*" capture />
</template>

---

Method

• startScanning

Start Scanning

Parameter

• ScanOptions?

  Scanning options

import type { ScanOptions } from "@plaoc/plugins";
import { CameraDirection, SupportedFormat } from "@plaoc/plugins";
const options: ScanOptions = {
  rotation: 0,
  direction: CameraDirection.FRONT,
  width: 0,
  height: 0,
  formats: SupportedFormat.QR_CODE,
};

Usage WebComponent

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { HTMLDwebBarcodeScanningElement } from "@plaoc/plugins";

const $barcodeScannerPlugin = ref<HTMLDwebBarcodeScanningElement>();
let barcodeScanner: HTMLDwebBarcodeScanningElement;

onMounted(async () => {
  barcodeScanner = $barcodeScannerPlugin.value!;
});

const startScanning = async () => {
  return await barcodeScanner.startScanning();
};

const stop = async () => {
  return await barcodeScanner.stop();
};
</script>
<template>
  <dweb-barcode-scanning ref="$barcodeScannerPlugin"></dweb-barcode-scanning>
</template>