This is a work-in-progress component library to enable QR-code scanning.
This is based on instascan
, and is designed as a more batteries included version of QRScanner. It has the source of instascan
and fsm-as-promised
bundled inside, as they both have modifications to work with Svelte.
This library tries to use the Barcode Detection API for native performance, but the support is lack-luster to say the least (only really stabilized on android phones). So we also load a backup library, Zxing
, which is a WASM implementation of the QR-code scanning algorithm. ZXing is also a bit slower than the native API, but it's a lot more likely to be supported.
Just open your project and use the command line to install:
yarn add modern-svelte-qr-scanner -D # if you are using yarn
npm install modern-svelte-qr-scanner --save-dev # if you are using npm
Assuming you have a svelte/sveltekit app up and running, just paste in the following example
<script lang="ts">
import QR from "modern-svelte-qr-scanner";
let previewWidth;
let mediaErrorMessage = "";
function onQRScan(event: CustomEvent) {
alert(event.detail.qrContent);
}
</script>
<div class="qr-container">
<div class="qr-wrapper" bind:clientWidth={w}>
<QR
on:scan={onQRScan}
previewWidth_px={w}
previewHeight_px={w}
bind:mediaErrorMessage
>
<div slot="loading" class="loading">
<span>Loading Animation, but text</span>
</div>
<div slot="failedToInitialize" class="failed-to-initialize">
Failed to initialize camera.<br>
Error: {mediaErrorMessage}
</div>
</QR>
</div>
</div>
Slot Name | Description |
---|---|
loading | Displayed while the cameras are initializing. |
failedToInitialize | Displayed when the current camera fails to start. |
Prop | Type | Default | Read-only | Description |
---|---|---|---|---|
scannerInitialized | boolean | false | x | Whether the QR code scanner has loaded yet. |
backgroundScan | boolean | true | Whether to actively scan when the tab is not active. When false, this reduces CPU usage when the tab is not active. | |
refractoryPeriod | number | 5000 | The period, in milliseconds, before the same QR code will be recognized in succession. Default 5000 (5 seconds). | |
scanPeriod | number | 1 | The period, in rendered frames, between scans. A lower scan period increases CPU usage but makes scan response faster. Default 1 (i.e. analyze every frame). | |
previewWidth_px | number | 800 | The width of the video preview. Bind this value to the width of the parent to make the scanner responsive. | |
previewHeight_px | number | 450 | The height of the video preview. Bind this value to the width of the parent / wanted_aspect_ratio to make the scanner responsive. | |
mediaErrorMessage | string | "" | x | Human readable error message, updates when there is a new error. Useful displayed in the failedToInitialize slot. |
smallModalXThreshold | number | 400 | The width threshold to move the camera selection from a traditional center of screen modal, to being pined to the top. |
Event ID | Description | Data Structure |
---|---|---|
scan | Emitted when a QR code is scanned. | {"qrContent": "x"} |
Once you've created a project and installed dependencies with yarn
, start a development server:
yarn dev
# or start the server and open the app in a new browser tab
yarn dev -- --open
To create a production version of the library, simply run the package
script:
yarn package
svelte-select
manually with a fresh project.fix:
yarn add svelte-select -D # if you are using yarn
npm install svelte-select --save-dev # if you are using npm
fix: Add them to the your svelte.config.js
.
const config = {
...,
kit: {
...,
vite: {
...,
optimizeDeps: {
include: [
"events",
"uuid",
"visibilityjs",
"stampit",
"lodash",
]
},
}
},
};