Web编程大作业(六)桌面直播+人脸识别+总结(ffmpeg,jsmpeg,jquery.facedetection)

桌面直播

只能算是一个基于ffmpeg和jsmpeg的应用。

首先需要安装的内容有:ffmpeg、jsmpeg、ws模块

安装过程reference:https://my.oschina.net/chengpengvb/blog/1832469 (ffmpeg建议在官网装最新的可执行版本)

直接把下载下来的jsmpeg的代码引入网站后端

var STREAM_SECRET = 'supersecret',
	STREAM_PORT = 8081,
	WEBSOCKET_PORT = 8082,
	RECORD_STREAM = false;

// Websocket Server
var socketServer = new WebSocket.Server({port: WEBSOCKET_PORT, perMessageDeflate: false});
socketServer.connectionCount = 0;
socketServer.on('connection', function(socket, upgradeReq) {
	socketServer.connectionCount++;
	console.log(
		'New WebSocket Connection: ',
		(upgradeReq || socket.upgradeReq).socket.remoteAddress,
		(upgradeReq || socket.upgradeReq).headers['user-agent'],
		'('+socketServer.connectionCount+' total)'
	);
	socket.on('close', function(code, message){
		socketServer.connectionCount--;
		console.log(
			'Disconnected WebSocket ('+socketServer.connectionCount+' total)'
		);
	});
});
socketServer.broadcast = function(data) {
	socketServer.clients.forEach(function each(client) {
		if (client.readyState === WebSocket.OPEN) {
			client.send(data);
		}
	});
};

// HTTP Server to accept incomming MPEG-TS Stream from ffmpeg
var streamServer = http.createServer( function(request, response) {
	var params = request.url.substr(1).split('/');

	if (params[0] !== STREAM_SECRET) {
		console.log(
			'Failed Stream Connection: '+ request.socket.remoteAddress + ':' +
			request.socket.remotePort + ' - wrong secret.'
		);
		response.end();
	}

	response.connection.setTimeout(0);
	console.log(
		'Stream Connected: ' +
		request.socket.remoteAddress + ':' +
		request.socket.remotePort
	);
	request.on('data', function(data){
		socketServer.broadcast(data);
		if (request.socket.recording) {
			request.socket.recording.write(data);
		}
	});
	request.on('end',function(){
		console.log('close');
		if (request.socket.recording) {
			request.socket.recording.close();
		}
	});

	// Record the stream to a local file?
	if (RECORD_STREAM) {
		var path = 'recordings/' + Date.now() + '.ts';
		request.socket.recording = fs.createWriteStream(path);
	}
})
// Keep the socket open for streaming
streamServer.headersTimeout = 0;
streamServer.listen(STREAM_PORT);

这段代码大概就是创建了用于接收视频流的服务器和推送视频流的websocket服务器。

把一些需要输入的参数直接给出定值。也就是把接受视频流端口设为8081,把ws服务器端口设为8082,密码设为supersecret。

然后教师端先要安装ffmpeg,通过ffmpeg把桌面视频流推送至8081
推流的ffmpeg命令参数如下:(参数含义基本可以从录制信息里面反推出来,比如分辨率和码率之类的,虽然很多还是不太理解但是能用就行)

ffmpeg -f gdigrab -framerate 30 -i desktop -f mpegts -codec:v mpeg1video -s 2560x1440 -b:v 150k -r 30 -bf 0 -ac 1 -b:a 128k http://127.0.0.1:8081/supersecret

(需要注意将最后的ip地址改为网站所在的ip地址)

学生端通过8082端口获取视频流。(在一个html页面中实现)

<!DOCTYPE html>
<html>
<head>
	<title>JSMpeg Stream Client</title>
	<style type="text/css">
		html, body {
			background-color: #111;
			text-align: center;
		}
		.return_index{
			color:white;
		}
	</style>
	
</head>
<body>
	<canvas id="video-canvas"></canvas>
	<script type="text/javascript" src="/jsmpeg-master/jsmpeg.min.js"></script>
	<script type="text/javascript">
		var canvas = document.getElementById('video-canvas');
		var url = 'ws://'+window.location.hostname+':8082/';
		var player = new JSMpeg.Player(url, {canvas: canvas});
	</script>
	<a class='return_index' href='/'>返回首页</a>
</body>
</html>

然后把这个页面作为“直播间”做到自己的网站里就算是实现了。
在这里插入图片描述
在这里插入图片描述

人脸识别

网上绝大多数人脸识别功能的教程都是用OpenCV+python来实现的。找了半天终于发现一个比较简单而且js能用的插件:jquery.facedetection。不过功能确实也相对比较简单。

通过npm install jquery.facedetection就能完成安装。通过script标签引入。

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="node_modules/jquery.facedetection/src/ccv.js"></script>
<script src="node_modules/jquery.facedetection/src/jquery.facedetection.js"></script>
<script src="node_modules/jquery.facedetection/src/cascade.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        html,body{
            margin: 0;
            padding:0;
        }
        .drawDiv{
            position: absolute;
            border: 3px solid yellow;
        }
        #image{
            float: left;
        }
        .imgDiv{
            float: left;
        }
    </style>
</head>
 
<body>
    <img id="image" src=""/>
    <div class="imgDiv">
 
        <div class="draw"></div>
        <br/>
        <input type="button" value="开始识别" onclick="identifyFace()">
        <input type="file"οnchange="selectImage(this);" />
    </div>
    <a class='return_index' href='/'>返回首页</a>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="jquery.facedetection/src/ccv.js"></script>
    <script src="jquery.facedetection/src/jquery.facedetection.js"></script>
    <script src="jquery.facedetection/src/cascade.js"></script>
    <script>
        //识别框样式
        var str='';
        //上传图片,使用文件流
        function selectImage(file){
            if(!file.files || !file.files[0]){
                return;
            }
            var reader = new FileReader();
            reader.onload = function(evt){
                console.log(evt);
                $('#image').attr('src', evt.target.result);
            }
            str = '';
            document.getElementsByClassName('draw')[0].innerHTML = '';
            reader.readAsDataURL(file.files[0]);
        }
 
        //开始识别
        function identifyFace() {
            str='';
            $('#image').faceDetection(
                function (faces) {
                    for (var i in faces) {
                        //识别结果循环传入方法drawFace
                        console.log(faces[i]);
                        drawFace(faces[i].x, faces[i].y, faces[i].width, faces[i].height,faces[i].confidence);
                    }
                }
            );
        }
        //图片识别区的x,y轴以及宽高,confidence表示自信程度
        function drawFace(x,y,width,height,confidence){
            var confidenceStr='';
            if(confidence<0){
                confidenceStr='自信满满'
            }else if(confidence>2){
                confidenceStr='很不自信啊'
            }else{
                confidenceStr='一般般'
            }
            //将框框套上去
            str+='<div class="drawDiv" style="left:'+x+'px;top:'+y+'px;width:'+width+'px;height:'+height+'px;">'+confidenceStr+'</div>'
            document.getElementsByClassName('draw')[0].innerHTML=str
        }
    </script>
</body>
</html>

效果大概是这样
在这里插入图片描述
看一下识别后的对象属性
在这里插入图片描述
除了“脸部区域”的x坐标、y坐标和长宽这些比较基本的信息之外,比较有意思的是还有一个confidence属性来描述这张脸的自信程度。。然后根据自信程度可以给出一个简单的评价,比如“自信”、“一般般”、“不自信”(这个准确度有多少就不知道啦)

有了这个之后也可以把它做进网站里面,但是很明显这个插件只能检测到图像中“是否有人脸”,但不能识别出“这张脸是谁”,所以离实现“人脸识别签到”这个功能肯定还是有距离的。

另一个问题是如何用js控制树莓派的摄像头模块。同样,网上的博客教程基本都是用python实现的。。用js实现的我也没找到。。于是我只能想到一个笨办法,就是让树莓派摄像头定时拍摄,将图片存到一个指定的地址,让网页读取固定地址的图片进行识别。

raspistill在终端控制摄像头 2秒拍摄一次(时间设置一个很大的数,让它一直拍)

raspistill -o Web_v5/public/images/now.jpg -tl 2000 -t 9999999999

然而这个最后实现的效果。。有点一言难尽。首先是树莓派拍出来照片大小的问题,一张照片大概2-3M,做一次识别要花很长时间,其次虽然照片占的空间很大,但是清晰度又很差,导致很难识别出人脸(这个可能是因为没有把摄像头固定起来导致的)。最后摄像头稍微拍了一分多钟就有点开始发烫了。。应该是我让它拍的太频繁的问题。

总之这个功能实现的比较失败吧。。以后真的要做人脸识别类似的功能可能还是用OpenCV+python之类的比较好,回头研究了。。

总结

代码

以上就是这个项目的全部内容。。之前总结的比较多,后面做的这些感觉也没啥好总结的。。

前半部分从无到有,自己用express和angular写框架和前后端交互的时候花的力气比较多,应该收获也是比较大的。最后做的几个要求比如视频推流和人脸识别这些就稍显敷衍,毕竟以前也没有接触过,主要就是想把这些功能都尝试一下。

一个感觉就是,整个项目做下来之后在计算机网络方面的知识确实是学到很多,但是好像对于javascript代码本身还是掌握的比较差,比方说如果拿到一个新的模块,基本上只能通过别人的代码来了解具体的用法、写法,很难通过官方文档来直接理解并构建代码。。(说白了就是只能做做增删改查,但是对底层原理一头雾水吧)

展开阅读全文
©️2020 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值