Barcode detection in a Web Worker using Comlink

Paul Kinlan October 2 2018

Available in: English(Original), Deutsch, Español, Français, 日本語, मानक हिन्दी, tiếng Việt, தமிழ், bahasa Indonesia

Я большой поклонник QRCodes, они очень простой и опрятный способ обмена данными между реальным миром и цифровым миром. В течение нескольких лет у меня был небольшой побочный проект под названием QRSnapper & mdash; ну, у него было несколько имен, но это тот, который я поселил в & mdash; который использует API getUserMedia для получения живых данных с камеры пользователя, чтобы он мог сканировать QR-коды в ближайшем реальном времени.

Целью приложения было поддерживать 60 кадров в секунду в пользовательском интерфейсе и почти мгновенное обнаружение QR-кода, это означало, что мне пришлось ввести код обнаружения в веб-рабочего (довольно стандартный материал). В этом посте я просто хотел быстро поделиться тем, как я использовал комлинк, чтобы значительно упростить логику в Рабочем.

qrclient.js

import * as Comlink from './comlink.js';

const proxy = Comlink.proxy(new Worker('/scripts/qrworker.js')); 

export const decode = async function (context) {
  try {
    let canvas = context.canvas;
    let width = canvas.width;
    let height = canvas.height;
    let imageData = context.getImageData(0, 0, width, height);
    return await proxy.detectUrl(width, height, imageData);
  } catch (err) {
    console.log(err);
  }
};

qrworker.js (веб-работник)

import * as Comlink from './comlink.js';
import {qrcode} from './qrcode.js';

// Use the native API's
let nativeDetector = async (width, height, imageData) => {
  try {
    let barcodeDetector = new BarcodeDetector();
    let barcodes = await barcodeDetector.detect(imageData);
    // return the first barcode.
    if (barcodes.length > 0) {
      return barcodes[0].rawValue;
    }
  } catch(err) {
    detector = workerDetector;
  }
};

// Use the polyfil
let workerDetector = async (width, height, imageData) => {
  try {
    return qrcode.decode(width, height, imageData);
  } catch (err) {
    // the library throws an excpetion when there are no qrcodes.
    return;
  }
}

let detectUrl = async (width, height, imageData) => {
  return detector(width, height, imageData);
};

let detector = ('BarcodeDetector' in self) ? nativeDetector : workerDetector;
// Expose the API to the client pages.
Comlink.expose({detectUrl}, self);

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

Читать полностью.