HTML5 可以与扫描仪和信用卡读卡器等外围设备通信吗?

2024-01-13

我的公司编写了安装在客户端计算机上以执行销售点交易的软件。该软件可与各种外围设备(收据打印机、条形码扫描仪、信用卡读卡器等)连接。我们使用 Microsoft OPOS 库在 Visual Studio 中创建的 WinForms 应用程序来执行此操作,该应用程序又与我们的云服务器进行通信。

该模型存在明显的低效率问题,主要是更新方面。我正在研究通过网络与这些外围设备进行通信的其他方法,最好是通过网络浏览器。据我所知,Java 是唯一能够实现我们正在寻找的功能(通过小程序)的技术之一,我认为 Adob​​e Flash 也可以(通过 Air 平台)。这些是可行的,但不是优选的,因为我们希望在支持网络的移动设备上运行我们的软件。

有人对通过网络与外部外围设备进行通信的其他方式有建议吗?


更新(2019 年 1 月 16 日): The 凭证管理API https://developer.mozilla.org/en-US/docs/Web/API/Credential_Management_API#Browser_compatibility已宣布。它是目前仅支持 Chrome 和 Opera https://caniuse.com/#feat=credential-management但它看起来很有希望。谷歌开发者写道一篇文章 https://developers.google.com/web/fundamentals/security/credential-management/详细说明规范。

更新(2016 年 12 月 28 日):又过了几年,又更新了。这一次将更关注两项新的发展。请参阅“完整设备 API”下的新“WebUSB 和 Web 蓝牙”部分。但答案仍然是一样的。

更新(2014 年 11 月 3 日):距离最初的帖子发表已经过去两年多了,但目前答案基本保持不变。然而,我们在几个方面更接近您最初的目标。

原答案:

有很多方法可以解决这个问题。

背景

HTML5规范已进入“推荐”状态。这意味着 HTML5 已经基本确定了它的样子。然而,我将按照世界上每个营销人员认为最好的方式使用 HTML5。也就是说,我不会谈论 HTML。好吧,只要您能从 HTML 页面使用它,我就会这么做,但实际上并非如此。我实际上要讨论的是 JavaScript (JS) 和那是一匹不同颜色的马 http://en.wikipedia.org/wiki/ECMAScript#History。但出于所有意图和目的,我们将其全部放在与 HTML5 相同的标题下,现在 HTML5 的意思是“闪亮而新颖”。

此外,我正在讨论的项目的支持也会有所不同。有些是非常依赖于浏览器的项目(例如 Chromium 特定实现),有些是更多标准驱动的项目,可能还没有浏览器实现或试验它们。我将在接下来的过程中尝试区分这两者。

完整的设备API

状态:正在接收,但尚未准备好

能够从浏览器访问设备正在取得缓慢但稳定的进展。现在,许多现代浏览器可以访问一些更常见的设备,例如相机 https://developer.mozilla.org/en-US/docs/Web/Guide/API/WebRTC or gamepads https://developer.mozilla.org/en-US/docs/Web/API/Gamepad,但它们都是高级 API。浏览器厂商 https://wiki.mozilla.org/WebAPI, 标准组 http://www.w3.org/2009/dap/,许多涉及网络的公司都在努力使网络应用程序与本地应用程序一样强大。

但您正在寻找的 API 仍在开发中,而且还有很长的路要走。对于您的特定情况,以及将您的网络应用程序连接到大多数设备的更一般情况,我们距离可以使用的东西还需要几年的时间。如果您想了解该领域即将出现哪些令人惊叹的事情,以下是一些可以直接帮助您的精选项目:

  • 网络近场通信 (NFC) API http://www.w3.org/TR/2014/WD-nfc-20140114/
    不幸的是,这个人现在可能已经死在水里了。但看起来最初 W3C 的一些人(看起来主要是英特尔)正在考虑向网络添加 NFC API。
  • 媒体捕获流 http://www.w3.org/TR/2012/WD-mediacapture-streams-20120628/
    WebRTC 小组正在致力于以编程方式访问相机等媒体流,这将允许集成条形码扫描或其他功能等功能。这已达到 CR 状态并且在浏览器中可用 http://caniuse.com/#feat=stream,但其本身的帮助较小。
  • 网络蓝牙 https://webbluetoothcg.github.io/web-bluetooth/
    如果您有支持蓝牙的工具,此 API 将帮助您从能够侦听和连接的计算机和设备与它们进行连接。目前主要的驱动因素似乎是 Chrome 团队,包括一个实验性的实现,但我不认为它可以在任何地方使用(请参阅“WebUSB 和 Web 蓝牙”部分)。
  • WebUSB https://wicg.github.io/webusb/
    这将允许完全访问低级 USB 信息,包括列出设备并与它们交互。与 Web BlueTooth 相同,这似乎是当前的 Chrome 宠物项目,但我也不会依赖它(请参阅“WebUSB 和 Web BlueTooth”部分)。
  • 网络服务发现 http://www.w3.org/TR/2014/WD-discovery-api-20140220/
    如果网络上有其他广播和使用 HTTP 的设备或项目,则此 API 将允许您发现这些服务并与之交互。没有浏览器实现,但它在 W3C 的工作草案中。

最初,Mozilla 由于 Boot2Gecko(或 Firefox OS)而推动了其中的一些进展。然而,随着该项目正式取消,我们现在在这些领域看不到太多进展。

然而,Chrome 团队的成员似乎已经决定深入研究,不仅开始致力于这些工作,而且将它们放在浏览器中。这导致我们...

WebUSB 和网络蓝牙

就像香肠一样,最好不知道 Web 标准是如何制定的
——亚伯拉罕·林肯(可能)

这一领域引起了一些关注,因为 Chrome 团队似乎将这些作为实验性功能加入其中,并为其开发了自己的规范。这太棒了!只是可能不是以您希望的方式。

每个浏览器供应商和 W3C 贡献者团体都有自己的风格,并以自己的方式为规范做出贡献。结果是usually浏览器已经同意的相当不错的规范。但从无到有是……混乱的。真乱。很多时候这是一个相当过程。它并不总是能产生良好的规格(是的,我说的是你弗洛里安的妥协......)但即使它确实如此,也需要一段时间。

然而,谷歌似乎完全自己开发了这个版本的规范。而且,根据我的经验,谷歌对规范的态度总是有点......好吧......抛开我的个人意见,我们会说“热心”。他们往往会一头扎进深渊。这似乎就是他们在这里所做的。

我非常怀疑这些规范或实现在成为标准时会是什么样子。这并没有什么问题。这是过程的一部分。但我不会依赖此实现或开发任何针对它的代码或产品。这是网络上前所未有的功能,所有浏览器供应商都希望在这方面拥有很大的发言权。

也就是说,这实际上很好。在这种情况下,谷歌经常做的一件事(无论好坏)就是强制对话,它可以推动事情向前发展。在浏览器中提供一项功能,即使是实验性功能,也会增加对其需求的热度。因此,我们可能很快就会在这一领域看到更多进展。

PhoneGap Apache Cordova. You know, for your phone

状态:功能不全,仅限手机

阿帕奇科尔多瓦 http://incubator.apache.org/cordova/, 之前Adobe PhoneGap http://phonegap.com/,是一种用 HTML、CSS 和 JS 编写程序的方法,允许您访问手机等设备上的较低级别功能,并跨设备进行编译。这将是实现程序的一种方式,但它将是一个电话应用程序,不一定是桌面应用程序。一个值得考虑的选择,以及我想我会提到的一些事情。

Cordova 已经实现了上述一些功能,但没有一些更强大的功能,例如 NFC 或蓝牙。

本机应用程序解决方案(适用于 Windows 8)

状态:可能,但特定于操作系统和桌面应用程序

Windows 8 提供了用 HTML 和 JS 构建应用程序的能力。这将允许您通过以下方式轻松访问操作系统上的较低级别功能他们的API http://msdn.microsoft.com/en-us/library/windows/apps/br211377。从表面上看,它的范围相当广泛,你可以做很多事情。但是,您提到了跨操作系统支持,这显然将您限制在一种操作系统上。

真是太Flash了!

状态:正在死亡/死亡,不可能作为网络应用程序

Flash 无法通过网络直接访问系统。您可以创建一个 AIR 应用程序,但这会有点违背使其基于 Web 的目的。此外,移动设备和网络上的 Flash 支持似乎正在下降。

NodeJS

状态:可能有点麻烦,只能作为桌面应用程序

NodeJS 和 JS 应用程序在过去几年中一直是一个热门话题。我没有在原来的帖子中讨论它,因为我觉得它还没有完全实现。然而,事情已经取得了进展,它已经更接近为此类事情做好准备,并且拥有不断增长的用户群的支持和力量。也就是说,对于您的具体情况,我不建议使用它。它必须位于用户计算机的本地,并且由于 NodeJS(和类似的引擎)目前的情况,它需要大量额外的配置和设置,这会使事情变得有点复杂。

因此,您可以使用 HTML、CSS 和 JS 以及 NodeJS 或类似引擎构建一个应用程序,并且对您需要的内容具有低级别访问权限,但它必须是本地的,而且这需要比我确信您想做的更多工作您想为客户安装它的时间。

......现在我在哪里?

那么我们会怎样呢?嗯,很简单:如果您想要单一语言/代码集作为您的代码库,那么 HTML/CSS/JS 还不是一个很好的选择。但有一天他们可能会这么做。目前,您的选择仅限于您认为最适合客户的选择。 Java 是您列出的一个稳定的选项,但显然有其自身的缺点。随着网络的发展,我认为我们会看到新功能带来很多非常酷的东西,但我们还有很长的路要走。

更多阅读:

  • Brian.IO:超越 HTML5 http://brian.io/slides/beyond-html5/
  • Windows 8 上的 HTML5 应用 http://msdn.microsoft.com/en-us/library/windows/apps/br211385.aspx
  • 维基百科使用 JS 构建的项目列表 http://en.wikipedia.org/wiki/JavaScript#Uses_outside_web_pages
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

HTML5 可以与扫描仪和信用卡读卡器等外围设备通信吗? 的相关文章

  • 如何使用 php 处理传出 webhook (Slack)

    我已经配置了 Slack outgoing webhook 但我不确定如何处理 Slack 发送到我指定的 URL 的 HTTP POST 请求 工作流程是这样的 当有人向指定通道发送消息时 API 将向指定 URL 之一发送 HTTP P
  • 通过 HTML5 文件和 URL API 正确创建和提供 PDF Blob

    好吧 假设我有文档数据存储在某处 让我们任意取this pdf http www grida no climate ipcc tar wg1 pdf tar 01 pdf 问题 1 我想要做的是对此 URL 进行 AJAX 调用 因为我需要
  • 为什么我的 onclick 事件自动触发

    加载页面时最初显示 Hello World 我希望它仅在单击按钮后显示 我知道我可以通过向按钮添加内联事件侦听器来做到这一点 我可以只用脚本编写所有这些代码吗
  • 当我“显示:无”一个 SVG 时,另一个(独立的)SVG 会以不同的方式呈现

    我已经伤透了几个小时了 这没有任何意义 我将遇到的问题减少到这个codepen https codepen io Octopous pen OJORpJQ https codepen io Octopous pen OJORpJQ HTML
  • NodeJS 无法加载 css 文件

    所以我正在尝试制作一个 NodeJS 服务器 并且我尝试保留尽可能少的附加组件 但是 我遇到了一个问题 我似乎无法加载任何内容CSS我调用的文件HTML文件 该调用似乎确实由服务器处理 但它不会显示在浏览器中 My 网络服务器 js fil
  • 有不同图像尺寸的缩略图 Bootstrap

    我想要包含不同大小和不同文本量的图像的缩略图 但我希望它们都具有相同的大小 像这样来自 Bootstrap 站点的示例 http getbootstrap com components thumbnails custom content 下
  • Chrome Prerender 功能每次都会被取消

    我正在尝试 Chrome 中的预渲染功能 但是当我检查网络时 我可以看到任何链接的请求都被取消 我使用以下语法 我尝试了现场演示http prerender test appspot com http prerender test apps
  • 如何在 jQuery 中检查复选框是否被选中?

    我需要检查checked复选框的属性 并使用 jQuery 根据选中的属性执行操作 例如 如果age复选框被选中 然后我需要显示一个文本框来输入age 否则隐藏文本框 但下面的代码返回false默认情况下 if isAgeSelected
  • 获取 Angular ng-option 下拉列表的选定文本

    我的角度代码中有这个下拉列表 div class btn group div
  • HTML5中如何隐藏video标签的全屏按钮

    我需要隐藏 HTML5 中视频标签的全屏按钮 有什么办法可以实现吗 Thanks 我认为你可以通过更改 css 来实现这一点 document fragments 这些是 DOM1 规范 所有浏览器都支持 但关于样式 我不确定 Simple
  • 智能位置表单字段

    我的用户注册表单上有一个文本字段location 我本质上希望这个字段能够根据 Google 地图 或同等地图 进行验证 只允许有效位置通过 最好采用类似的格式滑铁卢 伦敦 or 伦敦 英国 要求 除了位置名称之外 我还想返回该位置中心的坐
  • 如何使用 javascript 触发表单验证的本机验证气泡/工具提示?

    我有一个附加了 html5 验证 必需 等 属性的表单 有没有一种方法可以触发本机验证气泡 工具提示的出现 而无需模拟表单的提交按钮上的 单击 正如评论中所述 您可以使用 reportValidity 方法 这是广泛支持 https dev
  • 等宽字体中的字体大小和字符宽度之间有什么依赖关系?

    等宽字体中的字体大小和字符宽度之间有什么依赖关系 在我的网络应用程序中 我使用 courier new 字体 我想知道 字符串的实际长度 以像素为单位 是多少 如果我知道CSS font size属性 它如何帮助我知道字符串的实际长度 谢谢
  • 为什么连字符 (-) 分隔的类名在 CSS 中广泛使用 [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 在浏览了一些网站和其他一些广泛使用的插件和框架中包含的一些 CSS 文件时 发现它们广泛使用连字符分隔的单词作为类名 实际上使用这样的类名有什么
  • 将按键和焦点事件附加到 contenteditable div 内的元素

    我想附上keypress and focusoutcontenteditable 内段落的事件处理程序div 下面的代码似乎不起作用 div p Test p p Test p p Test p div p1 bind keypress f
  • 带滚动条的 HTML 画布

    我正在宽度不等的画布上绘制图表 每个画布可以有自己的滚动条吗 我尝试将所有画布放在一个 div 中并指定最大宽度 但它不起作用 是否有可能所有画布在页面上的可见宽度均为 500 像素 并且每个画布都有其滚动条来查看画布的整个宽度 谢谢 指定
  • Angular - Safari 无法正确显示 DOM

    我是 Angular 的新手 使用 Angular 4 我尝试通过在关联的组件类文件中设置属性来更新特定元素 但是 除非我尝试强制重新绘制网页 通过调整窗口大小等 否则页面不会更新 我打开检查器 看到 DOM 已更改 但显示与元素检查器中的
  • 如何反转媒体查询中元素的顺序?

    我有两个 div 左和右 但是当屏幕小于 500px 时 左 div 成为底部 div 右 div 成为顶部 div DOM 中的第一个 div 应该显示为第二个 第二个 div 为第一个 I use display flex 然后 div
  • 如何使用 HTML5 Javascript Canvas 获取三个碰撞形状的交集并删除不碰撞的部分?

    我最近专门针对 KonvaJs 发布了类似的问题here https stackoverflow com questions 64603077 how can i get the intersection of three shapes c
  • 两个 div 之间的匿名空白

    这里是Fiddle http jsfiddle net y6hSV 1 我有两个divs一个用于标题 另一个用于主体 在 的里面div这是标题 我还有另一个div那个 div 是floated left 因为那个floating 两者之间出

随机推荐