Nodejs written using python and build a remote monitoring system module 3.web

Use nodejs python and remote monitoring system 1. Construction of a video capture module

Use nodejs and python build a remote monitoring system 2. The master programming

nodejs build web module is mainly responsible for receiving video information, video information forwarded, the only complicated part is that you want to record every client and server to establish a connection, send the image to each of the respective client, and here I use a global Object connection pool configuration, see Code

//加载配置文件
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 page is very simple, just a canvas for displaying images

<!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>

Respectively start nodejs server and video capture master control program (in no particular order), the effect is as follows

A simple video surveillance program to build up, here is the complete project , then I will give this system adds the following functionality

1. external network through (requires a public server)

2. Intrusion detection alarm

3. The servo control by the camera

3. Remote control shots, record video, etc.

Nodejs written using python and build a remote monitoring system module 3.web

Guess you like