Make barcode scanner work on Cordova browser platform (close #28)

license-credits.md

@@ -120,7 +120,7 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 The following software may be included in this product: leaflet. A copy of the source code may be downloaded from git://github.com/Leaflet/Leaflet.git. This software contains the following license and notice below:
 
-Copyright (c) 2010-2018, Vladimir Agafonkin
+Copyright (c) 2010-2019, Vladimir Agafonkin
 Copyright (c) 2010-2011, CloudMade
 All rights reserved.
 
@@ -1907,7 +1907,7 @@ The Apache Software Foundation (http://www.apache.org/).
 
 -----
 
-The following software may be included in this product: cordova-plugin-inappbrowser, cordova-plugin-whitelist. A copy of the source code may be downloaded from https://github.com/apache/cordova-plugin-inappbrowser (cordova-plugin-inappbrowser), https://github.com/apache/cordova-plugin-whitelist (cordova-plugin-whitelist). This software contains the following license and notice below:
+The following software may be included in this product: cordova-plugin-device, cordova-plugin-inappbrowser, cordova-plugin-whitelist. A copy of the source code may be downloaded from https://github.com/apache/cordova-plugin-device (cordova-plugin-device), https://github.com/apache/cordova-plugin-inappbrowser (cordova-plugin-inappbrowser), https://github.com/apache/cordova-plugin-whitelist (cordova-plugin-whitelist). This software contains the following license and notice below:
 
 Apache License
                            Version 2.0, January 2004
@@ -2962,7 +2962,7 @@ THE SOFTWARE.
 
 -----
 
-The following software may be included in this product: es-to-primitive, is-callable, is-date-object, is-symbol, string.prototype.trimleft, string.prototype.trimright. A copy of the source code may be downloaded from git://github.com/ljharb/es-to-primitive.git (es-to-primitive), git://github.com/ljharb/is-callable.git (is-callable), git://github.com/ljharb/is-date-object.git (is-date-object), git://github.com/ljharb/is-symbol.git (is-symbol), git://github.com/es-shims/String.prototype.trimLeft.git (string.prototype.trimleft), git://github.com/es-shims/String.prototype.trimRight.git (string.prototype.trimright). This software contains the following license and notice below:
+The following software may be included in this product: es-to-primitive, is-callable, is-date-object, is-symbol, string.prototype.trimleft, string.prototype.trimright. A copy of the source code may be downloaded from git://github.com/ljharb/es-to-primitive.git (es-to-primitive), git://github.com/ljharb/is-callable.git (is-callable), git://github.com/ljharb/is-date-object.git (is-date-object), git://github.com/inspect-js/is-symbol.git (is-symbol), git://github.com/es-shims/String.prototype.trimLeft.git (string.prototype.trimleft), git://github.com/es-shims/String.prototype.trimRight.git (string.prototype.trimright). This software contains the following license and notice below:
 
 The MIT License (MIT)
 

package.json

@@ -18,7 +18,8 @@
       "cordova-plugin-inappbrowser": {},
       "cordova-plugin-powermanagement-netsyms": {},
       "cordova-plugin-whitelist": {},
-      "phonegap-plugin-barcodescanner": {}
+      "phonegap-plugin-barcodescanner": {},
+      "cordova-plugin-device": {}
     },
     "platforms": [
       "android",
@@ -28,6 +29,7 @@
   "dependencies": {
     "cordova-android": "^8.1.0",
     "cordova-browser": "^6.0.0",
+    "cordova-plugin-device": "^2.0.3",
     "cordova-plugin-inappbrowser": "^3.1.0",
     "cordova-plugin-powermanagement-netsyms": "git+https://source.netsyms.com/Netsyms/cordova-plugin-powermanagement",
     "cordova-plugin-whitelist": "^1.3.4"

scripts/remove_bloat.sh

@@ -29,6 +29,7 @@ cd jsbarcode
 rm -rf .dockerignore .eslintignore .eslintrcautomation bower.json CONTRIBUTING.md docker-compose.yml Dockerfile example gulpfile.js jsbarcode.d.ts README.md src test .travis.yml
 rm -rf dist/barcodes
 rm -rf dist/JsBarcode.all.js
+cd ..
 
 cd framework7
 rm -rf components
@@ -36,8 +37,8 @@ rm -rf lazy-components
 rm -rf less
 rm -rf modules
 rm -rf utils
-
 cd ..
+
 cd material-design-icons
 rm -rf action
 rm -rf alert

www/assets/js/platform.js

@@ -64,14 +64,57 @@ var watchLocation = function (success, error) {
     }
 }
 
+function setupHTML5BarcodeScanner() {
+    $("body").append('<script src="node_modules/@zxing/library/umd/index.min.js"></script>');
+
+    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");
+        });
+    };
+}
+
 function initCordova() {
     platform_type = "cordova";
-
     // Handle back button to close things
     document.addEventListener("backbutton", function (event) {
         router.back({force: true, ignoreCache: true});
     }, false);
-
     document.addEventListener("deviceready", function () {
         if (localStorage.getItem("wakelock") == "true") {
             window.powerManagement.acquire(function () {
@@ -87,7 +130,6 @@ function initCordova() {
             });
         }
     }, false);
-
     openBrowser = function (url) {
         cordova.InAppBrowser.open(url, '_blank', 'location=yes');
     }
@@ -96,34 +138,37 @@ function initCordova() {
         window.open(url, '_system', '');
     }
 
-    scanBarcode = function (success, error) {
+    if (typeof device != "undefined" && device.platform != "browser") {
-        cordova.plugins.barcodeScanner.scan(
+        scanBarcode = function (success, error) {
-                function (result) {
+            cordova.plugins.barcodeScanner.scan(
-                    if (!result.cancelled) {
+                    function (result) {
-                        success(result.text);
+                        if (!result.cancelled) {
-                    }
+                            success(result.text);
-                },
+                        }
-                function (err) {
+                    },
-                    if (typeof error == "function") {
+                    function (err) {
-                        error(err);
+                        if (typeof error == "function") {
+                            error(err);
+                        }
+                    },
+                    {
+                        showTorchButton: true,
+                        showFlipCameraButton: true,
+                        prompt: "Scan barcode",
+                        resultDisplayDuration: 0,
+                        disableSuccessBeep: true,
+                        formats: "QR_CODE,DATA_MATRIX,CODE_39,CODE_93,CODE_128,CODABAR,PDF_417,AZTEC,MAXICODE"
                     }
-                },
+            );
-                {
+        };
-                    showTorchButton: true,
+    } else {
-                    showFlipCameraButton : true,
+        setupHTML5BarcodeScanner();
-                    prompt: "Scan barcode",
-                    resultDisplayDuration: 0,
-                    disableSuccessBeep: true,
-                    formats: "QR_CODE,DATA_MATRIX,CODE_39,CODE_93,CODE_128,CODABAR,PDF_417,AZTEC,MAXICODE"
-                }
-        );
     }
 }
 
 function initNW() {
     platform_type = "nw";
     platform_theme = "md";
-
     openBrowser = function (url) {
         nw.Window.open(url, {
             id: url
@@ -156,57 +201,22 @@ function initNW() {
         require('nw.gui').Shell.openExternal(url);
     }
 
-    $("body").append('<script src="node_modules/@zxing/library/umd/index.min.js"></script>');
-
-    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) => {
+    setupHTML5BarcodeScanner();
-                        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");
-        });
-    };
 }
 
 function initBrowser() {
     platform_type = "browser";
     platform_theme = "md";
-
     openBrowser = function (url) {
         window.open(url);
     }
+
+    openExternalBrowser = function (url) {
+        window.open(url);
+    }
+
+    setupHTML5BarcodeScanner();
 }
 
 function initPlatform() {

www/pages/credits.html

@@ -225,7 +225,7 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 The following software may be included in this product: leaflet. A copy of the source code may be downloaded from git://github.com/Leaflet/Leaflet.git. This software contains the following license and notice below:
 
-Copyright (c) 2010-2018, Vladimir Agafonkin
+Copyright (c) 2010-2019, Vladimir Agafonkin
 Copyright (c) 2010-2011, CloudMade
 All rights reserved.
 
@@ -2012,7 +2012,7 @@ The Apache Software Foundation (http://www.apache.org/).
 
 -----
 
-The following software may be included in this product: cordova-plugin-inappbrowser, cordova-plugin-whitelist. A copy of the source code may be downloaded from https://github.com/apache/cordova-plugin-inappbrowser (cordova-plugin-inappbrowser), https://github.com/apache/cordova-plugin-whitelist (cordova-plugin-whitelist). This software contains the following license and notice below:
+The following software may be included in this product: cordova-plugin-device, cordova-plugin-inappbrowser, cordova-plugin-whitelist. A copy of the source code may be downloaded from https://github.com/apache/cordova-plugin-device (cordova-plugin-device), https://github.com/apache/cordova-plugin-inappbrowser (cordova-plugin-inappbrowser), https://github.com/apache/cordova-plugin-whitelist (cordova-plugin-whitelist). This software contains the following license and notice below:
 
 Apache License
                            Version 2.0, January 2004
@@ -3067,7 +3067,7 @@ THE SOFTWARE.
 
 -----
 
-The following software may be included in this product: es-to-primitive, is-callable, is-date-object, is-symbol, string.prototype.trimleft, string.prototype.trimright. A copy of the source code may be downloaded from git://github.com/ljharb/es-to-primitive.git (es-to-primitive), git://github.com/ljharb/is-callable.git (is-callable), git://github.com/ljharb/is-date-object.git (is-date-object), git://github.com/ljharb/is-symbol.git (is-symbol), git://github.com/es-shims/String.prototype.trimLeft.git (string.prototype.trimleft), git://github.com/es-shims/String.prototype.trimRight.git (string.prototype.trimright). This software contains the following license and notice below:
+The following software may be included in this product: es-to-primitive, is-callable, is-date-object, is-symbol, string.prototype.trimleft, string.prototype.trimright. A copy of the source code may be downloaded from git://github.com/ljharb/es-to-primitive.git (es-to-primitive), git://github.com/ljharb/is-callable.git (is-callable), git://github.com/ljharb/is-date-object.git (is-date-object), git://github.com/inspect-js/is-symbol.git (is-symbol), git://github.com/es-shims/String.prototype.trimLeft.git (string.prototype.trimleft), git://github.com/es-shims/String.prototype.trimRight.git (string.prototype.trimright). This software contains the following license and notice below:
 
 The MIT License (MIT)