svelte 및 Html5Qrcode를 사용한 간단한 qr/바코드 스캔

모바일을 사용하여 qr 및 바코드를 스캔하고 싶었지만 카메라 액세스 권한을 얻기 위해 완전한 기본 앱을 작성하고 싶지 않았습니까?

모바일 브라우저를 사용하세요! Html5는 이제 그것을 지원합니다.

모바일 브라우저에서 demo을 엽니다. 크롬, 사파리, 파이어폭스 모두 저에게 효과적이었습니다!

솔직히, 나는 그것이 얼마나 쉬운 지 믿을 수 없었습니다! 코드를 확인하십시오.

<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 lib의 작성자에게 특별한 감사를 드립니다.

quagga에 대한 선외 가작 . 더 이상 적극적으로 유지 관리되지 않지만 활성 포크가 있습니다quagga2.

아사프! 읽어주셔서 감사합니다🥰

[업데이트]: 데모는 pwa가 아니지만, 자신의 프로젝트에 대한 pwa를 만들기로 결정하면 스캐너 라이브러리와 카메라 액세스가 작동합니다.