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>

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

1. svelte-select not being included For some reason, sometimes you might have to install 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

2. Library's requiring bundling When using SvelteKit, you must include some of the older library's in the optimizeDeps option.

fix: Add them to the your svelte.config.js.

const config = {
  ...,
  kit: {
     ...,
     vite: {
       ...,
      optimizeDeps: {
        include: [
          "events",
          "uuid",
          "visibilityjs",
          "stampit",
          "lodash",
        ]
      },
     }
  },
};