纯前端JS实现人脸识别眨眨眼张张嘴案例

在不久之前我发布了一个案例,是java通过百度云人脸识别接口实现活体检测(张张嘴和眨眨眼)的案例,大家可以去看看:人脸识别活体检测之眨眨眼和张张嘴,今天我就抽空更新一下纯JS的活体检测吧。
首先给大家看一下运行效果,以免不是大家想要的结果。查看地址:点击观看,如果这是你想要的结果,那么请继续往下看。
这里写图片描述
2.在以往案例中,由于js太多,我就直接打包让大家下载了,今天的案例中js并不是很多,我就直接发上来,大家复制到本地,都放在js文件夹中,注意千万不要放错了,放错了运行不出来。
3.需要一个jquery通用环境js(jquery-1.8.3.js),大家可以自行准备.
4.alive_face.js
5.ccv.js
6.clmtrackr.js
7.model_pca_20_svm.js
8.numeric.js
9.utils.js
10.index.html
其中index.js注意一定要放到文件的根目录下面。关于放置位置,请看以下图片:
这里写图片描述

由于语音提示文件上传不了,大家可以微信关注公众号回复:人脸识别语音提示 即可下载。
这里写图片描述

  • 1
    点赞
  • 30
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 33
    评论
实现调用摄像头进行人脸识别,可以使用WebRTC技术,它是一种支持浏览器之间实时通信的开放标准。在这个过程中,需要使用到一些JavaScript库,如Face-api.js和TensorFlow.js等。 在使用Face-api.js进行人脸识别时,可以通过检测关键点的位置来判断眼、张嘴或摇头等动作。比如,检测眼时可以根据眼睛关键点的位置变化来计算眼睛的开合程度,当眼睛开合程度超过一定阈值时就可以判断为眼。 以下是一个简单的示例代码,用于检测眼动作: ```javascript const video = document.getElementById("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); function startVideo() { navigator.getUserMedia( { video: {} }, stream => video.srcObject = stream, err => console.error(err) ) } video.addEventListener('play', () => { const canvas = faceapi.createCanvasFromMedia(video); document.body.append(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().withFaceExpressions(); const resizedDetections = faceapi.resizeResults(detections, displaySize); canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height); faceapi.draw.drawDetections(canvas, resizedDetections); faceapi.draw.drawFaceLandmarks(canvas, resizedDetections); const leftEye = resizedDetections[0].landmarks.getLeftEye(); const rightEye = resizedDetections[0].landmarks.getRightEye(); const eyeAspectRatio = (faceapi.euclideanDistance(leftEye[1], leftEye[5]) + faceapi.euclideanDistance(leftEye[2], leftEye[4])) / (2 * faceapi.euclideanDistance(leftEye[0], leftEye[3])); if (eyeAspectRatio < 0.2) { console.log("Blink detected!"); } }, 100); }); ``` 在上述代码中,我们使用了Face-api.js库来进行人脸识别。首先,我们加载了必要的模型文件,然后通过调用`startVideo`函数来启动摄像头。在视频播放时,我们使用`detectAllFaces`函数来检测视频中出现的所有人脸,并计算出每个人脸的关键点。然后,我们根据左右眼的关键点位置计算出眼睛的开合程度,当开合程度小于一定阈值时,就可以判断为眼动作。 类似地,检测张嘴或摇头动作也可以使用类似的方法,通过计算关键点位置的变化来判断。
评论 33
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

穆雄雄

哎,貌似还没开张来着呢~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值