通过网页调用身份证阅读器http websocket方法-华视电子————仙盟创梦IDE
读取代码
Document 读身份证+M1卡示例
超时(毫秒ms)： 日志： M1卡
块号： 密码： 写入值： 读身份证
姓名： 性别： 民族： 出生日期： (要求格式为:yyyyMMdd，长度为8) 住址： 身份证号： (居民身份号码，长度18位) 签发机关： 开始期限： (要求格式为:yyyyMMdd，长度为8) 结束期限： (要求格式为:yyyyMMdd，长度为8，或者是“长期”) 照片： ![]()
let websockets; let isconncet = false; let Command = 1; //创建一个数组对象用于存放当前的连接的状态，以便在页面上实时展示出来当前的状态 let statusArr = [ { state: 0, value: \'正在连接\' }, { state: 1, value: \'已建立连接\' }, { state: 2, value: \'正在关闭连接\' }, { state: 3, value: \'已关闭连接\' }, ] /** * 建立连接 * */ function OcrRecognition() { if (!isconncet) { // 1. 创建websockets对象，参数为服务器websockets地址 let hostname = location.hostname; var url = \"ws:127.0.0.1:9001\" websockets = new WebSocket(url); // 2.监听websocket的状态变化，接收的信息，关闭时的状态 //监听连接状态的变化 websockets.onopen = (event) => socketChange(); //监听接收消息的情况 websockets.onmessage = (res) => { if (res.data == \"failed to obtain ID card information\") { document.querySelector(\"#message\").innerHTML += `接收数据: ${res.data}
` return; } var alldata = res.data.split(\"|\"); if (Command = 17) { document.getElementById(\"partyLog\").value = \"读卡成功\"; document.getElementById(\"partyName\").value = alldata[3]; document.getElementById(\"nation\").value = alldata[5]; document.getElementById(\"gender\").value = alldata[4]; document.getElementById(\"certAddress\").value = alldata[7]; document.getElementById(\"bornDay\").value = alldata[6]; document.getElementById(\"certNumber\").value = alldata[8]; document.getElementById(\"certOrg\").value = alldata[9]; document.getElementById(\"effDate\").value = alldata[10]; document.getElementById(\"expDate\").value = alldata[11]; document.all[\'PhotoDisplay\'].src = \'data:image/bmp;base64,\' + alldata[19]; } else { document.getElementById(\"partyLog\").value = res.data; } } else { // 读M1卡 if (Command == 6) { // 卡认证 if (alldata.length >= 2) { document.getElementById(\"partyLog\").value = \"卡序列号:\" + alldata[0] + \" 卡类型:\" + alldata[1]; } else { document.getElementById(\"partyLog\").value = res.data; } } if (Command == 7) { // 读M1卡 if (alldata.length >= 2) { document.getElementById(\"partyLog\").value = \"卡序列号:\" + alldata[0] + \" 块数据:\" + alldata[1]; } else { document.getElementById(\"partyLog\").value = res.data; } } if (Command == 8) { // 写M1卡 document.getElementById(\"partyLog\").value = res.data; } if (Command == 9) { // 读银行卡卡号和有效期 if (alldata.length >= 2) { document.getElementById(\"partyLog\").value = \"银行卡卡号:\" + alldata[0] + \" 有效期:\" + alldata[1]; } else { document.getElementById(\"partyLog\").value = res.data; }} } } //监听关闭时的状态变化 websockets.onclose = (event) => socketChange(); } else { closeConnect(); document.getElementById(\"OcrRecognition\").innerHTML = \"连接服务\"; } } function TimeOutReadIDCard() { if (!isconncet) { document.getElementById(\"partyLog\").value = \"未连接服务\"; } else { Command = 2; clear(); let paramTimeOut = document.querySelector(\"#timeOut\").value; paramTimeOut = \"timeout=\" + paramTimeOut; var parameterAll = paramTimeOut; let val = \"02?\" + parameterAll; websockets.send(val); } } function ReadIDCard() { if (!isconncet) { document.getElementById(\"partyLog\").value = \"未连接服务\"; } else { Command = 3; clear(); let paramTimeOut = document.querySelector(\"#timeOut\").value; paramTimeOut = \"timeout=\" + paramTimeOut; var parameterAll = paramTimeOut; let val = \"03?\" + parameterAll; websockets.send(val); } } function ReadIDCardNoJudge() { if (!isconncet) { document.getElementById(\"partyLog\").value = \"未连接服务\"; } else { Command = 4; clear(); let paramTimeOut = document.querySelector(\"#timeOut\").value; paramTimeOut = \"timeout=\" + paramTimeOut; var parameterAll = paramTimeOut; let val = \"04?\" + parameterAll; websockets.send(val); } } function ReadSAMID() { if (!isconncet) { document.getElementById(\"partyLog\").value = \"未连接服务\"; } else { Command = 5; clear(); let paramTimeOut = document.querySelector(\"#timeOut\").value; paramTimeOut = \"timeout=\" + paramTimeOut; var parameterAll = paramTimeOut; let val = \"05?\" + parameterAll; websockets.send(val); } } function Request() { if (!isconncet) { document.getElementById(\"partyLog\").value = \"未连接服务\"; } else { Command = 6; clear(); let paramTimeOut = document.querySelector(\"#timeOut\").value; paramTimeOut = \"timeout=\" + paramTimeOut; var parameterAll = paramTimeOut; let val = \"06?\" + parameterAll; websockets.send(val); } } function ReadM1() { if (!isconncet) { document.getElementById(\"partyLog\").value = \"未连接服务\"; } else { Command = 7; clear(); var ValuesBlock = document.querySelector(\"#Block\").value; ValuesBlock = \"Block=\" + ValuesBlock; var ValuesKey = document.querySelector(\"#KeyBuf\").value; ValuesKey = \"Key=\" + ValuesKey; var val = \"07?\" + ValuesBlock + \"|\" + ValuesKey; websockets.send(val); } } function WriteM1() { if (!isconncet) { document.getElementById(\"partyLog\").value = \"未连接服务\"; } else { Command = 8; clear(); var ValuesBlock = document.querySelector(\"#Block\").value; ValuesBlock = \"Block=\" + ValuesBlock; var ValuesKey = document.querySelector(\"#KeyBuf\").value; ValuesKey = \"Key=\" + ValuesKey; var ValuesWriteBuf = document.querySelector(\"#WriteBuf\").value; ValuesWriteBuf = \"WriteBuf=\" + ValuesWriteBuf; var val = \"08?\" + ValuesBlock + \"|\" + ValuesKey + \"|\" + ValuesWriteBuf; websockets.send(val); } } function GetFisCardID() { if (!isconncet) { document.getElementById(\"partyLog\").value = \"未连接服务\"; } else { Command = 9; clear(); let paramTimeOut = document.querySelector(\"#timeOut\").value; paramTimeOut = \"timeout=\" + paramTimeOut; var parameterAll = paramTimeOut; let val = \"09?\" + parameterAll; websockets.send(val); } } /** * socket状态变化 * */ function socketChange() { let state = websockets.readyState; let val = statusArr.map((item) => { if (item.state == state) { return item.value } }); //实时显示状态的变化 document.getElementById(\"partyLog\").value = val; //读身份证 if (1 == state) { isconncet = true; document.getElementById(\"OcrRecognition\").innerHTML = \"断开服务\"; } if (3 == state) { isconncet = false; } } /** * 关闭连接 * */ function closeConnect() { websockets.close(); } /** * 关闭连接 * */ function clear() { document.getElementById(\"partyLog\").value = \"\"; document.getElementById(\"partyName\").value = \"\"; document.getElementById(\"nation\").value = \"\"; document.getElementById(\"gender\").value = \"\"; document.getElementById(\"certAddress\").value = \"\"; document.getElementById(\"bornDay\").value = \"\"; document.getElementById(\"certNumber\").value = \"\"; document.getElementById(\"certOrg\").value = \"\"; document.getElementById(\"effDate\").value = \"\"; document.getElementById(\"expDate\").value = \"\"; document.all[\'PhotoDisplay\'].src = \"\"; }身份证与 M1 卡读取交互页面功能概述
在酒店、金融、政务等需要身份核验与卡证交互的场景中，便捷高效的读卡工具至关重要。以下介绍的 HTML 页面便是一款集成身份证与 M1 卡读取功能的交互界面，通过 WebSocket 技术实现前端与后端服务的实时通信，为各类场景下的卡证信息采集提供了完整解决方案。
核心功能架构
该页面以模块化设计整合了两类核心功能：身份证信息读取与 M1 卡交互。整体界面分为功能控制区与信息展示区，通过简洁的按钮操作触发不同的读卡指令，配合输入框配置参数，最终将读取结果实时显示在对应区域。
在身份证读取方面，页面提供了四种操作模式：时间段内读取、单次读取、不拿起持续读取以及获取安全模块号（SAMID）。这些功能覆盖了不同场景下的使用需求 —— 例如酒店前台可通过 “时间段内读取” 功能在规定时间内等待旅客放置身份证，而 “不拿起读身份证” 则适用于需要连续核验的场景。
M1 卡交互功能则包含认证、读取、写入及银行卡信息获取，支持自定义块号、密码与写入值，满足对 M1 卡进行数据读写的多样化需求。无论是会员系统的卡片信息更新，还是门禁卡的权限配置，都可通过这些功能实现。
技术实现逻辑
页面采用 WebSocket 协议建立前端与后端服务的实时连接，通过ws:127.0.0.1:9001地址与本地服务通信。当用户点击 “连接服务” 按钮时，前端创建 WebSocket 实例，监听连接状态变化并同步显示在日志区域；连接建立后，所有操作指令（如读卡、写卡）通过特定格式的字符串（如03?timeout=10000）发送至后端。
后端返回的数据经 “|” 符号分割后，由前端按预设规则解析并填充至对应字段。例如身份证信息包含姓名、性别、民族等 17 项以上数据，分别对应页面中的输入框；M1 卡数据则根据操作类型（认证、读写）显示序列号、块数据等内容。此外，身份证照片通过 Base64 编码格式实时渲染至页面，实现信息可视化展示。
应用场景价值
该页面的设计充分考虑了实际使用场景的需求：超时时间设置可避免因设备响应延迟导致的操作卡顿；日志区域实时反馈操作状态，便于快速排查连接或读卡失败问题；模块化的功能分区使操作人员能迅速定位所需功能，降低学习成本。
阿雪技术观
在科技发展浪潮中，我们不妨积极投身技术共享。不满足于做受益者，更要主动担当贡献者。无论是分享代码、撰写技术博客，还是参与开源项目维护改进，每一个微小举动都可能蕴含推动技术进步的巨大能量。东方仙盟是汇聚力量的天地，我们携手在此探索硅基生命，为科技进步添砖加瓦。
Hey folks, in this wild tech - driven world, why not dive headfirst into the whole tech - sharing scene? Don\'t just be the one reaping all the benefits; step up and be a contributor too. Whether you\'re tossing out your code snippets, hammering out some tech blogs, or getting your hands dirty with maintaining and sprucing up open - source projects, every little thing you do might just end up being a massive force that pushes tech forward. And guess what? The Eastern FairyAlliance is this awesome place where we all come together. We\'re gonna team up and explore the whole silicon - based life thing, and in the process, we\'ll be fueling the growth of technology.
