{"id":17080509,"url":"https://github.com/jbialobr/jsqrscanner","last_synced_at":"2025-10-21T06:47:23.720Z","repository":{"id":38455237,"uuid":"64528276","full_name":"jbialobr/JsQRScanner","owner":"jbialobr","description":"JavaScript QR Code scanner for HTML5 supporting browsers","archived":false,"fork":false,"pushed_at":"2022-01-15T06:30:55.000Z","size":925,"stargazers_count":310,"open_issues_count":22,"forks_count":116,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-03-29T05:05:56.633Z","etag":null,"topics":["html5","js","qrcode","qrcode-scanner","zxing"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jbialobr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-07-30T05:38:24.000Z","updated_at":"2025-03-27T06:41:40.000Z","dependencies_parsed_at":"2022-07-12T17:34:26.063Z","dependency_job_id":null,"html_url":"https://github.com/jbialobr/JsQRScanner","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbialobr%2FJsQRScanner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbialobr%2FJsQRScanner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbialobr%2FJsQRScanner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbialobr%2FJsQRScanner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jbialobr","download_url":"https://codeload.github.com/jbialobr/JsQRScanner/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247294514,"owners_count":20915340,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html5","js","qrcode","qrcode-scanner","zxing"],"created_at":"2024-10-14T12:45:09.936Z","updated_at":"2025-10-21T06:47:18.669Z","avatar_url":"https://github.com/jbialobr.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JsQRScanner\n\nJavaScript QR Code scanner for HTML5 supporting browsers.\nThis library is based on the java implementation of the [zxing QR reader](https://github.com/zxing/zxing).\nThe library is automaticaly compiled by GWT from the original source with [few modifications](https://github.com/jbialobr/gwt-qrscanner) made to work with the html canvas element.\nThe export of the public api is made with the [gwt-exporter](https://github.com/manolo/gwt-exporter).\n\n# Live demo\n\nhttps://jbialobr.github.io/JsQRScanner/\n\n[Treasure Hunt Game Creator using QR codes to encode clues](https://treasurehuntqr.appspot.com/treasurehunts/play/5657382461898752?at=106253815718623556511956012583\u0026au=5629499534213120)\n\n# How to use\n\n1) Place all the files from the [js](https://github.com/jbialobr/JsQRScanner/blob/master/docs/js/) directory on your server.\n\n2) Add the [js script](https://github.com/jbialobr/JsQRScanner/blob/master/docs/js/jsqrscanner.nocache.js) into your page.\n```html\n\u003cscript type=\"text/javascript\" src=\"/js/jsqrscanner.nocache.js\"\u003e\u003c/script\u003e\n```\n3) Create a scanner control and append it to the DOM.\n```js\n  \u003cscript type=\"text/javascript\"\u003e\n    function onQRCodeScanned(scannedText)\n    {\n    \tvar scannedTextMemo = document.getElementById(\"scannedTextMemo\");\n    \tif(scannedTextMemo)\n    \t{\n    \t\tscannedTextMemo.value = scannedText;\n    \t}\n    }\n  \n    //this function will be called when JsQRScanner is ready to use\n    function JsQRScannerReady()\n    {\n        //create a new scanner passing to it a callback function that will be invoked when\n        //the scanner succesfully scan a QR code\n        var jbScanner = new JsQRScanner(onQRCodeScanned);\n        //reduce the size of analyzed images to increase performance on mobile devices\n        jbScanner.setSnapImageMaxSize(300);\n    \tvar scannerParentElement = document.getElementById(\"scanner\");\n    \tif(scannerParentElement)\n    \t{\n    \t    //append the jbScanner to an existing DOM element\n    \t\tjbScanner.appendTo(scannerParentElement);\n    \t}        \n    }\n  \u003c/script\u003e \n```\n\nProviding a video stream in a custom way:\n\n```js\n  \u003cscript type=\"text/javascript\"\u003e\n    function onQRCodeScanned(scannedText)\n    {\n    \tvar scannedTextMemo = document.getElementById(\"scannedTextMemo\");\n    \tif(scannedTextMemo)\n    \t{\n    \t\tscannedTextMemo.value = scannedText;\n    \t}\n    }\n    \n    //funtion returning a promise with a video stream\n    function provideVideoQQ()\n    {\n        return navigator.mediaDevices.enumerateDevices()\n        .then(function(devices) {\n            var exCameras = [];\n            devices.forEach(function(device) {\n            if (device.kind === 'videoinput') {\n              exCameras.push(device.deviceId)\n            }\n         });\n            \n            return Promise.resolve(exCameras);\n        }).then(function(ids){\n            if(ids.length === 0)\n            {\n              return Promise.reject('Could not find a webcam');\n            }\n            \n            return navigator.mediaDevices.getUserMedia({\n                video: {\n                  'optional': [{\n                    'sourceId': ids.length === 1 ? ids[0] : ids[1]//this way QQ browser opens the rear camera\n                    }]\n                }\n            });        \n        });                \n    }  \n  \n    //this function will be called when JsQRScanner is ready to use\n    function JsQRScannerReady()\n    {\n        //create a new scanner passing to it a callback function that will be invoked when\n        //the scanner succesfully scan a QR code\n        var jbScanner = new JsQRScanner(onQRCodeScanned, provideVideoQQ);\n        //reduce the size of analyzed images to increase performance on mobile devices\n        jbScanner.setSnapImageMaxSize(300);\n    \tvar scannerParentElement = document.getElementById(\"scanner\");\n    \tif(scannerParentElement)\n    \t{\n    \t    //append the jbScanner to an existing DOM element\n    \t\tjbScanner.appendTo(scannerParentElement);\n    \t}        \n    }\n  \u003c/script\u003e \n```\n\n\n# Scanner API\n\n**.appendTo( htmlElement )**\n\nAppends the scanner to the given **htmlElement**\n\n**.removeFrom( htmlElement )**\n\nRemoves the scanner from the given **htmlElement**\nDoes nothing If the scanner is not a child of **htmlElement**\n\n**.stopScanning()**\n\nStops the scanner.\n\n**.resumeScanning()**\n\nResumes the previously stopped scanner.\n\n**.setScanInterval( scanIntervalMilliseconds )**\n\nSets the interval at which the scanner attempts to decode a qr code.\n\n**.getScanInterval()**\n\nReturns the interval at which the scanner attempts to decode a qr code.\nThe interval is returned in milliseconds.\n\n**.setSnapImageMaxSize( snapImageMaxSizeInPixels )**\n\nSets the maximum size of images captured from the webcam.\nThe limit is applied to both width and height. The ratio of the image is preserved\nwhile resizing. Smaller sizes, like 300px can be set to increase performance on\nmobile devices.\n\n**.getSnapImageMaxSize()**\n\nReturns the SnapImageMaxSize in pixels.\n\n**.isActive()**\n\nReturns false if scanner was stopped, true otherwise.\n\n**.isScanning()**\n\nReturns true if scanner is actively scanning.\nThat is the scanner is active and is attached to the DOM.\n\n# Known Issues\n\n[List of known issues](https://github.com/jbialobr/JsQRScanner/issues?q=is%3Aissue+is%3Aopen+label%3A%22known+issue%22)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjbialobr%2Fjsqrscanner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjbialobr%2Fjsqrscanner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjbialobr%2Fjsqrscanner/lists"}