Hello.

I am Paul Kinlan.

A Developer Advocate for Chrome and the Open Web at Google.

Barcode detection in a Web Worker using Comlink

Paul Kinlan

私はQRコードの大ファンです。実世界とデジタル世界の間でデータを交換するための非常にシンプルできれいな方法です。数年前から、私はQRSnapperと呼ばれる小さなプロジェクトを持っていました。まあそれはいくつかの名前を持っていますが、これは私が解決したものです—これは getUserMedia APIを使用してユーザのカメラからライブデータを取得し、ほぼリアルタイムでQRコードをスキャンすることができます。 このアプリの目標は、UIで60fpsを維持し、QRコードをすぐに検出できるようにすることでした。これは、検出コードをWebワーカー(かなり標準的なもの)に入れなければならないことを意味しました。この記事では、comlinkを使ってワーカーのロジックを大幅に単純化する方法を簡単に共有したいと思っていました。 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.

Read More