uniapp实现条码扫描 可开闪光灯，原生H5调用，不需要任何sdk。_uniapp h5扫码_h5页面扫码点亮功能

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

1. 获取设备摄像头权限,用于后续开启摄像头。
2. 创建video元素显示摄像头画面,和canvas元素用于QuaggaJS进行图像处理和解码。
3. 初始化QuaggaJS,设置解码参数和回调。
4. 开启摄像头,开始扫描循环tick。
5. 在tick中捕获video画面,绘制到canvas上。
6. 将canvas图像数据传入QuaggaJS,进行解码识别。
7. 解码成功后,在回调中处理识别结果。
8. 关闭摄像头和QuaggaJS,释放资源。
9. 通过组件props设置扫描相关参数,如是否高清模式、需要激活的解码器等。

功能预览

兼容说明

需要https环境才能使用，本地测试可以在 manifest.json 中点击源码展示，找到h5 ，添加："devServer" : { "https" : true},并且打开闪光灯只有在安装chrome内核中可以使用，

一、安装QuaggaJs

官网链接 https://serratus.github.io/quaggaJS/#installing
NPM安装

npm install quagga

当然也可以直接引入mainJs文件

二、获取设备摄像头权限

在mounted钩子中,使用uni.request()获取设备权限:

mounted() {
  uni.request({
    name: 'camera',
    success: () => {
      this.openScan() 
    } 
  })
}

1
2
3
4
5
6
7
8
9

三、创建video和canvas元素

video = document.createElement('video')
video.id = 'video'
video.width = 300
video.height = 200

canvas = document.createElement('canvas')  
canvas.id = 'canvas' 
canvas.width = 300   
canvas.height = 200
canvas.style = 'display:none'

canvas2 = document.createElement('canvas') 
canvas2.id = 'canvas2'
canvas2.width = 300    
canvas2.height = 200

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

四、初始化Quagga并开始扫描

在openScan方法中初始化Quagga,并开始扫描循环tick:

openScan() {
  this.isScanning = true
  
  let width = 300 \* this.definition
  let height = 200 \* this.definition
  
  Quagga.init(this.config, (err) => {
    if (err) throw err
    Quagga.start()
    this.tick()
  })
}

1
2
3
4
5
6
7
8
9
10
11
12
13

五、图像处理和解码

在tick方法中,不断从video中捕获图像,绘制到canvas上,然后使用Quagga对canvas进行解码:

tick() {
  if (!this.isScanning) return 
  if (this.video.readyState === this.video.HAVE\_ENOUGH\_DATA) {
    this.canvas2d.drawImage(video, 0, 0, width, height)
    const inputStream = {
      size: width \* height \* 4,
      canvas: this.canvas
    }
    Quagga.decodeSingle(inputStream, result => { 
      // 解码成功后的处理逻辑
    })
  } else {
    requestAnimationFrame(this.tick)
  }
} 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

六、关闭摄像头和Quagga

在beforeDestroy钩子中,关闭摄像头和Quagga:

beforeDestroy() { 
  this.isScanning = false
  Quagga.stop()
  if (this.video.srcObject) {
    this.video.srcObject.getTracks().forEach(track => {
      track.stop()
    })
  }
}

1
2
3
4
5
6
7
8
9
10

参数解析

readers是一维码类型，一般使用code_128_reader，可带字母。一些电子产品类别的一维码就是这个编码ean_reader ：商品常用需要更具实际需求填入。数组中可填多个，但是不推荐，因为不同类型中的一维码可能会被其他类型给解码出来，这样会导致解码不正确。具体类型规则如下图：

         props: {
			continue: {
				type: Boolean,
				default: false // ,设置自动扫描次数false 一次 true 持续扫描
			},
			exact: {
				type: String,
				default: 'environment' // environment 后摄像头 user 前摄像头
			},
			definition: {
				type: Boolean,
				default: false // fasle 正常 true 高清
			},
			readers: {
				// 一维码类型
				type: Array,
				default: () => ['code\_128\_reader']
			}
		}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

基于上面所诉内容，我这里有现成的组件代码，复制就可以使用！！quaggaJs的文件可以私我，我发给各位。

组件完整代码

<template>
	<view class="canvasBox">
		<view class="box">
			<view class="line"></view>
			<view class="angle"></view>
		</view>
		<view class="box2" v-if="isUseTorch">
			<view class="track" @click="openTrack">
				<svg t="1653920715959" class="icon" viewBox="0 0 1024 1024" version="1.1"
 xmlns="http://www.w3.org/2000/svg" p-id="1351" width="32" height="32">
					<path
 d="M651.353043 550.479503H378.752795L240.862609 364.315031c-3.688944-4.897391-5.660621-10.876025-5.660621-17.045466v-60.040745c0-15.773416 12.847702-28.621118 28.621118-28.621118h502.459627c15.773416 0 28.621118 12.847702 28.621118 28.621118v59.977143c0 6.105839-1.971677 12.084472-5.660621 17.045466l-137.890187 186.228074zM378.752795 598.308571v398.024348c0 15.328199 12.402484 27.667081 27.667081 27.667081h217.266087c15.328199 0 27.667081-12.402484 27.66708-27.667081V598.308571H378.752795z m136.300124 176.942112c-14.564969 0-26.331429-11.76646-26.331428-26.331428v-81.283975c0-14.564969 11.76646-26.331429 26.331428-26.331429 14.564969 0 26.331429 11.76646 26.331429 26.331429v81.283975c0 14.564969-11.76646 26.331429-26.331429 26.331428zM512 222.608696c-17.554286 0-31.801242-14.246957-31.801242-31.801243V31.801242c0-17.554286 14.246957-31.801242 31.801242-31.801242s31.801242 14.246957 31.801242 31.801242v159.006211c0 17.554286-14.246957 31.801242-31.801242 31.801243zM280.932174 205.881242c-9.47677 0-18.889938-4.197764-25.122981-12.275279L158.242981 67.991056a31.864845 31.864845 0 0 1 5.597019-44.648944 31.864845 31.864845 0 0 1 44.648944 5.597018l97.502609 125.551305a31.864845 31.864845 0 0 1-5.597019 44.648944c-5.787826 4.579379-12.656894 6.741863-19.46236 6.741863zM723.987081 205.881242c-6.805466 0-13.674534-2.162484-19.462361-6.678261a31.794882 31.794882 0 0 1-5.597018-44.648944l97.566211-125.551304a31.794882 31.794882 0 0 1 44.648944-5.597019 31.794882 31.794882 0 0 1 5.597019 44.648944l-97.566211 125.551305c-6.360248 8.077516-15.709814 12.27528-25.186584 12.275279z"
 fill="#ffffff" p-id="1352"></path>
				</svg>
				{{ trackStatus ? '关闭闪光灯' : '打开闪光灯' }}
			</view>
		</view>
		<view class="mask1 mask" :style="'height:' + maskHeight + 'px;'"></view>
		<view class="mask2 mask" :style="'width:' + maskWidth + 'px;top:' + maskHeight + 'px'"></view>
		<view class="mask3 mask" :style="'height:' + maskHeight + 'px;'"></view>
		<view class="mask4 mask" :style="'width:' + maskWidth + 'px;top:' + maskHeight + 'px'"></view>
	</view>
</template>
<script>
 import Quagga from './quagga.min.js'
 export default {
 props: {
 continue: {
 type: Boolean,
 default: false // false 监听一次 true 持续监听
 },
 exact: {
 type: String,
 default: 'environment' // environment 后摄像头 user 前摄像头
 },
 definition: {
 type: Boolean,
 default: false // fasle 正常 true 高清
 },
 readers: {
 // 一维码类型
 type: Array,
 default: () => ['code\_128\_reader']
 }
 },
 data() {
 return {
 windowWidth: 0,
 windowHeight: 0,
 video: null,
 canvas2d: null,
 canvasDom: null,
 canvasDom2: null, // 用于画框
 canvas2d2: null,
 canvasWidth: 300,
 canvasHeight: 200,
 maskWidth: 0,
 maskHeight: 0,
 cpu: 1,
 inter: 0,

 track: null,
 isUseTorch: false,
 trackStatus: false,

 isParse: false,

 data1: '',
 data2: ''
 }
 },
 mounted() {
 if (origin.indexOf('https') === -1) throw '请在 https 环境中使用摄像头组件。'
 this.windowWidth = document.documentElement.clientWidth || document.body.clientWidth
 this.windowHeight = document.documentElement.clientHeight || document.body.clientHeight
 this.isParse = true
 this.$nextTick(() => {
 this.video = document.createElement('video')
 this.video.width = this.windowWidth
 this.video.height = this.windowHeight

 const canvas = document.createElement('canvas')
 this.canvas = canvas
 canvas.id = 'canvas'
 canvas.width = this.canvasWidth
 canvas.height = this.canvasHeight
 canvas.style = 'display:none;'

 // 设置当前宽高 满屏
 const canvasBox = document.querySelector('.canvasBox')
 canvasBox.append(this.video)
 canvasBox.append(canvas)
 canvasBox.style = `width:${this.windowWidth}px;height:${this.windowHeight}px;`

 this.canvas2d = canvas.getContext('2d')

 // 创建第二个canvas
 const canvas2 = document.createElement('canvas')
 this.canvas2 = canvas2
 canvas2.id = 'canvas2'
 canvas2.width = this.canvasWidth
 canvas2.height = this.canvasHeight
 canvas2.style =
 'position: absolute;top: 50%;left: 50%;z-index: 20;transform: translate(-50%, -50%);'
 this.canvas2d2 = canvas2.getContext('2d')
 canvasBox.append(canvas2)

 this.cpu = 1 // navigator.hardwareConcurrency || 1
 // console.log(navigator.hardwareConcurrency )

 this.createMsk()
 setTimeout(() => {
 this.openScan()
 }, 500)
 })
 },
 methods: {
 openScan() {
 let width = this.transtion(this.windowHeight)
 let height = this.transtion(this.windowWidth)

 const videoParam = {
 audio: false,
 video: {
 facingMode: {
 exact: this.exact
 },
 width,
 height
 }
 }

 navigator.mediaDevices
 .getUserMedia(videoParam)
 .then(stream => {
 this.video.srcObject = stream
 this.video.setAttribute('playsinline', true)
 this.video.play()
 this.tick()

 this.track = stream.getVideoTracks()[0]
 setTimeout(() => {
 this.isUseTorch = this.track.getCapabilities().torch || null
 }, 500)
 })
 .catch(err => {
 console.log('设备不支持', err)
 })
 },
 tick() {
 if (!this.isParse) return
 try {
 if (this.video.readyState === this.video.HAVE\_ENOUGH\_DATA) {
 this.canvas2d.drawImage(
 this.video,
 this.transtion(this.maskWidth),
 this.transtion(this.maskHeight),
 this.transtion(300),
 this.transtion(200),
 0,
 0,
 this.canvasWidth,
 this.canvasHeight
 )
 const img = this.canvas.toDataURL('image/jpg')

 Quagga.decodeSingle({
 inputStream: {
 size: 300 \* 2
 },
 locator: {
 patchSize: 'large',
 halfSample: true
 },
 numOfWorkers: this.cpu,
 decoder: {
 readers: this.readers
 },
 locate: true,
 src: img
 },
 result => {
 this.canvas2d2.clearRect(0, 0, this.canvasWidth, this.canvasHeight)


![img](https://img-blog.csdnimg.cn/img_convert/a9026e8bee6a731fc5bfb5d6997034a0.png)
![img](https://img-blog.csdnimg.cn/img_convert/7187f795749fe721640ae66d36c5c059.png)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化的资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618636735)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

{
 this.canvas2d2.clearRect(0, 0, this.canvasWidth, this.canvasHeight)


[外链图片转存中...(img-FxvdWQYH-1715902760058)]
[外链图片转存中...(img-WyYPnXKe-1715902760059)]

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化的资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618636735)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209