人脸识别眨眼张嘴软件_纯js实现人脸识别眨眨眼张张嘴案例——alive_face.js

$(function(){//执行开始的方法//showpos = true;startTrack();})var showpos = false;// Put event listeners into place//window.addEventListener("DOMContentLoaded", function() {// Grab elements, create settings, ...
摘要由CSDN通过智能技术生成

$(function(){

//执行开始的方法

//showpos = true;

startTrack();

})

var showpos = false;

// Put event listeners into place

//window.addEventListener("DOMContentLoaded", function() {

// Grab elements, create settings, etc.

var canvas = document.getElementById("canvas"),

context = canvas.getContext("2d"),

video = document.getElementById("video"),

videoObj = {

"video": true

},

errBack = function(error) {

if(error.PERMISSION_DENIED) {

jAlert('用户拒绝了浏览器请求媒体的权限', '提示');

} else if(error.NOT_SUPPORTED_ERROR) {

jAlert('对不起,您的浏览器不支持拍照功能,请使用其他浏览器', '提示');

} else if(error.MANDATORY_UNSATISFIED_ERROR) {

jAlert('指定的媒体类型未接收到媒体流', '提示');

} else {

jAlert('系统未能获取到摄像头,请确保摄像头已正确安装。或尝试刷新页面,重试', '提示');

}

};

// Put video listeners into place

if(navigator.getUserMedia) { // Standard

navigator.getUserMedia(videoObj, function(stream) {

video.src = stream;

video.play();

}, errBack);

} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed

try {

navigator.webkitGetUserMedia(videoObj, function(stream) {

video.src = window.webkitURL.createObjectURL(stream);

video.play();

}, errBack);

} catch(error) {

alert(error);

}

} else if(navigator.mozGetUserMedia) { // Firefox-prefixed

navigator.mozGetUserMedia(videoObj, function(stream) {

video.src = window.URL.createObjectURL(stream);

video.play();

}, errBack);

}

//张嘴

document.getElementById("mouse").addEventListener("click", function() {

var audio = document.createElement('audio');

var source = document.createElement('source');

source.type = "audio/mp3";

source.src = "mp3/alive_mouse.mp3";

source.autoplay = "autoplay";

source.controls = "controls";

audio.appendChild(source);

audio.play();

alive_mouse();

});

//摇头

document.getElementById("head").addEventListener("click", function() {

alive_head();

});

//眨眨眼

document.getElementById("eye")

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现调用摄像头进行人脸识别,可以使用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`函数来检测视频中出现的所有人脸,并计算出每个人脸的关键点。然后,我们根据左右眼的关键点位置计算出眼睛的开合程度,当开合程度小于一定阈值时,就可以判断为眼动作。 类似地,检测张嘴或摇头动作也可以使用类似的方法,通过计算关键点位置的变化来判断。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值