browser
browser copied to clipboard
Published
20 hours ago •
zxing-js
zxing-js
None of the library examples are working.
Hi, I'm trying to get a simple example running.
For me, none of the https://zxing-js.github.io/library/ examples are working, looks like the browser.js file is not working.
Fixing it locally gets me to the part of: "ZXing code reader initialized asdf.html:75 Uncaught TypeError: codeReader.listVideoInputDevices is not a function "
Is there a working example/code to start off on?
Currently I'm just trying to hack around multiple non-working examples and trying to figure out on my own...
<script type="text/javascript" src="/node_modules/@zxing/browser/umd/zxing-browser.js"></script>
</head>
<body>
<div style="border:1px solid red; width: 500px; height: 500px;" id="test-area-qr-code-webcam"></div>
<script type="module">
// const codeReader = new BrowserQRCodeReader();
// window.addEventListener('load', () => {
const codeReader = new ZXingBrowser.BrowserMultiFormatReader();
console.log(codeReader );
// });
const videoInputDevices = await ZXingBrowser.BrowserMultiFormatReader.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('#test-area-qr-code-webcam > 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.
});
// stops scanning after 20 seconds
setTimeout(() => controls.stop(), 20000);
</script>
`
