背景需求：自助查询柜机开发，访客来大厅验证时，使用身份证查询、人脸验证功能。在此记录一下各个环节所使用的方法。

身份证读卡器

• 身份证读卡器硬件使用的是神思二代身份证验证机具 SS628(100)+100, 根据型号在官网上查找到对应的驱动程序和使用demo。
  官网下载地址
• 拿到demo后，确认了身份证读取相关操作是由ActiveX控件完成的，前端只需要调用ActiveX控件提供的方法即可，而这也决定了我们的项目代码只能运行在IE上。（顺便吐槽一下：6年前遇到身份证读卡器时，是由ActiveX控件来实现，而在6年后IE已经不维护的今天，还在使用ActiveX来实现）
• 接下来就是安装相关驱动程序及代码部分了。以下是身份证读卡器相关代码（基于Vue）：
  template部分：

      <OBJECT
          ref="rdcard"
          classid="clsid:F1317711-6BDE-4658-ABAA-39E31D3704D3"
          codebase="SDRdCard.cab#version=2,0,1,0"
          width=0
          height=0
          align=center
          hspace=0
          vspace=0
          id=idcard
          name=rdcard
      >
      </OBJECT>

script部分：
其中this.readIDShensi()方法是身份证读卡器读取身份证信息成功后的回调方法

    init(){
      this.rdcard = document.getElementById("idcard")
      this.rdcard.openport()  // 打开机具
      const read = this.rdcard.ReadCard2()  //开始自动读卡
      if(read === 0){
        console.log('开始读卡成功')
      }else this.$message.error('读卡失败')
      document.getElementById('idcard').addEventListener("Readed", this.readIDShensi);
      document.getElementById('idcard').attachEvent("Readed", this.readIDShensi);
    },

人脸拍照

• 在做人脸检测时走了一些弯路，在此也记录一下。首先是没搞清楚必须基于IE开发，导致我在使用navigator.mediaDevice调用摄像头+canvas截图实现人脸相关功能后才发现IE不兼容的问题。

• 发现IE不兼容后，又走了一些弯路，试图在不修改代码的情况下，通过一些其他的办法来实现兼容IE：

  1. 360浏览器可以使用兼容模式
     360官网是这么写的：
     360兼容模式
     但这条路是走不通的，无论在项目中如何修改meta，这个meta在一开始index.html加载时就已被360读取并加载了，后期无论如何在项目中修改meta，也无法再修改360加载时的模式了。
     在【360浏览器选项-高级设置-内核设置-内核切换设置】中发现360的兼容模式设置，的确是精确到域名级别而无法精确到url级别：
     360兼容模式配置
  2. 去谷歌应用商店下载IE tab插件
     IE tab插件可以精准配置到url级别对页面判断使用IE,还是使用chrome。在试用后完美解决了我的需求，在身份证页面使用IE内核，在摄像头页面使用chrome内核。只是有个问题，当我去Hide the IE Tab address bar时，发现此项功能需要付费，否则全屏时页面最上端会出现一个小横条。这样的用户体验对于柜机用户来说是无法接受的，所以我只好另寻办法。
     IE tab配置url判断规则

• 最终只好使用IE了。在IE上调用摄像头并播放视频需要使用到flash player, webcamjs内部swf文件帮你实现这一部分了。
  用Webcam实现在IE上的调用摄像头+拍照上传的功能，当然你也可以使用canvas截图来实现拍照功能，只是webcam已经提供拍照功能了，不必多此一举。 很简单，clone下来看看里面的调用demo就知道如何使用了。pixlcore官网也有详细的在线demo演示，和如何使用的介绍。以下是相关调用代码（基于Vue）
  index.html引入（注意将webcam.swf也放到webcam.js所在目录下：）：

<script src="webcam.js"></script>

template部分

      <div class="video-box">
        <div id="my_camera"></div>
        <canvas id="canvas"></canvas>
      </div>

script部分

    // 初始化Webcam配置
    init(){
      Webcam.set({
        width: 460,
        height: 542,
        image_format: 'jpeg',
        jpeg_quality: 90
      });
      Webcam.attach('#my_camera');
      ......
    },
    // 截图处理
    drawImage() {
      Webcam.snap(function (dataurl) {
        ...截图返回base64字符串处理逻辑
      });
    },

• 另一插曲：人脸检测是由后端封装阿里云人脸检测接口实现，但由于该接口收费。产品让我找找使用前端的库来实现人脸检测，减少接口调用次数从而减少项目成本。使用trakingjs可以解决这个问题，官网：trackingjs 源码： 当我在chrome调试完成后，发现它不兼容IE。

其他

项目中还用到了指纹、打印热敏小票功能：

• 管供应商要到指纹仪型号zkteco Live10r后，发现它只有c++ 和 java文档，所以指纹相关调用部分就只有与后端的逻辑交互了。
• 打印功能能使用Clodop插件，Clodop自定义样式打印，且提供了丰富的调用接口。关于Clodop打印，网上有很多的相关使用资料，在此不再赘述。

虽然在这个项目中走了一些弯路，但是有时候，恰好是那些弯路，让自己获取到了更多的知识，扩宽了自己解决问题的思路。即便是在解决问题的过程中经历了挣扎、怀疑、烦躁的不良情绪，但解决完问题如释重负的那刻，我相信这也是每位开发者最喜欢的时刻。