update

package-lock.json

@@ -50,7 +50,7 @@
     },
     "acorn-globals": {
       "version": "4.3.4",
-      "resolved": "https://registry.nlark.com/acorn-globals/download/acorn-globals-4.3.4.tgz",
+      "resolved": "https://registry.npm.taobao.org/acorn-globals/download/acorn-globals-4.3.4.tgz",
       "integrity": "sha1-n6GSat3BHJcwjE5m163Q1Awycuc=",
       "requires": {
         "acorn": "^6.0.1",
@@ -59,14 +59,14 @@
       "dependencies": {
         "acorn": {
           "version": "6.4.2",
-          "resolved": "https://registry.nlark.com/acorn/download/acorn-6.4.2.tgz?cache=0&sync_timestamp=1624526855420&other_urls=https%3A%2F%2Fregistry.nlark.com%2Facorn%2Fdownload%2Facorn-6.4.2.tgz",
+          "resolved": "https://registry.nlark.com/acorn/download/acorn-6.4.2.tgz",
           "integrity": "sha1-NYZv1xBSjpLeEM8GAWSY5H454eY="
         }
       }
     },
     "acorn-walk": {
       "version": "6.2.0",
-      "resolved": "https://registry.nlark.com/acorn-walk/download/acorn-walk-6.2.0.tgz?cache=0&sync_timestamp=1624951990736&other_urls=https%3A%2F%2Fregistry.nlark.com%2Facorn-walk%2Fdownload%2Facorn-walk-6.2.0.tgz",
+      "resolved": "https://registry.nlark.com/acorn-walk/download/acorn-walk-6.2.0.tgz",
       "integrity": "sha1-Ejy487hMIXHx9/slJhWxx4prGow="
     },
     "ajv": {
@@ -341,7 +341,7 @@
     },
     "aws-sign2": {
       "version": "0.7.0",
-      "resolved": "https://registry.npm.taobao.org/aws-sign2/download/aws-sign2-0.7.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/aws-sign2/download/aws-sign2-0.7.0.tgz?cache=0&sync_timestamp=1589682812085&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Faws-sign2%2Fdownload%2Faws-sign2-0.7.0.tgz",
       "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg="
     },
     "aws4": {
@@ -1275,7 +1275,7 @@
     },
     "bcrypt-pbkdf": {
       "version": "1.0.2",
-      "resolved": "https://registry.npm.taobao.org/bcrypt-pbkdf/download/bcrypt-pbkdf-1.0.2.tgz",
+      "resolved": "https://registry.npm.taobao.org/bcrypt-pbkdf/download/bcrypt-pbkdf-1.0.2.tgz?cache=0&sync_timestamp=1589682746075&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbcrypt-pbkdf%2Fdownload%2Fbcrypt-pbkdf-1.0.2.tgz",
       "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=",
       "requires": {
         "tweetnacl": "^0.14.3"
@@ -1418,7 +1418,7 @@
     },
     "browser-process-hrtime": {
       "version": "1.0.0",
-      "resolved": "https://registry.nlark.com/browser-process-hrtime/download/browser-process-hrtime-1.0.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/browser-process-hrtime/download/browser-process-hrtime-1.0.0.tgz",
       "integrity": "sha1-PJtLfXgsgSHlbxAQbYTA0P/JRiY="
     },
     "browserify-aes": {
@@ -3301,7 +3301,7 @@
     },
     "cssom": {
       "version": "0.4.4",
-      "resolved": "https://registry.nlark.com/cssom/download/cssom-0.4.4.tgz?cache=0&sync_timestamp=1624218957158&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcssom%2Fdownload%2Fcssom-0.4.4.tgz",
+      "resolved": "https://registry.nlark.com/cssom/download/cssom-0.4.4.tgz",
       "integrity": "sha1-WmbPk9LQtmHYC/akT7ZfXC5OChA="
     },
     "cssstyle": {
@@ -3314,7 +3314,7 @@
       "dependencies": {
         "cssom": {
           "version": "0.3.8",
-          "resolved": "https://registry.nlark.com/cssom/download/cssom-0.3.8.tgz?cache=0&sync_timestamp=1624218957158&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcssom%2Fdownload%2Fcssom-0.3.8.tgz",
+          "resolved": "https://registry.nlark.com/cssom/download/cssom-0.3.8.tgz",
           "integrity": "sha1-nxJ29bK0Y/IRTT8sdSUK+MGjb0o="
         }
       }
@@ -3712,7 +3712,7 @@
     },
     "ecc-jsbn": {
       "version": "0.1.2",
-      "resolved": "https://registry.npm.taobao.org/ecc-jsbn/download/ecc-jsbn-0.1.2.tgz",
+      "resolved": "https://registry.npm.taobao.org/ecc-jsbn/download/ecc-jsbn-0.1.2.tgz?cache=0&sync_timestamp=1589682745945&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fecc-jsbn%2Fdownload%2Fecc-jsbn-0.1.2.tgz",
       "integrity": "sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=",
       "requires": {
         "jsbn": "~0.1.0",
@@ -3977,7 +3977,7 @@
     },
     "escodegen": {
       "version": "1.14.3",
-      "resolved": "https://registry.npm.taobao.org/escodegen/download/escodegen-1.14.3.tgz",
+      "resolved": "https://registry.npm.taobao.org/escodegen/download/escodegen-1.14.3.tgz?cache=0&sync_timestamp=1596669832613&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fescodegen%2Fdownload%2Fescodegen-1.14.3.tgz",
       "integrity": "sha1-TnuB+6YVgdyXWC7XjKt/Do1j9QM=",
       "requires": {
         "esprima": "^4.0.1",
@@ -3989,12 +3989,12 @@
       "dependencies": {
         "esprima": {
           "version": "4.0.1",
-          "resolved": "https://registry.npm.taobao.org/esprima/download/esprima-4.0.1.tgz",
+          "resolved": "https://registry.npm.taobao.org/esprima/download/esprima-4.0.1.tgz?cache=0&sync_timestamp=1589682833047&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fesprima%2Fdownload%2Fesprima-4.0.1.tgz",
           "integrity": "sha1-E7BM2z5sXRnfkatph6hpVhmwqnE="
         },
         "source-map": {
           "version": "0.6.1",
-          "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",
+          "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz?cache=0&sync_timestamp=1589682764497&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsource-map%2Fdownload%2Fsource-map-0.6.1.tgz",
           "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=",
           "optional": true
         }
@@ -4225,7 +4225,7 @@
     },
     "extend": {
       "version": "3.0.2",
-      "resolved": "https://registry.npm.taobao.org/extend/download/extend-3.0.2.tgz",
+      "resolved": "https://registry.npm.taobao.org/extend/download/extend-3.0.2.tgz?cache=0&sync_timestamp=1589682707348&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fextend%2Fdownload%2Fextend-3.0.2.tgz",
       "integrity": "sha1-+LETa0Bx+9jrFAr/hYsQGewpFfo="
     },
     "extend-shallow": {
@@ -4637,7 +4637,7 @@
     },
     "getpass": {
       "version": "0.1.7",
-      "resolved": "https://registry.npm.taobao.org/getpass/download/getpass-0.1.7.tgz",
+      "resolved": "https://registry.npm.taobao.org/getpass/download/getpass-0.1.7.tgz?cache=0&sync_timestamp=1589682745510&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fgetpass%2Fdownload%2Fgetpass-0.1.7.tgz",
       "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
       "requires": {
         "assert-plus": "^1.0.0"
@@ -4729,7 +4729,7 @@
     },
     "har-validator": {
       "version": "5.1.5",
-      "resolved": "https://registry.npm.taobao.org/har-validator/download/har-validator-5.1.5.tgz",
+      "resolved": "https://registry.npm.taobao.org/har-validator/download/har-validator-5.1.5.tgz?cache=0&sync_timestamp=1596082584903&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhar-validator%2Fdownload%2Fhar-validator-5.1.5.tgz",
       "integrity": "sha1-HwgDufjLIMD6E4It8ezds2veHv0=",
       "requires": {
         "ajv": "^6.12.3",
@@ -5104,7 +5104,7 @@
     },
     "http-signature": {
       "version": "1.2.0",
-      "resolved": "https://registry.npm.taobao.org/http-signature/download/http-signature-1.2.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/http-signature/download/http-signature-1.2.0.tgz?cache=0&sync_timestamp=1600868452638&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhttp-signature%2Fdownload%2Fhttp-signature-1.2.0.tgz",
       "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=",
       "requires": {
         "assert-plus": "^1.0.0",
@@ -5627,7 +5627,7 @@
     },
     "jsbn": {
       "version": "0.1.1",
-      "resolved": "https://registry.npm.taobao.org/jsbn/download/jsbn-0.1.1.tgz",
+      "resolved": "https://registry.npm.taobao.org/jsbn/download/jsbn-0.1.1.tgz?cache=0&sync_timestamp=1589682745609&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjsbn%2Fdownload%2Fjsbn-0.1.1.tgz",
       "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM="
     },
     "jsdom": {
@@ -5665,7 +5665,7 @@
       "dependencies": {
         "acorn": {
           "version": "7.4.1",
-          "resolved": "https://registry.nlark.com/acorn/download/acorn-7.4.1.tgz?cache=0&sync_timestamp=1624526855420&other_urls=https%3A%2F%2Fregistry.nlark.com%2Facorn%2Fdownload%2Facorn-7.4.1.tgz",
+          "resolved": "https://registry.nlark.com/acorn/download/acorn-7.4.1.tgz",
           "integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo="
         },
         "ws": {
@@ -5705,7 +5705,7 @@
     },
     "json-stringify-safe": {
       "version": "5.0.1",
-      "resolved": "https://registry.npm.taobao.org/json-stringify-safe/download/json-stringify-safe-5.0.1.tgz",
+      "resolved": "https://registry.npm.taobao.org/json-stringify-safe/download/json-stringify-safe-5.0.1.tgz?cache=0&sync_timestamp=1589682771374&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjson-stringify-safe%2Fdownload%2Fjson-stringify-safe-5.0.1.tgz",
       "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus="
     },
     "json3": {
@@ -5849,7 +5849,7 @@
     },
     "lodash.sortby": {
       "version": "4.7.0",
-      "resolved": "https://registry.npm.taobao.org/lodash.sortby/download/lodash.sortby-4.7.0.tgz?cache=0&sync_timestamp=1589683608371&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash.sortby%2Fdownload%2Flodash.sortby-4.7.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/lodash.sortby/download/lodash.sortby-4.7.0.tgz",
       "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg="
     },
     "lodash.uniq": {
@@ -6573,7 +6573,7 @@
     },
     "oauth-sign": {
       "version": "0.9.0",
-      "resolved": "https://registry.npm.taobao.org/oauth-sign/download/oauth-sign-0.9.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/oauth-sign/download/oauth-sign-0.9.0.tgz?cache=0&sync_timestamp=1589682811909&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Foauth-sign%2Fdownload%2Foauth-sign-0.9.0.tgz",
       "integrity": "sha1-R6ewFrqmi1+g7PPe4IqFxnmsZFU="
     },
     "object-assign": {
@@ -6937,7 +6937,7 @@
     },
     "parse5": {
       "version": "5.1.0",
-      "resolved": "https://registry.npm.taobao.org/parse5/download/parse5-5.1.0.tgz?cache=0&sync_timestamp=1595849263958&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fparse5%2Fdownload%2Fparse5-5.1.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/parse5/download/parse5-5.1.0.tgz",
       "integrity": "sha1-xZNByXI/QUxFKXVWTHwApo1YrNI="
     },
     "parseurl": {
@@ -9731,7 +9731,7 @@
     },
     "request": {
       "version": "2.88.2",
-      "resolved": "https://registry.npm.taobao.org/request/download/request-2.88.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Frequest%2Fdownload%2Frequest-2.88.2.tgz",
+      "resolved": "https://registry.npm.taobao.org/request/download/request-2.88.2.tgz?cache=0&sync_timestamp=1589682741998&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Frequest%2Fdownload%2Frequest-2.88.2.tgz",
       "integrity": "sha1-1zyRhzHLWofaBH4gcjQUb2ZNErM=",
       "requires": {
         "aws-sign2": "~0.7.0",
@@ -9758,12 +9758,12 @@
       "dependencies": {
         "qs": {
           "version": "6.5.2",
-          "resolved": "https://registry.npm.taobao.org/qs/download/qs-6.5.2.tgz?cache=0&sync_timestamp=1616385281714&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fqs%2Fdownload%2Fqs-6.5.2.tgz",
+          "resolved": "https://registry.npm.taobao.org/qs/download/qs-6.5.2.tgz?cache=0&sync_timestamp=1616385315895&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fqs%2Fdownload%2Fqs-6.5.2.tgz",
           "integrity": "sha1-yzroBuh0BERYTvFUzo7pjUA/PjY="
         },
         "tough-cookie": {
           "version": "2.5.0",
-          "resolved": "https://registry.npm.taobao.org/tough-cookie/download/tough-cookie-2.5.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftough-cookie%2Fdownload%2Ftough-cookie-2.5.0.tgz",
+          "resolved": "https://registry.npm.taobao.org/tough-cookie/download/tough-cookie-2.5.0.tgz?cache=0&sync_timestamp=1589682815640&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftough-cookie%2Fdownload%2Ftough-cookie-2.5.0.tgz",
           "integrity": "sha1-zZ+yoKodWhK0c72fuW+j3P9lreI=",
           "requires": {
             "psl": "^1.1.28",
@@ -9774,7 +9774,7 @@
     },
     "request-promise-core": {
       "version": "1.1.4",
-      "resolved": "https://registry.npm.taobao.org/request-promise-core/download/request-promise-core-1.1.4.tgz",
+      "resolved": "https://registry.npm.taobao.org/request-promise-core/download/request-promise-core-1.1.4.tgz?cache=0&sync_timestamp=1595378681719&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Frequest-promise-core%2Fdownload%2Frequest-promise-core-1.1.4.tgz",
       "integrity": "sha1-Pu3UIjII1BmGe3jOgVFn0QWToi8=",
       "requires": {
         "lodash": "^4.17.19"
@@ -9792,7 +9792,7 @@
       "dependencies": {
         "tough-cookie": {
           "version": "2.5.0",
-          "resolved": "https://registry.npm.taobao.org/tough-cookie/download/tough-cookie-2.5.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftough-cookie%2Fdownload%2Ftough-cookie-2.5.0.tgz",
+          "resolved": "https://registry.npm.taobao.org/tough-cookie/download/tough-cookie-2.5.0.tgz?cache=0&sync_timestamp=1589682815640&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftough-cookie%2Fdownload%2Ftough-cookie-2.5.0.tgz",
           "integrity": "sha1-zZ+yoKodWhK0c72fuW+j3P9lreI=",
           "requires": {
             "psl": "^1.1.28",
@@ -10973,7 +10973,7 @@
     },
     "tough-cookie": {
       "version": "3.0.1",
-      "resolved": "https://registry.npm.taobao.org/tough-cookie/download/tough-cookie-3.0.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftough-cookie%2Fdownload%2Ftough-cookie-3.0.1.tgz",
+      "resolved": "https://registry.npm.taobao.org/tough-cookie/download/tough-cookie-3.0.1.tgz?cache=0&sync_timestamp=1589682815640&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftough-cookie%2Fdownload%2Ftough-cookie-3.0.1.tgz",
       "integrity": "sha1-nfT1fnOcJpMKAYGEiH9K233Kc7I=",
       "requires": {
         "ip-regex": "^2.1.0",
@@ -10989,6 +10989,11 @@
         "punycode": "^2.1.0"
       }
     },
+    "tracking": {
+      "version": "1.1.3",
+      "resolved": "https://registry.nlark.com/tracking/download/tracking-1.1.3.tgz",
+      "integrity": "sha1-zv05txdflt4XI9KI/xXyiIe524I="
+    },
     "trim-newlines": {
       "version": "1.0.0",
       "resolved": "https://registry.nlark.com/trim-newlines/download/trim-newlines-1.0.0.tgz?cache=0&sync_timestamp=1623341510447&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ftrim-newlines%2Fdownload%2Ftrim-newlines-1.0.0.tgz",
@@ -11023,7 +11028,7 @@
     },
     "tweetnacl": {
       "version": "0.14.5",
-      "resolved": "https://registry.npm.taobao.org/tweetnacl/download/tweetnacl-0.14.5.tgz",
+      "resolved": "https://registry.npm.taobao.org/tweetnacl/download/tweetnacl-0.14.5.tgz?cache=0&sync_timestamp=1589682745749&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftweetnacl%2Fdownload%2Ftweetnacl-0.14.5.tgz",
       "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q="
     },
     "type": {
@@ -12289,7 +12294,7 @@
     },
     "word-wrap": {
       "version": "1.2.3",
-      "resolved": "https://registry.npm.taobao.org/word-wrap/download/word-wrap-1.2.3.tgz",
+      "resolved": "https://registry.npm.taobao.org/word-wrap/download/word-wrap-1.2.3.tgz?cache=0&sync_timestamp=1589683603678&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fword-wrap%2Fdownload%2Fword-wrap-1.2.3.tgz",
       "integrity": "sha1-YQY29rH3A4kb00dxzLF/uTtHB5w="
     },
     "wordwrap": {
@@ -12353,7 +12358,7 @@
     },
     "xmlchars": {
       "version": "2.2.0",
-      "resolved": "https://registry.nlark.com/xmlchars/download/xmlchars-2.2.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/xmlchars/download/xmlchars-2.2.0.tgz",
       "integrity": "sha1-Bg/hvLf5x2/ioX24apvDq4lCEMs="
     },
     "xtend": {

package.json

@@ -13,6 +13,7 @@
     "axios": "^0.21.1",
     "blockly": "^6.20210701.0",
     "element-ui": "^2.15.3",
+    "tracking": "^1.1.3",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1",
     "vuex": "^3.6.2"

src/components/function.vue

@@ -110,24 +110,24 @@ export default {
     }
   },
   mounted() {
-    console.log(this.$store.state.function);
-    var _s3 = document.createElement("script");
-    _s3.src = "/static/materialize/jquery-2.1.3.min.js";
-    _s3.type = "text/javascript";
-    document.head.appendChild(_s3);
-    var _s2 = document.createElement("script");
-    _s2.src = "/static/camera.283d5d54.js";
-    _s2.type = "text/javascript";
-    document.head.appendChild(_s2);
-    var _s1 = document.createElement("script");
-    _s1.src = "/static/bundle.js";
-    _s1.type = "text/javascript";
-    document.head.appendChild(_s1);
-
-    console.log(this.$store.state.function);
-    if (this.$store.state.function == 1) {
-      this.$message.error("摄像头开启失败，请检查摄像头是否可用！");
-    }
+    // console.log(this.$store.state.function);
+    // var _s3 = document.createElement("script");
+    // _s3.src = "/static/materialize/jquery-2.1.3.min.js";
+    // _s3.type = "text/javascript";
+    // document.head.appendChild(_s3);
+    // var _s2 = document.createElement("script");
+    // _s2.src = "/static/camera.283d5d54.js";
+    // _s2.type = "text/javascript";
+    // document.head.appendChild(_s2);
+    // var _s1 = document.createElement("script");
+    // _s1.src = "/static/bundle.js";
+    // _s1.type = "text/javascript";
+    // document.head.appendChild(_s1);
+
+    // console.log(this.$store.state.function);
+    // if (this.$store.state.function == 1) {
+    //   this.$message.error("摄像头开启失败，请检查摄像头是否可用！");
+    // }
   }
 };
 </script>

src/components/test.vue

@@ -0,0 +1,232 @@
+<template>
+  <div id="facelogin">
+    <h1 class="title is-1">{{FaceisDetected}}</h1>
+    <!-- <p>{{FaceisDetected}}</p> -->
+    <div class="content-cam">
+      <div class="camera-wrp sec">
+        <video width="320" height="320" ref="videoDom" id="video_cam" preload autoplay loop muted></video>
+        <canvas width="320" height="320" ref="canvasDOM" id="face_detect"></canvas>
+        <div class="control-btn"></div>
+      </div>
+      <div class="images-wrp sec">
+        <!-- <p class="title is-5">Image taken</p> -->
+        <div
+          :class="`img-item img-item-${index}`"
+          v-for="(image, index) in images"
+          :key="`img-wrp-${index}`"
+          :style="`background-image: url('${image}')`"
+        ></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "facelogin",
+  data() {
+    return {
+      count: 0,
+      isdetected: "请您保持脸部在画面中央",
+      videoEl: {},
+      canvasEL: {},
+      images: [],
+      trackCcv: false,
+      trackTracking: false,
+      autoCaptureTrackTraking: false,
+      userMediaConstraints: {
+        audio: false,
+        video: {
+          // ideal（应用最理想的）
+          width: {
+            min: 320,
+            ideal: 1280,
+            max: 1920
+          },
+          height: {
+            min: 240,
+            ideal: 720,
+            max: 1080
+          },
+          // frameRate受限带宽传输时，低帧率可能更适宜
+          frameRate: {
+            min: 15,
+            ideal: 30,
+            max: 60
+          },
+          // 摄像头翻转
+          facingMode: "user"
+        }
+      }
+    };
+  },
+  created() {
+    this.changeView();
+  },
+  computed: {
+    FaceisDetected() {
+      return this.isdetected;
+    }
+  },
+  mounted() {
+    // The getUserMedia interface is used for handling camera input.
+    // Some browsers need a prefix so here we're covering all the options
+    navigator.getMedia =
+      navigator.getUserMedia ||
+      navigator.webkitGetUserMedia ||
+      navigator.mozGetUserMedia ||
+      navigator.msGetUserMedia;
+    this.init();
+  },
+  methods: {
+    async init() {
+      this.videoEl = this.$refs.videoDom;
+      this.canvasEL = this.$refs.canvasDOM;
+      await navigator.mediaDevices
+        .getUserMedia(this.userMediaConstraints)
+        .then(this.getMediaStreamSuccess)
+        .catch(this.getMediaStreamError);
+      await this.onPlay();
+    },
+    async onPlay() {
+      debugHelper.log("onPlay");
+
+      this.onTrackTracking();
+    },
+    changeView() {
+      this.setTitle("刷脸登陆");
+      this.setBackDisabled(false);
+      this.setBackIcon("arrow_back");
+      msgbus.vm.setBottomNavVisible(false);
+      msgbus.vm.setBottomBtnVisible(false);
+      msgbus.vm.setMsgInputVisible({ value: false });
+    },
+
+    onTrackTracking() {
+      const context = this;
+      const video = this.videoEl;
+      const canvas = this.canvasEL;
+      const canvasContext = canvas.getContext("2d");
+      let tracker = new tracking.ObjectTracker("face");
+
+      video.pause();
+      video.src = "";
+      tracker.setInitialScale(4);
+      tracker.setStepSize(2);
+      tracker.setEdgesDensity(0.1);
+      tracking.track("#video_cam", tracker, { camera: true });
+      tracker.on("track", function(event) {
+        const { autoCaptureTrackTraking } = context;
+        canvasContext.clearRect(0, 0, canvas.width, canvas.height);
+        event.data.forEach(function({ x, y, width, height }) {
+          canvasContext.strokeStyle = "#a64ceb";
+          canvasContext.strokeRect(x, y, width, height);
+          canvasContext.font = "11px Helvetica";
+          canvasContext.fillStyle = "#fff";
+        });
+
+        if (!isEmpty(event.data) && context.count <= 10) {
+          if (context.count < 0) context.count = 0;
+          context.count += 1;
+          //debugHelper.log(context.count)
+          if (context.count > 10) {
+            context.isdetected = "已检测到人脸，正在登录";
+            //context.$router.push({ name: 'pwdlogin' })
+          }
+        } else {
+          context.count -= 1;
+          if (context.count < 0) context.isdetected = "请您保持脸部在画面中央";
+          //this.isdetected = '已检测到人脸，正在登录'
+        }
+      });
+    },
+    onDownloadFile(item) {
+      const link = document.createElement("a");
+      link.href = item;
+      link.download = `cahyo-${new Date().toISOString()}.png`;
+      link.click();
+
+      link.remove();
+    },
+    onTakeCam() {
+      const canvas = document.createElement("canvas");
+      const video = this.$el.querySelector("#video_cam");
+      const canvasContext = canvas.getContext("2d");
+
+      if (video.videoWidth && video.videoHeight) {
+        const isBiggerW = video.videoWidth > video.videoHeight;
+        const fixVidSize = isBiggerW ? video.videoHeight : video.videoWidth;
+        let offsetLeft = 0;
+        let offsetTop = 0;
+
+        if (isBiggerW) offsetLeft = (video.videoWidth - fixVidSize) / 2;
+        else offsetTop = (video.videoHeight - fixVidSize) / 2;
+
+        // make canvas size 300px
+        canvas.width = canvas.height = 300;
+        const { width, height } = canvas;
+
+        canvasContext.drawImage(
+          video,
+          offsetLeft,
+          offsetTop,
+          fixVidSize,
+          fixVidSize,
+          0,
+          0,
+          width,
+          height
+        );
+        const image = canvas.toDataURL("image/png");
+        this.images.push(image);
+      }
+    },
+    onDetectFace(param, index) {
+      const imgItem = document.querySelector(`.img-item-${index}`);
+      const image = new Image();
+      image.src = param;
+
+      const tracker = new tracking.ObjectTracker("face");
+      tracker.setStepSize(1.7);
+      tracking.track(image, tracker);
+
+      tracker.on("track", function(event) {
+        event.data.forEach(function(rect) {
+          window.plot(rect.x, rect.y, rect.width, rect.height);
+        });
+      });
+
+      window.plot = function(x, y, w, h) {
+        const rect = document.createElement("div");
+        document.querySelector(`.img-item-${index}`).appendChild(rect);
+        rect.classList.add("rect");
+        rect.style.width = w + "px";
+        rect.style.height = h + "px";
+        rect.style.left = x + "px";
+        rect.style.top = y + "px";
+        rect.style.border = "2px solid yellow";
+        rect.style.position = "absolute";
+      };
+    },
+    getMediaStreamSuccess(stream) {
+      window.stream = stream; // make stream available to browser console
+      this.videoEl.srcObject = stream;
+      debugHelper.log("getMediaStreamSuccess1");
+      //this.$store.commit('setVideoCanvasObject', this.videoEl)
+      debugHelper.log("getMediaStreamSuccess2");
+    },
+    // 视频媒体流失败
+    getMediaStreamError(error) {
+      alert("视频媒体流获取错误" + error);
+    },
+    // 结束媒体流
+    stopMediaStreamTrack() {
+      clearInterval(this.timeInterval);
+      if (typeof window.stream === "object") {
+        this.videoEl.srcObject = null;
+        //this.$store.commit('setVideoCanvasObject', '')
+        window.stream.getTracks().forEach(track => track.stop());
+      }
+    }
+  }
+};
+</script>

src/router/index.js

@@ -6,6 +6,7 @@ import police from '@/components/police'
 import blockly from '@/components/blockly'
 import function1 from '@/components/function'
 import camera from '@/components/camera'
+import test from '@/components/test'
 
 Vue.use(Router).use(ElementUI)
 
@@ -30,6 +31,11 @@ export default new Router({
       path: '/camera',
       name: 'camera',
       component: camera
+    },
+    {
+      path: '/test',
+      name: 'test',
+      component: test
     }
   ]
 })