Прочитайте qrcode с веб-страницы с камерой.

Im ищет решение для чтения QRCode на веб-странице.

допустим, я сгенерировал с PHP и некоторой библиотекой (zxing или что-то еще) QRCode и напечатал его на листе бумаги, хорошо?

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

есть что-то там, чтобы справиться с этим без необходимости использовать Android/iOS приложение? Это может быть другой тип 2D штрих-кода, а не только QRCode.

TY

9
camera javascript qr-code

4 ответов

Я когда-то работал с Lazarsoft по jsqrcode

он отлично работал в браузере, и я знаю, что он сделал демо для тестирования на телефоне с камерой.

вот его хранилище:https://github.com/LazarSoft/jsqrcode

для поддержки камеры: используйте API CamCanvas:http://www.taboca.com/p/camcanvas/

7

для меня все тесты с LazarSoft не удалось на всех устройствах (он не мог сосредоточиться правильно). Поэтому я предлагаю другое решение. Ему нужно приложение, но оно существует, поэтому вам не нужно писать конкретные приложения для разных устройств.

используйте приложение сканера штрих-кодов по ZXing! Да, это возможно без обращения к серверу, вопреки тому, что почти любой источник в сети говорит вам. Это приложение оказалось очень надежным в различных условия (громкость+ для включения света), где другие сканеры не удалось. https://play.google.com/store/apps/details?id=com.google.zxing.client.android&hl=en

ограничения:

  1. приложение сканера штрих-кодов и его механизм обратного вызова в настоящее время работают только на android и ios (другие запланированы).

  2. очевидно, что решение работает только на устройствах, которые имеют камеры и приложение установленный.

устранение:

  1. спусковой механизм: сканер штрих-кода открывается при открытии следующего URI:http://zxing.appspot.com/scan?...

  2. обратный звонок: С ret=... можно указать URI обратного вызова. Это сайт с кодом, который обрабатывает сканирование, можно использовать тот же сайт, который запустил сканер, но это будет немного сложнее и не объяснено здесь (по-прежнему не требуется туда и обратно на сервер). С {CODE} указывается, куда вставляются отсканированные данные. Обратите внимание, что URI обратного вызова должен быть экранирован.

    например:

    http://zxing.appspot.com/scan?ret=http%3A%2F%2Ffoo.com%2Fscan.htm%23%7BCODE%7D (неэкранированный: ...ret=http://foo.com/scan.htm#{CODE})

    важно: вы должны использовать якорь # получить код, в противном случае решение не будет работать (из-за кэширования, см. ниже).

  3. кэш Манифест: создайте манифест кэша, добавьте scan.htm к кэшированным записям и добавьте манифест на сайт, который открывает сканер (<html cache="foo.appcache">). Содержимое файла:

    CACHE MANIFEST

CACHE:
scan.htm

NETWORK:
*

1

вы можете читать QR-коды с помощью instascan.

копировать instascan.минута.js со страницы релизы и загрузить с:

<script type="text/javascript" src="instascan.min.js"></script>

пример кода для чтения QR-кода.

<!DOCTYPE html>
<html>
  <head>
    <title>QR Code Reader using Instascan</title>
    <script type="text/javascript" src="instascan.min.js"></script>
  </head>
  <body>
    <video id="preview"></video>
    <script type="text/javascript">
      let scanner = new Instascan.Scanner({ video: document.getElementById('preview') });
      scanner.addListener('scan', function (content) {
        console.log(content);
      });
      Instascan.Camera.getCameras().then(function (cameras) {
        if (cameras.length > 0) {
          scanner.start(cameras[0]);
        } else {
          console.error('No cameras found.');
        }
      }).catch(function (e) {
        console.error(e);
      });
    </script>
  </body>
</html>
1

Instascan (https://github.com/schmich/instascan) недавно был опубликован и решить многие из недостатков Лазарсофт и решение обратного вызова @maraca. Он использует HTML5 для камеры и может быть развернут в автономном режиме.

0