From 0987064d87ea2f5adfa2f82c9d339819eec7a1e9 Mon Sep 17 00:00:00 2001
From: Christoph Reiter <reiter.christoph@gmail.com>
Date: Thu, 19 May 2022 11:32:25 +0200
Subject: [PATCH] qr-code-scanner: port to new qr-scanner v1.4
Multiple changes:
The worker can now be auto-bundled via rollup and no longer has to be passed manually.
This is handled via a js script file which builds a blob containing bundled code.
This requires some CSP exceptions in the target applications, so mention that in the README.
scanImage() now takes an option object and defaults to returning more information, so
handle both changes (returnDetailedScanResult now defaults to true)
Component users can now drop their worker copying code and need to adjust their CSP.
---
packages/qr-code-scanner/README.md | 11 ++++---
packages/qr-code-scanner/package.json | 2 +-
packages/qr-code-scanner/rollup.config.js | 4 ---
.../qr-code-scanner/src/qr-code-scanner.js | 30 ++++++++-----------
yarn.lock | 15 +++++++---
5 files changed, 31 insertions(+), 31 deletions(-)
diff --git a/packages/qr-code-scanner/README.md b/packages/qr-code-scanner/README.md
index dc633f3e..6508dcc4 100644
--- a/packages/qr-code-scanner/README.md
+++ b/packages/qr-code-scanner/README.md
@@ -46,10 +46,6 @@ after loaded. This attribute is also used to stop the QR code reader or if you d
- `'code-detected'`: Outgoing Event which is fired if a QR code is detected. The data of the detected QR code is in `event.detail`.
- `'scan-started`: Fired after the first image is drawn. Can be used to scrolling or other layout dependent tasks.
-## Assets
-
-- `qr-scanner/qr-scanner-worker.*` -> `dist/local/@dbp-toolkit/qr-code-scanner/`
-
## Local development
```bash
@@ -72,6 +68,13 @@ yarn run build
Jump to <http://localhost:8002> and you should get a demo page.
+## Content Security Policy
+
+The QR code detection worker is loaded via `blob:`, so your CSP needs to allow
+`worker-src blob:`. Since Safari does not support this you also have to set
+`child-src blob:`. Since `child-src` also affects other things make sure this
+doesn't break things.
+
## Camera for local development
You can use your desktop as a camera, to test the qr code reader
diff --git a/packages/qr-code-scanner/package.json b/packages/qr-code-scanner/package.json
index c3d0dee0..66b51b1c 100644
--- a/packages/qr-code-scanner/package.json
+++ b/packages/qr-code-scanner/package.json
@@ -41,7 +41,7 @@
"@open-wc/scoped-elements": "^2.1.0",
"async-mutex": "^0.3.0",
"lit": "^2.0.0",
- "qr-scanner": "^1.2.0 <=1.3.0"
+ "qr-scanner": "^1.4.1"
},
"scripts": {
"clean": "rm dist/*",
diff --git a/packages/qr-code-scanner/rollup.config.js b/packages/qr-code-scanner/rollup.config.js
index ba20556c..c32a0fcc 100644
--- a/packages/qr-code-scanner/rollup.config.js
+++ b/packages/qr-code-scanner/rollup.config.js
@@ -67,10 +67,6 @@ export default async () => {
src: await getPackagePath('@dbp-toolkit/common', 'assets/icons/*.svg'),
dest: 'dist/' + (await getDistPath('@dbp-toolkit/common', 'icons')),
},
- {
- src: await getPackagePath('qr-scanner', 'qr-scanner-worker.*'),
- dest: 'dist/' + (await getDistPath(pkg.name)),
- },
],
}),
process.env.ROLLUP_WATCH === 'true'
diff --git a/packages/qr-code-scanner/src/qr-code-scanner.js b/packages/qr-code-scanner/src/qr-code-scanner.js
index 31b82e2f..be3080b5 100644
--- a/packages/qr-code-scanner/src/qr-code-scanner.js
+++ b/packages/qr-code-scanner/src/qr-code-scanner.js
@@ -5,9 +5,7 @@ import * as commonStyles from '@dbp-toolkit/common/styles';
import {ScopedElementsMixin} from '@open-wc/scoped-elements';
import {Icon, MiniSpinner} from '@dbp-toolkit/common';
import {classMap} from 'lit/directives/class-map.js';
-import * as commonUtils from '@dbp-toolkit/common/utils';
import {Mutex} from 'async-mutex';
-import {name as pkgName} from './../package.json';
import {getIconSVGURL} from '@dbp-toolkit/common';
/**
@@ -128,22 +126,17 @@ class QRScanner {
async scan(canvas, x, y, width, height) {
if (this._scanner === null) {
this._scanner = (await import('qr-scanner')).default;
- this._scanner.WORKER_PATH = commonUtils.getAssetURL(
- pkgName,
- 'qr-scanner-worker.min.js'
- );
}
if (this._engine === null) {
- this._engine = await this._scanner.createQrEngine(this._scanner.WORKER_PATH);
+ this._engine = await this._scanner.createQrEngine();
}
try {
return {
- data: await this._scanner.scanImage(
- canvas,
- {x: x, y: y, width: width, height: height},
- this._engine,
- this._canvas
- ),
+ data: await this._scanner.scanImage(canvas, {
+ scanRegion: {x: x, y: y, width: width, height: height},
+ qrEngine: this._engine,
+ canvas: this._canvas,
+ }),
};
} catch (e) {
return null;
@@ -315,17 +308,18 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
lastCode = code;
if (code) {
- if (lastSentData !== code.data) {
- this._outputData = code.data;
+ let currentData = code.data.data;
+ if (lastSentData !== currentData) {
+ this._outputData = currentData;
this.dispatchEvent(
new CustomEvent('code-detected', {
bubbles: true,
composed: true,
- detail: {code: code.data},
+ detail: {code: currentData},
})
);
}
- lastSentData = code.data;
+ lastSentData = currentData;
} else {
this._outputData = null;
lastSentData = null;
@@ -333,7 +327,7 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
});
}
- let matched = lastCode ? lastCode.data.match(this.matchRegex) !== null : false;
+ let matched = lastCode ? lastCode.data.data.match(this.matchRegex) !== null : false;
//draw mask
canvas.beginPath();
diff --git a/yarn.lock b/yarn.lock
index 9ad70e1f..585a0e9a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2064,6 +2064,11 @@
resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301"
integrity sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==
+"@types/offscreencanvas@^2019.6.4":
+ version "2019.6.4"
+ resolved "https://registry.yarnpkg.com/@types/offscreencanvas/-/offscreencanvas-2019.6.4.tgz#64f6d120b53925028299c744fcdd32d2cd525963"
+ integrity sha512-u8SAgdZ8ROtkTF+mfZGOscl0or6BSj9A4g37e6nvxDc+YB/oDut0wHkK2PBBiC2bNR8TS0CPV+1gAk4fNisr1Q==
+
"@types/parse-json@^4.0.0":
version "4.0.0"
resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
@@ -7041,10 +7046,12 @@ qjobs@^1.2.0:
resolved "https://registry.yarnpkg.com/qjobs/-/qjobs-1.2.0.tgz#c45e9c61800bd087ef88d7e256423bdd49e5d071"
integrity sha512-8YOJEHtxpySA3fFDyCRxA+UUV+fA+rTWnuWvylOK/NCjhY+b4ocCtmu8TtsWb+mYeU+GCHf/S66KZF/AsteKHg==
-"qr-scanner@^1.2.0 <=1.3.0":
- version "1.3.0"
- resolved "https://registry.yarnpkg.com/qr-scanner/-/qr-scanner-1.3.0.tgz#5a7cc7ae8edefc3ad0053a5473f591fb113f91ff"
- integrity sha512-xNXlZaKOW0nihHaV7KPrMYJHNp1YX9z+NTqFrbNoibGIzQpPLeIocP9187lxihU/EbgplMm7sQ4hI9jG9+zYHg==
+qr-scanner@^1.4.1:
+ version "1.4.1"
+ resolved "https://registry.yarnpkg.com/qr-scanner/-/qr-scanner-1.4.1.tgz#31a1bf7f9927f0eb1e3c0909fe66fec97a3b3701"
+ integrity sha512-xiR90NONHTfTwaFgW/ihlqjGMIZg6ExHDOvGQRba1TvV+WVw7GoDArIOt21e+RO+9WiO4AJJq+mwc5f4BnGH3w==
+ dependencies:
+ "@types/offscreencanvas" "^2019.6.4"
qs@6.10.3, qs@^6.9.4:
version "6.10.3"
--
GitLab