Created
November 24, 2019 07:11
-
-
Save skylarmt/96abd1c469b238f99038e6b5a48c3b0d to your computer and use it in GitHub Desktop.
HTML5 Barcode Scanner with zxingjs
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <link rel=stylesheet href="style.css" /> | |
| <script src="node_modules/@zxing/library/umd/index.min.js"></script> | |
| <script src="scanner.js"></script> | |
| <div id="web-barcode-ui" class="hidden"> | |
| <video id="barcode-viewer"></video> | |
| <div class="text"> | |
| Scan a barcode with your camera. Click or tap anywhere to cancel. | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var scanBarcode = function (success, error) { | |
| $("#web-barcode-ui").removeClass("hidden"); | |
| // Stolen from https://zxing-js.github.io/library/examples/multi-camera/ | |
| const codeReader = new ZXing.BrowserMultiFormatReader(); | |
| console.log('ZXing code reader initialized'); | |
| codeReader.getVideoInputDevices() | |
| .then((videoInputDevices) => { | |
| if (videoInputDevices.length == 0) { | |
| codeReader.reset(); | |
| $("#web-barcode-ui").addClass("hidden"); | |
| error("A camera is required to scan barcodes."); | |
| return; | |
| } | |
| selectedDeviceId = videoInputDevices[0].deviceId; | |
| codeReader.decodeFromInputVideoDeviceContinuously(selectedDeviceId, 'barcode-viewer', (result, err) => { | |
| if (result) { | |
| console.log(result); | |
| codeReader.reset(); | |
| $("#web-barcode-ui").addClass("hidden"); | |
| success(result.text); | |
| return; | |
| } | |
| if (err && !(err instanceof ZXing.NotFoundException)) { | |
| console.error(err); | |
| codeReader.reset(); | |
| $("#web-barcode-ui").addClass("hidden"); | |
| error(err); | |
| return; | |
| } | |
| }); | |
| }) | |
| .catch((err) => { | |
| console.error(err); | |
| }); | |
| $("#web-barcode-ui").on("click", function () { | |
| codeReader.reset(); | |
| $("#web-barcode-ui").addClass("hidden"); | |
| }); | |
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #web-barcode-ui { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 999999; | |
| display: block; | |
| background: rgba(0,0,0,0.75); | |
| } | |
| #web-barcode-ui.hidden { | |
| display: none; | |
| } | |
| #web-barcode-ui video#barcode-viewer { | |
| max-width: calc(100% - 2em); | |
| max-height: calc(100% - 2em); | |
| position: fixed; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| border-radius: 1em; | |
| } | |
| #web-barcode-ui .text { | |
| position: absolute; | |
| left: 0; | |
| bottom: 0; | |
| width: 100vw; | |
| padding: 1em 5px 1em 5px; | |
| color: white; | |
| text-align: center; | |
| background: rgba(0,0,0,0.5); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment