@TOC
前言
接到一个前端调用身份证读卡器的需求，提供的设备是华视CVR-100uc，记录一下开发过程
一、寻找开发包
前端要调用硬件，肯定是需要硬件驱动支持的，因此我们需要去官网找找对应的驱动和开发包
服务下载_华视电子
解压之后的web文件夹里就有对应前端控件，不过问题来了，这里提供的是ocx控件，而ocx控件在谷歌浏览器中并不能运行，只能运行在IE内核的浏览器里面
没办法，在网上再搜一搜有没有其他解决办法，最后发现，华视电子官方提供的2022年的web开发包不是ocx控件，而是一个exe安装文件，于是我在网上找了一圈，总算找到了这个安装包（这个安装包我也放github上了），安装之后查看demo，发现他的原理是在本地占用一个端口，通过接口请求返回数据
二、代码实现
运行安装包后，直接请求对应的本地地址就行了，代码如下
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
| <script setup>
import { RouterLink, RouterView, stringifyQuery } from 'vue-router'
import axios from "axios";
import HelloWorld from './components/HelloWorld.vue'
import {ref} from 'vue'
const info = ref(null)
const openDevice = () => {
axios.get("http://localhost:19196/openDevice").then(res => {
console.log(res)
if (res.data.resultFlag == 0) {
console.log('建立链接成功')
}
})
}
const readCard = () => {
axios.get("http://localhost:19196/readCard").then((res) => {
if (res.data.resultFlag == 0) {
const obj = res.data
obj.identityPic = 'data:image/jpeg;base64,' + obj.identityPic
if (obj.certType == " ") {
obj.certType = "身份证";
} else if (obj.certType == "I") {
obj.certType = "外国人居住证";
} else if (obj.certType == "J") {
obj.certType = "港澳台居住证";
} else {
obj.certType = "未知";
}
info.value = obj
console.log(info.value)
console.log(obj)
} else {
console.log('读卡失败')
}
})
}
const CloseDevice = () => {
axios.get("http://localhost:19196/CloseDevice")
}
</script>
<template>
<header>
<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
<div class="btn-group">
<div @click="openDevice">建立链接</div>
<div @click="readCard">读取信息</div>
<div @click="CloseDevice">关闭连接</div>
</div>
<img :src="info.identityPic" v-if="info"/>
<div class="">{{ info ? JSON.stringify(info) : '' }}</div>
</header>
</template>
|
不过这里要验证一下发到服务器上之后能不能请求本地的网络端口，注意这里需要https
代码仓库地址
https://github.com/Ceslsius/ID-demo