身份证读卡器

身份证读卡器硬件使用的是神思二代身份证验证机具 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字符串处理逻辑
      });
    },