前言

为实现远程画面监视，大致上有两种思路：（1）实时视频数据的传输；（2）实时图像数据的传输。本篇主要讲述下实时图像数据传输的方式。

方案详情

技术点

技术点非难点。主要涉及以下：

1.采集实时图像。采用opencv计算机视觉库。

2.后端传输数据。ws发送base64Str图像数据活http定时请求。采用前者。

3.前端接收数据。 ws客户端定时更新<img>标签或http定时请求更新标签。采用前者。

代码

C++部分

VideoCapture cap(0);
if(!cap.isOpened())
{cout << "cap open failed!"<<endl;return -1;
}
while (1) {Mat frame;cap >> frame;if(frame.empty()){cout << "Finish"<< endl;}// 伪代码// 转mat对象为base64Str,如需传输灰度图等可自行处理后进行base64转换QString base64Str = matToBase64Str(frame);// 发送数据给ws客户端wsServer.sendMsgToClients(base64Str);imshow("Input video", frame);waitKey(30);
}
cap.release();

js部分

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="KingScreenViewer"><meta name="author" content="Eslam Hamouda"><title>KingScreenViewer</title><link href="bootstrap.min.css" rel="stylesheet" /><style>#Viewer {width: 100%;}</style>
</head>
<body><div id="Viewer" class="imgPreview"><img id="imgPrev" src="screenshot.jpg" class="img-responsive" alt="LIVE! Sever Screen Now!"style="width:100%;margin:auto" /></div><script type="text/javascript">let imgViewer = document.getElementById("imgPrev");function sendMessage() {if (websocket != null) {websocket.send("I am client");console.log("string sent :", '"' + msg + '"');}}function sendGetRequest(url, callback) {let httpRequest = new XMLHttpRequest();httpRequest.open('GET', url, true);httpRequest.send();    httpRequest.onreadystatechange = function () {if (httpRequest.readyState == 4 && httpRequest.status == 200) {let json = httpRequest.responseText;callback(json);}};}let wsUri = `ws://${window.location.hostname}:1234`;let websocket = null;initWebSocket();function initWebSocket() {if (typeof MozWebSocket == 'function') {WebSocket = MozWebSocket;}if (websocket && websocket.readyState == 1) {websocket.close();}sendGetRequest(`http://${window.location.host}/api/getIpAddress`, function (res) {try {let resData = JSON.parse(res);wsUri = `ws://${window.location.hostname}:${resData.data.port}`;websocket = new WebSocket(wsUri);websocket.onopen = function (evt) {console.log("连接成功");};websocket.onclose = function (evt) {console.log("断开连接");};websocket.onmessage = function (evt) {if (evt.data.startsWith("imgData")) {imgViewer.src = `data:image/jpeg;base64,${evt.data.substring(7, evt.data.length)}`;} else {console.log("msg from server:" + evt.data);}};websocket.onerror = function (evt) {console.log('ERROR: ' + evt.data);};} catch (exception) {console.log('ERROR: ' + exception);}});}function stopWebSocket() {if (websocket)websocket.close();}function checkSocket() {if (websocket != null) {let stateStr;switch (websocket.readyState) {case 0: {stateStr = "CONNECTING";break;}case 1: {stateStr = "OPEN";break;}case 2: {stateStr = "CLOSING";break;}case 3: {stateStr = "CLOSED";break;}default: {stateStr = "UNKNOW";break;}}console.log("WebSocket state = " + websocket.readyState + " ( " + stateStr + " )");} else {console.log("WebSocket is null");}}</script>
</body>
</html>

结果

前端页面中可实时显示摄像头采集到的数据，内存增长较快，但也稳定，有释放的过程。

存在问题

传输的为实时图片数据，并非视频流，但也满足实时观看的基本需求了。

下一步计划

研究下视频流的基本传输，如ffmpeg结合opencv推流、拉流等技术。

WEB端显示摄像头实时图像数据相关推荐

海康威视设备在Web端显示实时（回放）视频
前言目前做的项目,需要Web端显示实时视频数据.本次项目使用的是海康威视的摄像头进行实时监控. 硬件:海康威视的摄像头软件:video.js.nginx.vlc 参考:https://blog.c ...
使用海康威视设备在Web端显示实时视频
前言目前做的项目,需要Web端显示实时视频数据.本次项目使用的是海康威视的摄像头进行实时监控. 硬件:萤石的摄像头(海康威视旗下的),海康威视的硬盘录像机. 软件:vlc 2.2.6版本. Web端 ...
web端实现rtsp实时推流视频播放可行性方案分析
1.webrtc 1.1 什么是WebRTC 百度概念:WebRTC (Web Real-Time Communications) 是一项实时通讯技术,它允许网络应用或者站点,在不借助中间媒介的情况下 ...
使用FFMpeg API 获取摄像头的图像数据
文章目录 1. 获取摄像头的信息 2. 打开并初始化摄像头 3. 获取摄像头数据及渲染摄像头是我们比较常用的外设,很多场景我们都会用到摄像头.比如视频直播.视频监控等各个领域都会用到摄像头.摄像头图 ...
利用ros3d.js实现 turtlebot3 在web 端显示并导航
ros3d导航,rosweb, 利用ros3djs实现 turtlebot3 在web 端显示并导航主要是用到 ros3djs.rosbridge_server.tf2_web_republishe ...
zabbix搭建完，web端显示“zabbix服务器端运行中不”
zabbix搭建完,web端显示"zabbix服务器端运行中不"如下图: 但是查看服务器的状态是running 然后查日志/var/log/zabbix/zabbix-serve ...
VUE+websocket编写实现PC web端控制摄像头
目录前言一.WebSocket简介二.API接口三.后台服务器四.实例视频流框类"遥控器"模块控制视频画面五.完整功能展示(视频不懂上传,泪目) 六.完整代码总结 ...
WEB端显示三维地形模型
注:正常在WEB上显示三维地形首选Cesium,本文内容仅作为研究,展示文章用DEM制作通用三维地形模型中制作的局部三维地形模型 Cesium是可以很容易的实现在WEB端三维地形的,下面的图是分别是使 ...
利用ros3djs接收pointcloud2在web端显示
因项目需要,要将道路实时的点云流在经过算法处理后在web端显示出来.其中用到点云检测算法,然后发布相应的处理后的点云topic.在web端相应位置创建3Dview接收显示. 主要是用到 ros3djs ...

WEB端显示摄像头实时图像数据

前言