ft-face-detection 人脸检测插件
一款基于faceapi.js开发的人脸检测插件，可实现摄像头人脸跟踪，人脸位置检测，人脸数量检测等功能。
v.1.3.5版本开始新增faceDetectionDialog人脸识别vue组件，兼容vue2.0和vue3.0，见下图。
安装
# 从公司私库拉取安装插件
cnpm install ft-face-detection --registry=http://192.168.0.200:4873
例子
查看项目目录下/examples里面的例子，在该目录下使用下面命令运行例子
cnpm install
# 启动例子
node server
快速开始
html引入调用方式
<script src="ft-face.umd.js"></script>
...
<body>
<div class="box" style="position: relative;width:640px;height:480px;">
<video autoplay id="video"></video>
<canvas id="mycanvas" style="width:100%;height:100%;position: absolute;top:0;left:0;" />
</div>
<div id="tips"></div>
<div id="position"></div>
</body>js部分
/* umd */
const init = async function(){
const canvas = $('#mycanvas')[0]
const fc = window.faceDetection.default
await fc.init({
/* 节流时间间隔设定，默认300 */
throttle:300,
/* withFaceLandmarks为true时才能检测角度和显示landmarks，singleFaceTracking的checkAngel参数，但必须设置faceLandmarkModelPath路径加载对应的model文件 */
withFaceLandmarks:true,
/* performance会使用体积较小的model文件，以达到性能更好的效果 */
performance:false,
inputSize:128,
modelPath:'/',
faceLandmarkModelPath:'/',
canvas
})
const videoEl = $('#video')[0]
const stream = await navigator.mediaDevices.getUserMedia({
audio: false,
video: {
/* 前置镜头 */
facingMode: 'user',
frameRate: { ideal: 30, max: 60 },
/* 如果手机摄像头没有返回更高的像素，需要设置一下，前提是摄像头能达到设置的像素 */
width:1280, height:960
}
})
videoEl.srcObject = stream
fc.on('singleFaceTracking',(data)=>{
$('#tips').text(data.msg)
if(data.face){
const box = data.face.box
console.log(data)
$('#position').html(`
${data.face.score?'<div>质量分数:'+data.face.score+'</div>':''}
<div>视频流分辨率:${data.face.imageDims.width}*${data.face.imageDims.height}</div>
<div>width:${box.width}</div>
<div>height:${box.height}</div>
<div>top:${box.top}</div>
<div>left:${box.left}</div>
<div>right:${box.right}</div>
<div>bottom:${box.bottom}</div>
<div>x:${box.x}</div>
<div>y:${box.y}</div>
<div>time:${data.time}</div>
`)
}
if(data.ok){
fc.close('singleFaceTracking')
/* 成功后获取质量较高的截图 */
if($('#img').length){
$('#img')[0].src = data.image;
}else{
var img = document.createElement("img");
img.id = 'img'
img.src = data.image;
document.body.append(img)
}
}
}).singleFaceTracking(videoEl,{
drawType:'box',
checkAngel:true
})
}
window.onload = ()=>{
init()
}ESM环境下的vue组件内引入
<template>
<div style="width:100%;height:100%;">
<div class="box" style="position: relative;width:640px;height:480px;">
<video autoplay ref="video"></video>
<canvas ref="mycanvas" style="width:100%;height:100%;position: absolute;top:0;left:0;" />
</div>
<div id="tips">{{tips}}</div>
</div>
</template>import faceDetection from 'ft-face-detection'
export default {
data:{
tips:''
},
mounted(){
const canvas = this.$refs.mycanvas
await fc.init({
/* 节流时间间隔设定，节流时间短一些，可以尽量避免检测出模糊图片 */
throttle:300,
withFaceLandmarks:true,
performance:false,
inputSize:128,
modelPath:'/',
faceLandmarkModelPath:'/',
canvas
})
const videoEl = this.$refs.video
const stream = await navigator.mediaDevices.getUserMedia({
audio: false,
video:true
})
videoEl.srcObject = stream
fc.on('singleFaceTracking',(data)=>{
this.tips = data.msg
if(data.ok){
fc.close('singleFaceTracking')
}
}).singleFaceTracking(videoEl,{
drawType:'box',
checkAngel:true,
/* 是否检测亮度 */
checkBrightness:true
})
}
}API
方法
| 方法名 | 说明 | 参数 |
|---|---|---|
| init | 初始化插件 | InitOption |
| singleFaceTracking | 对图片或视频进行单个人脸识别跟踪，每次跟踪触发singleFaceTracking事件 | HTMLImageElement或HTMLVideoElement, SingleOpt（见下表） |
| extractFaces | 提取图片中的人脸 | HTMLImageElement |
| detectToImage | 截取当前视频对象的当前帧的图像 | HTMLVideoElement |
| on | 监听事件 | event, callback(TrackingData)回调方法 |
| close | 关闭检测方法，如close('singleFaceTracking') | name方法名，会同时关闭on的监听事件 |
InitOption属性
| 属性 | 描述 | 是否必填 | 类型 | 默认值 |
|---|---|---|---|---|
| minConfidence | 信心最小阈值，值越大准确率越高，但检测会更难 | 否 | number | 0.6 |
| withFaceLandmarks | 是否获取人脸外框的位置信息，必须配置faceLandmarkModelPath路径 | 否 | boolean | false |
| performance | 是否设置为性能模式，如果设为false，使用ssd_mobilenetv1算法，准确率高，但速度稍慢，并且加载模型较大；true的时候，使用tiny_face_detector算法，速度快，模型体积小，但准确率稍低 | 否 | booleab | true |
| inputSize | performance为true时生效，图像处理的大小，越小越快 | 否 | number | 416 |
| maxResults | performance为false时生效，识别的人脸数的最大值 | 否 | number | 20 |
| modelPath | 人脸识别基础模型文件的所在目录，需放在可访问资源的文件夹内 | 否 | string | - |
| faceLandmarkModelPath | 人脸识别外框标识模型文件所在目录，需放在可访问资源的文件夹内 | 否 | string | - |
| canvas | canvas的html对象，需要描绘人脸识别外框时必填 | 否 | HTMLCanvasElement | - |
| throttle | 对视频进行单个人脸识别跟踪时的节流时间配置，单位毫秒，建议设置100-500之间 | 否 | number | 300 |
SingleOpt属性
| 属性 | 描述 | 是否必填 | 类型 | 默认值 |
|---|---|---|---|---|
| checkAngel | 需InitOption.withFaceLandmarks为true才生效，是否检测侧脸 | 否 | boolean | false |
| checkBrightness | 是否检测人脸的亮度，曝光过度和不足都会提示检测失败 | 否 | boolean | false |
| drawType | 需传入InitOption.canvas，并且InitOption.withFaceLandmarks为true才生效，备选值box,landmark，box画脸部矩形，landmark画脸部轮廓 | 否 | string | undefined |
| minfaceWidthRatio | 人脸检测人脸宽度相对摄像头画面的宽度最小比例，目的是为了引导用户以适当的距离进行人脸检测，不建议改动 | 否 | number | 0.4 |
| maxfaceWidthRatio | 人脸检测人脸宽度相对摄像头画面的宽度最大比例，目的是为了引导用户以适当的距离进行人脸检测，不建议改动 | 否 | number | 0.8 |
TrackingData格式
| 属性 | 说明 | 类型 |
|---|---|---|
| msg | 提示说明 | string |
| ok | 是否成功检测人脸 | boolean |
| code | 状态码，具体查看下表 | string |
| face | face数据对象 | object |
| time | 检测所用的时间 | number |
状态码说明
| 状态码 | 对应提示 |
|---|---|
| DISTANCE_FAR | 人脸离摄像头太远，请靠近摄像头。 |
| DISTANCE_NEARLY | 人脸离摄像头太近，请稍微远离摄像头。 |
| TO_LEFT | 人脸不在画面中央，请稍微往左边靠近。 |
| TO_RIGHT | 人脸不在画面中央，请稍微往右边靠近。 |
| TO_TOP | 人脸不在画面中央，请稍微往上方靠近。 |
| TO_BOTTOM | 人脸不在画面中央，请稍微往下方靠近。 |
| TOOMORE_LEFTFACE | 请不要侧脸。 |
| TOOMORE_RIGHTFACE | 请不要侧脸。 |
| NO_FACE | 未检测到人脸，请把人脸对准摄像头。 |
| SUCCESS | 成功检测到人脸。 |
| DONT_MOVE | 正在识别，请保持不动。 |
| DONT_SHAKE | 请不要摇晃。 |
| NOT_HORIZONTAL | 请正对屏幕。 |
| IS_LIGHT | 过度曝光，请移步到光线正常的地方检测。 |
| IS_DARK | 光线不足，请移步到光线正常的地方检测。 |
| IS_UNUSUAL | 光线异常，请移步到光线正常的地方检测。 |
可通过以下方法修改默认提示
faceDetection.setStatusTips({
DISTANCE_FAR:'xxxxxxxxxxxxxxxx'
})v.1.3.5版本新增了vue组件 faceDetectionDialog （兼容Vue2.0和3.0）
如何使用
<template>
<!-- 与js调用方式一样，如果需要检测角度，faceLandmarkModelPath必填 -->
<!-- vue3参数必须用kebab-case(短横线隔开式)写法 -->
<face-detection-dialog
ref="faceDet"
check-angel
check-brightness
faceLandmarkModelPath="/"
modelPath="/"
@callback="callback"
@initialized="initialized"
>
</face-detection-dialog>
</template># 使用以下的方法一时，需要前置库 vue（必须）、node-fetch（必须），@vue/composition-api（vue是2.0版本时必须）
npm install node-fetch --save/* 以vue2.0为例 */
import './vue-composition-api.js'
Vue.use(VueCompositionAPI)
/* 非esm环境引用faceDetectionDialog组件需要自行引入vue-demi，可在examples内拉取 */
import '/vue-demi.iife.js'
/**
* 方法一，es方式引入
*/
// npm引入ft-face-detection库
import { faceDetectionDialog } from 'ft-face-detection'
// 或者直接引入es文件
import { faceDetectionDialog } from 'ft-face.es.js'
/**
* 方法一，全局引入，通常是非esm环境使用
*/
import 'ft-face.umd.js'
/* 等同于使用 <script type="text/javascript" src="ft-face.umd.js"></script> */
const faceDetectionDialog = faceDetection.faceDetectionDialog
/* 引入css */
import 'ft-face-detection/faceDetection.css'
export default {
components:{
faceDetectionDialog
},
data:{
tips:''
},
methods:{
open(){
/* 打开人脸检测窗口 v1.4.1+支持 */
this.$refs.faceDet.open()
},
/* 回调的参数的格式是TrackingData */
callback(data){
console.log(data)
...
/* 完成检测后关闭人脸检测窗口 v1.4.1+支持 */
this.$refs.faceDet.close()
},
/* 初始化完成 */
initialized(){
// 初始化完成前可以使用加载中遮罩，完成后去掉
}
}
}组件参数
| 属性 | 说明 | 是否必填 | 类型 | 默认值 |
|---|---|---|---|---|
| modelPath | 同InitOption.modelPath，人脸识别基础模型文件的所在目录，需放在可访问资源的文件夹内 | 否 | string | / |
| faceLandmarkModelPath | 同InitOption.faceLandmarkModelPath，人脸识别外框标识模型文件所在目录，需放在可访问资源的文件夹内 | 否 | string | / |
| checkAngel | 同SingleOpt.checkAngel，需faceLandmarkModelPath加载路径正确才生效，是否检测侧脸 | 否 | boolean | false |
| checkBrightness | 同SingleOpt.checkBrightness，是否检测人脸的亮度，曝光过度和不足都会提示检测失败 | 否 | boolean | false |
组件实例方法
function start()- 初始化完成后可调用，开始检测人脸
function restart()- 完成初次检测后可调用，重新开始检测人脸
function setTips(opt)- 同faceDetection.setStatusTips
function dispose()- 销毁视频流、音频流
组件事件
-
callback(result:TrackingData) 检测完成事件，返回检测结果，数据结构见TrackingData
-
initialized() 检测组件初始化完成后的回调事件