Add specific error message for insecure context (#194)

changelog.md

@@ -1,3 +1,6 @@
+### Version 2.0.3
+ - Show specific error message if web-cam access fails due to insecure context like web page being neither `https` or `localhost`.
+
 ### Version 2.0.2
  - Bug fix: [Compatibility - [Android 11] [Chrome 88.0 ] - [Call stopScan will cause crash]](https://github.com/mebjas/html5-qrcode/issues/159) with PR from [MrGussio](https://github.com/MrGussio) - https://github.com/mebjas/html5-qrcode/pull/169
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "html5-qrcode",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "A cross platform HTML5 QR Code & bar code scanner",
   "main": "minified/html5-qrcode.min.js",
   "scripts": {

src/html5-qrcode-scanner.js

@@ -205,7 +205,10 @@ class Html5QrcodeScanner {
         dashboard.appendChild(header);
 
         const titleSpan = document.createElement("span");
-        titleSpan.innerHTML = "QR Code Scanner";
+        const titleLink = document.createElement("a");
+        titleLink.innerHTML = "Code Scanner";
+        titleLink.href="https://github.com/mebjas/html5-qrcode";
+        titleSpan.appendChild(titleLink);
         header.appendChild(titleSpan);
 
         const statusSpan = document.createElement("span");

src/html5-qrcode.js

@@ -700,8 +700,22 @@ class Html5Qrcode {
                 }
                 MediaStreamTrack.getSources(callback);
             } else {
-                this._log("unable to query supported devices.");
-                reject("unable to query supported devices.");
+                // This can potentially happen if the page is loaded without SSL.
+                const isHttpsOrLocalhost = _ => {
+                    if (location.protocol === "https:") {
+                        return true;
+                    }
+                    const host = location.host.split(":")[0];
+                    return host === "127.0.0.1" || host === "localhost";
+                }
+
+                let errorMessage = "Unable to query supported devices, unknown error.";
+                if (!isHttpsOrLocalhost()) {
+                    errorMessage = "Camera access is only supported in secure context like https "
+                    + "or localhost.";
+                }
+                this._log(errorMessage);
+                reject(errorMessage);
             }
         });
     }

transpiled/html5-qrcode-scanner.js

@@ -230,7 +230,10 @@ var Html5QrcodeScanner = /*#__PURE__*/function () {
       header.style.borderBottom = "1px solid rgba(192, 192, 192, 0.18)";
       dashboard.appendChild(header);
       var titleSpan = document.createElement("span");
-      titleSpan.innerHTML = "QR Code Scanner";
+      var titleLink = document.createElement("a");
+      titleLink.innerHTML = "Code Scanner";
+      titleLink.href = "https://github.com/mebjas/html5-qrcode";
+      titleSpan.appendChild(titleLink);
       header.appendChild(titleSpan);
       var statusSpan = document.createElement("span");
       statusSpan.id = this.__getStatusSpanId();

transpiled/html5-qrcode.js

@@ -1076,9 +1076,25 @@ var Html5Qrcode = /*#__PURE__*/function () {
 
           MediaStreamTrack.getSources(callback);
         } else {
-          _this3._log("unable to query supported devices.");
+          // This can potentially happen if the page is loaded without SSL.
+          var isHttpsOrLocalhost = function isHttpsOrLocalhost(_) {
+            if (location.protocol === "https:") {
+              return true;
+            }
+
+            var host = location.host.split(":")[0];
+            return host === "127.0.0.1" || host === "localhost";
+          };
+
+          var errorMessage = "Unable to query supported devices, unknown error.";
+
+          if (!isHttpsOrLocalhost()) {
+            errorMessage = "Camera access is only supported in secure context like https " + "or localhost.";
+          }
+
+          _this3._log(errorMessage);
 
-          reject("unable to query supported devices.");
+          reject(errorMessage);
         }
       });
     }