自己动手实现纯Web远程监控系统(纯Web,跨浏览器)

自己动手实现纯Web远程监控系统(纯Web,跨浏览器)想不想能够在网上看到自己家里的情况 罗技的网络摄像头又贵效果又不好 而且就只能摆一个死角度 而且页面上要安装插件 专业的监控系统死贵死贵 而且还是要用插件或者专门的软件 甚至有的还有端口限制 防火墙穿透能力极差 我们现在的目标就是在有限的资金投入下实现一个纯 Web 没有专用插件 跨浏览器 支持摄像头的控制 水平 270 度 垂直 210 度 带变焦 的远程监控系统 甚至还能支持拍照和录像功能 首先由于

想不想能够在网上看到自己家里的情况?罗技的网络摄像头又贵效果又不好,而且就只能摆一个死角度,而且页面上要安装插件,专业的监控系统死贵死贵,而且还是要用插件或者专门的软件,甚至有的还有端口限制,防火墙穿透能力极差。我们现在的目标就是在有限的资金投入下实现一个纯Web(没有专用插件),跨浏览器,支持摄像头的控制(水平270度,垂直210度,带变焦)的远程监控系统。甚至还能支持拍照和录像功能。

产品

规格

价格

云台

301云台

150(淘宝价)

云台解码板

自带电源的万用解码板

320

摄像头

1/3″ SONY ICX 409AK Color

420(淘宝价)

RS232-RS485转换头

通用

45

视频采集卡

视频采集卡影视大师豪华版 (三诺)

 

180(淘宝价)

网线、串口线

超6类网线2根、RS232线一根

 

 

 当然为了安装这些硬件我们还需要一些工具比如网线钳,电烙铁,焊锡丝等。

第一个步骤是硬件安装。那么第一步就是找个稳定的安装面把云台装好,具体的安装过程就不说了,拧螺丝,会吧。

接下来需要把摄像头的数据线和控制线接好,数据线就是常规的AV线,控制线就是用网线自己焊的,接头在摄像头的包装盒里有。云台的控制线也是一样。然后我们就把云台和摄像头的控制线按照说明书上的格式在解码板上安装好,然后设置解码板的协议格式为pelco-d(具体的设置方式在说明书上有)。控制信号是通过串口发送的,我们将串口线接到电脑的串口上,另一端接到转接口头,转接头的Rs485这一端用网线就行了,只需要两根线芯就行了,这根网线的另一端接到解码板上就行了。至此控制链路的物理链路就打通了。连通性测试可以用万用表来完成。

第二步就是打通视频链路,首先是把采集卡装到电脑上,然后把av线插到采集卡上就行了。好了现在硬件都搞定了我们就可以来搞定软件了。

首先我们要实现云台的控制。云台控制是通过串口来实现,电脑的串口通过pelco-d协议与云台解码板通信。pelco-d协议介绍 

ContractedBlock.gif ExpandedBlockStart.gif 封装指令的类

 1自己动手实现纯Web远程监控系统(纯Web,跨浏览器)using System;
 2自己动手实现纯Web远程监控系统(纯Web,跨浏览器)using System.Collections.Generic;
 3自己动手实现纯Web远程监控系统(纯Web,跨浏览器)using System.Text;
 4自己动手实现纯Web远程监控系统(纯Web,跨浏览器)
 5自己动手实现纯Web远程监控系统(纯Web,跨浏览器)namespace PelcoDLib
 6ExpandedBlockStart.gifContractedBlock.gif自己动手实现纯Web远程监控系统(纯Web,跨浏览器){

 7自己动手实现纯Web远程监控系统(纯Web,跨浏览器)    class ControlData
 8ExpandedSubBlockStart.gifContractedSubBlock.gif    自己动手实现纯Web远程监控系统(纯Web,跨浏览器){   
 9自己动手实现纯Web远程监控系统(纯Web,跨浏览器)        //                                    保留  地址  指令1 指令2 数据1 数据2 验证
10ExpandedSubBlockStart.gifContractedSubBlock.gif        public static byte[] Up =           自己动手实现纯Web远程监控系统(纯Web,跨浏览器)0xff0x010x000x100x000x3f0x50 };
11ExpandedSubBlockStart.gifContractedSubBlock.gif        public static byte[] Down =         自己动手实现纯Web远程监控系统(纯Web,跨浏览器)0xff0x010x000x080x000x3f0x48 };
12ExpandedSubBlockStart.gifContractedSubBlock.gif        public static byte[] Left =         自己动手实现纯Web远程监控系统(纯Web,跨浏览器)0xff0x010x000x040x3f0x000x44 };
13ExpandedSubBlockStart.gifContractedSubBlock.gif        public static byte[] Right =        自己动手实现纯Web远程监控系统(纯Web,跨浏览器)0xff0x010x000x020x3f0x000x42 };
14自己动手实现纯Web远程监控系统(纯Web,跨浏览器)
15ExpandedSubBlockStart.gifContractedSubBlock.gif        public static byte[] Forward =      自己动手实现纯Web远程监控系统(纯Web,跨浏览器)0xff0x010x000x200x000x000x21 };
16ExpandedSubBlockStart.gifContractedSubBlock.gif        public static byte[] Back =         自己动手实现纯Web远程监控系统(纯Web,跨浏览器)0xff0x010x000x400x000x000x41 };
17自己动手实现纯Web远程监控系统(纯Web,跨浏览器)
18ExpandedSubBlockStart.gifContractedSubBlock.gif        public static byte[] Stop =         自己动手实现纯Web远程监控系统(纯Web,跨浏览器)0xff0x010x000x000x000x000x00 };
19自己动手实现纯Web远程监控系统(纯Web,跨浏览器)
20ExpandedSubBlockStart.gifContractedSubBlock.gif        public static byte[] FocusForward = 自己动手实现纯Web远程监控系统(纯Web,跨浏览器)0xff0x010x000x800x000x000x81 };
21ExpandedSubBlockStart.gifContractedSubBlock.gif        public static byte[] FocusBack =    自己动手实现纯Web远程监控系统(纯Web,跨浏览器)0xff0x010x010x000x000x000x02 };
22自己动手实现纯Web远程监控系统(纯Web,跨浏览器)
23ExpandedSubBlockStart.gifContractedSubBlock.gif        public static byte[] SetPoint = 自己动手实现纯Web远程监控系统(纯Web,跨浏览器)0xff0x010x000x030x000x010x05 };
24ExpandedSubBlockStart.gifContractedSubBlock.gif        public static byte[] GotoPoint = 自己动手实现纯Web远程监控系统(纯Web,跨浏览器)0xff0x010x000x070x000x010x09 };
25自己动手实现纯Web远程监控系统(纯Web,跨浏览器)
26自己动手实现纯Web远程监控系统(纯Web,跨浏览器)        public static SortedDictionary<stringbyte[]> Commands = new SortedDictionary<stringbyte[]>();
27自己动手实现纯Web远程监控系统(纯Web,跨浏览器)
28自己动手实现纯Web远程监控系统(纯Web,跨浏览器)        static ControlData()
29ExpandedSubBlockStart.gifContractedSubBlock.gif        自己动手实现纯Web远程监控系统(纯Web,跨浏览器){

30自己动手实现纯Web远程监控系统(纯Web,跨浏览器)            Commands.Add(up, Up);
31自己动手实现纯Web远程监控系统(纯Web,跨浏览器)            Commands.Add(down, Down);
32自己动手实现纯Web远程监控系统(纯Web,跨浏览器)            Commands.Add(left, Left);
33自己动手实现纯Web远程监控系统(纯Web,跨浏览器)            Commands.Add(right, Right);
34自己动手实现纯Web远程监控系统(纯Web,跨浏览器)            Commands.Add(for, Forward);
35自己动手实现纯Web远程监控系统(纯Web,跨浏览器)            Commands.Add(back, Back);
36自己动手实现纯Web远程监控系统(纯Web,跨浏览器)            Commands.Add(ffor, FocusForward);
37自己动手实现纯Web远程监控系统(纯Web,跨浏览器)            Commands.Add(fback, FocusBack);
38自己动手实现纯Web远程监控系统(纯Web,跨浏览器)            Commands.Add(setp, SetPoint);
39自己动手实现纯Web远程监控系统(纯Web,跨浏览器)            Commands.Add(gop, GotoPoint);
40自己动手实现纯Web远程监控系统(纯Web,跨浏览器)        }

41自己动手实现纯Web远程监控系统(纯Web,跨浏览器)
42自己动手实现纯Web远程监控系统(纯Web,跨浏览器)    }

43自己动手实现纯Web远程监控系统(纯Web,跨浏览器)}

44自己动手实现纯Web远程监控系统(纯Web,跨浏览器)

 

ContractedBlock.gif ExpandedBlockStart.gif Code

1自己动手实现纯Web远程监控系统(纯Web,跨浏览器)public static void Up()
2ExpandedBlockStart.gifContractedBlock.gif        自己动手实现纯Web远程监控系统(纯Web,跨浏览器){

3自己动手实现纯Web远程监控系统(纯Web,跨浏览器)            using (SerialPort port = GetPort())
4ExpandedSubBlockStart.gifContractedSubBlock.gif            自己动手实现纯Web远程监控系统(纯Web,跨浏览器){

5自己动手实现纯Web远程监控系统(纯Web,跨浏览器)                if(!port.IsOpen)
6自己动手实现纯Web远程监控系统(纯Web,跨浏览器)                    port.Open();
7自己动手实现纯Web远程监控系统(纯Web,跨浏览器)                port.Write(ControlData.Commands[ConfigurationManager.AppSettings[up]], 07);
8自己动手实现纯Web远程监控系统(纯Web,跨浏览器)            }

9自己动手实现纯Web远程监控系统(纯Web,跨浏览器)        }

 

注意一点:一旦执行了指令云台就会一直按照这个指令运动下去,直到执行Stop指令为止。

最后我们只需要能够在页面上执行到这些方法就能控制云台了,所以我们在电脑上配置好IIS,创建一个站点,在站点上创建一个页面,我们通过这个页面获取指令的参数来调用相应的方法。

比如

}

 

之后我们用ajax去调用这个页面,就实现了控制云台的功能,我是用的flash用loadvars的方式去调用的,异曲同工不是么。

 

实现视频的方法要简单一些,我们可以用media encoder+media Service来实现,不过这个组合的延迟太严重了,大概十多而是秒,这个时候操作会变得很奇怪,所以我用的flash encoder+fms来实现从采集卡到Web页面显示的功能,这两个都有免费的开发版(10个并发,商业应用的话可以花钱买lisence)。我们在电脑上安装好这两个软件后,fms会以服务的方式运行,flash encoder运行后会自动找到采集设备,设置好码率,大小,比例等参数后设置好fms的地址就可以开始推送了,开始推送后会自动在fms创建application。

这个时候我们在网站上创建一个页面,把控制的flash或者ajax程序放上去,然后加入一个flash的播放器,地址设置为fms的app的地址,然后我们就能够在页面上看到图像了,而且还能够去控制摄像头运动。当然我们也可以自己用flash写一个播放器。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/212838.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月18日 下午7:08
下一篇 2026年3月18日 下午7:09


相关推荐

  • make menuconfig学习

    make menuconfig学习1.简介menuconfig是一套图像化配置工具,由ncurses库提供软件支持。ncurses库提供了一系列的函数以便使用者调用它们去生成基于文本的用户界面。menuconfig本身的软件只负责提供menuconfig工作的这一套逻辑,比如说通过上下左右调整光标,Enter选中等,并不负责提供内容。menuconfig运行之后会读取Kconfig、读取/写入.config文件,Kconfi…

    2022年5月20日
    87
  • 文明距离(civil)

    文明距离(civil)文明距离 civil 题目描述你被一个一向箔打中了 现在你掉到了一个一维空间中 也就是一个数轴上 在这个数轴上 每秒会在一段连续的区间上出现 文明 而你在每一秒开始的时候 可以花费 x 的代价移动 x 的距离 其中 x 是任意非负实数 当你移动结束以后 若你离 文明 的距离为 y 你就需要花费 y 的代价使用 大眼睛 来观测这个文明 不然你就要被黑暗森林攻击了 此处距离是指你到这段区间

    2026年3月16日
    2
  • KaTeX 数学符号列表[通俗易懂]

    KaTeX 数学符号列表[通俗易懂]数学符号希腊字母LaTexKaTex===isequalto=≠\ne̸​=isnotequalto\ne≈\approx≈isapproximatelyequalto\approx+++plus+−-−minus-±;∓\pm;\mp±;∓plus-minus;minus-plus\pm;\mp…

    2025年7月9日
    7
  • Linux /etc/vimrc 简洁配置

    Linux /etc/vimrc 简洁配置首先进入配置文件vim/etc/vimrc然后在末尾加上以下代码即可:syntaxon”自动语法高亮setnumber”显示行号setautoindent”自动对齐setsmartindent”智能对齐setcursorli…

    2022年6月2日
    38
  • PyTorch—torchvision.models导入预训练模型—残差网络代码讲解

    PyTorch—torchvision.models导入预训练模型—残差网络代码讲解PyTorch框架中torchvision模块下有:torchvision.datasets、torchvision.models、torchvision.transforms这3个子包。关于详情请参考官网:http://pytorch.org/docs/master/torchvision/index.html。具体代码可以参考github:https://github.com/pytorc…

    2022年6月24日
    30
  • 回调函数的理解

    回调函数的理解回调函数的理解

    2022年4月24日
    36

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号