vue项目人脸侦测(tracking.js)

Vue项目,利用tracking.js 实现人脸侦测(摄像头输入,图片同理)
 1 <template>
 2 <div>
 3 <video autoplay playsinline ref="video" id="video"></video>
 4 <canvas id="canvas" width="500" height="400" class="canvas"></canvas>
 5 <div @click="submit">上传照片</div>
 6 </div>
 7 </template>
 8 <script>
 9 import tracking from '@/assets/js/tracking.js'
10 import '@/assets/js/face-min.js'
11 export default {
12   name: 'componentName',
13   data () {
14     return {
15         videoEle: null
16     }  
17   },
18   method () {
19     openCamera () {
20       let tracker = new window.tracking.ObjectTracker('face')
21       tracker.setStepSize(2);
22       // //  转头角度影响识别率
23       tracker.setEdgesDensity(0.13)
24       tracker.setInitialScale(5)
25       this.trackerTask = window.tracking.track('#video', tracker, {camera: true})
26       tracker.on('track', (event) => {
27         if (event.data.length > 0) {
28           console.log('有头像')
29           //人脸位置矩形顶点
30           console.log(event.data)
31         } else {
32           console.log('没有头像')
33         }
34       })
35   },
36   submit () {
37         console.log('提交')
38         let that = this
39         let canvas = document.getElementById('canvas')
40         let context = canvas.getContext('2d')
41         let video = document.getElementById('video')
42         context.drawImage(video, 0,0, 500, 400)
43         canvas.toBlob((blob) => {
44           // window.open(URL.createObjectURL(blob))
45           // blob 格式 图片url
46           // that.avatarUrl = URL.createObjectURL(blob)
47           axios.post({faceUrl: URL.createObjectURL(blob)})
48           .then((res) => {
49            console.log('上传成功')
50           })
51         })        
52       }
53     }
54   },
55   mounted () {
56     this.videoEle = this.$refs.video
57     this.openCamera()
58   },
59   destroyed () {
60     // 停止侦测
61     this.trackerTask.stop()
62     // 关闭摄像头
63     window.tracking.closeCamera()
64   }
65 }

 

转载于:https://www.cnblogs.com/W-it-H-ou-T/p/10999520.html