Snippet: Sample Svelte QR scanner component (Camera)

[trasherdk]

<script>
    import { Html5Qrcode } from 'html5-qrcode'
    import { onMount } from 'svelte'

    let scanning = false

    let html5Qrcode

    onMount(init)

    function init() {
        html5Qrcode = new Html5Qrcode('reader')
    }

    function start() {
        html5Qrcode.start(
            { facingMode: 'environment' },
            {
                fps: 10,
                qrbox: { width: 250, height: 250 },
            },
            onScanSuccess,
            onScanFailure
        )
        scanning = true
    }

    async function stop() {
        await html5Qrcode.stop()
        scanning = false
    }

    function onScanSuccess(decodedText, decodedResult) {
        alert(`Code matched = ${decodedText}`)
        console.log(decodedResult)
    }

    function onScanFailure(error) {
        console.warn(`Code scan error = ${error}`)
    }
</script>

<style>
    main {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }
    reader {
        width: 100%;
        min-height: 500px;
        background-color: black;
    }
</style>

<main>
    <reader id="reader"/>
    {#if scanning}
        <button on:click={stop}>stop</button>
    {:else}
        <button on:click={start}>start</button>
    {/if}
</main>

Source: https://github.com/mebjas/html5-qrcode/issues/354#issuecomment-1119490569 Fork: trasherdk/qrcode-scanner

[trasherdk]

And another cersion

<div id="reader"></div>

<script>
import { onDestroy, onMount } from 'svelte'
import {Html5Qrcode as Scanner, Html5QrcodeSupportedFormats as ScannerFormats} from "html5-qrcode"

// set camera label you want here if you have more than one
const docCameraLabel = 'blah blah'

// expose barcode data to other components
let barcodeData = ''

async function getQRData (scanner, deviceID) {

  return new Promise((resolve, reject) => {
    return scanner.start(deviceID, {
      fps: 10,
    }, (decodedText, decodedResult) => {
      resolve(decodedText)
    }, (msg, err) => {
      if (msg.indexOf("NotFoundException") >= 0) {
        return
      }
      reject(err)
    })  
  })

}

async function getCamera () {
  const scanner = new Scanner("reader", {
    formatsToSupport: [
      ScannerFormats.QR_CODE,
      ScannerFormats.PDF_417,
    ]
  }, false);
  try {
    const videoInputDevices = await Scanner.getCameras()
    for (let dev of videoInputDevices) {

      // you can log the device label here to see what to use above,
      // or just use the first one, etc.
      // console.log(dev.label)

      if (dev.label === docCameraLabel) {
        const data = await getQRData(scanner, dev.id)
        scanner.stop()
        return data
      }
    }
  } catch (err) {
    scanner.stop()
    throw err
  }
}

onMount(() => {
  getCamera().then(data => {
    console.log(data)
    barcodeData = data
  }, console.error)
})

onDestroy(() => {
  scanner.stop()
})

</script>

<style>
</style>