bacode-scanner

intro:

Scan code plugin

• bacode-scanner
  • Reference
    • Method
      • Parameter
    • Usage Plugin

    ---

    • Method
      • Parameter
    • Usage WebComponent

Reference

Method

• createProcesser

  scan code

import { barcodeScannerPlugin } from "@plaoc/plugins";
const controller = await barcodeScannerPlugin.createProcesser();
// To parse the code
controller.process(new Uint8Array());
// stop parsing
controller.stop();

• process

  To parse the code, you need to convert the image into blob data and then pass it to the function for identification.

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

await barcodeScannerPlugin.process(new Uint8Array());

• stop

  How to stop parsing barcode data

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

Parameter

• SupportedFormat

  Supported code 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 scan

Parameter

• ScanOptions?

  Scan code delivery 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>