Вы когда-нибудь хотели сканировать 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 для своего проекта.