Skip to content

MrGracu/qbscan_js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 

Repository files navigation

[JS] QBScan

[JavaScript] QR Code and Barcode scanner

Working example can be found here: qbscan.gmika.pl.

Installation

To use this script you can include optimized JS file using jsDelivr:

Current version

<script src="https://cdn.jsdelivr.net/gh/MrGracu/qbscan_js@main/production/qbscan.js"></script>

Other versions

v0.1:

<script src="https://cdn.jsdelivr.net/gh/MrGracu/qbscan_js@main/production/qbscan_v0.1.js"></script>

Usage

You must include this script before use to use properly.

Supported borwsers

List of supported browsers can be found here.

List of available formats

List of supported code formats can be found here.

Example

Example script usage

function recognizedBarcodes(response) {
	if(response.ok === true && response.detected.length > 0) {
		let textAll = '';
		
		response.detected.forEach(barcode => {
			textAll = (textAll.length > 0 ? ', ' : '') + `(${barcode.format}): ${barcode.rawValue}`;
		});
		
		alert(textAll);
	}
}

window.onload = async function() {
	const args = {
		pauseOnDetect: true, //Pause when detect -> when true then need to manually play video
		loop: true, //Loop detecting
		imageCanvas: canvas, //Canvas which display image with found barcode
		cameraSelect: videoSelect, //Select for different device cameras
		detectFormats: ['code_93', 'code_128', 'qr_code', 'aztec', 'code_39', 'data_matrix', 'ean_13', 'itf', 'pdf417'], //Customize selection formats, if null then only qrcode and ean13
		//detectFormatsAll: true, //Detect all supported formats
		video: video, //Video HTML tag
		videoFrameRate: 32, //Ideal frame rate
		videoFrameRateMax: 64, //Maximum frame rate
		videoWidth: 1024, //Video width
		videoHeight: 768, //Video height
		flashButton: flash, //Flash button HTML tag
		clearVideoOnPause: true, //Clear video container on pause, and restore on play
	};
	
	let initialized = await qbscan(args, recognizedBarcodes);
	console.log(initialized); //Write to console response attributes
	if(!initialized.userMediaSupport) {
		alert('Not working photo taking info');
	} else if(!initialized.barcodeDetectorSupport) {
		alert('Not working barcode recognition info');
	} else if(!initialized.accessCameraDevice) {
		alert('Camera access not allowed info');
	} else if(initialized.ok) {
		alert('Everything is ok info');
	}
};

Returned object on initialization

Example object returned on initialization contains supported formats by current browser and information about errors. If everything is good, then ok is set to true.

{
    "ok": true,
    "supportedFormats": [
        "aztec",
        "code_128",
        "code_39",
        "code_93",
        "codabar",
        "data_matrix",
        "ean_13",
        "ean_8",
        "itf",
        "pdf417",
        "qr_code",
        "upc_a",
        "upc_e"
    ],
    "barcodeDetectorSupport": true,
    "accessCameraDevice": true,
    "userMediaSupport": true,
    "erorMessage": ""
}

About

JavaScript QR Code and Barcode scanner

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published