【JS Utils】h5-scan-code (H5扫码)

h5-scan-code (H5扫码)

项目主页

https://gitee.com/miikio/h5-scan-code

项目简介

• 版本： 0.1.1
• 更新时间： 2024.7.24
• 定位：HTML5-API, 实用工具
• 介绍：适用于H5环境的扫码模块组合，使用原生H5调用，本地扫描识别，无需后台接口，需配置https环境。

使用说明

• 扫码识别的视频流模块基于 navigator.mediaDevices.getUserMedia，需在支持https的环境下使用，兼容性请参考此处：
  https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#browser_compatibility

安装依赖

# npm 安装
npm install h5-scan-code

# yarn 安装
yarn add h5-scan-code

# pnpm 安装
pnpm add h5-scan-code

Api 使用示例

import h5ScanCode from 'h5-scan-code'

// 直接调用
h5ScanCode({
  // 扫码类型 (目前仅支持 'qrCode')
  scanType: 'qrCode',
  // 摄像头方向 ( 'back' | 'front' )
  facingMode: 'back',
  // 是否允许从相册选择 (默认 true)
  allowOpenAlbum: true,
  // 是否允许开启闪光灯 (默认 true)
  allowOpenTorch: true,
  // 控件容器字体大小 (默认 '28rpx')
  fontSize: '28rpx',
  // 控件容器图层层级 (默认 999999)
  zIndex: 999999,
  // 扫码成功回调
  success: (e) => console.log('success:', e.result),
  // 扫码失败回调
  fail: (e) => console.error('fail:', e),
  // 扫码完成回调
  complete: (e) => console.log('complete:', err),
})

// 异步调用
h5ScanCode(options)
  .then(e => console.log('success:', e.result))
  .catch(e => console.error('fail:', e))

Vue 组件示例

<template>
  <div>
    <button @click="open = true">Open</button>
    <div>Result: {{ result }}</div>
    <h5-scan-code v-model="open" @success="onSuccess" @fail="onFail" />
  </div>
</template>
<script>
  import h5ScanCode from 'h5-scan-code/src/vue'
  export default {
    components: { h5ScanCode },
    data() {
      return {
        open: false,
        result: ''
      }
    },
    methods: {
      onSuccess(e) {
        console.log('success:', e.result)
        this.result = e.result
      },
      onFail(e) {
        console.error('fail:', e)
        this.result = ''
      }
    }
  }
</script>

uni-app 组件示例

// 与 Vue 组件示例一致，引用方式可使用 easycom 代替：`/src/pages.json`
{
  "easycom": {
    "^h5-scan-code$": "h5-scan-code/src/vue/index.vue"
  }
}

<!-- 若部分情况下显示尺寸异常，可统一字体大小以适应 -->
<h5-scan-code v-model="open" font-size="28rpx" @success="onSuccess" @fail="onFail" />