feat: 替换扫码方式

package.json

@@ -14,7 +14,6 @@
     "apollo-link-http": "^1.5.17",
     "axios": "^0.21.1",
     "graphql": "^15.5.0",
-    "html5-qrcode": "^2.3.0",
     "node-sass": "^5.0.0",
     "qrcodejs2": "^0.0.2",
     "react": "^17.0.1",
@@ -22,6 +21,7 @@
     "react-infinite-scroller": "^1.2.4",
     "react-lazy-load-image-component": "^1.5.1",
     "react-modal": "^3.12.1",
+    "react-qr-reader": "^3.0.0-beta-1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "vconsole": "^3.4.0",

src/pages/Index/Index.js

@@ -11,7 +11,7 @@ import compass from "./compass.png";
 import Shops from "../Shops/Shops";
 import NavBottom from "../../components/NavBottom/NavBottom";
 import Modal from "react-modal";
-import { Html5Qrcode } from "html5-qrcode";
+import { QrReader } from "react-qr-reader";
 // import vconsole from "vconsole";
 // const vConsole = new vconsole();
 export const MallCode = React.createContext(null);
@@ -359,70 +359,46 @@ const Index = () => {
       end,
     });
   };
-
-  useEffect(() => {
-    if (qrcodeModalOpened) {
-      const html5QrCode = new Html5Qrcode("qrcode-scaner");
-      html5QrCode
-        .start(
-          { facingMode: "environment" },
-          { fps: 10, qrbox: { width: 320, height: 320 } },
-          (code) => {
-            try {
-              code = decodeURIComponent(code);
-              const kvs = code
-                .split("?")
-                .pop()
-                .split("&")
-                .map((kv) => kv.split("="));
-              const s = kvs.find(([k]) => k === "s")
-                ? kvs.find(([k]) => k === "s")[1]
-                : "";
-              const startParamList = s.split("_");
-              if (startParamList.length === 3) {
-                let [sfloororder, spoint, sname] = startParamList;
-                sfloororder = Number(sfloororder);
-                spoint = Number(spoint);
-                const nxt = {
-                  isDevice: true,
-                  name: sname,
-                  navPoint: spoint,
-                  yaxis: spoint,
-                  floorOrder: sfloororder,
-                };
-                setStart(nxt);
-                setEnd(shop);
-                map.startNavigate({
-                  start: nxt,
-                  end: shop,
-                });
-                try {
-                  setQrcodeModalOpened(false);
-                  setShowQrcodeModal(false);
-                  html5QrCode.stop();
-                } catch (error) {}
-              }
-            } catch (error) {
-              window.weui.toast("请扫大屏二维码", {
-                className: "toast",
-              });
-            }
-          }
-        )
-        .catch(() => {
-          window.weui.toast("启动二维码失败", {
-            className: "toast",
-          });
-          setQrcodeModalOpened(false);
-          setShowQrcodeModal(false);
+  const handleQrcodeResult = (code) => {
+    try {
+      code = decodeURIComponent(code);
+      const kvs = code
+        .split("?")
+        .pop()
+        .split("&")
+        .map((kv) => kv.split("="));
+      const s = kvs.find(([k]) => k === "s")
+        ? kvs.find(([k]) => k === "s")[1]
+        : "";
+      const startParamList = s.split("_");
+      if (startParamList.length === 3) {
+        let [sfloororder, spoint, sname] = startParamList;
+        sfloororder = Number(sfloororder);
+        spoint = Number(spoint);
+        const nxt = {
+          isDevice: true,
+          name: sname,
+          navPoint: spoint,
+          yaxis: spoint,
+          floorOrder: sfloororder,
+        };
+        setStart(nxt);
+        setEnd(shop);
+        map.startNavigate({
+          start: nxt,
+          end: shop,
         });
-      return () => {
         try {
-          html5QrCode.stop();
+          setQrcodeModalOpened(false);
+          setShowQrcodeModal(false);
         } catch (error) {}
-      };
+      }
+    } catch (error) {
+      window.weui.toast("请扫大屏二维码", {
+        className: "toast",
+      });
     }
-  }, [qrcodeModalOpened]);
+  };
 
   return (
     <MallCode.Provider value={mallCode}>
@@ -436,12 +412,20 @@ const Index = () => {
           >
             <div className="border">
               <div className="scaner"></div>
-              <div
+              <QrReader
+                constraints={{ facingMode: "environment" }}
                 className="container"
-                id="qrcode-scaner"
-                width="320px"
-                height="320px"
-              ></div>
+                onResult={(result, error) => {
+                  if (!!result) {
+                    handleQrcodeResult(result?.text);
+                  }
+
+                  if (!!error) {
+                    console.info(error);
+                  }
+                }}
+                videoStyle={{ objectFit: "cover" }}
+              ></QrReader>
             </div>
             <div className="qrcodeTip">
               <div

yarn.lock

@@ -2198,6 +2198,27 @@
   resolved "https://registry.npm.taobao.org/@xtuc/long/download/@xtuc/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
   integrity sha1-0pHGpOl5ibXGHZrPOWrk/hM6cY0=
 
+"@zxing/browser@0.0.7":
+  version "0.0.7"
+  resolved "https://registry.npmmirror.com/@zxing/browser/-/browser-0.0.7.tgz#5fa7680a867b660f48d3288fdf63e0174ad531c7"
+  integrity sha512-AepzMgDnD6EjxewqmXpHJsi4S3Gw9ilZJLIbTf6fWuWySEcHBodnGu3p7FWlgq1Sd5QyfPhTum5z3CBkkhMVng==
+  optionalDependencies:
+    "@zxing/text-encoding" "^0.9.0"
+
+"@zxing/library@^0.18.3":
+  version "0.18.6"
+  resolved "https://registry.npmmirror.com/@zxing/library/-/library-0.18.6.tgz#717af8c6c1fd982865e21051afdd7b470ae6674c"
+  integrity sha512-bulZ9JHoLFd9W36pi+7e7DnEYNJhljYjZ1UTsKPOoLMU3qtC+REHITeCRNx40zTRJZx18W5TBRXt5pq2Uopjsw==
+  dependencies:
+    ts-custom-error "^3.0.0"
+  optionalDependencies:
+    "@zxing/text-encoding" "~0.9.0"
+
+"@zxing/text-encoding@^0.9.0", "@zxing/text-encoding@~0.9.0":
+  version "0.9.0"
+  resolved "https://registry.npmmirror.com/@zxing/text-encoding/-/text-encoding-0.9.0.tgz#fb50ffabc6c7c66a0c96b4c03e3d9be74864b70b"
+  integrity sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==
+
 abab@^2.0.3:
   version "2.0.5"
   resolved "https://registry.npm.taobao.org/abab/download/abab-2.0.5.tgz#c0b678fb32d60fc1219c784d6a826fe385aeb79a"
@@ -5499,7 +5520,7 @@ fsevents@^1.2.7:
     bindings "^1.5.0"
     nan "^2.12.1"
 
-fsevents@^2.1.2, fsevents@^2.1.3, fsevents@~2.3.1:
+fsevents@^2.1.2, fsevents@^2.1.3, fsevents@~2.3.1, fsevents@~2.3.2:
   version "2.3.2"
   resolved "https://registry.npm.taobao.org/fsevents/download/fsevents-2.3.2.tgz?cache=0&sync_timestamp=1612536422255&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffsevents%2Fdownload%2Ffsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
   integrity sha1-ilJveLj99GI7cJ4Ll1xSwkwC/Ro=
@@ -5947,11 +5968,6 @@ html-webpack-plugin@4.5.0:
     tapable "^1.1.3"
     util.promisify "1.0.0"
 
-html5-qrcode@^2.3.0:
-  version "2.3.4"
-  resolved "https://registry.npmmirror.com/html5-qrcode/-/html5-qrcode-2.3.4.tgz#7e2b4575a23b10ff5e26d2bf147c8027c1ece389"
-  integrity sha512-VPZrOTG8XR9HmIAhSSiGtJVPErZxKy/DuGc9cPQLburCWZEbvxQGJP9y4K4P+8vdalLtYB/vM5YP1BdWQKZ8jQ==
-
 htmlparser2@^3.10.1:
   version "3.10.1"
   resolved "https://registry.npm.taobao.org/htmlparser2/download/htmlparser2-3.10.1.tgz?cache=0&sync_timestamp=1607394274032&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhtmlparser2%2Fdownload%2Fhtmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f"
@@ -9818,6 +9834,15 @@ react-native-swipeout@^2.2.2:
     prop-types "^15.5.10"
     react-tween-state "^0.1.5"
 
+react-qr-reader@^3.0.0-beta-1:
+  version "3.0.0-beta-1"
+  resolved "https://registry.npmmirror.com/react-qr-reader/-/react-qr-reader-3.0.0-beta-1.tgz#e04a20876409313439959d8e0ea6df3ba6e36d68"
+  integrity sha512-5HeFH9x/BlziRYQYGK2AeWS9WiKYZtGGMs9DXy3bcySTX3C9UJL9EwcPnWw8vlf7JP4FcrAlr1SnZ5nsWLQGyw==
+  dependencies:
+    "@zxing/browser" "0.0.7"
+    "@zxing/library" "^0.18.3"
+    rollup "^2.67.2"
+
 react-refresh@^0.8.3:
   version "0.8.3"
   resolved "https://registry.npm.taobao.org/react-refresh/download/react-refresh-0.8.3.tgz?cache=0&sync_timestamp=1614183930570&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Freact-refresh%2Fdownload%2Freact-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
@@ -10545,6 +10570,13 @@ rollup@^1.31.1:
     "@types/node" "*"
     acorn "^7.1.0"
 
+rollup@^2.67.2:
+  version "2.79.1"
+  resolved "https://registry.npmmirror.com/rollup/-/rollup-2.79.1.tgz#bedee8faef7c9f93a2647ac0108748f497f081c7"
+  integrity sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 rsvp@^4.8.4:
   version "4.8.5"
   resolved "https://registry.npm.taobao.org/rsvp/download/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734"
@@ -11706,6 +11738,11 @@ tryer@^1.0.1:
   resolved "https://registry.npm.taobao.org/tryer/download/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
   integrity sha1-8shUBoALmw90yfdGW4HqrSQSUvg=
 
+ts-custom-error@^3.0.0:
+  version "3.3.1"
+  resolved "https://registry.npmmirror.com/ts-custom-error/-/ts-custom-error-3.3.1.tgz#8bd3c8fc6b8dc8e1cb329267c45200f1e17a65d1"
+  integrity sha512-5OX1tzOjxWEgsr/YEUWSuPrQ00deKLh6D7OTWcvNHm12/7QPyRh8SYpyWvA4IZv8H/+GQWQEh/kwo95Q9OVW1A==
+
 ts-invariant@^0.4.0:
   version "0.4.4"
   resolved "https://registry.npm.taobao.org/ts-invariant/download/ts-invariant-0.4.4.tgz#97a523518688f93aafad01b0e80eb803eb2abd86"