网页版视频监控系统完整版

最近一年做了一款网页版的视频监控系统，主要用于安防监控以及家庭摄像头监控，用到的编程语言是html css javascript java等编程语言，下面是整个项目的一个介绍。
一、实时监控界面

1，点击视频监控，会跳转到监控页面
2.第二部分是界面实时切换部分，可以实现一分屏，二分屏、四分屏和六分屏，当然后期要更多分屏也可以自己扩展
3，这个是设备列表框，通过点击设备列表，可以看到自己实时在线的设备，下面是一个小的展示

4 ，这个是摄像头云台控制界面，可以对云台进行上下左右旋转，对摄像头变倍、变焦、光圈和步长进行调节。可以通过下方的云台控制、设备控制和预制巡航按钮，选择不同的控制界面，下面可以展示一下这个切换后的效果;

5 这部分主要是一些调节按钮，声音调节，截图功能和放大缩小
主要代码如下


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta name="format-detection" content="telephone=no"><title>视频监控系统</title><link href="css/style.css" rel="stylesheet" type="text/css" />
<%--时钟和日期的样式--%><style>#clock{font-family: 'Share Tech Mono', monospace;text-align: center;position: absolute;left: 93%;top: 2.5%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);color: #daf6ff;text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);}#clock .time{position: relative;top: 6px;letter-spacing: 0.05em;font-size: 35px;padding: 1px 0;}#clock .date{position: relative;top: 6px;letter-spacing:0.1em;font-size:15px;}#clock .text{letter-spacing: 0.1em;font-size:12px;padding:2px 0 0;}</style><script type="text/javascript" src="js/time.js"></script></head><body onload="change()"><div class="top"><div  class="top_logo"><img  src="img/logo.png"/></div><div class="top_right"><ul><li><i class="i_video"></i> <a href="video.jsp" target="iframe_con">视频监控</a> </li><li><i class="i_play"></i><a href="back_play2.jsp" target="iframe_con">视频回放</a> </li><li><i class="i_map"></i> <a href="map.jsp" target="iframe_con">电子地图</a> </li><li><i class="i_lgo"></i> <a href="log.jsp" target="iframe_con">日志查询</a> </li><li><i class="i_set"></i> <a href="SystemConfig.jsp" target="iframe_con">系统设置</a> </li></ul></div><div id="clock"><p class="time">{{ time }}</p><p class="date"> {{ date }}</p></div>
</div><div class="div_iframe" ><iframe src="video.jsp" name="iframe_con" title="test" frameborder="0" width="100%" height="100%" scrolling="auto" style="background-color:transparent; z-index:1;"> </iframe>
</div><%--<div class="div_foot">--%>
<%--</div>--%>
<script>var clock = new Vue({el: '#clock',data: {time: '',date: ''}});var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];var timerID = setInterval(updateTime, 1000);updateTime();function updateTime() {var cd = new Date();clock.time = zeroPadding(cd.getHours(), 2) + ':' + zeroPadding(cd.getMinutes(), 2) + ':' + zeroPadding(cd.getSeconds(), 2);clock.date = zeroPadding(cd.getFullYear(), 4) + '-' + zeroPadding(cd.getMonth()+1, 2) + '-' + zeroPadding(cd.getDate(), 2) + ' ' + week[cd.getDay()];};function zeroPadding(num, digit) {var zero = '';for(var i = 0; i < digit; i++) {zero += '0';}return (zero + num).slice(-digit);}
</script><script src="js/jquery.js" ></script>
<script>function change() {var height01 = $(window).height();$(".div_iframe").css('height', height01 + 47.66+"px");}
</script>
</body>
</html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>top</title>
<%--    滑块对应css引入--%><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel='stylesheet prefetch' href='css/jquery-ui.min.css'><link rel="stylesheet" type="text/css" href="css/styles1.css"><link rel="stylesheet" type="text/css" href="css/styles2.css"><link rel="stylesheet" type="text/css" href="css/styles3.css"><link rel="stylesheet" type="text/css" href="css/styles4.css"><%--界面--%><link href="css/style.css" rel="stylesheet" type="text/css" /><link rel="StyleSheet" href="css/dtree.css" type="text/css"/><script type="text/javascript" src="js/dtree.js"></script><script src="js/jquery.min.js"></script></head><body ><div class="allBox">
<%--    页面右方列表--%><div id="video_right" ><div class="right_up" ><div  class="dtree" id="dtree_div"><p class="ShebeiList">设备列表</p><div style="height: 10px;width: 100%;"> </div><script type="text/javascript">d = new dTree('d', true);   //参数一: 树名称。参数二：单选多选 true多选  false单选  默认单选d.add(0, -1, '');d.add(1, 0, 'authority', '0001', '网络视频',true, false);d.add(2, 1, 'authority', '0002', '网络视频1', true, false);d.add(3, 2, 'authority', '0003', '主码流 ', false, false);d.add(4, 2, 'authority', '0004', '子码流', false, false,'javascript:lalala()');d.add(5, 1, 'authority', '0005', '网络视频2',true, false);d.add(6, 5, 'authority', '0006', '主码流', false, false);d.add(7, 5, 'authority', '0007', '子码流', false, false);d.add(8, 1, 'authority', '0008', '网络视频3', true, false);d.add(9, 8, 'authority', '0009', '主码流 ', false, false);d.add(10, 8, 'authority', '00010', '子码流', false, false);d.add(11, 1, 'authority', '00011', '网络视频4',true, false);d.add(12, 11, 'authority', '00012', '主码流', false, false);d.add(13, 11, 'authority', '00013', '子码流', false, false);d.add(14, 1, 'authority', '00011', '网络视频5',true, false);d.add(15, 14, 'authority', '00012', '主码流', false, false);d.add(16, 14, 'authority', '00013', '子码流', false, false);document.write(d);d.openAll();</script></div></div><div class="right_down"><div  class="DuiYingJieMian"><p class="Shebei">云台控制</p><div class="YuanPanControl"><button class="TopBtn"></button><button class="LeftBtn"></button><button class="MiddleBtn"></button><button class="RightBtn"></button><button class="DownBtn"></button></div><div class="JingTouBianHuan"><div class="BianBei"><p class="Text">变倍</p><button class="AddBtn" ></button><button class="ReduceBtn"></button></div><div class="BianJiao"><p class="Text">变焦</p><button class="AddBtn" ></button><button class="ReduceBtn"></button></div><div class="GuangQuan"><p class="Text">光圈</p><button class="AddBtn"></button><button class="ReduceBtn"></button></div><div class="BuChang"><p class="Text1">步长</p><div id="stage"></div></div></div></div><script src="js/core.min.js"></script><script src="js/test.js" charset="gb2312"></script><div class="DuiYingJieMian" style="display: none"><P class="Shebei"> 设备控制</P><%--               滑块--%><p class="TiaoJie">明亮度</p><div class="htmleaf"><section id="content"><div class="cube"><div class="a"></div><div id="slider-range-min"></div></div><input type="text" id="amount" /></section></div><p class="DuiBiDu">对比度</p><div class="htmleaf1"><section id="content1"><div class="cube1"><div class="a1"></div><div id="slider-range-min1"></div></div><input type="text" id="amount1" /></section></div><p class="BaoHeDu">饱和度</p><div class="htmleaf2"><section id="content2"><div class="cube2"><div class="a2"></div><div id="slider-range-min2"></div></div><input type="text" id="amount2" /></section></div><p class="JianRuiDu">尖锐度</p><div class="htmleaf3"><section id="content3"><div class="cube3"><div class="a3"></div><div id="slider-range-min3"></div></div><input type="text" id="amount3" /></section></div><div class="CanShuSheZhi"><div class="DiYiHang"><span class="GetCanShu">获取参数</span><span class="SetCanShu">设置参数</span></div><div class="DiErHang"><span class="HandleCheckTime">手动校时</span><span class="ReStartEquipment">重启设备</span></div><div class="DiSanHang"><span class="ZhuaPaiPicture">抓拍图片</span><span class="ModelBaoJing">模拟报警</span></div><div class="DiSiHang"><span class="RefreshChannel">刷新通道</span><span class="EmergencyButton">备用按钮</span></div></div></div><div class="DuiYingJieMian" style="display: none"><P class="Shebei">预置巡航</P><div class="FirstLineYuZhiControl"><span class="Number1">编号</span><span  class="Number2">名称</span><span  class="Number3"></span><span  class="Number4"></span><span  class="Number5"></span></div><div class="MiddleLineYuZhiControl"><h6 class="MiddleText" >ptz1</h6></div><div class="DownLineYuZhiControl"><div class="FirstLineYuZhiXunHang"><span class="GetYuZhiWei">获取预置位</span><span class="AddYuZhiWei">添加预置位</span></div><div class="SecondLineYuZhiXunHang"><span class="DiaoYongStartWei">调用起始位</span><span class="SetStartWei">设置起始位</span></div><div class="ThirdLineYuZhiXunHang"><span class="StartXunHang">开始巡航</span><span class="StopXunHang">停止巡航</span></div></div></div><div class="ThreeChangeButton"><span class="KongZhi">云台控制</span><span class="KongZhi">设备控制</span><span class="KongZhi">预置巡航</span></div></div></div><%--   页面左边视频监控页面--%>
<%--    一个监控页面--%><div class="video"><div class="OneCamare"><iframe class="oneVideoMiddle" controls preload="none" width="100%" height="100%"  data-setup="{}" autoplay="autoplay" src="https://open.ys7.com/jssdk/theme.html?url=ezopen://open.ys7.com/E21439731/1.live&accessToken=at.0ghgl12w7u6fzls0dkipj0kf6n68z8fy-26kkhznw90-1xyfktz-my3jnqwhg&id=ysopen"> </iframe></div></div><%--    两个监控页面--%><div class="video" style="display: none"><div class="TwoCamare"><video  id="video" controls preload="none" width="100%" height="100%"   data-setup="{}" autoplay="autoplay"><source src="rtmp://rtmp01open.ys7.com:1935/v3/openlive/E21439731_1_1?expire=1688991417&id=468148992765603840&t=8c78eb4b7ddaeb856da85cc4c9a2ebb4eb4a8eca27d86247b01e14224870e565&ev=100" ></video></div><div class="TwoCamare"><video id="video" controls preload="none" width="100%" height="100%"  data-setup="{}" autoplay="autoplay"></video></div></div><script>var player =new ZEUIPlayer('video');</script>
<%--    四个监控页面--%><div class="video"  style="display: none" id="video_left"><div class="video_con"><video id="video" controls preload="none" width="100%" height="100%"  data-setup="{}" autoplay="autoplay"><!--                    <source src="../img/move.mp4">--></video></div><div class="video_con" ><video id="video1" controls preload="none" width="100%" height="100%"  data-setup="{}" autoplay="autoplay">
<%--                <source src="././img/move.mp4">--%></video></div><div class="video_con"  id="dd1"><video id="PhoneCmara"  controls preload="none" width="100%" height="100%"  data-setup="{}" autoplay="autoplay" ></video></div><div class="video_con"  id="dd"><video id="video3" controls preload="none" width="100%" height="100%"  data-setup="{}" autoplay="autoplay"><source src="../../img/move.mp4"></video></div></div>
<%--六个视频监控页面--%><div class="video"  style="display: none;" id="video_XF"><div class="video_XF1"><video id="videoXF1" controls preload="none" width="100%" height="100%"  data-setup="{}" autoplay="autoplay"><source src="../../img/move.mp4"></video></div><div class="video_XF1"><video id="videoXF2" controls preload="none" width="100%" height="100%"  data-setup="{}" autoplay="autoplay"><source src="../../img/move.mp4"></video></div><div class="video_XF1"><video id="videoXF3" controls preload="none" width="100%" height="100%"  data-setup="{}" autoplay="autoplay"><source src="../../img/move.mp4"></video></div><div class="video_XF1"><video id="videoXF4" controls preload="none" width="100%" height="100%"  data-setup="{}" autoplay="autoplay"><source src="../../img/move.mp4"></video></div><div class="video_XF1"><video id="videoXF5" controls preload="none" width="100%" height="100%"  data-setup="{}" autoplay="autoplay"><source src="../../img/move.mp4"></video></div><div class="video_XF1"><video id="videoXF6" controls preload="none" width="100%" height="100%"  data-setup="{}" autoplay="autoplay"><source src="../../img/move.mp4"></video></div></div><div class="JieMianQieHuan"><div class="ChangePage1 jiQiRen"><img class="OnePage" style="width: 100%;height: 100%;" src="./img/Onepage.jpg" alt=""></div><div class="ChangePage2 jiQiRen"><img class="TwoPage" style="width: 100%;height: 100%;" src="./img/Twopage.jpg" alt=""></div><div class="ChangePage3 jiQiRen"><img class="ThreePage" style="width: 100%;height: 100%;" src="./img/Fourpage.jpg" alt=""></div><div class="ChangePage4 jiQiRen"><img class="SixPage" style="width: 100%;height: 100%;" src="./img/Sixpage.jpg" alt=""></div><div class="JieTu"><img class="JieTuPage" style="width: 100%;height: 100%;" src="./img/JieTu.png" alt=""></div><div class="Yinliang"><img class="YinLingPage" style="width: 100%;height: 100%;" src="./img/YinLiang.png" alt=""></div></div>
</div><!--获取数据库信息--><script>$(function () {$('#slider-range-min').slider({range: 'min',value: 50,min: 0,max: 100,slide: function (event, ui) {$('#amount').val( ui.value );$('.a').width(ui.value + '%');}});$('.ui-slider-handle').text('');$('#amount').val('' + $('#slider-range-min').slider('value') + '');});</script>
<script>$(function () {$('#slider-range-min1').slider({range: 'min',value: 50,min: 0,max: 100,slide: function (event, ui) {$('#amount1').val( ui.value );$('.a1').width(ui.value + '%');}});$('.ui-slider-handle1').text('');$('#amount1').val('' + $('#slider-range-min1').slider('value') + '');});
</script>
<script>$(function () {$('#slider-range-min2').slider({range: 'min',value: 50,min: 0,max: 100,slide: function (event, ui) {$('#amount2').val( ui.value );$('.a2').width(ui.value + '%');}});$('.ui-slider-handle2').text('');$('#amount2').val('' + $('#slider-range-min2').slider('value') + '');});
</script>
<script>$(function () {$('#slider-range-min3').slider({range: 'min',value: 50,min: 0,max: 100,slide: function (event, ui) {$('#amount3').val( ui.value );$('.a3').width(ui.value + '%');}});$('.ui-slider-handle3').text('');$('#amount3').val('' + $('#slider-range-min3').slider('value') + '');});</script>
<script src="js/jquery.js" ></script>
<script src="js/video.js" ></script>
<%--右下方切换按钮对应方法--%>
<script>var DuiYinJieMian = document.getElementsByClassName('DuiYingJieMian');var KongZhi = document.getElementsByClassName('KongZhi');for (let i = 0; i < DuiYinJieMian.length; i++){KongZhi[i].index = i;console.log('for');KongZhi[i].onclick = function () {console.log(this.index);for (let j = 0; j < DuiYinJieMian.length; j++){DuiYinJieMian[j].style.display = 'none';}DuiYinJieMian[this.index].style.display = 'block';}
}
</script>
<script type="text/javascript">//#region 页面执行入口$(document).ready(function () {//#region 浏览器检测相关方法window["MzBrowser"] = {}; (function () {if (MzBrowser.platform) return;var ua = window.navigator.userAgent;MzBrowser.platform = window.navigator.platform;MzBrowser.firefox = ua.indexOf("Firefox") > 0;MzBrowser.opera = typeof (window.opera) == "object";MzBrowser.ie = !MzBrowser.opera && ua.indexOf("MSIE") > 0;MzBrowser.mozilla = window.navigator.product == "Gecko";MzBrowser.netscape = window.navigator.vendor == "Netscape";MzBrowser.safari = ua.indexOf("Safari") > -1;if (MzBrowser.firefox) var re = /Firefox(\s|\/)(\d+(\.\d+)?)/;else if (MzBrowser.ie) var re = /MSIE( )(\d+(\.\d+)?)/;else if (MzBrowser.opera) var re = /Opera(\s|\/)(\d+(\.\d+)?)/;else if (MzBrowser.netscape) var re = /Netscape(\s|\/)(\d+(\.\d+)?)/;else if (MzBrowser.safari) var re = /Version(\/)(\d+(\.\d+)?)/;else if (MzBrowser.mozilla) var re = /rv(\:)(\d+(\.\d+)?)/;if ("undefined" != typeof (re) && re.test(ua))MzBrowser.version = parseFloat(RegExp.$2);})();});//显示删除function showRemove(obj) {$(obj).addClass("remove");}//隐藏删除function hideRemove(obj) {$(obj).removeClass("remove");}//鼠标移动到删除图标，显示手（pointer）function setRemove(obj, event) {var width = $(obj).width();var left = $(obj).position().left;var e = event || window.event;var x = IsIE(GetVersion()) ? e.x : e.pageX;if (x > left + width - 9) {$(obj).css("cursor", "pointer")} else {$(obj).css("cursor", "default")}}function GetVersion() { return MzBrowser.version; }function GetName() {var name = "undefined";if (MzBrowser.ie) { name = "ie"; }else if (MzBrowser.firefox) { name = "firefox"; }else if (MzBrowser.safari) { name = "safari"; }return name;}function IsIE(versionValue) {if (versionValue == 11) {return IsIE11();}var name = GetName();var version = GetVersion();return name == 'ie' && parseInt(version) == versionValue;}
</script>
<script  src="js/jquery-2.1.1.min.js"></script>
<script  src='js/jquery-ui.min.js'></script>
<script  src='js/jquery-ui.min1.js'></script>
<script  src='js/jquery-ui.min2.js'></script>
<script  src='js/jquery-ui.min3.js'></script>
<%--调用电脑摄像头--%>
<%--<script>--%>
<%--    var mediaSource = new MediaSource();  //打开电脑摄像头--%>
<%--    var mediaRecorder ;--%>
<%--    var recordedBlobs;--%>
<%--    var sourceBuffer;--%>
<%--    var littleVideo = false;--%><%--    var gumVideo = document.querySelector("#video");  //把图像显示在video上--%>
<%--    var recordButton = document.querySelector("button#record");--%>
<%--    var playButton = document.querySelector("button#play");--%>
<%--    var downloadButton = document.querySelector("button#download");--%>
<%--    var reStartButton = document.querySelector("button#reStart");--%>
<%--    var uploadBtn = document.querySelector("button#upload");--%><%--    recordButton.onclick = toggleRecording;--%>
<%--    downloadButton.onclick = download;--%>
<%--    reStartButton.onclick = restartRecord;--%>
<%--    var constraints = {--%>
<%--        audio: true,--%>
<%--        video: true--%>
<%--    };--%><%--    function handleSuccess(stream) {--%>
<%--        recordButton.disabled = false;--%>
<%--        console.log("getUserMedia() got stream: ", stream);--%>
<%--        window.stream = stream;--%>
<%--        if (window.URL) {--%>
<%--            gumVideo.srcObject = stream;--%>
<%--        } else {--%>
<%--            gumVideo.src = stream;--%>
<%--        }--%><%--        gumVideo.addEventListener('pause',function() {if(i){window.clearInterval(i);}},false);--%>
<%--        gumVideo.addEventListener('ended',function() {if(i){clearInterval(i);}},false);--%>
<%--    }--%><%--    navigator.mediaDevices.getUserMedia(constraints).  //打开摄像头--%>
<%--        then(handleSuccess).catch(handleError);--%><%--    function handleDataAvailable(event) {--%>
<%--        if (event.data && event.data.size > 0) {--%>
<%--            recordedBlobs.push(event.data);--%>
<%--        }--%>
<%--    }--%><%--    function handleStop(event) {--%>
<%--        console.log("Recorder stopped: ", event);--%>
<%--    }--%><%--    function toggleRecording() {--%>
<%--        if (recordButton.textContent === '录制' || recordButton.textContent === '重录') {--%>
<%--            littleVideo = false;--%>
<%--            startRecording();--%>
<%--        } else {--%>
<%--            stopRecording();--%>
<%--            recordButton.textContent = '重录';--%>
<%--            downloadButton.disabled = false;--%>
<%--            reStartButton.disabled = false;--%>
<%--        }--%>
<%--    }--%><%--    function startRecording() {--%>
<%--        recordedBlobs = [];--%>
<%--        var options = {mimeType: 'video/webm;codecs=vp9'};--%>
<%--        if (!MediaRecorder.isTypeSupported(options.mimeType)) {--%>
<%--            console.log(options.mimeType + ' is not Supported');--%>
<%--            options = {mimeType: 'video/webm;codecs=vp8'};--%>
<%--            if (!MediaRecorder.isTypeSupported(options.mimeType)) {--%>
<%--                console.log(options.mimeType + ' is not Supported');--%>
<%--                options = {mimeType: 'video/webm'};--%>
<%--                if (!MediaRecorder.isTypeSupported(options.mimeType)) {--%>
<%--                    console.log(options.mimeType + ' is not Supported');--%>
<%--                    options = {mimeType: ''};--%>
<%--                }--%>
<%--            }--%>
<%--        }--%>
<%--        try {--%>
<%--            mediaRecorder = new MediaRecorder(window.stream, options);--%>
<%--        } catch (e) {--%>
<%--            console.error('Exception while creating MediaRecorder: ' + e);--%>
<%--            alert('Exception while creating MediaRecorder: '--%>
<%--                + e + '. mimeType: ' + options.mimeType);--%>
<%--            return;--%>
<%--        }--%>
<%--        recordButton.textContent = '停止';--%>
<%--        downloadButton.disabled = true;--%>
<%--        reStartButton.disabled = true;--%>
<%--        mediaRecorder.onstop = handleStop;--%>
<%--        mediaRecorder.ondataavailable = handleDataAvailable;--%>
<%--        mediaRecorder.start(1000); // collect 10ms of data--%>
<%--    }--%><%--    function stopRecording() {--%>
<%--        mediaRecorder.stop();--%>
<%--        console.log('Recorded Blobs: ', recordedBlobs);--%>
<%--    }--%><%--    function download() {--%>
<%--        var blob = new Blob(recordedBlobs, {type: 'video/mp4'});--%>
<%--        var url = window.URL.createObjectURL(blob);--%>
<%--        var a = document.createElement('a');--%>
<%--        a.style.display = 'none';--%>
<%--        a.href = url;--%>
<%--        //文件名 通过方法传进来 检测是否合法？--%>
<%--        a.download = 'backPlay.mp4';--%>
<%--        document.body.appendChild(a);--%>
<%--        a.click();--%>
<%--        setTimeout(function() {--%>
<%--            document.body.removeChild(a);--%>
<%--            window.URL.revokeObjectURL(url);--%>
<%--        }, 100);--%>
<%--    }--%><%--    function upload(){--%>
<%--        formData.append('nickName','Jack');//-->后台用req.body.nickName将值'Jack'取出--%>
<%--        var blob = new Blob(recordedBlobs, {type: 'video/mp4'});--%>
<%--        // var data = new FormData();--%>
<%--        var data = new FormData();--%>
<%--        data.append('file', file);--%>
<%--        return uploadVideoFile(data).then(res => {--%>
<%--            return this.recordVideoUrl = res.url;//获取上传的视频地址--%>
<%--        })--%><%--        $.ajax({--%>
<%--            type: "POST",--%>
<%--            url: "/form/data",--%>
<%--            data: data,--%>
<%--            processData:false,   //  告诉jquery不要处理发送的数据--%>
<%--            contentType:false,    // 告诉jquery不要设置content-Type请求头--%>
<%--            success:function(msg){--%>
<%--                console.log(msg);--%>
<%--            }--%>
<%--        });--%>
<%--    }--%><%--    function restartRecord(){--%>
<%--        //清楚存留 按钮功能重置--%>
<%--        recordButton.textContent = '录制';--%>
<%--        playButton.disabled = true;--%>
<%--        downloadButton.disabled = true;--%>
<%--        reStartButton.disabled = true;--%>
<%--        navigator.mediaDevices.getUserMedia(constraints).--%>
<%--        then(handleSuccess).catch(handleError);--%>
<%--    }--%>
<%--</script>--%>
</body>
</html>

二、回放界面
这个界面主要是对前面实时监控的视频进行回放，这个界面可以根据系统里面保存的视频自动生成回放链接，通过点击按钮实现回放。这个界面主要有三部分组成，
1 回放界面
2 选择设置界面，选择保存视频的来源，然后有对应的查询，删除和清除功能
3 点击回放界面，通过获取到的时间日期内容，按需求播放保存的视频
三、电子地图界面
这个界面主要是对自己安装的设备进行统一管理，知道自己安装摄像头的位置

1 地图类型选择
2 选择后的展示效果
3 对应的操作界面

四日志查询
主要对所有操作日志进行记录
五系统设置
对整个系统进行配置，包括数据库配置界面设置，、录像机设置用户管理和其他设置
1 主要是设置选择框，不同的设置具有不同的界面
2、基本设置界面
3 视频参数，立即应用
4 数据库设置
主要代码

<%--Created by IntelliJ IDEA.User: miDate: 2021-11-15Time: 23:29To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html"; charset="utf-8" /><title></title><link rel="stylesheet" href="css/normalize.min.css"><link href="css/SystemConfig.css" rel="stylesheet" type="text/css"><link href="css/choose1.css" rel="stylesheet" type="text/css"><link rel="stylesheet" href="css/choose2.css"><link rel="stylesheet" href="css/choose3.css"><link rel="stylesheet" href="css/choose4.css"><link rel="stylesheet" href="css/choose5.css"><link rel="stylesheet" href="css/choose6.css"><link rel="stylesheet" href="css/choose7.css"><link rel="stylesheet" href="css/choose8.css"><link rel="stylesheet" href="css/choose9.css"><link rel="stylesheet" href="css/choose10.css"><link rel="stylesheet" href="css/choose11.css"><link rel="stylesheet" href="css/choose12.css"><link rel="stylesheet" href="css/choose13.css"><link rel="stylesheet" href="css/choose14.css"><link rel="stylesheet" href="css/choose15.css"><link rel="stylesheet" href="css/choose16.css"><link rel="stylesheet" href="css/choose17.css"><link rel="stylesheet" href="css/choose17.css"></head>
<body>
<div class="Left_SystemConfig"><div class="System_Seeting"><img class="SeetingPicture" src="img/System_Seeting.png" alt=""><p class="System">系统设置</p></div><div class="VideoRecorderManagement"><img class="SeetingPicture" src="img/VideoRecorderManagement.png" alt=""><p class="System">录像机管理</p></div><div class="CameraManagement"><img class="SeetingPicture" src="img/CameraManagement.png" alt=""><p class="System">摄像机管理</p></div><div class="UserManagemet"><img class="SeetingPicture" src="img/UserManagemet.png" alt=""><p class="System">用户管理</p></div><div class="OthersSeeting"><img class="SeetingPicture" src="img/OthersSeeting.png" alt=""><p class="System">其他设置</p></div>
</div>
<div class="right_SystemXiangying"><div class="SystemSeeting_JieMian"><div class="First_BaseSeeting"><div class="BaseSeeting"><p class="BaseTittle">基本设置-立即使用</p><div class="Kaijiyunxing"><p class="StartRunning">开机运行</p><input id="chck1" type="checkbox"><label for="chck1" class="check-trail1"><span class="check-handler1"></span></label><p class="Chinesetittle">中文标题</p><input class="ChineseBiaoTi" value="云智能视频监控系统" type="text"></div><div class="Zidongdenglu"><p class="AutoLogin">自动登录</p><input id="chck2" type="checkbox"><label for="chck2" class="check-trail2"><span class="check-handler2"></span></label><p class="EnglishTitle">英文标题</p><input class="EnglishBiaoTi" type="text" value="Cloud Intelligent Video Monitoring System"></div><div class="jizhumima"><P class="RemenberSecrect">记住密码</P><input id="chck3" type="checkbox"><label for="chck3" class="check-trail3"><span class="check-handler3"></span></label><p class="BanQuan">版权所有</p><input class="BanQuanChoose" type="text" value="重庆巡感科技有限公司"></div><div class="tiaoshirizhi"><p class="DialogRecored">调试日志</p><input id="chck4" type="checkbox"><label for="chck4" class="check-trail4"><span class="check-handler4"></span></label><p class="WorkModdle">工作模式</p><select name="" class="WorkModdleChoose"><option value="">视频监控</option><option value="">机器人监控</option><option value="">无人机监控</option></select><p class="DaoHangStyle">导航样式</p><select name="" class="DaoHangStyleChoose"><option value="">上侧+上侧</option><option value="">左侧+左侧</option><option value="">左侧+上侧</option><option value="">上侧+左侧</option></select></div><div class="yunxingshijian"><p class="RunningTime">运行时间</p><input id="chck5" type="checkbox"><label for="chck5" class="check-trail5"><span class="check-handler5"></span></label><p class="JieMianStyle">界面样式</p><select name="" class="JieMianStyleChoose"><option value="">黑蓝色</option><option value="">软件黑</option><option value="">视频黑</option><option value="">深黑色</option><option value="">深蓝色</option><option value="">深灰色</option><option value="">扁平黑</option><option value="">扁平蓝</option><option value="">扁平灰</option><option value="">浅黑色</option><option value="">浅蓝色</option><option value="">浅灰色</option><option value="">普通黑</option><option value="">普通蓝</option><option value="">普通灰</option><option value="">大蓝色</option><option value="">大紫色</option><option value="">大灰色</option></select><p class="SoftWareTuBiao">软件图标</p><select name="" class="SoftWareTuBiaoChoose"><option value="">robot_white</option><option value="">icon_o×f1d1</option><option value="">robot_black</option><option value="">robot_green</option><option value="">uavs_blue</option><option value="">uavs_white</option><option value="">video_black</option><option value="">other_white</option></select></div><div class="quanpingmoshi"><p class="QuanPingMOLDLE">全屏模式</p><input id="chck6" type="checkbox"><label for="chck6" class="check-trail6"><span class="check-handler6"></span></label><p class="TanKungTime">弹框时间</p><select name="" class="TanKuangTimeChoose"><option value="">0秒钟</option><option value="">3秒钟</option><option value="">5秒钟</option><option value="">10秒钟</option><option value="">20秒钟</option><option value="">30秒钟</option><option value="">60秒钟</option><option value="">120秒钟</option><option value="">10000秒钟</option></select><p class="BaoJIngShengYing">报警声音</p><select name="" class="BaoJingShengYingChoose"><option value="">0次</option><option value="">1次</option><option value="">3次</option><option value="">5次</option><option value="">10次</option><option value="">20次</option><option value="">50次</option><option value="">100次</option><option value="">150次</option></select></div><div class="youshangxinxi"><P class="RightUpMessage">右上信息</P><input id="chck7" type="checkbox"><label for="chck7" class="check-trail7"><span class="check-handler7"></span></label><p class="MooseHide">鼠标隐藏</p><select name="" class="MooseHideChoose"><option value="">0秒钟</option><option value="">10秒钟</option><option value="">20秒钟</option><option value="">30秒钟</option><option value="">60秒钟</option><option value="">120秒钟</option></select><p class="AutoQuanPing">自动全屏</p><select name="" class="AutoQuanPingChoose"><option value="">0秒钟</option><option value="">10秒钟</option><option value="">20秒钟</option><option value="">30秒钟</option><option value="">60秒钟</option><option value="">120秒钟</option></select></div><div class="beiyongkaiguan"><p class="OtherOpenAndClose">备用开关</p><input id="chck8" type="checkbox"><label for="chck8" class="check-trail8"><span class="check-handler8"></span></label><p class="PictureJingQing">图文警情</p><select name="" class="PictureJingQingChoose"><option value="">0行</option><option value="">1行</option><option value="">3行</option><option value="">5行</option><option value="">10行</option><option value="">15行</option><option value="">20行</option><option value="">25行</option><option value="">30行</option><option value="">50行</option></select><p class="WindowMessage">窗口信息</p><select name="" class="WindowMessageChoose"><option value="">0行</option><option value="">1行</option><option value="">3行</option><option value="">5行</option><option value="">10行</option><option value="">15行</option><option value="">20行</option><option value="">25行</option><option value="">30行</option><option value="">50行</option></select></div></div><div class="CameraBaseSeeting"><p class="VideoCanShu">视频参数-立即应用</p><div class="baocunshiping"><p class="SaveShiPing">保存视频</p><input id="chck9" type="checkbox"><label for="chck9" class="check-trail9"><span class="check-handler9"></span></label><p class="SaveTime">存储间隔</p><select name="" class="SaveTimeChoose"><option value="">0分钟</option><option value="">1分钟</option><option value="">3分钟</option><option value="">5分钟</option><option value="">10分钟</option><option value="">20分钟</option><option value="">30分钟</option><option value="">60分钟</option></select><p class="VideoBianKuang">视频边框</p><select name="" class="VideoBianKuangChoose"><option value="">0像素</option><option value="">1像素</option><option value="">2像素</option><option value="">3像素</option><option value="">4像素</option><option value="">5像素</option></select></div><div class="baojingshiping"><p class="BJshiPing">报警视频</p><input id="chck10" type="checkbox"><label for="chck10" class="check-trail10"><span class="check-handler10"></span></label><p class="HardWareJiaSu">硬件加速</p><select name="" class="HardWareJiaSuChoose"><option value="">cuvid</option><option value="">none</option><option value="">qsv</option><option value="">cuvid</option><option value="">vaapi</option><option value="">vdpau</option><option value="">dxva2</option><option value="">d3d11va</option></select><p class="CoumuniteWay">通讯方式</p><select name="" class="CoumuniteWayChoose"><option value="">tcp</option><option value="">udp</option></select></div><div class="shipinghuidiao"><p class="VideoBackPlay">视频回调</p><input id="chck11" type="checkbox"><label for="chck11" class="check-trail11"><span class="check-handler11"></span></label><p class="MaliuType">码流类型</p><select name="" class="MaliuTypeChoose"><option value="">主码流</option><option value="">子码流</option></select><p class="JieMaWay">解码方式</p><select name="" class="JieMaWayChoose"><option value="">速度优先</option><option value="">质量优先</option><option value="">均衡处理</option><option value="">最快速度</option></select></div><div class="tupianlasheng"><p class="PictureLaSheng">图片拉伸</p><input id="chck12" type="checkbox"><label for="chck12" class="check-trail12"><span class="check-handler12"></span></label><p class="OpenJianGe">打开间隔</p><select name="" class="OpenJianGeChoose"><option value="">0.0秒</option><option value="">0.1秒</option><option value="">0.3秒</option><option value="">0.5秒</option><option value="">1.0秒</option><option value="">2.0秒</option><option value="">3.0秒</option><option value="">5.0秒</option></select><p class="ChongLianJianGe">重连间隔</p><select name="" class="ChongLianJianGeChoose"><option value="">0.0秒</option><option value="">0.1秒</option><option value="">0.3秒</option><option value="">0.5秒</option><option value="">1.0秒</option><option value="">2.0秒</option><option value="">3.0秒</option><option value="">5.0秒</option></select></div><div class="bofangyingping"><p class="PlayYinPing">播放音频</p><input id="chck13" type="checkbox"><label for="chck13" class="check-trail13"><span class="check-handler13"></span></label><p class="OpenChaoShi">打开超时</p><select name="" class="OpenChaoShiChoose"><option value="">0.5秒</option><option value="">1秒</option><option value="">3秒</option><option value="">5秒</option><option value="">8秒</option><option value="">10秒</option><option value="">15秒</option><option value="">30秒</option></select><p class="BeiYongXuanXiang">备用选项</p><select name="" class="BeiYongXuanXiangChoose"><option value="">备用选项</option></select></div><div class="rengongzhineng"><p class="PeopleZhineng">人工智能</p><input id="chck14" type="checkbox"><label for="chck14" class="check-trail14"><span class="check-handler14"></span></label><p class="VideoFuYong">视频复用</p><input id="chck15" type="checkbox"><label for="chck15" class="check-trail15"><span class="check-handler15"></span></label><p class="FenZuSuangji">分组双击</p><select name=""class="FenZuSuangjiChoose" ><option>最后空白通道</option><option>从头清空通道</option></select></div></div></div><div class="Second_BaseSeeting"><p class="MysqlConfig">数据库设置-重启生效</p><div class="ShuJuKutype"><div class="zhujileixing"><p class="zhujiType">主机类型</p><select name="" class="zhujiTypeChoose"><option value="">KingBase</option><option value="">ODBC</option><option value="">Sqlite</option><option value="">Mysql</option><option value="">SqlServer</option></select><p class="ShujukuName">数据库名</p><input type="text" class="ShujukuNameChoose" value="video_system"></div><div class="zhujidizhi"><p class="maindizhi">主机地址</p><input type="text" class="maindizhiChoose" value="127.0.0.1"><p class="ComuniteDuankou">通信端口</p><input type="text" class="ComuniteDuankouChoose" value="8080"></div><div class="yonghumingcheng"><p class="UserMingCheng">用户名称</p><input type="text" class="UserMingChengChoose" value="SYSTEM"><p class="UserMiMa">用户密码</p><input type="password"class="UserMiMaChoose" value="12345"></div><div class="ButtonTwo"><button class="ConnectTest"><p class="ConnectTestText">连接测试</p></button><button class="ChushiHuaDate"><p class="ChushiHuaDateText">初始化数据</p></button></div></div></div></div><div class="SystemSeeting_JieMian" style="display: none"><div class="relateCaoZuo"><button class="ADD"><img class="ADDPicture" src="img/add.png" alt=""><p class="ADDText">添加</p></button><button class="Save"><img class="SavePicture" src="img/Save.png" alt=""><p class="SaveText">保存</p></button><button class="deleteLuXiangJi"><img class="deleteLuXiangJiPicture" src="img/deleteLuXiangJi.png" alt=""><p class="deleteLuXiangJiText">删除</p></button><button class="ceXiao"><img class="ceXiaoPicture" src="img/Cexiao.png" alt=""><p class="CeXiaoText">撤销</p></button><button class="qingKong"><img class="qingKongpicture" src="img/qingKong.png" alt=""><p class="qingKongText">清空</p></button><button class="daoRu"><img class="daoRuPicture" src="img/DaoRu.png" alt=""><p class="DaoRuText">导入</p></button><button class="daoChu"><img class="daoChuPicture" src="img/daochu.png" alt=""><p class="daochuText">导出</p></button><button class="daYing"><img class="daYingPicture" src="img/daYing.png" alt=""><p class="daYingText">打印</p></button><button class="Excel"><img  class="ExcelPicture" src="img/Excel.png" alt=""><p class="ExcelText">excel</p></button><input type="text" class="TiShi" value="提示→改动后立即应用"></div></div><div class="SystemSeeting_JieMian" style="display: none"><div class="relateCaoZuo1"><button class="ADD1"><img class="ADDPicture1" src="img/add.png" alt=""><p class="ADDText1">添加</p></button><button class="Save1"><img class="SavePicture1" src="img/Save.png" alt=""><p class="SaveText1">保存</p></button><button class="deleteLuXiangJi1"><img class="deleteLuXiangJiPicture1" src="img/deleteLuXiangJi.png" alt=""><p class="deleteLuXiangJiText1">删除</p></button><button class="ceXiao1"><img class="ceXiaoPicture1" src="img/Cexiao.png" alt=""><p class="CeXiaoText1">撤销</p></button><button class="qingKong1"><img class="qingKongpicture1" src="img/qingKong.png" alt=""><p class="qingKongText1">清空</p></button><button class="daoRu1"><img class="daoRuPicture1" src="img/DaoRu.png" alt=""><p class="DaoRuText1">导入</p></button><button class="daoChu1"><img class="daoChuPicture1" src="img/daochu.png" alt=""><p class="daochuText1">导出</p></button><button class="daYing1"><img class="daYingPicture1" src="img/daYing.png" alt=""><p class="daYingText1">打印</p></button><button class="Excel1"><img  class="ExcelPicture1" src="img/Excel.png" alt=""><p class="ExcelText1">excel</p></button><button class="SouSUO"><img  class="SouSUOPicture" src="img/SOUSUO.png" alt=""><p class="souSUOText1">搜索</p></button><input type="text" class="TiShi1" value="提示→改动后立即应用"></div></div><div class="SystemSeeting_JieMian" style="display: none"><div class="relateCaoZuo2"><button class="ADD2"><img class="ADDPicture2" src="img/add.png" alt=""><p class="ADDText2">添加</p></button><button class="Save2"><img class="SavePicture2" src="img/Save.png" alt=""><p class="SaveText2">保存</p></button><button class="deleteLuXiangJi2"><img class="deleteLuXiangJiPicture2" src="img/deleteLuXiangJi.png" alt=""><p class="deleteLuXiangJiText2">删除</p></button><button class="ceXiao2"><img class="ceXiaoPicture2" src="img/Cexiao.png" alt=""><p class="CeXiaoText2">撤销</p></button><button class="qingKong2"><img class="qingKongpicture2" src="img/qingKong.png" alt=""><p class="qingKongText2">清空</p></button><button class="daoRu2"><img class="daoRuPicture2" src="img/DaoRu.png" alt=""><p class="DaoRuText2">导入</p></button><button class="daoChu2"><img class="daoChuPicture2" src="img/daochu.png" alt=""><p class="daochuText2">导出</p></button><button class="daYing2"><img class="daYingPicture2" src="img/daYing.png" alt=""><p class="daYingText2">打印</p></button><button class="Excel2"><img  class="ExcelPicture2" src="img/Excel.png" alt=""><p class="ExcelText2">excel</p></button><input type="text" class="TiShi2" value="提示→改动后立即应用"></div></div><div class="SystemSeeting_JieMian" style="display: none"><div class="SomeConfig"><p class="CuankouConfig">串口配置-立即应用</p><div class="cuankoupeizhi"><div class="CuankouA"><p class="Conmunite">通信串口A</p><select name="" class="ConmunicatChoose"><option value="">COM1</option><option value="">COM2</option><option value="">COM3</option><option value="">COM4</option><option value="">COM5</option><option value="">COM6</option><option value="">COM7</option><option value="">COM8</option><option value="">COM9</option><option value="">COM10</option></select><P class="BOTeLv">波特率A</P><select name="" class="BOTeLvChoose"><option value="">4800</option><option value="">9600</option><option value="">112500</option></select></div><div class="cuankouB"><p class="ConmuniteB">通信串口B</p><select name="" class="ConmunicatChooseB"><option value="">COM1</option><option value="">COM2</option><option value="">COM3</option><option value="">COM4</option><option value="">COM5</option><option value="">COM6</option><option value="">COM7</option><option value="">COM8</option><option value="">COM9</option><option value="">COM10</option></select><P class="BOTeLvB">波特率B</P><select name="" class="BOTeLvChooseB"><option value="">4800</option><option value="">9600</option><option value="">112500</option></select></div><div class="cuankouC"><p class="ConmuniteC">通信串口C</p><select name="" class="ConmunicatChooseC"><option value="">COM1</option><option value="">COM2</option><option value="">COM3</option><option value="">COM4</option><option value="">COM5</option><option value="">COM6</option><option value="">COM7</option><option value="">COM8</option><option value="">COM9</option><option value="">COM10</option></select><P class="BOTeLvC">波特率C</P><select name="" class="BOTeLvChooseC"><option value="">4800</option><option value="">9600</option><option value="">112500</option></select></div><div class="cuankouD"><p class="ConmuniteD">通信串口D</p><select name="" class="ConmunicatChooseD"><option value="">COM1</option><option value="">COM2</option><option value="">COM3</option><option value="">COM4</option><option value="">COM5</option><option value="">COM6</option><option value="">COM7</option><option value="">COM8</option><option value="">COM9</option><option value="">COM10</option></select><P class="BOTeLvD">波特率D</P><select name="" class="BOTeLvChooseD"><option value="">4800</option><option value="">9600</option><option value="">112500</option></select></div></div><div class="wangluopeizhi"><p class="InternetConfig">网络配置-重启应用</p><div class="TCPdiZhi"><p class="TcpWhere">TCP地址</p><input type="text" class="TcpWherechoose" value="127.0.0.1"><p class="TCPDK">TCP端口</p><input type="text" class="TCPDKchoose" value="6000"><button class="testtcp">测试TCP</button></div><div class="UDPdiZhi"><p class="TCPjt">TCP监听</p><input type="text" class="TCPjtchoose" value="6000"><p class="UDPjt">UDP监听</p><input type="text" class="UDPjtchoose" value="6000"><button class="testudp">测试UDP</button></div></div></div></div>
</div>
<script>var SystemSeeting_JieMian = document.getElementsByClassName('SystemSeeting_JieMian');var SeetingPicture = document.getElementsByClassName('SeetingPicture');for (let i = 0; i < SystemSeeting_JieMian.length; i++){SeetingPicture[i].index = i;console.log('for');SeetingPicture[i].onclick = function () {console.log(this.index);for (let j = 0; j < SystemSeeting_JieMian.length; j++){SystemSeeting_JieMian[j].style.display = 'none';}SystemSeeting_JieMian[this.index].style.display = 'block';}}
</script>
</body>
</html>

网页版视频监控系统完整版相关推荐

Centos7安装Promethus(普罗米修斯）监控系统完整版
相关博文: 1.Centos7安装Promethus(普罗米修斯)监控系统完整版 2.Promethus(普罗米修斯)监控Mysql数据库 3.Promethus(普罗米修斯)安装Grafana可视化 ...
视频教程-Zabbix分布式企业级监控实战视频课程（完整版）-Linux
Zabbix分布式企业级监控实战视频课程(完整版) 京东商城运维架构师,京峰Linux云计算教学总监,担任国内多家知名社区运维专家网站Linux版主,专注Linux自动化运维,熟练LVS.Nginx, ...
linux搭建天地伟业easy7,easy7视频监控系统客户端|天地伟业easy7监控客户端简洁版(Easy7 Smart Client Express)下载 V7.12 官方版 - 比克尔下载...
Easy7 Smart Client Express就是天地伟业简洁版的easy7视频监控系统客户端,支持天地伟业的DVR.NVR.网络视频编码器.网络摄像机.高清编码器等设备,该软件属于单机版软件, ...
基于ARM的远程视频监控系统的设计
http://www.21ic.com/app/mcu/201208/135975.htm 摘要:在ARM 微处理器平台上移植嵌入式Linux 操作系统,完成视频采集任务,并以服务器方式将图像发送到网 ...
Qt编写安防视频监控系统（支持win/linux/mac/海康/大华/宇视/264/265等）
一.前言视频监控系统在整个安防领域,已经做到了烂大街的程序,全国起码几百家公司做过类似的系统,当然这一方面的需求量也是非常旺盛的,各种定制化的需求越来越多,尤其是这几年借着人脸识别的东风,发展更加迅 ...
Qt编写安防视频监控系统56-数据库分页
一.前言在视频监控系统中也需要对日志记录进行查询显示,有时候查询到的记录并不能一页显示完,最好的做成翻页显示,如果所有记录都在一页显示通过滚动条查看,不是很符合用户习惯,比如搜索引擎的记录也都是分页 ...
毕设教程：基于嵌入式Linux和Qt实现的视频监控系统(Arm/树莓派/jetson)
本文章将教你做一个用嵌入式linux开发板和Qt来实现的视频监控系统. 知识点:嵌入式 Linux V4L2 socket QT 本项目是博主大学时的毕业设计题目,现分享给大家,需要其他题目可点如下链 ...
Linux下基于qt的视频监控系统
目录一.原始需求二.环境安装 2.1 qt安装 2.2 opencv安装三.系统设计 3.1. 整体流程设计 3.2 .数据传输交互流程 3.3 .数据库设计四.关键代码 4.1.如何实现通信 ...
基于ARM的移动视频监控系统
http://www.eeworld.com.cn/qrs/2010/0409/article_2439_1.html 0 引言传统的视频监控系统一般采用PC服务器的C/S(Client/Serv ...
介绍基于ARM的移动视频监控系统
摘要:将嵌入式Linux和无线网络引入到视频监控系统,阐述了系统的硬件组成:介绍了USB无线网卡驱动实现的过程:从嵌入式Linux开发环境的搭建.嵌入式流媒体服务器的设计和动态网页的设计等方面介绍了软 ...

网页版视频监控系统完整版

网页版视频监控系统完整版相关推荐

最新文章

热门文章