Может ли HTML5 взаимодействовать с периферийными устройствами, такими как сканеры и считыватели кредитных карт?

Ответ 1

ОБНОВЛЕНИЕ (16 января 2019 г.): API управления учетными данными был объявлен. В настоящее время поддерживается только в Chrome и Opera, но выглядит многообещающе. Разработчики Google написали статью, посвященную спецификации.

ОБНОВЛЕНИЕ (28 декабря 2016 г.): еще пара лет прошло, и еще одно обновление. Этот будет больше сфокусирован на двух новых разработках, чем что-либо еще. См. Новый раздел "WebUSB & Web BlueTooth" в разделе "API полного устройства". Но ответ остается прежним.

ОБНОВЛЕНИЕ (3 ноября 2014 г.): Прошло чуть более двух лет с тех пор, как было написано оригинальное сообщение, но ответ пока остается практически неизменным. Мы, однако, ближе к вашей первоначальной цели в нескольких областях.

ОРИГИНАЛЬНЫЙ ОТВЕТ:

Там было бы несколько способов сделать это.

Фон

Спецификация HTML5 перешла в состояние "Рекомендация". Это означает, что HTML5 в значительной степени настроен на то, как он выглядит. Тем не менее, я буду использовать HTML5 так же, как каждый специалист по маркетингу в мире решил, что лучше. То есть я не буду говорить о HTML. Ну, я буду, насколько вы будете использовать его со страницы HTML, но не совсем. На самом деле я буду обсуждать JavaScript (JS) и лошадь другого цвета. Но для всех целей мы ставим его под тем же заголовком, что и HTML5, который теперь решил назвать "блестящим и новым".

Кроме того, пункты, которые я обсуждаю, будут отличаться в поддержке. Некоторые из них являются очень зависимыми от браузера проектами (например, реализациями, специфичными для Chromium), а некоторые являются проектами, в большей степени ориентированными на стандарты, в которых, возможно, еще нет браузеров, реализующих или экспериментирующих с ними. Я постараюсь провести различие между ними по мере продвижения.

API полного устройства

Статус: Входящий, но не готовый

Возможность доступа к устройствам из браузера делает медленный, но устойчивый прогресс. В настоящее время многие современные браузеры имеют доступ к некоторым наиболее распространенным устройствам, таким как камера или геймпады, но все они являются высокоуровневыми API. Поставщики браузеров, группы стандартов и множество компаний, связанных с Интернетом, пытаются сделать веб-приложения такими же мощными, как и ваши локальные приложения.

Но API-интерфейсы, которые вы ищете, все еще находятся в стадии разработки и еще далеко. Для вашего конкретного случая и для более общего случая подключения вашего веб-приложения к большинству устройств у нас еще несколько лет до того, что мы сможем использовать. Если вы хотите увидеть, какие удивительные вещи появляются в этой области, вот лишь некоторые из них, которые могут вам помочь:

• API Web Near Field Communication (NFC)
  Этот, к сожалению, может быть мертвым в воде на данный момент. Но, похоже, изначально некоторые люди из W3C (в основном Intel, похоже) смотрели на добавление NFC API в сеть.
• Потоки захвата медиа
  Группа WebRTC работает над программным доступом к медиапотокам, таким как камера, что позволит интегрировать такие вещи, как сканирование штрих-кода или другие функции. Это достигло статуса CR и доступно в браузерах, но само по себе менее полезно.
• Веб Bluetooth
  Если у вас есть инструменты с поддержкой Bluetooth, этот API поможет вам подключаться к ним с компьютеров и устройств, которые могли прослушивать и подключаться. На данный момент основным драйвером для этого является команда Chrome, включающая экспериментальную реализацию, но я бы не подумал, что она готова к использованию (см. Раздел "WebUSB & Web BlueTooth").
• WebUSB
  Это позволило бы получить полный доступ к USB-информации низкого уровня, включая списки устройств и взаимодействие с ними. То же, что и Web BlueTooth, похоже, что это текущий проект Chrome для домашних животных, но я также не буду полагаться на него (см. Раздел "WebUSB и Web BlueTooth").
• Обнаружение сетевых служб
  Если у вас есть другие устройства или элементы в сети, которые передают и используют HTTP, этот API позволит вам обнаруживать и взаимодействовать с этими службами. Нет реализации браузера, но он находится в рабочем проекте для W3C.

Первоначально Mozilla продвигала некоторые из них из-за Boot2Gecko (или Firefox OS). Однако, поскольку этот проект официально отменен, мы не видим большого прогресса от них в этих областях сейчас.

Однако члены команды Chrome, похоже, решили погрузиться и начать не только работать над этим, но и использовать их в браузерах. Что приводит нас к...

WebUSB и Web BlueTooth

Как и колбасы, лучше не знать, как создаются веб-стандарты
-Abraham Линкольн (возможно)

В этой области было немного шума, похоже, что команда Chrome использовала их в качестве экспериментальных функций и разработала для них собственную спецификацию. Что здорово! Просто, может быть, не так, как вы надеялись.

Каждый поставщик браузеров и группа участников W3C имеют свой собственный стиль и вносят свой вклад в спецификацию по-своему. Результатом обычно является довольно приличная спецификация, с которой согласились браузеры. Но переход от ничего к чему-то... грязный. Очень грязный И это довольно много раз. Это не всегда приводит к хорошей спецификации (да, я говорю о компромиссе с Флорианом...), но даже когда это происходит, это занимает некоторое время.

Тем не менее, похоже, что Google разработал эту версию спецификации самостоятельно. И, по моему опыту, подход Google к спецификациям всегда немного... ну... оставляя мои личные мнения в стороне, мы скажем "фанатичный". Они стремятся просто погрузиться прямо в глубокий конец. И это, кажется, то, что они сделали здесь.

Я очень сомневаюсь, что эти спецификации или реализации будут выглядеть примерно так, когда станут стандартами. И в этом нет ничего плохого. Эта часть процесса. Но я бы не стал полагаться на эту реализацию или разрабатывать какой-либо код или продукты против нее. Это беспрецедентная функция в Интернете, и все производители браузеров захотят в этом внести свой большой вклад.

Тем не менее, это на самом деле хорошо. Одна из вещей, которые Google часто делает (в лучшую или худшую сторону) в подобных ситуациях, - это форсировать разговор, и это может подтолкнуть его вперед. А наличие в браузере функции, даже экспериментальной, может повысить спрос на нее. Таким образом, мы можем увидеть больше прогресса в этой области в ближайшее время

PhoneGap Апач Кордова. Вы знаете, для вашего телефона

Статус: не полностью укомплектован и только телефон

Apache Cordova, ранее Adobe PhoneGap, - это способ написания вашей программы на HTML, CSS и JS, который позволяет вам получать доступ к низкоуровневым функциям, таким как телефоны, и компилировать на разных устройствах. Это был бы способ реализовать вашу программу, но это было бы приложение для телефона, не обязательно для настольного компьютера. Вариант для рассмотрения, и я решил упомянуть кое-что.

В Cordova уже реализованы некоторые из перечисленных выше функций, но нет более мощных, таких как NFC или BlueTooth.

Решение Native-App (для Windows 8)

Состояние: возможно, но зависит от ОС и настольного приложения

Windows 8 предлагает возможность создавать приложения на HTML и JS. Это позволит вам легко получить доступ к функциональности более низкого уровня в ОС через их API. Судя по всему, он довольно обширный, и вы можете многое сделать. Однако вы упомянули о поддержке нескольких ОС, и это, очевидно, ограничивает вас одной ОС.

Это так Flash-ы!

Статус: Умирающий/Мертвый, невозможен как веб-приложение

Flash не будет иметь прямого доступа к системе через Интернет. Вы можете создать приложение AIR, но это будет своего рода поражением цели создания веб-приложения. Кроме того, поддержка Flash на мобильных устройствах и в Интернете, казалось бы, находится в упадке.

NodeJS

Статус: может быть немного больно и возможно только в качестве настольного приложения

Приложения NodeJS и JS были горячей темой последних лет. Я не обсуждал это в своем оригинальном посте, потому что чувствовал, что это еще не совсем там. Тем не менее, ситуация прогрессировала, и она намного ближе к тому, чтобы быть готовой к такого рода вещам, и имеет поддержку и мощь растущей базы пользователей. Тем не менее, для вашего конкретного случая, я бы не рекомендовал использовать его. Он должен быть локальным на компьютере пользователя, и из-за того, как на данный момент работают NodeJS (и аналогичные движки), потребуется много дополнительных настроек и настроек, которые немного усложнят ситуацию.

Таким образом, вы можете создать приложение с использованием HTML, CSS и JS с NodeJS или аналогичными механизмами и иметь низкоуровневый доступ к тому, что вам нужно, но оно должно быть локальным, и это займет больше работы, чем я уверен, что вы хотите делать каждый время, когда вы хотели бы установить его для клиента.

... Где я был?

Так, где это оставляет нас? Ну, просто: если вы хотите использовать один язык/набор кода в качестве основы кода, HTML/CSS/JS - не лучший вариант... пока. Но они могут быть когда-нибудь. На данный момент ваши варианты ограничены тем, что вы считаете лучшим для вашего клиента. Java - стабильный вариант, который вы перечислили, но, очевидно, имеет свои недостатки. По мере развития сети, я думаю, мы увидим много действительно интересных вещей, появившихся в новой функциональности, но у нас есть способы пойти еще дальше.

Больше чтения:

• Brian.IO: за пределами HTML5
• Приложения HTML5 на Windows 8
• Википедия список проектов, созданных с использованием JS

Ответ 2

Это возможно, но это нужно сделать косвенно. Теоретически вы можете написать сокет-сервер на языке низкого уровня, который получает I/O и отправляет I/O через сокет (ретрансляция, я думаю). HTML5 использует WebSockets или какой-либо эквивалент для связи с этим сокет-сервером.

Ответ 3

Теперь это может быть достигнуто с помощью WebUSB API.

доступно в Chrome начиная с версии 54.

Это проект редактора W3C, поэтому мы можем ожидать (надеюсь), что он будет принят другими поставщиками браузеров...

Ответ 4

Я много думал об этом в последнее время... у меня есть приложение POS, написанное в основном на VB6, учитывая, что делать дальше. HTML5 - это вариант, и я думал, что буду использовать VSPE, чтобы получить серийный материал в JS.

http://www.eterlogic.com/Products.VSPE.html

Любите этот продукт! Очень хорошо работает для получения последовательного трафика, где вам это нужно, поэтому я думаю, что он будет работать хорошо, по крайней мере, как доказательство концепции, чтобы вы начали. Вы хотите использовать комбинацию типов "коннектор" вместе с "tcpclient" и "tcpserver".

Ответ 5

Только для записи - метод, который хорошо работает в 2016 году (начиная с chrome 26), но должен быть отозван в течение следующих 2 лет заключается в том, чтобы развернуть html5 в качестве хром-приложения и использовать chrome.usb (или chrome.serial или chrome.bluetooth).

В настоящее время я использую chrome.usb и планирую перейти на веб-приложение, используя API WebUSB (см. ответ Supersharp), который я надеюсь будут приняты к тому времени, когда Google прекратит использование хром-приложений 🤞.

Ответ 6

Простой способ считывания штрих-кода может поступать от входа (ввод ввода с клавиатуры), как в видео, https://www.youtube.com/watch?v=21VTEv3vL7o

Вот реализация NPAPI для функции полного сканирования штрих-кода. https://code.google.com/p/npapi-barcode-scanner-sample/wiki/usage

Вы также можете использовать кредитную карту, используя NPAPI.

Для приложения POS вам нужен быстрый браузер ответов, javascript, AJAX, websocket (может быть) https://www.youtube.com/watch?v=cg61WvIqVJc

С уважением, Джек Вонг

[email protected]