Простое сканирование qr/штрих-кодов с помощью svelte и Html5Qrcode

Вы когда-нибудь хотели сканировать qr- и штрих-коды с помощью своего мобильного телефона, но не хотели писать полноценное нативное приложение только для того, чтобы получить доступ к камере?

Используйте свой мобильный браузер! Html5 теперь поддерживает это.

Откройте демо-версию в мобильном браузере – chrome, safari, firefox – все они работали для меня!

Честно говоря, я не мог поверить, насколько это просто! Посмотрите код:

<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>

Вход в полноэкранный режим Выйти из полноэкранного режима

Отдельное спасибо автору замечательной библиотеки Html5Qrcode.

Почетное упоминание quagga. Больше активно не поддерживается, но есть активный форк quagga2.

Asaf! Спасибо, что прочитали🥰

[обновление]: демо не является pwa, но либа сканера и доступ к камере будут работать, если вы решите сделать pwa для своего проекта.

Простое сканирование qr/штрих-кодов с помощью svelte и Html5Qrcode

Рекомендуем почитать: