Wt-image-tools NPM

ft-face-detection 人脸检测插件

一款基于faceapi.js开发的人脸检测插件，可实现摄像头人脸跟踪，人脸位置检测，人脸数量检测等功能

安装

# 从公司私库拉取安装插件
cnpm install ft-face-detection --registry=http://192.168.0.200:4873

例子

查看项目目录下/examples里面的例子，在该目录下使用下面命令运行例子

cnpm install
# 启动例子
node server

快速开始

html引入调用方式

<script src="ft-face.global.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
    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()
}

vue里面使用ESM方式引入

<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	光线不足，请移步到光线正常的地方检测。

可通过以下方法修改默认提示

faceDetection.setStatusTips({
    DISTANCE_FAR:'xxxxxxxxxxxxxxxx'
})

v.1.3.2版本新增了vue组件 faceDetectionDialog （兼容Vue2.0和3.0）

如何使用

<template>
    <!-- 与js调用方式一样，如果需要检测角度，faceLandmarkModelPath必填 -->
    <face-detection-dialog 
        checkAngel 
        checkBrightness
        faceLandmarkModelPath="/"
        modelPath="/"
        @callback="callback"
    >
    </face-detection-dialog>
</template>

/* 方法一 */
import { faceDetectionDialog } from 'ft-face-detection'
/* 方法二 */
import 'ft-face.js'

export default {
    components:{
        /* 方法一 */
        faceDetectionDialog,
        /* 方法二 */
        faceDetectionDialog:window.faceDetection.faceDetectionDialog
    },
    data:{
        tips:''
    },
    methods:{
        /* 回调的参数的格式是TrackingData */
        callback(data){
            console.log(data)
        }
    }
}

jsqr lodash.throttle mitt vue-demi

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago