# h5-scan-code

**Repository Path**: miikio/h5-scan-code

## Basic Information

- **Project Name**: h5-scan-code
- **Description**: 适用于H5环境的扫码模块组合，使用原生H5调用，本地扫描识别，无需后台接口，需配置https环境。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: main
- **Homepage**: https://gitee.com/miikio/h5-scan-code
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2024-07-22
- **Last Updated**: 2024-10-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# h5-scan-code (H5扫码)

## 项目主页
[https://gitee.com/miikio/h5-scan-code](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](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#browser_compatibility)

## Api 使用示例
```js
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 组件示例
```html
<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 组件示例
```js
// 与 Vue 组件示例一致，引用方式可使用 easycom 代替：`/src/pages.json`
{
  "easycom": {
    "^h5-scan-code$": "h5-scan-code/src/vue/index.vue"
  }
}
```
```html
<!-- 若部分情况下显示尺寸异常，可统一字体大小以适应 -->
<h5-scan-code v-model="open" font-size="28rpx" @success="onSuccess" @fail="onFail" />
```