JS调用web hid api接口驱动RFID读卡器读取IC卡号

news/2025/3/1 9:39:48/文章来源:https://www.cnblogs.com/RongShiYKT/p/18744502


`

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Web HID Api IC卡读卡器Demo</title>
<script language="javascript">var time1;let device;   // 需要连接或已连接的设备if ('hid' in navigator){}else{alert('您的浏览器不支持 Web Hid API,暂无法使用以下功能!');}navigator.hid.onconnect = function event() {console.log("hid device connected: ", event.target);}navigator.hid.ondisconnect = function event() {console.log("hid device disconnected: ", event.target);}function ParsedReturnData(databuff){var datahex="";if(databuff[0]==0x78 && databuff[1]==0x68 && databuff.length>4){switch ( databuff[3]) {case 0x0f:textarea.value="读卡器已接受响声指令!";break;case 0x1E:textarea.value="读取设备编号成功!";for (i=5;i<9;i++){datahex=datahex+databuff[i].toString(16).padStart(2, '0').toUpperCase();}serialnumber.value=datahex;break;case 0xF0:switch(databuff[4]){case 0x00:textarea.value="读取IC卡号成功!";for (i=5;i<9;i++){datahex=datahex+databuff[i].toString(16).padStart(2, '0').toUpperCase();}carduid.value=datahex;card8h10dz.value = parseInt("0x" + datahex).toString().padStart(10, '0');LHCode = datahex.substring(6, 8) + datahex.substring(4, 6) + datahex.substring(2, 4) + datahex.substring(0, 2);card8h10df.value = parseInt("0x" + LHCode).toString().padStart(10, '0');break;case 0x08:textarea.value="寻卡失败,请重新将卡片放在读卡器感应区!";break;case 0x09:textarea.value="选卡失败,此卡可能不是Mifare卡或感应区内有多张卡!";break;default:textarea.value="寻卡失败,错误代码:"+databuff[4].toString();break;}break;case 0x10:switch(databuff[4]){case 0x00:textarea.value="读取Ntag卡UID成功!";for (i=5;i<12;i++){datahex=datahex+databuff[i].toString(16).padStart(2, '0').toUpperCase();}ntaguid.value=datahex;break;case 0x08:textarea.value="寻卡失败,请重新将Ntag卡放在读卡器感应区!";break;case 0x09:textarea.value="选卡失败,此卡可能不是Ntag卡或感应区内有多张卡!";break;default:textarea.value="寻卡失败,错误代码:"+databuff[4].toString();break;}break;case 0x21:switch(databuff[4]){case 0x00:textarea.value="读取15693卡UID成功!";for (i=7;i<15;i++){datahex=datahex+databuff[i].toString(16).padStart(2, '0').toUpperCase();}uid15693.value=datahex;break;case 0x08:textarea.value="寻卡失败,请重新将15693卡放在读卡器感应区!";break;case 0x09:textarea.value="选卡失败,此卡可能不是15693卡!";break;default:textarea.value="寻卡失败,错误代码:"+databuff[4].toString();break;}break;case 0x50:switch(databuff[4]){case 0x00:textarea.value="读取二代证UID成功!";for (i=5;i<13;i++){datahex=datahex+databuff[i].toString(16).padStart(2, '0').toUpperCase();}sfzuid.value=datahex;break;case 0x08:textarea.value="寻卡失败,请重新将二代证卡放在读卡器感应区!";break;default:textarea.value="寻卡失败,错误代码:"+databuff[4].toString();break;}break;case 0x51:switch(databuff[4]){case 0x00:textarea.value="读取iCLASS卡UID成功!";for (i=5;i<13;i++){datahex=datahex+databuff[i].toString(16).padStart(2, '0').toUpperCase();}iclassuid.value=datahex;break;case 0x08:textarea.value="寻卡失败,请重新将iCLASS卡片放在读卡器感应区!";break;default:textarea.value="寻卡失败,错误代码:"+databuff[4].toString();break;}break;default:}}}async function selectdev() {try{//const devices = await navigator.hid.requestDevice({ filters: [] });//if (devices.length == 0) {//    console.log("No device selected\n\n");//    return;//}const devices = await navigator.hid.requestDevice({filters: [{vendorId: 0x0801,    // 根据VID进行过滤productId: 0x2011,   // 根据PID进行过滤//usagePage: 0x0c,   // 根据usagePage进行过滤//usage: 0x01,       // 根据usage进行过滤},],});device = devices[0];         // 选择列表中第一个设备if (!device.opened) {        // 检查设备是否打开		            await device.open();     // 打开设备}device.oninputreport = (event) => {     // 电脑接收到来自设备的消息回调console.log(event);                 // event中包含device、reportId、data等内容let array = new Uint8Array(event.data.buffer); // event.data.buffer就是接收到的inputreport包数据了ParsedReturnData(array);    //let hexstr = "";//for (const data of array) {//    hexstr += (Array(2).join(0) + data.toString(16).toUpperCase()).slice(-2) + " "; // 将字节数据转换成(XX )形式字符串//}//textarea.value += hexstr;                        		                                        };}catch (e){console.log(e);}}function isUIntNum(val) {var testval = /^\d+$/; // 非负整数return (testval.test(val));}function isHex(val) {var testval = /^(\d|[A-F]|[a-f])+$/; // 十六进制数判断return (testval.test(val));}function ButtonDisable() {  //删除按键的 onclick 事件,防止重复执行指令                 document.getElementById("butt_beep").setAttribute("onclick", null);document.getElementById("butt_getdevnum").setAttribute("onclick", null);document.getElementById("butt_piccrequest").setAttribute("onclick", null);//document.getElementById("butt_readloop").setAttribute("onclick", null);}async function beep() {				     //驱动发卡器响声令            if (!device?.opened) {alert("请先选择已连接的读卡器!");return;}textarea.value = "";const outputData = new Uint8Array(32);outputData[0]=0x78;     outputData[1]=0x68;   outputData[2]=0x04;outputData[3]=0x0f;outputData[4]=0x1e;outputData[5]=0x00;outputData[6]=0xe9;outputData[7]=0x00;            await device.sendReport(0, outputData); // 发送数据,第一个参数为reportId,填0表示不使用reportId}async function getdevicenumber() {         //读取发卡器唯一出厂序号,可以当加密狗使用			if (!device?.opened) {alert("请先选择已连接的读卡器!");return;}textarea.value = "";	serialnumber.value="";const outputData = new Uint8Array(32);outputData[0]=0x78;     outputData[1]=0x68;   outputData[2]=0x01;outputData[3]=0x1e;await device.sendReport(0, outputData); // 发送数据,第一个参数为reportId,填0表示不使用reportId}			async function piccrequest() {if (!device?.opened) {alert("请先选择已连接的读卡器!");return;}textarea.value = "";		carduid.value="";card8h10dz.value="";card8h10df.value="";const outputData = new Uint8Array(32);outputData[0]=0x78;     outputData[1]=0x68;   outputData[2]=0x01;outputData[3]=0xf0;await device.sendReport(0, outputData); // 发送数据,第一个参数为reportId,填0表示不使用reportId}function request_loop() {if (!device?.opened) {alert("请先选择已连接的读卡器!");return;}if (document.getElementById('butt_readloop').value == '轮询读取M1卡UID') {document.getElementById('butt_readloop').value = '停止轮询';ButtonDisable();time1 = setInterval("piccrequest()", 500);             //开启间隔500毫秒寻一次卡} else {document.getElementById('butt_readloop').value = '轮询读取M1卡UID';clearInterval(time1);ButtonEnabled();}}async function sfzrequest() {if (!device?.opened) {alert("请先选择已连接的读卡器!");return;}textarea.value = "";		sfzuid.value="";const outputData = new Uint8Array(32);outputData[0]=0x78;     outputData[1]=0x68;   outputData[2]=0x01;outputData[3]=0x50;await device.sendReport(0, outputData); // 发送数据,第一个参数为reportId,填0表示不使用reportId}async function iclassrequest() {if (!device?.opened) {alert("请先选择已连接的读卡器!");return;}textarea.value = "";		sfzuid.value="";const outputData = new Uint8Array(32);outputData[0]=0x78;     outputData[1]=0x68;   outputData[2]=0x01;outputData[3]=0x51;await device.sendReport(0, outputData); // 发送数据,第一个参数为reportId,填0表示不使用reportId}async function ntagrequest() {if (!device?.opened) {alert("请先选择已连接的读卡器!");return;}textarea.value = "";		ntaguid.value="";const outputData = new Uint8Array(32);outputData[0]=0x78;     outputData[1]=0x68;   outputData[2]=0x01;outputData[3]=0x10;await device.sendReport(0, outputData); // 发送数据,第一个参数为reportId,填0表示不使用reportId}async function iso15693request(){if (!device?.opened) {alert("请先选择已连接的读卡器!");return;}textarea.value = "";		uid15693.value="";const outputData = new Uint8Array(32);outputData[0]=0x78;     outputData[1]=0x68;   outputData[2]=0x0d;outputData[3]=0x21;outputData[4]=0x16;outputData[15]=0xdd;await device.sendReport(0, outputData); // 发送数据,第一个参数为reportId,填0表示不使用reportId}function ButtonEnabled() {  //恢复各button 的onclick事件            document.getElementById("butt_beep").setAttribute("onclick", "beep()");document.getElementById("butt_getdevnum").setAttribute("onclick", "getdevicenumber()");document.getElementById("butt_piccrequest").setAttribute("onclick", "piccrequest()");//document.getElementById("butt_readloop").setAttribute("onclick", "request_loop()");		    }window.onerror = function (e) {ButtonEnabled();  //恢复按键的onclick事件clearInterval(time1);document.getElementById('butt_readloop').value = '轮询读取IC卡卡号';alert("不好意思,出错了!");return true;//屏蔽系统事件}</script><style>th {background-color:#F6FAFF;	color: blue;font-family:楷体;}td {background-color:#F6FAFF;		font-family:楷体;}  
</style>    
</head> <body> <table width="866" height="346" align="center"><tr><th width="124" height="45" scope="row"><input style="width:120px" name="butt_selectdev" type="submit" id="butt_selectdev" onclick="selectdev()" value="选择连接的读卡器" /></th><td width="716">
    </td>
</tr>
设备编号:

原始16进制卡号:,转8H10D正码:,8H10D反码:
<tr><th width="124" height="45" scope="row"><input style="width:120px" name="butt_sfzrequest" type="submit" id="butt_sfzrequest" onclick="sfzrequest()" value="读取二代证UID" /></th><td >原始16进制卡号:<input style="color:red;text-align:center;" name="sfzuid" type="text" id="sfzuid" size="16" maxlength="16" /></td>
</tr><tr><th width="124" height="45" scope="row"><input style="width:120px" name="butt_iclassrequest" type="submit" id="butt_iclassrequest" onclick="iclassrequest()" value="读取iCLASS卡UID" /></th><td>原始16进制卡号:<input style="color:red;text-align:center;" name="iclassuid" type="text" id="iclassuid" size="16" maxlength="16" /></td>
</tr><tr><th width="124" height="45" scope="row"><input style="width:120px" name="butt_ntagrequest" type="submit" id="butt_ntagrequest" onclick="ntagrequest()" value="读取Ntag卡UID" /></th><td>原始16进制卡号:<input style="color:red;text-align:center;" name="ntaguid" type="text" id="ntaguid" size="16" maxlength="16" /></td>
</tr><tr><th width="124" height="45" scope="row"><input style="width:120px" name="butt_15693request" type="submit" id="butt_15693request" onclick="iso15693request()" value="读取15693卡UID" /></th><td>原始16进制卡号:<input style="color:red;text-align:center;" name="uid15693" type="text" id="uid15693" size="16" maxlength="16" /></td>
</tr>

 

操作提示

 

以上功能使用Web HID API技术,请使用支持Web HID API的浏览器!

`

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/891446.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

5. Nginx 负载均衡配置案例(附有详细截图说明++)

5. Nginx 负载均衡配置案例(附有详细截图说明++) @目录5. Nginx 负载均衡配置案例(附有详细截图说明++)1. Nginx 负载均衡 配置实例3. 注意事项和避免的坑4. 文档: Nginx 的 upstream 配置技巧5. 最后:1. Nginx 负载均衡 配置实例 需求说明/图解 windows 浏览器输入: http://w…

微信接入DeepSeek引发的生态核爆

微信接入DeepSeek的举动引发了行业内外的广泛关注,这一看似仓促的灰度测试背后,可能隐藏着腾讯对AI生态布局的深远考量。本文从多个角度剖析了微信接入DeepSeek的潜在影响,供大家参考。当微信搜索框底部的”AI搜索”入口悄然浮现,这场酝酿已久的生态革命终于撕开帷幕。作为…

Splunk Enterprise 9.4.1 (macOS, Linux, Windows) - 机器数据管理和分析

Splunk Enterprise 9.4.1 (macOS, Linux, Windows) - 机器数据管理和分析Splunk Enterprise 9.4.1 (macOS, Linux, Windows) - 机器数据管理和分析 安全信息和事件管理 (SIEM)、全面的日志管理和分析平台 请访问原文链接:https://sysin.org/blog/splunk-9/ 查看最新版。原创作…

一套基于 Material Design 规范实现的 Blazor 和 Razor 通用组件库

前言 今天大姚给大家分享一套基于 Material Design 规范实现的、开源(MIT license)且免费的 Blazor 和 Razor 通用组件库:MatBlazor。 Blazor介绍 Blazor 是基于 HTML、CSS 和 C# 的现代前端 Web 框架,可帮助你更快地生成 Web 应用。使用 Blazor,你可以使用可从客户端和服…

浙大一出手就是王炸!浙江大学DeepSeek手册Ⅰ、Ⅱ+全程视频讲解!

浙大一出手就是王炸!浙江大学DeepSeek手册Ⅰ、Ⅱ+全程视频讲解! 随着DeepSeek的广泛应用,各大企业、机构、高校正在根据自身需求和特定场景,构建个性化的DeepSeek平台,以充分发挥其性能和优势。这种定制化部署不仅提升了数据处理效率,还优化了信息检索的准确性,帮助高校…

Qt多版本如何共存

1、打开Qt维护工具 选择对应的Qt版本,比如5.15.2,取消不需要的组件。如果没有显示老版本,请勾上Archive,点击“筛选”,例如下图所示2、等待安装完毕即可,这是Qt安装目录下将会看到有多个版本。 注:注意的是如果在线安装速度较慢,请切换国内镜像服务。方法是打开cmd,执…

LazyAdmin打靶笔记

Nmap的-F参数用于快速扫描目标主机上开放的端口。它会限制扫描的端口范围,只扫描常见的1000个端口,而不是扫描所有的65535个端口。这样可以加快扫描速度,尤其是在进行初步评估时非常有用。可以看到端口只有一个ssh口和web口 在浏览器输入ip查看内容: 是一个apache的默认页面…

Blazor Hybrid适配到HarmonyOS系统

1. 前言 Blazor Hybrid是一个基于Web技术的MVVM开发模式的客户端框架,它只有UI是由Webview渲染,而逻辑均由.NET开发,可以突破浏览器限制访问本地文件,或者发起TCP或者UDP请求,相比Electron框架,理论上性能会更好。 当我适配完.NET运行时,觉得应该快速适配一个UI框架,方…

极耳连“芯”,智造传情——SAP ERP为恒源新材点亮“透明制造”明灯

在元宵灯火与情人节玫瑰交织的特别时刻,工博科技与电池极耳制造商东莞市恒源新材料有限公司(以下简称“恒源新材”)正式启动SAP ERP项目。恒源新材总经理黄总、工博科技技术服务总监麦总以及项目组成员共同出席启动仪式。此次合作,工博科技将助力恒源新材实现数字化转型升级…

SAP B1升级S/4HANA Cloud:助力企业突破业务发展瓶颈

许多公司在业务刚处在起步阶段时,会选择SAP Business One这款轻量便捷的企业管理软件,初步实现了信息化规范管理。但随着时间的推移,公司业务迅速扩张,企业员工规模逐渐壮大,业务发展也遇到了难题。借助SAP S/4HANA Cloud,可以解决企业在发展道路上所面临的瓶颈,进一步提…

Pycharm使用中有关环境变量、解释器、虚拟环境的梳理

一、环境变量系统变量和用户变量: 计算机优先查找系统变量,如果没有,才查找用户变量。这种安排便于多用户的管理。PATH变量的优先级: 自上而下,优先级越来越低,这种顺序可以更改如图当用户在终端输入python时,计算机则会优先到F:\env\Python3.13\目录下寻找python解释器…

【CodeForces训练记录】Codeforces Round 1007 (Div. 2)

训练情况赛后反思 放假降智了,逆天卡 A 题,还 WA 了一发,放假就会掉大分 TAT A题 打表易得结论,直接手动枚举几个,发现有循环节,第 \(1,4,7,\cdots\) 可以为观众,其他都不可以点击查看代码 #include <bits/stdc++.h> // #define int long long #define endl \nusi…