Adding a QR code scanner to a web app
Install the zxing-js JavaScript library,
@zxing/library
.<script src="https://cdn.jsdelivr.net/npm/@zxing/library@0.19.1/umd/index.min.js" integrity="sha256-xYN+SFijd1FzurCe425gUlRceIDJ10UuL0ZHcMbmQs4=" crossorigin="anonymous" ></script>
Add a button to activate QR code scanner and a
<video>
tag.<button id="startButton">Scan QR code</button> <video id="video" width="300" height="200" style="border: 1px solid gray" ></video>
When button is clicked, create call the
decodeFromInputVideoDevice
function:const codeReader = new ZXing.BrowserQRCodeReader() const startButton = document.getElementById('startButton') startButton.addEventListener('click', async () => { const result = await codeReader.decodeFromInputVideoDevice( undefined, 'video' ) console.log(result) })
For other examples, see the zxing-js demos.
Other ways to import zxing-js
ESM
const BrowserQRCodeReader = await import(
'https://cdn.jsdelivr.net/npm/@zxing/library@0.19.1/+esm'
)