使用nodejs和python构建一个远程监控系统3.web模块的编写

nodejs搭建的web模块主要负责接收视频信息,转发视频信息,唯一复杂的地方在于要记录每一个与服务器建立了连接的客户端,将图像发送给相应的每个客户端,这里我使用了一个全局对象构造的连接池,请看代码

//加载配置文件
var config = require("./config");
//引入http模块
var httpServer = require("http");
//引入UDP模块
var dgram = require("dgram");
var net = require('net');
//引入path模块
var path = require('path');
//引入express模块
var express = require('express');
//引入express模块
var app = express();
var http = httpServer.Server(app);
//初始化socket连接
var io = require("socket.io")(http);
var serverSocket = dgram.createSocket("udp4");
serverSocket.bind(config.udpImagePort);
//初始化连接池
var connections = {};
var connectionid = new Set();
//初始化全局变量
var isWarning = true;
app.use(express.static(path.join(__dirname, 'public')));
app.set("views",path.join(__dirname,"views"));
app.set("view engine","html");
app.engine(".html",require("ejs").__express);
app.get("/",function(req,res){
	res.render("camera.html");
})
//监听websocket连接
console.info("开始websocket监听...")
io.on("connection",function(socket){
	//监听到连接时,将socket加入连接池中
	socket.send("连接成功");
	connections[socket.id] = socket;
	connectionid.add(socket.id);
	console.info("增加一个连接,当前连接数量为"+connectionid.size)
	//获得来自网页的视频设置信息
	//断开连接时,将连接从连接池中删除
	socket.on("disconnect",function(){
		delete connections[socket.id];
		connectionid.delete(socket.id);
		console.info("删除一个连接,当前连接数量为"+connectionid.size);
	});
})
//监听udp连接,如果有画面,将画面广播出去
serverSocket.on("message",function(msg,info){
	for(var a of connectionid){
		connections[a].send(msg);
	}
});

//开启应用
http.listen(config.listenPort,function(socket){
	console.info("listening on "+config.listenPort);
});

html页面非常简单,只有一个canvas用于显示图像

<!DOCTYPE HTML>
<!DOCTYPE html>
<html>
    <head>
       
    </head>
    <body class="layui-bg-cyan">
        <div class="decoration"></div>
            <div class="display" style="text-align: center;">
                <canvas id="display" width="640" height="480" style="border-style: solid;border-width: 5px;">
                    你的浏览器暂不支持Canvas,请更换浏览器后再试
                </canvas>
            </div>
        </div>   
    </div>
    
    <div class="bottom-deco"></div>
    <script type="text/javascript" src="scripts/jquery.js"></script>
    <script type="text/javascript" src="scripts/socket.io.js"></script>
    <script type="text/javascript">
        $(function(){    
            var nowUrl = window.document.location.href; 
            var displayWidth = null;
            //初始化陀螺仪信息
            var initLevel = null;
            var initVirt = null 
            //屏幕宽度
            var windowWidth = screen.width;
            var image = new Image();
            var canvas = document.getElementById("display");

            var speed = 10
            if(!isPC())
                //如果不为pc端,调制canvas宽度
                canvas.width = windowWidth*0.9;
                canvas.height = parseInt(canvas.width * 480 / 640)

            var ctx = canvas.getContext("2d");
            //建立websocket连接
            var socket=io.connect('/')
            //设置缩放比例
            var scale = 3/4
            socket.on("message",function(msg){

                var blob = new Blob([msg],{"type":"image\/jpeg"});
                image.src = window.URL.createObjectURL(blob);
                image.onload = function(){
                    if(displayWidth == null){
                        //初始化
                        displayWidth = windowWidth < image.width?windowWidth*0.9:image.width;
                    }
                    ctx.drawImage(image,0,0,displayWidth,displayWidth * scale);
                }
            });
            function init(){
            
            }
            function isPC() {
                //判断客户端是否为PC
                var userAgentInfo = navigator.userAgent;
                var Agents = ["Android", "iPhone",
                    "SymbianOS", "Windows Phone",
                    "iPad", "iPod"];
                var flag = true;
                for (var v = 0; v < Agents.length; v++) {
                    if (userAgentInfo.indexOf(Agents[v]) > 0) {
                        flag = false;
                        break;
                    }
                }
                return flag;
            }
            init();
        })
    </script>
    </body>
</html>

分别启动nodejs服务器和视频采集主控程序(不分先后),效果如下

一个简单的视频监控程序就搭建起来了,这里是完整的项目,接下来我会给这个系统添加以下功能

1.外网穿透(需要公网服务器)

2.入侵检测报警

3.通过舵机控制摄像头

3.远程控制截图,录制视频等

使用nodejs和python构建一个远程监控系统3.web模块的编写

猜你喜欢