Barcode detection using Shape Detection API

На другой неделе я говорил о Обнаружение лиц через API-интерфейс формы, который находится на канале Канала в Chrome. Теперь обнаружение штрих-кода в Chrome Canary тоже (Miguel - мой герой;)

Штрих-коды огромны! они находятся почти на каждом продукте, который мы покупаем. Даже очень злокачественный QRCode является огромным за пределами США и Европы. Штрих-код и QR-код обеспечивают простой способ для вашего физического мира и цифрового мира путем переноса небольших объемов данных между средой и вами. Это, возможно, не было огромным количеством использования в эпоху рабочего стола, в эпоху мобильных это критически важно. Вам не нужно устанавливать приложение, чтобы получить доступ к этим данным.

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

API обнаружения штрих-кода построен на API обнаружения формы, который в настоящее время находится в [WICG](https://github.com/ wicg /), что означает, что он находится на стадии инкубации и эксперимента. На Android вы можете обнаружить несколько различных 1D и 2D штрих-кодов:

1D barcodes: EAN-13, EAN-8, UPC-A, UPC-E, Code-39, Code-93, Code-128, ITF, Codabar

2D barcodes: QR Code, Data Matrix, PDF-417, AZTEC

Более того:

It automatically parses QR Codes, Data Matrix, PDF-417, and Aztec values, for the following supported formats:

  • URL
  • Contact information (VCARD, etc.)
  • Calendar event
  • Email
  • Phone
  • SMS
  • ISBN
  • WiFi
  • Geo-location (latitude and longitude)
  • AAMVA driver license/ID

API обнаружения формы теперь находится в Chrome Canary (M57), и вам нужно включить его через chrome: // flags / # enable-experimental-web-platform-features

Как и при обнаружении лица, API относительно прост в использовании. Вы вызываете API через detect в API BarcodeDetector, и вы возвращаете обещание, которое переписывается в список декодированных штрих-кодов.

var barcodeDetector = new BarcodeDetector();
barcodeDetector.detect(image)
  .then(barcodes => {
    barcodes.forEach(barcode => console.log(barcodes.rawValue))
  })
  .catch((e) => {
    console.error("Boo, BarcodeDetection failed: " + e);
  });

Он принимает объект изображения (либо CanvasImageSource, Blob, ImageData, либо <img>), а затем передает это базовому системному API, и он вернет массив объектов DetectedBarcode, которые реализуют DetectedObject, который по существу дает вам границы каждой грани изображения.

Я также интегрировал в мой приложение сканера QRCode, но я жду исправить на землю, что позволяет мне перейти на холст или [ImageData](https://bugs.chromium.org/ p / chromium / issues / detail? id = 670975) в API.

Интересно то, что, поскольку я уже создал это приложение в простой JS, используя LazarSoft jsqrcode API, я могу обнаружить доступность собственного сканирования штрих-кодов, и если его нет то я не вернусь к чистой реализации JS.

Вот несколько видеороликов в действии:

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

Я думаю, что это очень привлекательное дополнение к веб-платформе, и я очень рад, что это привыкает.

About Me: Paul Kinlan

I lead the Chrome Developer Relations team at Google.

We want people to have the best experience possible on the web without having to install a native app or produce content in a walled garden.

Our team tries to make it easier for developers to build on the web by supporting every Chrome release, creating great content to support developers on web.dev, contributing to MDN, helping to improve browser compatibility, and some of the best developer tools like Lighthouse, Workbox, Squoosh to name just a few.