groove/Part-DB-server
1
0
Fork 0
mirror of https://github.com/Part-DB/Part-DB-server.git synced 2025-12-24 03:49:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Integrated barcode scanner via Webcam.

Browse source
This commit is contained in:
Jan Böhmer 2020-04-28 18:36:30 +02:00
parent 1812e6f5bc
commit 48f4a360f4
6 changed files with 123 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

78
assets/ts_src/event_listeners.ts
View file

@ -23,6 +23,7 @@ import "marked";
import * as marked from "marked";
import "qrcode";
import {parse} from "marked";
import * as ZXing from "@zxing/library";
/************************************
*
@ -568,6 +569,83 @@ $(document).on("ajaxUI:reload", function() {
})
});
//Init barcode scanner
$(document).on("ajaxUI:start ajaxUI:reload", function() {
//Skip if we are not on scanner page...
if (!document.getElementById('scan_dialog_form')) {
return;
}
let selectedDeviceId;
const codeReader = new ZXing.BrowserMultiFormatReader();
console.log('ZXing code reader initialized');
codeReader.listVideoInputDevices()
.then((videoInputDevices) => {
if (videoInputDevices.length >= 1) {
const sourceSelect = document.getElementById('sourceSelect');
videoInputDevices.forEach((element) => {
const sourceOption = document.createElement('option');
sourceOption.text = element.label;
sourceOption.value = element.deviceId;
sourceSelect.appendChild(sourceOption);
});
//Try to retrieve last selected webcam...
let last_cam_id = localStorage.getItem('scanner_last_cam_id');
if (!!last_cam_id) {
//selectedDeviceId = localStorage.getItem('scanner_last_cam_id');
$(sourceSelect).val(last_cam_id);
} else {
selectedDeviceId = videoInputDevices[0].deviceId;
}
sourceSelect.onchange = () => {
//@ts-ignore
selectedDeviceId = sourceSelect.value;
localStorage.setItem('scanner_last_cam_id', selectedDeviceId);
changeHandler();
};
document.getElementById('sourceSelectPanel').classList.remove('d-none');
document.getElementById('video').classList.remove('d-none');
document.getElementById('scanner-warning').classList.add('d-none');
}
let changeHandler = () => {
codeReader.reset();
codeReader.decodeFromVideoDevice(selectedDeviceId, 'video', (result, err) => {
if (result) {
//@ts-ignore
document.getElementById('scan_dialog_input').value = result.text;
//Submit form
//@ts-ignore
document.getElementById('scan_dialog_form').submit();
}
if (err && !(err instanceof ZXing.NotFoundException)) {
console.error(err);
//document.getElementById('result').textContent = err
}
});
console.log(`Started continous decode from camera with id ${selectedDeviceId}`)
};
//Register Change Src Button
//document.getElementById('changeSrcBtn').addEventListener('click', changeHandler);
//Try to start logging automatically.
changeHandler();
})
.catch((err) => {
console.error(err)
})
});
//Need for proper body padding, with every navbar height
$(window).resize(function () {