背景需求：自助查询柜机开发，访客来大厅验证时，使用身份证查询、人脸验证功能。在此记录一下各个环节所使用的方法。
身份证读卡器
- 身份证读卡器硬件使用的是神思二代身份证验证机具 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：
- 360浏览器可以使用兼容模式
360官网是这么写的：
360兼容模式
但这条路是走不通的，无论在项目中如何修改meta，这个meta在一开始index.html加载时就已被360读取并加载了，后期无论如何在项目中修改meta，也无法再修改360加载时的模式了。
在【360浏览器选项-高级设置-内核设置-内核切换设置】中发现360的兼容模式设置，的确是精确到域名级别而无法精确到url级别：
360兼容模式配置 - 去谷歌应用商店下载IE tab插件
IE tab插件可以精准配置到url级别对页面判断使用IE,还是使用chrome。在试用后完美解决了我的需求，在身份证页面使用IE内核，在摄像头页面使用chrome内核。只是有个问题，当我去Hide the IE Tab address bar时，发现此项功能需要付费，否则全屏时页面最上端会出现一个小横条。这样的用户体验对于柜机用户来说是无法接受的，所以我只好另寻办法。
IE tab配置url判断规则
- 360浏览器可以使用兼容模式
最终只好使用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打印，网上有很多的相关使用资料，在此不再赘述。
虽然在这个项目中走了一些弯路，但是有时候，恰好是那些弯路，让自己获取到了更多的知识，扩宽了自己解决问题的思路。即便是在解决问题的过程中经历了挣扎、怀疑、烦躁的不良情绪，但解决完问题如释重负的那刻，我相信这也是每位开发者最喜欢的时刻。
