视频监控流程图
录制端实现
视频录制端使用 H5 的 video 捕获电脑的摄像头流媒体，然后通过 canvas 将某个时间点的视频帧生成 base64编码的图片，通过 WebSocket 将base64编码的图片上传到服务器，经过服务器（信令服务器）中转到其它 WebSocket 播放端。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>视频录制</title> <style type="text/css"> html,body{ padding: 0px; margin: 0px; box-sizing: border-box; } .container{ width: 1280px; margin: auto; overflow: hidden; } #video{ } #canvas{ } </style> </head> <body> <div class="container"> <video id="video" ></video> <canvas id="canvas" width="1280" height="960" hidden></canvas> </div> </body> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script type="text/javascript"> var videoEL = document.getElementById('video'); var canvasEL = document.getElementById('canvas'); var context = canvasEL.getContext("2d"); /* 封装 WebSocket 实例化的方法 */ var CreateWebSocket = (function () { return function (urlValue) { if(window.WebSocket) return new WebSocket(urlValue); if(window.MozWebSocket) return new MozWebSocket(urlValue); return false; } })(); /* 实例化 WebSocket 连接对象, 地址为 ws 协议 */ var webSocket = CreateWebSocket("ws://localhost:8080/broadcast"); /* 接收到服务端的消息时 */ webSocket.onmessage = function (msg) { }; /* 关闭时 */ webSocket.onclose = function () { console.log("关闭连接"); }; window.navigator.mediaDevices.getUserMedia({ video: { 1280, height: 960} }).then(function (mediaStream) { console.log('摄像头连接成功。') videoEL.srcObject = mediaStream; videoEL.onloadedmetadata = function(e) { videoEL.play(); setInterval(function(){ context.drawImage(videoEL, 0, 0);//绘制视频 var dataURL = canvasEL.toDataURL(); webSocket.send(JSON.stringify({method: "saveRecord", message: dataURL})) },30); }; }).catch(function (err) { console.log(err) }) </script> </html>
服务端实现
服务端笔者采用 node 当下流行的 KOA 框架作为 Web 承载服务器，使用 koa-websocket 处理 websocket 连接，当做信令服务器。
const Koa = require('koa');
const Router = require('@koa/router');
const websockify = require('koa-websocket');
const koaApp = new Koa();
const socketApp = websockify(koaApp);
const router = new Router();
const views = require('koa-views');
const ctxArr = [];
koaApp.use(views(__dirname + '/views', {
}));
router.get('/record', (ctx, next) => {
return ctx.render('record')
});
router.get('/play', (ctx, next) => {
return ctx.render('play')
});
router.all('/broadcast/', function (ctx) {
console.log('客户端已连接')
ctxArr.push(ctx)
ctx.websocket.on('message', function(message) {
var data = JSON.parse(message)
ctxArr.forEach(function (item) {
if (item != ctx) {
// 将监听到的画面广播到其他 websocket 连接。
item.websocket.send(data.message)
}
})
});
})
koaApp
.use(router.routes())
.use(router.allowedMethods());
socketApp.ws.use(router.routes());
socketApp.listen(8080);
播放端实现
播放端相对简单，将 websocket 获取到的 base64图片渲染到 canvas 即可。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>监控播放</title> <style type="text/css"> html,body{ padding: 0px; margin: 0px; box-sizing: border-box; } .container{ width: 1280px; margin: auto; overflow: hidden; } </style> </head> <body> <div class="container"> <canvas id="canvas" width="1280" height="960"></canvas> </div> </body> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script type="text/javascript"> var canvasEL = document.getElementById('canvas'); var context = canvasEL.getContext("2d"); /* 封装 WebSocket 实例化的方法 */ var CreateWebSocket = (function () { return function (urlValue) { if(window.WebSocket) return new WebSocket(urlValue); if(window.MozWebSocket) return new MozWebSocket(urlValue); return false; } })(); /* 实例化 WebSocket 连接对象, 地址为 ws 协议 */ var webSocket = CreateWebSocket("ws://localhost:8080/broadcast"); /* 接收到服务端的消息时 */ webSocket.onmessage = function (msg) { var img = new Image(); img.onload = function(){ context.drawImage(img, 0, 0);//绘制视频 }; img.src = msg.data; }; /* 关闭时 */ webSocket.onclose = function () { console.log("关闭连接"); }; </script> </html>
本文转载自：https://www.limitcode.com/detail/5e678b1675d1690e28cd748b.html