{"version":3,"sources":["webpack:///./src/views/modalCamera2.vue","webpack:///src/views/modalCamera2.vue","webpack:///./src/views/modalCamera2.vue?9228","webpack:///./src/views/modalCamera2.vue?1af8","webpack:///./src/views/modalCamera2.vue?46f0"],"names":["render","_vm","this","_c","_self","staticClass","attrs","ref","staticStyle","staticRenderFns","props","data","type","Object","default","callback","Function","mounted","initVido","methods","photo","$nextTick","photograph","img","document","getElementById","ctx","$refs","getContext","drawImage","newCanvas","newImage","Image","src","toDataURL","url","upLoadImage64","faceVerify","isPass","$message","message","error","loading","$loading","text","params","captureUrl","axios","post","close","base64Image","navigator","getUserMedia","mediaDevices","video","then","stream","videos","srcObject","play","catch","console","log","name","component"],"mappings":"yHAAA,IAAIA,EAAS,WAAkB,IAAIC,EAAIC,KAAKC,EAAGF,EAAIG,MAAMD,GAAG,OAAOA,EAAG,MAAM,CAACE,YAAY,YAAY,CAACF,EAAG,MAAM,CAACE,YAAY,UAAUC,MAAM,CAAC,GAAK,kBAAkB,CAACH,EAAG,QAAQ,CAACI,IAAI,SAASC,YAAY,CAAC,MAAQ,QAAQ,OAAS,SAASF,MAAM,CAAC,GAAK,SAAS,MAAQ,MAAM,OAAS,MAAM,SAAW,QAAQH,EAAG,SAAS,CAACI,IAAI,SAASC,YAAY,CAAC,QAAU,QAAQF,MAAM,CAAC,MAAQ,MAAM,OAAS,YAErYG,EAAkB,GCQP,GACfC,MAAA,CAKAC,KAAA,CACAC,KAAAC,OACAC,gBAMAC,SAAA,CACAH,KAAAI,SACAF,QAAA,OAGAG,UACA,KAAAC,YAEAC,QAAA,CACAC,QAEA,KAAAC,UAAA,KAEA,KAAAC,gBAGAA,aAEA,IAAAC,EAAAC,SAAAC,eAAA,UAGAC,EAAA,KAAAC,MAAA,UAAAC,WAAA,MAEA,KAAAP,UAAA,UACAK,EAAAG,UAAAN,EAAA,aAGA,IAAAO,EAAA,KAAAH,MAAA,UACA,MAAAI,EAAA,IAAAC,MACAD,EAAAE,IAAAH,EAAAI,UAAA,aAKA,MAAAC,QAAA,KAAAC,cAAAL,EAAAE,KACAtB,QAAA,KAAA0B,WAAAF,GACAxB,EAAA2B,QACA,KAAAvB,SAAAJ,GACA,KAAA4B,SAAA,CACAC,QAAA,UACA5B,KAAA,aAGA,KAAA2B,SAAAE,MAAA,eAIA,iBAAAN,GACA,MAAAO,EAAA,KAAAC,SAAA,CACAC,KAAA,eAEAC,EAAA,CACAC,WAAAX,GAEA,IACA,WAAAxB,SAAA,KAAAoC,MAAAC,KAAA,mCAAAH,WACA,OAAAlC,EACA,QACA+B,EAAAO,UAGA,oBAAAhB,GACA,MAAAS,EAAA,KAAAC,SAAA,CACAC,KAAA,eAEA,IACA,WAAAjC,SAAA,KAAAoC,MAAAC,KAAA,+BACAE,YAAAjB,IAEA,OAAAtB,EAAAwB,IACA,QACAO,EAAAO,UAGA/B,WACAiC,UAAAC,cAAAD,UAAAE,aAAAD,cACAD,UAAAE,aACAD,aAAA,CACAE,OAAA,IAEAC,KAAAC,IACA,MAAAF,EAAA,KAAA3B,MAAA8B,OACAH,EAAAI,UAAAF,EACAF,EAAAK,SAEAC,MAAAnB,IACAoB,QAAAC,IAAA,aAAArB,EAAAsB,SAAAtB,EAAAD,gBC9GqV,I,wBCQjVwB,EAAY,eACd,EACAhE,EACAS,GACA,EACA,KACA,WACA,MAIa,aAAAuD,E,2CCnBf,W","file":"js/chunk-6f99647d.1c08618a.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"videoBox\"},[_c('div',{staticClass:\"flexBox\",attrs:{\"id\":\"contentHolder\"}},[_c('video',{ref:\"videos\",staticStyle:{\"width\":\"300px\",\"height\":\"240px\"},attrs:{\"id\":\"videos\",\"width\":\"300\",\"height\":\"240\",\"autoplay\":\"\"}})]),_c('canvas',{ref:\"canvas\",staticStyle:{\"display\":\"none\"},attrs:{\"width\":\"320\",\"height\":\"240\"}})])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div class=\"videoBox\">\r\n    <div id=\"contentHolder\" class=\"flexBox\">\r\n      <video id=\"videos\" style=\"width:300px;height:240px;\" width=\"300\" height=\"240\" autoplay ref=\"videos\"></video>\r\n    </div>\r\n    <canvas width=\"320\" height=\"240\" ref=\"canvas\" style=\"display:none;\"></canvas>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n  props: {\r\n    // value: {\r\n    //   type: Boolean,\r\n    //   default: false\r\n    // },\r\n    data: {\r\n      type: Object,\r\n      default: () => {}\r\n    },\r\n    // type: {\r\n    //   type: String,\r\n    //   default: \"\"\r\n    // },\r\n    callback: {\r\n      type: Function,\r\n      default:null\r\n    }\r\n  },\r\n  mounted() {\r\n    this.initVido();\r\n  },\r\n  methods: {\r\n    photo() {\r\n      // 裁剪图片\r\n      this.$nextTick(() => {\r\n        //需要使用nextTick 不然DOM渲染过快导致初次无法进行渲染-或者使用SetTomeOut(()=>{},200)\r\n        this.photograph();\r\n      });\r\n    },\r\n    photograph() {\r\n      // 把当前视频帧内容渲染到canvas上\r\n      let img = document.getElementById(\"videos\"); //获取标签\r\n\r\n      //getContext方法返回一个用于在画布上绘图的环境。\r\n      let ctx = this.$refs[\"canvas\"].getContext(\"2d\");\r\n\r\n      this.$nextTick(async () => {\r\n        ctx.drawImage(img, 0, 0, 320, 240); //在画布上定位图像\r\n        //drawImage(img,x,y,width,height);\r\n        // canvas转化为图片\r\n        let newCanvas = this.$refs[\"canvas\"];\r\n        const newImage = new Image(); //做预加载。\r\n        newImage.src = newCanvas.toDataURL(\"image/png\"); //这里重点 toDataURL 转换为Base 64\r\n\r\n        //先确定一下提交到后端的时候数据是否完整\r\n        //php也有办法把base64保存成图片文件\r\n        //mysql的类型可以考虑缓存MEDIUMTEXT和LONGTEXT\r\n        const url = await this.upLoadImage64(newImage.src);\r\n        const data = await this.faceVerify(url);\r\n        if (data.isPass) {\r\n          this.callback(data);\r\n          this.$message({\r\n            message: \"人脸比对通过!\",\r\n            type: \"success\"\r\n          });\r\n        } else {\r\n          this.$message.error(\"人脸比对不通过!\");\r\n        }\r\n      });\r\n    },\r\n    async faceVerify(url) {\r\n      const loading = this.$loading({\r\n        text: \"人脸比对中,请稍等!\"\r\n      });\r\n      const params = {\r\n        captureUrl: url,\r\n      };\r\n      try {\r\n        const { data } = await this.axios.post( `/student/abnormal/faceVerify`,{},{params:params});\r\n        return data;\r\n      } finally {\r\n        loading.close();\r\n      }\r\n    },\r\n    async upLoadImage64(src) {\r\n      const loading = this.$loading({\r\n        text: \"人脸比对中,请稍等!\"\r\n      });\r\n      try {\r\n        const { data } = await this.axios.post(`/student/upload/base64Image`, {\r\n          base64Image: src\r\n        });\r\n        return data.url;\r\n      } finally {\r\n        loading.close();\r\n      }\r\n    },\r\n    initVido() {\r\n      if (navigator.getUserMedia && navigator.mediaDevices.getUserMedia) {\r\n        navigator.mediaDevices\r\n          .getUserMedia({\r\n            video: true\r\n          })\r\n          .then((stream) => {\r\n            const video = this.$refs.videos;\r\n            video.srcObject=stream;\r\n            video.play();\r\n          })\r\n          .catch((error) => {\r\n            console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);\r\n          });\r\n      }\r\n    }\r\n  }\r\n};\r\n</script>\r\n\r\n<style scoped>\r\n.videoBox {\r\n  z-index: 3;\r\n  width: 300px;\r\n}\r\n.flexBox {\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n.cameraBtn {\r\n  width: 100%;\r\n}\r\n</style>\r\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./modalCamera2.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./modalCamera2.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./modalCamera2.vue?vue&type=template&id=57227bf0&scoped=true\"\nimport script from \"./modalCamera2.vue?vue&type=script&lang=js\"\nexport * from \"./modalCamera2.vue?vue&type=script&lang=js\"\nimport style0 from \"./modalCamera2.vue?vue&type=style&index=0&id=57227bf0&prod&scoped=true&lang=css\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"57227bf0\",\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--7-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--7-oneOf-1-2!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./modalCamera2.vue?vue&type=style&index=0&id=57227bf0&prod&scoped=true&lang=css\""],"sourceRoot":""}