项目中需要实现人脸登陆功能，实现思路为在前端检测人脸，把人脸照片发送到后端识别，返回用户token登陆成功
前端调用摄像头使用tracking.js检测视频流中的人脸，检测到人脸后拍照上传后端。
后端使用face_recognition人脸识别库，使用Flask提供restfulAP供前端调用
实现效果如下图：
登陆界面：
摄像头检测人脸界面：
前端代码如下：
<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>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'
}
}
}
},
computed: {
FaceisDetected() {
return this.isdetected
}
},
created() {
this.changeView()
},
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
