Published
Edited
Jul 11, 2021
1 star
md`# QR Scan`
html `
<video id="video" muted playsinline width="${400}" height="${300}" style="border: 1px solid #aaa"></video>
<p id="result"></p>
<div id="qr" style="width:${400}px;height:${300}px;" ></div>
`
function decodeOnce(codeReader, selectedDeviceId) {
codeReader.decodeFromInputVideoDevice(selectedDeviceId, 'video').then((result) => {
console.log(result)
document.getElementById('result').textContent = result.text
}).catch((err) => {
console.error(err)
document.getElementById('result').textContent = err
})
}
function decodeContinuously(codeReader, selectedDeviceId) {
codeReader.decodeFromInputVideoDeviceContinuously(selectedDeviceId, 'video', (result, err) => {
if (result) {
// properly decoded qr code
console.log('Found QR code!', result)
document.getElementById('result').textContent = result.text
}
if (err) {
// As long as this error belongs into one of the following categories
// the code reader is going to continue as excepted. Any other error
// will stop the decoding loop.
//
// Excepted Exceptions:
//
// - NotFoundException
// - ChecksumException
// - FormatException
if (err instanceof ZXing.NotFoundException) {
console.log('No QR code found.')
}
if (err instanceof ZXing.ChecksumException) {
console.log('A code was found, but it\'s read value was not valid.')
}
if (err instanceof ZXing.FormatException) {
console.log('A code was found, but it was in a invalid format.')
}
}
})
}
{
//let selectedDeviceId;
const codeReader = new ZXing.BrowserQRCodeReader();
const videoInputDevices = await ZXing.BrowserCodeReader.listVideoInputDevices();
// choose your media device (webcam, frontal camera, back camera, etc.)
const selectedDeviceId = videoInputDevices[0].deviceId;
console.log(`Started decode from camera with id ${selectedDeviceId}`);
const previewElem = document.querySelector('#video');
// you can use the controls to stop() the scan or switchTorch() if available
const controls = await codeReader.decodeFromVideoDevice(selectedDeviceId, previewElem, (result, error, controls) => {
// use the result and error values to choose your actions
// you can also use controls API in this scope like the controls
// returned from the method.
console.log(result,error)
if (result) {
document.getElementById('result').textContent = result.text
}
});
// stops scanning after 20 seconds
setTimeout(() => controls.stop(), 20000);
}
{
const codeWriter = new ZXing.BrowserQRCodeSvgWriter();
const previewElem = document.querySelector('#qr');
let svgElement = codeWriter.writeToDom('#qr', "http://lorel.org", 300, 300)
}
ZXing = require('https://unpkg.com/@zxing/browser@latest')
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
