第5周团队博客

最新推荐文章于 2024-06-27 00:48:16 发布

AFXBR

最新推荐文章于 2024-06-27 00:48:16 发布

阅读量239

点赞数

分类专栏：创新实训

本文链接：https://blog.csdn.net/AFXBR/article/details/89431757

版权

创新实训专栏收录该内容

11 篇文章 1 订阅

订阅专栏

本周完成的工作主要包括以下三方面的内容：

情绪检测的web集成
手势识别的web集成和优化
视线追踪模型的进一步优化

情绪检测web集成

集成的具体细节方面：输入为图片的dataURL，即图片的base64格式,最小4848，最大40964096
输出为表示情绪的7维向量，使用json格式表示。7维分别是：

anger：愤怒
disgust：厌恶
fear：恐惧
happiness：高兴
neutral：平静
sadness：伤心
surprise：惊讶

相关代码如下

	var facepp = new FACEPP(APIKEY,APISERET,1);
	function getEmotion(base64Image){
		console.log(base64Image);
		//图片的base64数据
		//const base64Image=arrayBufferToBase64(img);
		// 以二进制的方式上传图片
        // 将base64转为二进制
        //let imageData = facepp.dataURItoBlob(base64Image);
        //根据个人需求填写的参数,这里全部写上了,包括年龄性别等,详情看官方文档
        let attributes = 'gender,age,smiling,headpose,facequality,blur,eyestatus,emotion,ethnicity,beauty,mouthstatus,eyegaze,skinstatus';
        //上传图片,获取结果
        let dataDic = {'image_base64':base64Image,'return_landmark':2,'return_attributes':attributes};
		
		//调用接口，检测人脸
        facepp.detectFace(dataDic,success);
		
		
	}
	function success(e){
		
		//console.log(JSON.stringify(e,null,"\t"))
		
		const faces = e.faces;
		const face=faces[0];
		var emotion=face.attributes.emotion
		console.log(emotion);
		

	}
    // Converts canvas to an image
    function convertCanvasToImage(canvas) {
	    var image = new Image();
	    image.src = canvas.toDataURL();
	    return image;
    }
	window.onload=function(){
		var img=new Image();
		img.src="test.png";
		//img.setAttribute('crossOrigin', 'anonymous');
		var canvas=document.getElementById('picCan');
		var canCC=canvas.getContext('2d');
		
		
		img.onload = function(){
			canCC.drawImage(img,0,0,500,400);
			
		};
		var base64Image=canvas.toDataURL("image/png");
		// 在控制台中可以查看获取的情绪json,F12启动
		getEmotion(base64Image);
		
		
	}

</script>

手势识别的web集成和优化

在WEB页面的摄像头获取基本逻辑和Python中的差不多,只不过在html中需要 <video >和<canvas>两个标签,这两个都是H5中的新标签,<video >标签定义视频，比如电影片段或其他视频流而<canvas>标签定义图形，比如图表和其他图像。需要注意的是<canvas>标签只是图形容器，必须使用脚本来绘制图形.

用于获取摄像头视频流并展示的html页面如下:

<!DOCTYPE html>
<html>
 
<head>
	<meta charset="utf-8">
	<title>Video Capture Example</title>
</head>
 
<body>
	<video id="videoInput" height=240 width=320></video>
	<canvas id="canvasFrame" height=240 width=320 ></canvas>
	<canvas id="FirstFrame" height=240 width=320 ></canvas>
	<canvas id="canvasOutput" height=240 width=320 ></canvas>
    <script src="js代码逻辑" type="text/javascript"></script>
</body>
 
</html>

视频获取的js代码如下

let video = document.getElementById("videoInput"); 
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
    .then(function (stream) {
    video.height = HEIGHT;
    video.width = WIDTH;
    video.srcObject = stream;
    video.play();
    }).catch(function (err) {
    console.log("An error occured! " + err);
});

视频处理部分


var frame = new cv.Mat(HEIGHT, WIDTH, cv.CV_8UC4);
cap.read(frame);
// cv.bilateralFilter(frame, frame, 5, 50, 100,cv.BORDER_DEFAULT)  // 双边滤波 gg
cv.flip(frame,frame,1)  // 反转
var gray = new cv.Mat();
cv.cvtColor(frame, gray, cv.COLOR_RGBA2GRAY);
var ksize = new cv.Size(21,21);
cv.GaussianBlur(gray,gray, ksize ,0)
// console.log(firstFrame)

帧间差分法获取移动物体

			if(firstFrame == null){
				console.log('enter')
				firstFrame = gray;
				setTimeout(processVideo,0)
			}
			cv.imshow("FirstFrame", frame); 
			// let frameDelta = new cv.Mat(HEIGHT, WIDTH, cv.CV_8UC1);
			var frameDelta = new cv.Mat();
			cv.absdiff(first    Frame, gray, frameDelta)  // 帧间差
			var thresh = new cv.Mat();
			cv.threshold(frameDelta,thresh, 25, 255, cv.THRESH_BINARY)
			let M = new cv.Mat();
			let anchor = new cv.Point(-1, -1);
			cv.dilate(thresh,thresh,M,anchor, 2)