web 端的人脸识别

人脸识别

今天给大家分享的内容是纯 javascript 实现的人脸识别。希望体验一下今天 web 端技术的飞速发展。

人脸识别

简单创建一个项目，引入两个关键文件和文件夹

项目结构

models 是训练出来模型，这些模型是通过大量图片训练出来的。
face-api.min.js 引入依赖文件

创建一个 video 标签来捕捉我这张老脸。

简单地给样式

这里注意一下引用顺序，我们需要引入 face-api.min.js 这个依赖。

通过摄像头捕捉视频

function startVideo(){
    navigator.getUserMedia(
        {video:{}},
        stream => video.srcObject = stream,
        err => console.log(err)
    )
}

startVideo();

这里我们使用 navigator 的 getUserMedia 获取设备的多媒体设备，传入 video 表示要获取视频流，然后将视频流传入到 video 标签来显示。

导入训练好的模型

Promise.all([
    faceapi.nets.tinyFaceDetector.loadFromUri('/models'),
    faceapi.nets.faceLandmark68Net.loadFromUri('/models'),
    faceapi.nets.faceRecognitionNet.loadFromUri('/models'),
    faceapi.nets.faceExpressionNet.loadFromUri('/models'),
]).then(startVideo());

通过 Promise 的 all 将这些文件同时进行异步加载，

tinyFaceDetector 这是轻量级可以快速识别人脸的模型
faceLandmark68Net 用于对人脸不同部位识别的模型
faceRecognitionNet 识别出人脸的位置，和覆盖的范围
faceExpressionNet 用于识别人的情绪，是高兴呀还是高兴呀呵呵

所有模型都加载完毕后再启动我们的视频

获取识别数据

video.addEventListener('play',()=>{
    setInterval(async()=>{
        const detections = await faceapi.detectAllFaces(video,
            new faceapi.TinyFaceDetectorOptions())
            .withFaceLandmarks()
            // .withFaceExpressions()
            console.log(detections);

    },100)
})

识别是个耗时的操作，所有用异步方法获取识别数据，调用 faceapi 的 detectAllFaces 方法，传入要识别的资源，也就是视频，然后我们要识别什么可以传入一个 options 告诉识别器我们要识别什么。打印识别出来的结果数据。

识别数据

绘制人脸识别框

这里我们创建一个 canvas 用于将识别出来数据绘制到视频上，canvas 可以用 js 动态创建

    canvas {
      position: absolute;
      top: 0;
      left: 0;
    }

这里需要给 canvas 一个绝对定位，以便和我们视频对其。

    const canvas = faceapi.createCanvasFromMedia(video);
    document.body.appendChild(canvas);
    const displaySize = { width: video.width, height: video.height};

faceapi.createCanvasFromMedia(video) 创建 canvas

video.addEventListener('play',()=>{

    const canvas = faceapi.createCanvasFromMedia(video);
    document.body.appendChild(canvas);
    const displaySize = { width: video.width, height: video.height};

    faceapi.matchDimensions(canvas,displaySize);

    setInterval(async()=>{
        const detections = await faceapi.detectAllFaces(video,
            new faceapi.TinyFaceDetectorOptions())
            .withFaceLandmarks()
        const resizedDetections = faceapi.resizeResults(detections,displaySize)

        canvas.getContext('2d').clearRect(0,0,canvas.width,canvas.height);
        faceapi.draw.drawDetections(canvas,resizedDetections);
            // .withFaceExpressions()
            // console.log(detections);
    },100)
})

const displaySize = { width: video.width, height: video.height}

让 canvas 与我们 vidoe 大小匹配

const resizedDetections = faceapi.resizeResults(detections,displaySize)

将我们测试的框结果与显示大小相匹配。

canvas.getContext('2d').clearRect(0,0,canvas.width,canvas.height);

清除上一次绘制的结果，下面就是讲结果绘制到视频上

 faceapi.draw.drawDetections(canvas,resizedDetections);