fix: try to use rear camera by default

yugasun · May 29, 2022 · 7d77236 · 7d77236
1 parent 8c80e31
commit 7d77236
Show file tree

Hide file tree

Showing 8 changed files with 162 additions and 150 deletions.
diff --git a/.gitignore b/.gitignore
@@ -9,3 +9,5 @@ tsconfig.tsbuildinfo
 coverage
 yarn.lock
 .rpt2_cache
+
+demo/lib/index.min.js
diff --git a/demo/camera.html b/demo/camera.html
@@ -1,45 +1,48 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>QrcodeDecoder - Camera</title>
-  </head>
-  <body>
-    <button id="start">Start</button> <button id="stop">Stop</button><br />
-    <span id="result">Click start to scan qrcode.</span><br />
-    <hr />
-    <video id="video" autoplay></video>
 
-    <script src="./lib/vconsole.min.js"></script>
-    <script src="./index.min.js"></script>
-    <script type="text/javascript">
-      var vConsole = new VConsole();
-      console.log('Hello world');
-      function main() {
-        var qr = new QrcodeDecoder();
-        var video = document.querySelector('#video');
-        var start = document.querySelector('#start');
-        var stop = document.querySelector('#stop');
-        var result = document.querySelector('#result');
-        async function startScan() {
-          if (!qr.isCanvasSupported()) {
-            alert("Your browser doesn't match the required specs.");
-            throw new Error('Canvas and getUserMedia are required');
-          }
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+  <title>QrcodeDecoder - Camera</title>
+</head>
 
-          let code = await qr.decodeFromCamera(video);
-          console.log('code', code);
-          result.innerText = 'Result: ' + code.data;
+<body>
+  <button id="start">Start</button> <button id="stop">Stop</button><br />
+  <span id="result">Click start to scan qrcode.</span><br />
+  <hr />
+  <video id="video" autoplay></video>
+
+  <script src="./lib/vconsole.min.js"></script>
+  <script src="./lib/index.min.js"></script>
+  <script type="text/javascript">
+    var vConsole = new VConsole();
+    console.log('Hello world');
+    function main() {
+      var qr = new QrcodeDecoder();
+      var video = document.querySelector('#video');
+      var start = document.querySelector('#start');
+      var stop = document.querySelector('#stop');
+      var result = document.querySelector('#result');
+      async function startScan() {
+        if (!qr.isCanvasSupported()) {
+          alert("Your browser doesn't match the required specs.");
+          throw new Error('Canvas and getUserMedia are required');
         }
-        start.onclick = startScan;
 
-        stop.onclick = function() {
-          qr.stop();
-        };
+        let code = await qr.decodeFromCamera(video);
+        console.log('code', code);
+        result.innerText = 'Result: ' + code.data;
       }
-      main();
-    </script>
-  </body>
+      start.onclick = startScan;
+
+      stop.onclick = function () {
+        qr.stop();
+      };
+    }
+    main();
+  </script>
+</body>
+
 </html>
diff --git a/demo/image.html b/demo/image.html
@@ -1,64 +1,66 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>QrcodeDecoder - Image</title>
-  </head>
-  <body>
-    <section>
-      <h3>Same domain image</h3>
-      <img id="img1" src="./assets/qrcode.png" alt="qr code" /><br />
-      <button id="decode1">Decode!</button><br />
-      <span id="result1"></span><br />
-    </section>
-    <hr />
-    <section>
-      <h3>Different domain image</h3>
-      <input
-        id="img2"
-        value="https://yugasun.com/static/wechat.jpg"
-        style="width: 400px"
-      /><br />
-      <button id="decode2">Decode!</button><br />
-      <span id="result2"></span><br />
-    </section>
-    <script src="./lib/vconsole.min.js"></script>
-    <script src="./index.min.js"></script>
-    <script type="module">
-      var vConsole = new VConsole();
-      function main() {
-        var qr = new QrcodeDecoder();
 
-        var btn1 = document.querySelector('button#decode1');
-        var btn2 = document.querySelector('button#decode2');
-        var result1 = document.querySelector('#result1');
-        var result2 = document.querySelector('#result2');
-        var img1 = document.querySelector('#img1');
-        var img2 = document.querySelector('#img2');
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+  <title>QrcodeDecoder - Image</title>
+</head>
 
-        btn1.onclick = async () => {
-          // you can also decode from image path
-          // const code = await qr.decodeFromImage('./assets/qrcode.png');
-          const code = await qr.decodeFromImage(img1);
-          console.log(code);
-          result1.innerText = code.data;
-        };
+<body>
+  <section>
+    <h3>Same domain image</h3>
+    <img id="img1" src="./assets/qrcode.png" alt="qr code" /><br />
+    <button id="decode1">Decode!</button><br />
+    <span id="result1"></span><br />
+  </section>
+  <hr />
+  <section>
+    <h3>Different domain image</h3>
+    <input
+      id="img2"
+      value="https://yugasun.com/static/wechat.jpg"
+      style="width: 400px" /><br />
+    <button id="decode2">Decode!</button><br />
+    <span id="result2"></span><br />
+  </section>
+  <script src="./lib/vconsole.min.js"></script>
+  <script src="./lib/index.min.js"></script>
+  <script type="module">
+    var vConsole = new VConsole();
+    function main() {
+      var qr = new QrcodeDecoder();
 
-        btn2.onclick = async () => {
-          // you can also decode from image path
-          // const code = await qr.decodeFromImage('./assets/qrcode.png');
-          const code = await qr.decodeFromImage(img2.value, {
-            crossOrigin: 'anonymous',
-          });
-          console.log(code);
-          result2.innerText = code.data;
-        };
-      }
-      window.onload = () => {
-        main();
+      var btn1 = document.querySelector('button#decode1');
+      var btn2 = document.querySelector('button#decode2');
+      var result1 = document.querySelector('#result1');
+      var result2 = document.querySelector('#result2');
+      var img1 = document.querySelector('#img1');
+      var img2 = document.querySelector('#img2');
+
+      btn1.onclick = async () => {
+        // you can also decode from image path
+        // const code = await qr.decodeFromImage('./assets/qrcode.png');
+        const code = await qr.decodeFromImage(img1);
+        console.log(code);
+        result1.innerText = code.data;
+      };
+
+      btn2.onclick = async () => {
+        // you can also decode from image path
+        // const code = await qr.decodeFromImage('./assets/qrcode.png');
+        const code = await qr.decodeFromImage(img2.value, {
+          crossOrigin: 'anonymous',
+        });
+        console.log(code);
+        result2.innerText = code.data;
       };
-    </script>
-  </body>
+    }
+    window.onload = () => {
+      main();
+    };
+  </script>
+</body>
+
 </html>
diff --git a/demo/index.min.js b/demo/index.min.js
diff --git a/demo/video.html b/demo/video.html
@@ -1,43 +1,45 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>QrcodeDecoder - Video</title>
-  </head>
-  <body>
-    <button id="start">Start</button> <button id="stop">Stop</button><br />
-    <span id="result">Click start to scan qrcode.</span><br />
 
-    <video src="./assets/qrcode-video.mp4"></video>
-    <script src="./lib/vconsole.min.js"></script>
-    <script src="./index.min.js"></script>
-    <script type="text/javascript">
-      var vConsole = new VConsole();
-      console.log('Hello world');
-      function main() {
-        var video = document.querySelector('video');
-        var result = document.querySelector('#result');
-        var start = document.querySelector('#start');
-        var stop = document.querySelector('#stop');
-        var qr = new QrcodeDecoder();
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+  <title>QrcodeDecoder - Video</title>
+</head>
 
-        start.onclick = startScan;
+<body>
+  <button id="start">Start</button> <button id="stop">Stop</button><br />
+  <span id="result">Click start to scan qrcode.</span><br />
 
-        stop.onclick = function() {
-          qr.stop();
-          video.pause();
-        };
+  <video src="./assets/qrcode-video.mp4"></video>
+  <script src="./lib/vconsole.min.js"></script>
+  <script src="./lib/index.min.js"></script>
+  <script type="text/javascript">
+    var vConsole = new VConsole();
+    function main() {
+      var video = document.querySelector('video');
+      var result = document.querySelector('#result');
+      var start = document.querySelector('#start');
+      var stop = document.querySelector('#stop');
+      var qr = new QrcodeDecoder();
 
-        async function startScan() {
-          video.play();
-          const code = await qr.decodeFromVideo(video);
-          console.log('code', code);
-          result.innerText = 'Result: ' + code.data;
-        }
+      start.onclick = startScan;
+
+      stop.onclick = function () {
+        qr.stop();
+        video.pause();
+      };
+
+      async function startScan() {
+        video.play();
+        const code = await qr.decodeFromVideo(video);
+        console.log('code', code);
+        result.innerText = 'Result: ' + code.data;
       }
-      main();
-    </script>
-  </body>
+    }
+    main();
+  </script>
+</body>
+
 </html>
diff --git a/package.json b/package.json
@@ -11,9 +11,10 @@
     "prettier:fix": "prettier --write '**/*.{ts,tsx,md}' --config .prettierrc",
     "test": "jest",
     "codecov": "jest --coverage && codecov",
-    "copy-file": "cp dist/index.min.js demo/",
+    "copy-file": "cp dist/index.min.js demo/lib",
     "release": "git commit -am $npm_package_version && git tag $npm_package_version && git push && git push --tags",
-    "pages": "gh-pages -d demo --remote origin"
+    "pages": "gh-pages -d demo --remote origin",
+    "demo": "http-server demo -c-1"
   },
   "husky": {
     "hooks": {
@@ -56,6 +57,7 @@
     "cross-env": "^6.0.3",
     "fancy-log": "^1.3.3",
     "gh-pages": "^3.1.0",
+    "http-server": "^14.1.0",
     "husky": "^3.0.9",
     "jest": "^24.9.0",
     "lint-staged": "^9.5.0",

diff --git a/scripts/bundle.ts b/scripts/bundle.ts
@@ -20,16 +20,6 @@ const plugins: rollup.Plugin[] = [
   commonjs(),
   typescript2({
     tsconfig: path.join(__dirname, '..', 'tsconfig.json'),
-    typescript: ts, // ensure we're using the same typescript (3.x) for rollup as for regular builds etc
-    tsconfigOverride: {
-      module: 'esnext',
-      stripInternal: true,
-      emitDeclarationOnly: false,
-      composite: false,
-      declaration: false,
-      declarationMap: false,
-      sourceMap: false,
-    },
   }),
 ];
 
@@ -77,7 +67,7 @@ async function bundleAio() {
       uglify({
         compress: {
           drop_debugger: true,
-          drop_console: true,
+          drop_console: false,
         },
       }),
     ],
@@ -86,7 +76,7 @@ async function bundleAio() {
     file: 'dist/index.min.js',
     name: 'QrcodeDecoder',
     format: 'iife',
-    sourcemap: false,
+    sourcemap: true,
   });
 }
 

diff --git a/src/index.ts b/src/index.ts
@@ -19,7 +19,8 @@ class QrcodeDecoder {
     this.videoElem = null;
     this.getUserMediaHandler = null;
     this.videoConstraints = {
-      video: true,
+      // default use rear camera
+      video: { facingMode: { exact: 'environment' } },
       audio: false,
     };
 
@@ -160,19 +161,30 @@ class QrcodeDecoder {
       throw new Error("Couldn't get video from camera");
     }
 
+    let stream: MediaStream;
     try {
-      const stream = await navigator.mediaDevices.getUserMedia(
-        this.videoConstraints,
-      );
+      stream = await navigator.mediaDevices.getUserMedia(this.videoConstraints);
+    } catch (e) {
+      if ((e as OverconstrainedError).name === 'OverconstrainedError') {
+        console.log('[OverconstrainedError] Can not use rear camera.');
+
+        stream = await navigator.mediaDevices.getUserMedia({
+          video: true,
+          audio: false,
+        });
+      } else {
+        throw e;
+      }
+    }
+
+    if (stream) {
       videoElem.srcObject = stream;
       // videoElem.src = window.URL.createObjectURL(stream);
       this.videoElem = videoElem;
       this.stream = stream;
 
       const code = await this.decodeFromVideo(videoElem, opts);
       return code;
-    } catch (e) {
-      throw e;
     }
   }