Skip to content
Snippets Groups Projects
Commit 0987064d authored by Reiter, Christoph's avatar Reiter, Christoph :snake:
Browse files

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.
parent f85aad9b
Branches
No related tags found
No related merge requests found
Pipeline #126597 failed
...@@ -46,10 +46,6 @@ after loaded. This attribute is also used to stop the QR code reader or if you d ...@@ -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`. - `'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. - `'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 ## Local development
```bash ```bash
...@@ -72,6 +68,13 @@ yarn run build ...@@ -72,6 +68,13 @@ yarn run build
Jump to <http://localhost:8002> and you should get a demo page. 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 ## Camera for local development
You can use your desktop as a camera, to test the qr code reader You can use your desktop as a camera, to test the qr code reader
......
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
"@open-wc/scoped-elements": "^2.1.0", "@open-wc/scoped-elements": "^2.1.0",
"async-mutex": "^0.3.0", "async-mutex": "^0.3.0",
"lit": "^2.0.0", "lit": "^2.0.0",
"qr-scanner": "^1.2.0 <=1.3.0" "qr-scanner": "^1.4.1"
}, },
"scripts": { "scripts": {
"clean": "rm dist/*", "clean": "rm dist/*",
......
...@@ -67,10 +67,6 @@ export default async () => { ...@@ -67,10 +67,6 @@ export default async () => {
src: await getPackagePath('@dbp-toolkit/common', 'assets/icons/*.svg'), src: await getPackagePath('@dbp-toolkit/common', 'assets/icons/*.svg'),
dest: 'dist/' + (await getDistPath('@dbp-toolkit/common', 'icons')), 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' process.env.ROLLUP_WATCH === 'true'
......
...@@ -5,9 +5,7 @@ import * as commonStyles from '@dbp-toolkit/common/styles'; ...@@ -5,9 +5,7 @@ import * as commonStyles from '@dbp-toolkit/common/styles';
import {ScopedElementsMixin} from '@open-wc/scoped-elements'; import {ScopedElementsMixin} from '@open-wc/scoped-elements';
import {Icon, MiniSpinner} from '@dbp-toolkit/common'; import {Icon, MiniSpinner} from '@dbp-toolkit/common';
import {classMap} from 'lit/directives/class-map.js'; import {classMap} from 'lit/directives/class-map.js';
import * as commonUtils from '@dbp-toolkit/common/utils';
import {Mutex} from 'async-mutex'; import {Mutex} from 'async-mutex';
import {name as pkgName} from './../package.json';
import {getIconSVGURL} from '@dbp-toolkit/common'; import {getIconSVGURL} from '@dbp-toolkit/common';
/** /**
...@@ -128,22 +126,17 @@ class QRScanner { ...@@ -128,22 +126,17 @@ class QRScanner {
async scan(canvas, x, y, width, height) { async scan(canvas, x, y, width, height) {
if (this._scanner === null) { if (this._scanner === null) {
this._scanner = (await import('qr-scanner')).default; this._scanner = (await import('qr-scanner')).default;
this._scanner.WORKER_PATH = commonUtils.getAssetURL(
pkgName,
'qr-scanner-worker.min.js'
);
} }
if (this._engine === null) { if (this._engine === null) {
this._engine = await this._scanner.createQrEngine(this._scanner.WORKER_PATH); this._engine = await this._scanner.createQrEngine();
} }
try { try {
return { return {
data: await this._scanner.scanImage( data: await this._scanner.scanImage(canvas, {
canvas, scanRegion: {x: x, y: y, width: width, height: height},
{x: x, y: y, width: width, height: height}, qrEngine: this._engine,
this._engine, canvas: this._canvas,
this._canvas }),
),
}; };
} catch (e) { } catch (e) {
return null; return null;
...@@ -315,17 +308,18 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) { ...@@ -315,17 +308,18 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
lastCode = code; lastCode = code;
if (code) { if (code) {
if (lastSentData !== code.data) { let currentData = code.data.data;
this._outputData = code.data; if (lastSentData !== currentData) {
this._outputData = currentData;
this.dispatchEvent( this.dispatchEvent(
new CustomEvent('code-detected', { new CustomEvent('code-detected', {
bubbles: true, bubbles: true,
composed: true, composed: true,
detail: {code: code.data}, detail: {code: currentData},
}) })
); );
} }
lastSentData = code.data; lastSentData = currentData;
} else { } else {
this._outputData = null; this._outputData = null;
lastSentData = null; lastSentData = null;
...@@ -333,7 +327,7 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) { ...@@ -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 //draw mask
canvas.beginPath(); canvas.beginPath();
......
...@@ -2064,6 +2064,11 @@ ...@@ -2064,6 +2064,11 @@
resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301" resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301"
integrity sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw== 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": "@types/parse-json@^4.0.0":
version "4.0.0" version "4.0.0"
resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0" resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
...@@ -7041,10 +7046,12 @@ qjobs@^1.2.0: ...@@ -7041,10 +7046,12 @@ qjobs@^1.2.0:
resolved "https://registry.yarnpkg.com/qjobs/-/qjobs-1.2.0.tgz#c45e9c61800bd087ef88d7e256423bdd49e5d071" resolved "https://registry.yarnpkg.com/qjobs/-/qjobs-1.2.0.tgz#c45e9c61800bd087ef88d7e256423bdd49e5d071"
integrity sha512-8YOJEHtxpySA3fFDyCRxA+UUV+fA+rTWnuWvylOK/NCjhY+b4ocCtmu8TtsWb+mYeU+GCHf/S66KZF/AsteKHg== integrity sha512-8YOJEHtxpySA3fFDyCRxA+UUV+fA+rTWnuWvylOK/NCjhY+b4ocCtmu8TtsWb+mYeU+GCHf/S66KZF/AsteKHg==
"qr-scanner@^1.2.0 <=1.3.0": qr-scanner@^1.4.1:
version "1.3.0" version "1.4.1"
resolved "https://registry.yarnpkg.com/qr-scanner/-/qr-scanner-1.3.0.tgz#5a7cc7ae8edefc3ad0053a5473f591fb113f91ff" resolved "https://registry.yarnpkg.com/qr-scanner/-/qr-scanner-1.4.1.tgz#31a1bf7f9927f0eb1e3c0909fe66fec97a3b3701"
integrity sha512-xNXlZaKOW0nihHaV7KPrMYJHNp1YX9z+NTqFrbNoibGIzQpPLeIocP9187lxihU/EbgplMm7sQ4hI9jG9+zYHg== integrity sha512-xiR90NONHTfTwaFgW/ihlqjGMIZg6ExHDOvGQRba1TvV+WVw7GoDArIOt21e+RO+9WiO4AJJq+mwc5f4BnGH3w==
dependencies:
"@types/offscreencanvas" "^2019.6.4"
qs@6.10.3, qs@^6.9.4: qs@6.10.3, qs@^6.9.4:
version "6.10.3" version "6.10.3"
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment