vue网页调用华视电子身份证阅读器cvr-100uc

---

前言

接到一个前端页面调用身份证读卡器的需求，提供的设备是华视CVR-100uc，记录一下开发过程

---

一、寻找开发包

网页想要调用硬件，肯定是需要硬件驱动支持的，因此我们需要去官网找找对应的驱动和开发包
服务下载_华视电子
开发包解压之后，web文件夹里就有对应的前端控件，不过问题来了，这里提供的是ocx控件，而ocx控件在谷歌浏览器中并不能运行，只能运行在IE内核的浏览器里面（当然，硬要使用谷歌浏览器运行OCX控件也不是不行，可以看看我的另一篇文章–谷歌浏览器使用AppEmit中间件调用OCX控件，网页获取读卡器信息）

---

没办法，在网上再搜一搜有没有其他解决办法，最后发现，华视电子官方提供的2022年的web开发包不是ocx控件，而是一个exe安装文件，于是我在网上找了一圈，总算找到了这个安装包（这个安装包我也放github上了，地址在最后），安装之后查看demo，发现他的原理是在本地占用一个端口，通过接口请求返回数据

二、代码实现

运行安装包后，直接请求对应的本地地址就行了，代码如下

<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>

  <!-- <RouterView /> -->
</template>

不过这里要验证一下发到服务器上之后能不能请求本地的网络端口，注意这里需要https

---

代码仓库地址

https://github.com/Ceslsius/ID-demo
华视电子其他型号的读卡器应该也能使用这个驱动，可以试试