{"ast":null,"code":"import \"core-js/modules/esnext.iterator.constructor.js\";\nimport \"core-js/modules/esnext.iterator.for-each.js\";\nimport './tracking/build/tracking-min.js';\nimport './tracking/build/data/face-min.js';\nexport default {\n  name: 'FaceRecog',\n  data() {\n    return {\n      videoObj: null,\n      trackerTask: null\n    };\n  },\n  computed: {},\n  mounted() {\n    this.init();\n  },\n  beforeDestroy() {\n    //\n  },\n  methods: {\n    // 初始化设置\n    init() {\n      this.video = document.getElementById('video');\n      this.screenshotCanvas = document.getElementById('screenshotCanvas');\n      let canvas = document.getElementById('canvas');\n      let context = canvas.getContext('2d');\n      let tracker = new window.tracking.ObjectTracker('face');\n      tracker.setInitialScale(4);\n      tracker.setStepSize(2);\n      tracker.setEdgesDensity(0.1);\n      window.tracking.track('#video', tracker, {\n        camera: true\n      });\n      let _this = this;\n      tracker.on('track', function (event) {\n        // 检测出人脸 绘画人脸位置\n        context.clearRect(0, 0, canvas.width, canvas.height);\n        event.data.forEach(function (rect) {\n          context.strokeStyle = '#0764B7';\n          context.strokeRect(rect.x, rect.y, rect.width, rect.height);\n          _this.uploadLock && _this.screenshotAndUpload();\n        });\n      });\n    },\n    screenshotAndUpload() {\n      // 上锁避免重复发送请求\n      this.uploadLock = false;\n\n      // 绘制当前帧图片转换为base64格式\n      let canvas = this.screenshotCanvas;\n      let video = this.video;\n      let ctx = canvas.getContext('2d');\n      ctx.clearRect(0, 0, canvas.width, canvas.height);\n      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);\n      let base64Img = canvas.toDataURL('image/jpeg');\n\n      // 使用 base64Img 请求接口即可\n      console.log('base64Img:', base64Img);\n\n      // 请求接口成功以后打开锁\n      this.uploadLock = true;\n    }\n  }\n};","map":{"version":3,"names":["name","data","videoObj","trackerTask","computed","mounted","init","beforeDestroy","methods","video","document","getElementById","screenshotCanvas","canvas","context","getContext","tracker","window","tracking","ObjectTracker","setInitialScale","setStepSize","setEdgesDensity","track","camera","_this","on","event","clearRect","width","height","forEach","rect","strokeStyle","strokeRect","x","y","uploadLock","screenshotAndUpload","ctx","drawImage","base64Img","toDataURL","console","log"],"sources":["src/views/faceRecog/index.vue"],"sourcesContent":["<template>\n\t<div class=\"content\">\n\t\t<div class=\"video-box\">\n\t\t\t<video id=\"video\" width=\"320\" height=\"240\" preload autoplay loop muted></video>\n\t\t\t<canvas id=\"canvas\" width=\"320\" height=\"240\"></canvas>\n\t\t</div>\n\t\t<canvas id=\"screenshotCanvas\" width=\"320\" height=\"240\"></canvas>\n\t</div>\n</template>\n  \n<script>\nimport './tracking/build/tracking-min.js';\nimport './tracking/build/data/face-min.js';\n\n  export default {\n    name: 'FaceRecog',\n    data() {\n\t\treturn {\n\t\t\tvideoObj: null,\n\t\t\ttrackerTask: null,\n\t\t};\n    },\n    computed: {},\n    mounted() {\n        this.init()\n    },\n\tbeforeDestroy () {\n\t\t//\n\t},\n    methods: {\n\t\t// 初始化设置\n\t\tinit() {\n\t\t\tthis.video = document.getElementById('video');\n\t\t\tthis.screenshotCanvas = document.getElementById('screenshotCanvas');\n\t\n\t\t\tlet canvas = document.getElementById('canvas');\n\t\t\tlet context = canvas.getContext('2d');\n\t\n\t\t\tlet tracker = new window.tracking.ObjectTracker('face');\n\t\t\ttracker.setInitialScale(4);\n\t\t\ttracker.setStepSize(2);\n\t\t\ttracker.setEdgesDensity(0.1);\n\t\t\twindow.tracking.track('#video', tracker, {\n\t\t\tcamera: true\n\t\t\t});\n\t\n\t\t\tlet _this = this;\n\t\t\ttracker.on('track', function(event) {\n\t\n\t\t\t// 检测出人脸 绘画人脸位置\n\t\t\tcontext.clearRect(0, 0, canvas.width, canvas.height);\n\t\t\tevent.data.forEach(function(rect) {\n\t\t\t\tcontext.strokeStyle = '#0764B7';\n\t\t\t\tcontext.strokeRect(rect.x, rect.y, rect.width, rect.height);\n\t\n\t\t\t\t_this.uploadLock && _this.screenshotAndUpload();\n\t\t\t});\n\t\t\t});\n\t\t},\n\t\tscreenshotAndUpload() {\n\t\t\t// 上锁避免重复发送请求\n\t\t\tthis.uploadLock = false;\n\t\n\t\t\t// 绘制当前帧图片转换为base64格式\n\t\t\tlet canvas = this.screenshotCanvas;\n\t\t\tlet video = this.video;\n\t\t\tlet ctx = canvas.getContext('2d');\n\t\t\tctx.clearRect(0, 0, canvas.width, canvas.height);\n\t\t\tctx.drawImage(video, 0, 0, canvas.width, canvas.height);\n\t\t\tlet base64Img = canvas.toDataURL('image/jpeg');\n\t\n\t\t\t// 使用 base64Img 请求接口即可\n\t\t\tconsole.log('base64Img:',base64Img)\n\t\n\t\t\t// 请求接口成功以后打开锁\n\t\t\tthis.uploadLock = true;\n\t\t}\n    }\n  }\n</script>\n  \n<style scoped>\n.content {\n\tdisplay: flex;\n    justify-content: center;\n\tpadding: 24px;\n}\n\n#screenshotCanvas{\n\tdisplay: none;\n}\n \n.video-box{\n    position: relative;\n    width: 320px;\n    height: 240px;\n  }\n  \n  \nvideo,canvas{\n    position: absolute;\n    top: 0;\n    left: 0;\n\tborder: #000000 5px solid;\n}\n</style>\n  "],"mappings":";;AAWA;AACA;AAEA;EACAA,IAAA;EACAC,KAAA;IACA;MACAC,QAAA;MACAC,WAAA;IACA;EACA;EACAC,QAAA;EACAC,QAAA;IACA,KAAAC,IAAA;EACA;EACAC,cAAA;IACA;EAAA,CACA;EACAC,OAAA;IACA;IACAF,KAAA;MACA,KAAAG,KAAA,GAAAC,QAAA,CAAAC,cAAA;MACA,KAAAC,gBAAA,GAAAF,QAAA,CAAAC,cAAA;MAEA,IAAAE,MAAA,GAAAH,QAAA,CAAAC,cAAA;MACA,IAAAG,OAAA,GAAAD,MAAA,CAAAE,UAAA;MAEA,IAAAC,OAAA,OAAAC,MAAA,CAAAC,QAAA,CAAAC,aAAA;MACAH,OAAA,CAAAI,eAAA;MACAJ,OAAA,CAAAK,WAAA;MACAL,OAAA,CAAAM,eAAA;MACAL,MAAA,CAAAC,QAAA,CAAAK,KAAA,WAAAP,OAAA;QACAQ,MAAA;MACA;MAEA,IAAAC,KAAA;MACAT,OAAA,CAAAU,EAAA,oBAAAC,KAAA;QAEA;QACAb,OAAA,CAAAc,SAAA,OAAAf,MAAA,CAAAgB,KAAA,EAAAhB,MAAA,CAAAiB,MAAA;QACAH,KAAA,CAAA1B,IAAA,CAAA8B,OAAA,WAAAC,IAAA;UACAlB,OAAA,CAAAmB,WAAA;UACAnB,OAAA,CAAAoB,UAAA,CAAAF,IAAA,CAAAG,CAAA,EAAAH,IAAA,CAAAI,CAAA,EAAAJ,IAAA,CAAAH,KAAA,EAAAG,IAAA,CAAAF,MAAA;UAEAL,KAAA,CAAAY,UAAA,IAAAZ,KAAA,CAAAa,mBAAA;QACA;MACA;IACA;IACAA,oBAAA;MACA;MACA,KAAAD,UAAA;;MAEA;MACA,IAAAxB,MAAA,QAAAD,gBAAA;MACA,IAAAH,KAAA,QAAAA,KAAA;MACA,IAAA8B,GAAA,GAAA1B,MAAA,CAAAE,UAAA;MACAwB,GAAA,CAAAX,SAAA,OAAAf,MAAA,CAAAgB,KAAA,EAAAhB,MAAA,CAAAiB,MAAA;MACAS,GAAA,CAAAC,SAAA,CAAA/B,KAAA,QAAAI,MAAA,CAAAgB,KAAA,EAAAhB,MAAA,CAAAiB,MAAA;MACA,IAAAW,SAAA,GAAA5B,MAAA,CAAA6B,SAAA;;MAEA;MACAC,OAAA,CAAAC,GAAA,eAAAH,SAAA;;MAEA;MACA,KAAAJ,UAAA;IACA;EACA;AACA","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}