前言

废话不多说，我又来搞前端网页连接读卡器了，这次的设备是明华智能支付终端，虽然叫支付终端，但是还支持读取银行卡，身份证，接触类IC卡，非接触类IC卡，二维码，记录一下技术方案

一、开发方案

前端想要连接硬件，那必须要硬件的驱动支持并提供对应的方案，目前我知道的web方案的话有

ocx控件，基于ActiveX技术，对于前端来说最大的缺点就是只能运行在IE内核内，并且比较挑运行环境
websocket，驱动在本地开启一个socket服务，页面通过websocket连接，可以实现双向通信
占用一个本地网络端口，页面通过请求本地ip + 对应端口获取数据，优点是接入非常简单

而这次就遇到了最难搞的ocx控件，而接入ocx最简单的方法就是让用户在IE内核的浏览器内运行（比如IE，Edge IE模式，360浏览器兼容模式），但是IE内核那及其恶心的兼容性，让我放弃了这个方法，转而去网上寻找能在谷歌浏览器运行ocx的方法。

如果你有像我一样去找的话，就会发现大部分的回答都是通过谷歌浏览器napi的办法去调用ocx，这个办法当然是能行的，但是谷歌浏览器在46版本之后就不支持napi了，然而我用的谷歌浏览器版本已经是119，不可能去降版本（更不可能让用户去降版本），只好继续寻找，最终，发现了一个神奇的东西——中间件

二、中间件

1. 选择中间件

这里的中间件，指的是硬件驱动和网页之间连接的一个转发层，类似于桥接模式，目前我在网上找到了两款中间件

AppEmit（https://www.appemit.com/）
猿大师（http://www.yuanmaster.com/xiazai/）

我大致看了一下，两个中间件的功能都挺牛逼的，能够让网页调用office，调用桌面程序功能，当然也能调用ocx对应的函数，不过猿大师要收费，AppEmit的免费版只是有弹窗，因此选择AppEmit

2. 接入中间件

首先还是去看文档，AppEmit提供的demo还是挺多的，并且，对于ocx的接入也有两个方案

将ocx控件所对应的桌面程序函数提取出来，转换为dll文件，然后通过中间件直接调用
在谷歌浏览器中，嵌入一个IE内核进来调用ocx控件，并通过中间件来控制调用以及通信，这里我用的就是这个方案

完整代码以及安装程序我都放在了github上，地址在最后，这里放一下核心代码

<script setup>
import axios from "axios";
import { ref } from 'vue'
const info = ref(null)
const getData = (val) => {
  // 获取传过来的数据
  info.value = val
}
window.getData = getData
const openDevice = () => {
  AE.InitApp('ws://localhost:80/appemit?cid=00000-1&sid=1&flag=1');
}
const openPage = () => {
  const ReqPar7 = {
    "emit": "open", "Obj": "web", "AppType": 1, "pos": 1, "AppId": 1, "par": {
      "URL": '/index.htm', "htmlStr": null, "HttpServer_startUrl": null                                         //"HttpServer_startUrl":"/demo/htmlDemo/ocx.html"   //使用本地html
      , "embed_object": {                               //多个object可以设置embed_object为数组 
        "objName": "objIDCard"
        , "reg": true    //null 不执行注册   1强制操作 true 未注册则注册  false 卸载注册 (重启AppEmit后，就不能加载dll了)  
        , "asAdmin": 0   //1需要管理员权限注册 0不需要 ,win7管理员身份会有提示确认窗口
        //  ,"pid":"292A53CD-DA8F-46A5-808D-B286F2759C37" //使用私有插件,则需要增加下列信息 如果dll/ocx文件改变了，需要更新appemit登陆窗口中我的应用里面的sha1值
        , "dllFile": "/MT8ActiveX.ocx"      //为了安全，限制为AppEmit文件夹，不能注册或者注销其它文件夹下面的ocx
        , "CLASSES_ROOT": "HKEY_CLASSES_ROOT\\真实的ReportProj1.ReportX\\CLSID"   //可选，reg= true检查是否已经注册,一定要是\\分隔
        , "clsId": "10EC554B-357B-4188-9E5E-AC5039454D8B"                           // 可选，reg= true检查是否已经注册
        //   ,"AuthKey":"A1-ZneY-2qGoXRfc7h6GZZxBB2gceORBwyhoxsA6GK5agLtIAwLhh6BnK61W8fORVNv"  								  
      }
    }
  };
  AE.OpenApp(ReqPar7);
}
</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="openPage">开启读卡页面</div>
    </div>
    <div>返回的数据：</div>
    <div class="">{{ info }}</div>
    <div id="AppEmbed1"  style="	border: solid 2px #F0F0F0; min-width:30px;min-height:20px;width:600px;height:400px" ></div>
  </header>
</template>

运行页面

整个流程简单来说的话就是

安装中间件
注册并登录中间件（发布之后修改cip和clientKey，就不需要这一步了）
通过websocket与中间件建立连接
向中间件发送一串json命令，其参数包括触发类型，触发参数，详见文档，这里我们的命令就是使用IE内核打开我们调用ocx控件的页面，同时运行ocx控件
在调用ocx控件的页面进行硬件连接，获取读卡信息等操作，并在获取数据之后，通过emitBack方法返回给我们的主页面
主页面拿到数据，进行对应的操作
总结
其实搞这么老多，最好的办法还是用钞能力让硬件厂家搞一下websocket支持，因为ocx控件有点挑运行环境
完整代码：https://github.com/Ceslsius/cardReader-demo

celsius的个人博客

谷歌浏览器使用AppEmit中间件调用OCX控件，网页获取读卡器信息

前言

一、开发方案

二、中间件

1. 选择中间件

2. 接入中间件

总结