Штрих-код и QR-код модернизировали наш опыт покупок и поиска. Покупатели со смартфонами теперь могут забрать товар в любой точке мира, отсканировать его штрих-код или QR-код с помощью одного из многочисленных бесплатных приложений для телефона и узнать его самую низкую цену, а также узнать, где его можно купить.
Скриншоты приложений с кнопками сканера штрих-кода
Такие компании, как Walmart и Amazon, использовали эту технику, чтобы привлекать клиентов в свои онлайн- и офлайн-магазины с помощью своего мобильного приложения. Другие компании, такие как Fedex и UPS, позволяют клиентам сканировать коды на посылках с помощью приложения для телефона, вместо того, чтобы вручную вводить длинные списки символов.
Если пользователям вашего мобильного веб-сайта необходимо вводить длинные коды, такие как коды активации, или им нравится искать определенные продукты на вашем веб-сайте по номеру модели, напечатанному в журнале или рекламе, вы также можете воспользоваться преимуществом QR. коды, чтобы устранить разочарование крошечных клавиатур и избавить их от необходимости дважды проверять наличие ошибок.
Сканирование QR-кода с вашего мобильного сайта
Вам не нужно собственное телефонное приложение для сканирования QR-кодов . Создать свой собственный считыватель QR-кода довольно просто. Ваш веб-сайт , работающий на смартфоне с камерой и небольшим количеством JavaScript, может сделать то же самое.
Вот демонстрация сканера QR-кода , который работает не только на мобильных устройствах, но и на большинстве современных устройств. Все, что вам нужно, это камера и QR-код для сканирования.
Если у вас нет под рукой QR-кода , вот тот, который показывает первые восемь цифр числа Пи.
Протестируйте считыватель QR-кода : QR-код , кодирующий значение числа Пи
Создание считывателя QR-кода
Нашему считывателю QR-кода потребуется немного HTML и JavaScript, но, что наиболее важно, библиотека JavaScript, способная интерпретировать QR-код .
Мы не собираемся создавать это сами, потому что есть несколько отличных библиотек, которые делают это за нас, поэтому нам не нужно изобретать велосипед для наших текущих целей.
Начнем с создания index.htmlфайла.
Добавление HTML
Для этого проекта нам понадобится очень простой HTML. Добавьте в тег body следующее:
Как видите, у нас есть контейнер-оболочка с заголовком, изображение значка QR, завернутое в aтег, а canvasи, а, divгде мы покажем результат сканирования.
Вне контейнера divмы включаем qrCodeScanner.jsфайл. Мы создадим его позже, но сначала улучшим внешний вид нашего приложения.
Добавление стилей
Добавьте таблицу стилей в заголовок нашего HTML:
Теперь мы хотим создать style.cssфайл в srcпапке. Нам просто нужны некоторые основные стили для этого примера приложения. Добавьте в свой css-файл следующее:
html {
height: 100%;
}
body {
font-family : sans-serif ;
padding: 0 10px;
height: 100%;
background: black;
margin: 0;
}
h1 {
color: white;
margin: 0;
padding: 15px;
}
#container {
text-align : center;
margin: 0;
}
#qr-canvas {
margin: auto;
width: calc (100% — 20px) ;
max-width : 400px;
}
#btn-scan-qr {
cursor: pointer;
}
#btn-scan-qr img {
height: 10em;
padding: 15px;
margin: 15px;
background: white;
}
#qr-result {
font-size : 1.2em;
margin: 20px auto;
padding: 20px;
max-width : 700px;
background-color : white;
}
Ничего особенного. Мы оставим все по центру с большой кнопкой QR посередине и результатом внизу. Мы используем черный и белый цвета, как QR-коды .
Включение зависимых библиотек JavaScript
Секрет чтения QR-кодов — в математике, а заменой математики являются библиотеки с открытым исходным кодом. Для чтения QR-кодов мы будем использовать порт JavaScript библиотеки обработки изображений на основе Java, написанной ZXing. Версия JavaScript была перенесена Лазаром Ласло.
Поскольку библиотека JavaScript состоит из 17 файлов, мы позволили себе объединить их в один файл, поместив код в анонимную функцию, чтобы предотвратить загрязнение глобального пространства имен, и пропустив файл через минификатор Google Closure, чтобы уменьшить размер файла...
Некоторые незначительные изменения в библиотеке
Чтобы сделать библиотеку более адаптируемой, мы добавили несколько незначительных изменений в функцию вывода библиотеки, чтобы различать ответ об успешном завершении и ответ об ошибке.
В qrcode.js были внесены два важных изменения в эти две строки:
qrcode.result = «error decoding QR Code»;
//...
qrcode.callback («Failed to load the image») ;
Эти строки были заменены Errorобъектами:
qrcode.result = Error («error decoding QR Code») ;
//...
qrcode.callback (Error («Failed to load the image»));
Теперь я могу определить в своей функции обратного вызова, произошла ли ошибка, просто проверив, является ли полезная нагрузка обратного вызова экземпляром Errorили нет.
Эти изменения можно найти в этом форке библиотеки.
Добавление тега скрипта
Чтобы использовать библиотеку в нашем считывателе QR-кода , нам сначала нужно включить ее в наш HTML с помощью обычного тега script:
Отношение к нему как к приложению
Что-то , что нам нужно сделать, это сообщить мобильным браузерам, что мы не хотим масштабировать этот сайт в портретном режиме. headЭтого можно добиться, добавив в элемент следующий метатег:
Добавление JavaScript
Теперь нам нужно создать qrCodeReader.jsфайл в srcпапке, которая должна быть на том же уровне, что и наш файл HTML.
Давайте добавим код в наш новый файл:
const qrcode = window.qrcode;
const video = document.createElement («video») ;
const canvasElement = document.getElementById («qr-canvas ») ;
const canvas = canvasElement.getContext («2d») ;
const qrResult = document.getElementById («qr-result ») ;
const outputData = document.getElementById («outputData») ;
const btnScanQR = document.getElementById («btn-scan-qr ») ;
let scanning = false;
В начале этого фрагмента кода мы получаем qrcodeобъект из windowи для удобства присваиваем его константе. Мы также создаем videoэлемент, который будем использовать для обработки изображений, поступающих с камеры.
Затем мы получаем canvasэлемент и используем его для присвоения 2d contextконстанте. Нам это понадобится для рисования изображений, поступающих с нашей камеры.
Затем мы получаем соответствующие элементы для отображения результатов и взаимодействия с приложением, а внизу мы объявляем scanningпеременную, чтобы сохранить статус нашего сканера.
Далее мы установим обратный вызов для нашего считывателя QR-кода . Добавьте следующее в конец файла:
qrcode.callback = (res) => {
if (res) {
outputData.innerText = res;
scanning = false;
video.srcObject.getTracks ().forEach (track => {
track.stop () ;
}) ;
qrResult.hidden = false;
btnScanQR.hidden = false;
canvasElement.hidden = true;
}
};
Здесь мы назначаем callbackфункцию qrcodeобъекта. Это будет вызываться библиотекой при обнаружении QR-кода . Он предоставляет resпараметр, содержащий результат сканирования, поэтому мы присваиваем его innerTextсвойству outputDataэлемента.
Здесь происходят еще четыре вещи. Во-первых , мы устанавливаем для scanningпеременной значение false, так как мы больше не хотим сканировать после того, как мы уже расшифровали наш QR-код .
Затем мы получаем все треки из потока внутри srcObjecсвойства videoэлемента и останавливаем их один за другим. Вот как мы останавливаем потоковую передачу с камеры пользователя.
Сразу после этого мы убеждаемся, что отображаем qrResultэлемент и btnScanQRэлемент, чтобы пользователь мог увидеть результат и запустить другое сканирование. Наконец, мы прячем canvasElement, так как он нам больше не нужен.
Это все, что нам нужно для обработки ответа сканера.
Теперь нам нужно получить доступ к каналу камеры и настроить цикл для отрисовки изображений на нашем холсте в каждом кадре. Нам также нужен еще один цикл для сканирования QR-кодов каждые x миллисекунд.
Сканирование каждого кадра было бы пустой тратой ресурсов, поэтому нам лучше обрабатывать это в отдельном цикле, где мы можем контролировать частоту, с которой мы запускаем алгоритм.
Сделаем это в onclickобработчике btnScanQRэлемента:
btnScanQR.onclick = () =>
navigator.mediaDevices
.getUserMedia ({ video: { facingMode: «environment» } })
.then (function (stream) {
scanning = true;
qrResult.hidden = true;
btnScanQR.hidden = true;
canvasElement.hidden = false;
video.setAttribute («playsinline», true) ; // required to tell iOS safari we don’t want fullscreen
video.srcObject = stream;
video.play () ;
tick () ;
scan () ;
}) ;
};
Хорошо, давайте пройдем через это. Мы вызываем функцию getUserMedia из mediaDevicesобъекта, который является частью объекта навигатора. Это заставит браузер запрашивать у пользователя разрешение на использование его камеры.
Функция getUserMediaпринимает объект в качестве параметра, которому мы передаем объект видео с facingModeустановленным значением «environment». Если пользователь использует мобильное устройство, это попытается установить камеру сзади. Он возвращает обещание, которое при разрешении предоставляет поток, который мы можем назначить элементу, который мы создали srcObject. videoЗатем мы устанавливаем для «playsinline»атрибута значение true, что предотвратит переход сафари iOS в полноэкранный режим.
На данный момент мы можем play () видео, но, конечно, этого недостаточно. Нам нужно отрисовывать поток каждый кадр, поэтому мы вызываем tickфункцию для этой цели, а затем scanфункцию для запуска алгоритма.
Определим tickфункцию:
function tick () {
canvasElement.height = video.videoHeight;
canvasElement.width = video.videoWidth;
canvas.drawImage (video, 0, 0, canvasElement.width, canvasElement.height) ;
scanning && requestAnimationFrame (tick) ;
}
Это классический покадровый цикл. Мы устанавливаем высоту и ширину в соответствии canvasElementс размерами файла video. Затем мы рисуем в videoи canvasвнизу мы используем requestAnimationFrameи передаем tickфункцию, чтобы она вызывалась снова, когда браузер рисует следующий кадр. Мы делаем это условно для scanningпеременной true.
Теперь давайте определим функцию сканирования:
function scan () {
try {
qrcode.decode () ;
} catch (e) {
setTimeout (scan, 300) ;
}
}
Это довольно просто. Мы запускаем decodeфункцию из qrcodeбиблиотеки, которая будет искать файл canvasс идентификатором «qr-canvas »и сканировать его содержимое. Если мы ничего не найдем, определенная нами ошибка будет обнаружена, и мы вызовем a setTimeoutдля сканирования через 300 миллисекунд. Вы можете установить это на что-то другое, чтобы посмотреть, что произойдет. Чем дольше вы ждете следующего сканирования, тем медленнее оно будет. Чем меньше вы ждете, тем больше вы будете требовать от устройства пользователя, так что будьте внимательны. Попробуйте найти сладкое место.
Это все, что нам нужно! Теперь давайте попробуем приложение.
Посмотрите на считыватель QR-кода в действии
Вот рабочий проект в codeandbox. Нажмите на кнопку QR и покажите камере QR-код для сканирования. Задержите его на месте на мгновение, и вы получите свой результат. Вы будете удивлены тем, насколько быстро и плавно это происходит.
Вывод
Итак, у нас есть это, ваш собственный считыватель QR-кода для вашего мобильного веб-сайта . Вы также можете использовать это с любой платформы, что делает его очень динамичным и приносит большую пользу вашим клиентам.
QR-коды существуют уже много лет, а код обработки изображений, написанный ZXing, был впервые перенесен на JavaScript почти девять лет назад. Он настолько хорошо выдержал испытание временем, что по-прежнему остается одним из самых быстрых — если не самым быстрым — вариантом для Интернета. Это также бесплатно с открытым исходным кодом, что делает его еще лучше.
Мы надеемся, что вы весело проведете время, придумывая что-то удивительное!
