js网络摄像头实现察言观色，识别你的表情

js网络摄像头实现识察言观色，识别你的表情

今天给大家介绍一下如何通过js在浏览器上调用摄像头识别用户的表情，达到察言观色，好，废话不多说，直接进入正题。

人脸表情识别的原理还是通过表情轮廓进行机器训练模型后识别，今天我们直接使用faceapi的训练好的模型进行识别。

一、加载模型

<script type="text/javascript">
    await  faceapi.nets.ssdMobilenetv1.loadFromUri('models');
    await  faceapi.nets.faceLandmark68Net.loadFromUri('models');
    await  faceapi.nets.faceExpressionNet.loadFromUri('models');
</script>

二、识别

<script type="text/javascript">
    const videoEl = $('#inputVideo').get(0)

    if (videoEl.paused || videoEl.ended)
        return setTimeout(() => onPlay())


    const options = new faceapi.SsdMobilenetv1Options({
        minConfidence
    })
    const ts = Date.now()

    const result = await faceapi.detectSingleFace(videoEl, options).withFaceExpressions()

    updateTimeStats(Date.now() - ts)

    if (result) {
        const canvas = $('#overlay').get(0)
        const dims = faceapi.matchDimensions(canvas, videoEl, true)

        const resizedResult = faceapi.resizeResults(result, dims)
        const minConfidence = 0.05
        if (withBoxes) {
            faceapi.draw.drawDetections(canvas, resizedResult)
        }
        faceapi.draw.drawFaceExpressions(canvas, resizedResult, minConfidence)
    }

    setTimeout(() => onPlay())
</script>

完整的webide项目地址：http://editor.bfw.wiki/Editor/Open.html?projectid=15731252228909890037&file=faceexpression.html

点击左上角预览，在新窗口预览就行了，可在线直接运行