diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/routes/(app)/scan/+page.svelte | 44 |
1 files changed, 14 insertions, 30 deletions
diff --git a/src/routes/(app)/scan/+page.svelte b/src/routes/(app)/scan/+page.svelte index bcdecf1a..8c5ea0a5 100644 --- a/src/routes/(app)/scan/+page.svelte +++ b/src/routes/(app)/scan/+page.svelte @@ -1,41 +1,19 @@ <script> import { Icon } from '$comp'; - // import QrScanner from 'qr-scanner'; - - import { Html5QrcodeScanner } from 'html5-qrcode'; + import QrScanner from 'qr-scanner'; import { onMount, onDestroy } from 'svelte'; import { back } from '$lib/utils'; import { goto } from '$app/navigation'; let scanner, vid; onMount(() => { - // scanner = new QrScanner(vid, ({ data }) => scanner.stop() || goto(`/send/${encodeURI(data)}`), { - // highlightScanRegion: true, - // highlightCodeOutline: true - // }); - // scanner.start(); - - let html5QrcodeScanner = new Html5QrcodeScanner( - 'reader', - { fps: 10, qrbox: { width: 250, height: 250 } }, - /* verbose= */ false - ); - html5QrcodeScanner.render(onScanSuccess, onScanFailure); + scanner = new QrScanner(vid, ({ data }) => scanner.stop() || goto(`/send/${encodeURI(data)}`), { + highlightScanRegion: true, + highlightCodeOutline: true + }); + scanner.start(); }); -let yeah; - function onScanSuccess(decodedText, decodedResult) { - // handle the scanned code as you like, for example: - console.log(`Code matched = ${decodedText}`, decodedResult); - yeah = true; - } - - function onScanFailure(error) { - // handle scan failure, usually better to ignore and keep scanning. - // for example: - //console.warn(`Code scan error = ${error}`); - } - onDestroy(() => scanner?.stop()); </script> @@ -43,8 +21,14 @@ let yeah; <Icon icon="arrow-left" style="w-10" /> </button> -{#if yeah}TRUE{/if} -<div id="reader" width="600px"></div> +<div class="flex w-full mb-4 px-4"> + <div class="bg-black mx-auto rounded-3xl"> + <video + bind:this={vid} + class="border-4 rounded-3xl border-black md:max-w-[600px] !max-h-[80vh] !min-w-[300px]" + /> + </div> +</div> <div class="flex w-full mb-4"> <button class="mx-auto border rounded-full px-6 py-2 font-bold hover:opacity-80" on:click={back}> |