face-api.js
效果展示
準(zhǔn)備工作
- 官網(wǎng)看下簡介，在線預(yù)覽看下效果
- 官方的github文件拷下來
npm i face-api.js- 把模型文件拷進你的項目
主要布局
主要是在圖片或視頻元素上，蓋一個相同大小的canvas
<template>
<div>
<!-- 圖片/視頻 捕獲區(qū) -->
<div class="detectBox">
<img
v-show="!trackVideoFaces && !trackCameraFaces"
:src="base64"
alt=""
width="500"
ref="img"
id="myImg"
@load="detectFactory"
>
<video
v-if="trackVideoFaces"
width="500"
ref="video"
id="myVideo"
muted
playsinline
preload
loop
@durationchange="$refs.video.play()"
@play="videoStatus = 1"
@pause="videoStatus = 0"
>
<source src="./media/shylock.mp4" type="video/mp4">
抱歉，您的瀏覽器不支持嵌入式視頻。
</video>
<video
v-if="trackCameraFaces"
@loadedmetadata=""
ref="video"
id="myVideo"
autoplay
muted
playsinline
@play="videoStatus = 1"
@pause="videoStatus = 0"
/>
<canvas ref="canvas" />
</div>
</div>
</template>
加載訓(xùn)練模型
import * as faceapi from 'face-api.js';
export default {
methods: {
// 加載模型
init() {
const toast = this.$createToast({
txt: '模型加載中...',
mask: true
})
toast.show();
// 加載訓(xùn)練好的模型
// ageGenderNet: 年齡、性別識別模型，大約420KB
// faceExpressionNet: 人臉表情識別模型，識別表情,開心，沮喪，普通，大約310KB
// faceLandmark68Net： 68個點人臉地標(biāo)檢測模型（默認(rèn)模型），大約350KB
// faceLandmark68TinyNet：68個點人臉地標(biāo)檢測模型（小模型），大約80KB
// faceRecognitionNet: 人臉識別模型，可以比較任意兩個人臉的相似性，大約6.2MB
// ssdMobilenetv1： SSD 移動網(wǎng)絡(luò) V1，大約5.4MB，準(zhǔn)確的最高，推理時間最慢
// tinyFaceDetector: 微型人臉檢測器（實時人臉檢測器），與 SSD Mobilenet V1 人臉檢測器相比，它速度更快、體積更小且資源消耗更少，但在檢測小人臉方面的表現(xiàn)略遜一籌。移動和網(wǎng)絡(luò)友好
// mtcnn 大約2MB
// tinyYolov2 識別身體輪廓的算法，不知道怎么用
Promise.all([
faceapi.nets.faceRecognitionNet.loadFromUri('./models'),
faceapi.nets.faceLandmark68Net.loadFromUri('./models'),
faceapi.nets.faceLandmark68TinyNet.loadFromUri('./models'),
faceapi.nets.ssdMobilenetv1.loadFromUri('./models'),
faceapi.nets.tinyFaceDetector.loadFromUri('./models'),
faceapi.nets.mtcnn.loadFromUri('./models'),
faceapi.nets.faceExpressionNet.loadFromUri('./models'),
faceapi.nets.ageGenderNet.loadFromUri('./models'),
// faceapi.nets.tinyYolov.loadFromUri('./models')
])
.then((res) => {
this.entryFaces();
toast.hide();
})
},
},
mounted () {
this.init();
}
}
人臉識別
先是錄入一些圖片的描述信息，然后比較描述信息，判斷人臉的相似度
/**
* @description 錄入人臉數(shù)據(jù)
*
* 大臉照、黑白照可能識別不出來，可以修改配置，降低人臉的置信度
* */
async entryFaces() {
const imgs = document.querySelectorAll('.faceCompare img');
for (const img of imgs) {
/** 注意：這里不能傳options，不然會報錯 */
const singleResult = await faceapi
.detectSingleFace(img)
.withFaceLandmarks()
.withFaceDescriptor()
;
this.faces = [
...this.faces,
new faceapi.LabeledFaceDescriptors(
img.alt,
[singleResult.descriptor]
)
]
}
},
// 比較相似度
async compareFaces() {
const detection1 = await faceapi.detectSingleFace('reference').withFaceLandmarks().withFaceDescriptor();
const detection2 = await faceapi.detectSingleFace('toCompare').withFaceLandmarks().withFaceDescriptor();
if (detection1 && detection2) {
this.similarity = Math.round(faceapi.utils.round(1 - faceapi.euclideanDistance(detection1.descriptor, detection2.descriptor)) * 100);
} else {
this.similarity = 0;
}
}
人臉檢測器
人臉檢測器有兩種，SSD和Tiny兩種，SSD較大，Tiny用于動態(tài)視頻檢測，精度可能沒SSD高，但推算速度快，幀率也高，如果檢測不到人臉，可以切換檢測器，或者修改配置
data() {
return {
cascadeData: [
{
value: 'SSD',
text: 'SSD',
children: [
{ text: '0.1', value: 0.1 },
{ text: '0.2', value: 0.2 },
{ text: '0.3', value: 0.3 },
{ text: '0.4', value: 0.4 },
{ text: '0.5', value: 0.5 },
{ text: '0.6', value: 0.6 },
{ text: '0.7', value: 0.7 },
{ text: '0.8', value: 0.8 },
{ text: '0.9', value: 0.9 },
]
},
{
value: 'Tiny',
text: 'Tiny',
children: [
{ text: '0.1', value: 0.1, children: [{ text: '128', value: 128 }, { text: '160', value: 160 }, { text: '224', value: 224 }, { text: '320', value: 320 }, { text: '416', value: 416 }, { text: '512', value: 512 }, { text: '608', value: 608 }] },
{ text: '0.2', value: 0.2, children: [{ text: '128', value: 128 }, { text: '160', value: 160 }, { text: '224', value: 224 }, { text: '320', value: 320 }, { text: '416', value: 416 }, { text: '512', value: 512 }, { text: '608', value: 608 }] },
{ text: '0.3', value: 0.3, children: [{ text: '128', value: 128 }, { text: '160', value: 160 }, { text: '224', value: 224 }, { text: '320', value: 320 }, { text: '416', value: 416 }, { text: '512', value: 512 }, { text: '608', value: 608 }] },
{ text: '0.4', value: 0.4, children: [{ text: '128', value: 128 }, { text: '160', value: 160 }, { text: '224', value: 224 }, { text: '320', value: 320 }, { text: '416', value: 416 }, { text: '512', value: 512 }, { text: '608', value: 608 }] },
{ text: '0.5', value: 0.5, children: [{ text: '128', value: 128 }, { text: '160', value: 160 }, { text: '224', value: 224 }, { text: '320', value: 320 }, { text: '416', value: 416 }, { text: '512', value: 512 }, { text: '608', value: 608 }] },
{ text: '0.6', value: 0.6, children: [{ text: '128', value: 128 }, { text: '160', value: 160 }, { text: '224', value: 224 }, { text: '320', value: 320 }, { text: '416', value: 416 }, { text: '512', value: 512 }, { text: '608', value: 608 }] },
{ text: '0.7', value: 0.7, children: [{ text: '128', value: 128 }, { text: '160', value: 160 }, { text: '224', value: 224 }, { text: '320', value: 320 }, { text: '416', value: 416 }, { text: '512', value: 512 }, { text: '608', value: 608 }] },
{ text: '0.8', value: 0.8, children: [{ text: '128', value: 128 }, { text: '160', value: 160 }, { text: '224', value: 224 }, { text: '320', value: 320 }, { text: '416', value: 416 }, { text: '512', value: 512 }, { text: '608', value: 608 }] },
{ text: '0.9', value: 0.9, children: [{ text: '128', value: 128 }, { text: '160', value: 160 }, { text: '224', value: 224 }, { text: '320', value: 320 }, { text: '416', value: 416 }, { text: '512', value: 512 }, { text: '608', value: 608 }] },
]
}
]
}
}
// 配置人臉檢測器參數(shù)
getFaceDetectorOptions() {
const { selectedValue } = this;
return selectedValue[0] === 'SSD'
? new faceapi.SsdMobilenetv1Options({
minConfidence: selectedValue[1]
})
/**
* @param inputSize?: number
處理圖像的大小，越小越快
在檢測較小的人臉時， 必須被32整除
常見的大小有128、160、224、320、416、512、608 ,
用于通過網(wǎng)絡(luò)攝像頭進行人臉跟蹤我建議使用較小尺寸的，例如128、160
用于檢測較小的人臉使用較大尺寸的，例如512、608
默認(rèn)值： 416
* @param scoreThreshold?: number
最小置信閾值
默認(rèn)值:0.5
*
* @desc inputSize和scoreThreshold的不同配置，都會影響返回結(jié)果的數(shù)量
* */
: new faceapi.TinyFaceDetectorOptions({
scoreThreshold: selectedValue[1],
inputSize: selectedValue[2]
})
},
略…
懶得寫了，把實現(xiàn)代碼拷下來看吧
本地開啟https
因為 navigator.mediaDevices 在http://域名下無法使用，你可以用http://localhost過渡，但是如果想要在手機上預(yù)覽效果，就需要配置https文章來源：http://www.zghlxwxcb.cn/news/detail-515607.html
手機當(dāng)電腦的攝像頭
手機、電腦下載iVCam文章來源地址http://www.zghlxwxcb.cn/news/detail-515607.html
到了這里，關(guān)于【face-api.js】前端實現(xiàn)，人臉捕獲、表情識別、年齡性別識別、人臉比對、視頻人臉追蹤、攝像頭人物識別的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
