Html控制大华摄像头

项目上要做一个前端Html控制大华摄像头的一个项目，网上查找的资料都不太准确。经过一番波折之后，终于编码成功。

PS.

bootstrap和JQuery需要各位自己引入
需要用到的API和插件都在这里【链接】
需要压缩包中的RealPlayX文件夹和Dahua_web3.0控件-直连DVR文件夹中的webplugin.exe
如果想播放.H264格式文件，需要安装VLC插件

<div id="f_ocx" style="width:100%;" class="row"><object id="ocx" class="col-sm-9"  height="100%" width="100%" classid="CLSID:{7F9063B6-E081-49DB-9FEC-D72422F2727F}" codebase=""></object><div class="col-sm-3" style="height:100%;padding:0px 0px 0px 10px"><div class="row"><div class="col-sm-4" style="padding:0px"><a οnmοusedοwn="controlPTZ(32,4,4,1,0)" οnmοuseup="controlPTZ(32,4,4,1,1)" class="btn btn-app">↖</a></div><div class="col-sm-4" style="padding:0px"><a οnmοusedοwn="controlPTZ(0,0,4,1,0)" οnmοuseup="controlPTZ(0,0,4,1,1)" class="btn btn-app">↑</a></div><div class="col-sm-4" style="padding:0px"><a οnmοusedοwn="controlPTZ(33,4,4,1,0)" οnmοuseup="controlPTZ(33,4,4,1,1)" class="btn btn-app">↗</a></div></div><div class="row"><div class="col-sm-4" style="padding:0px"><a οnmοusedοwn="controlPTZ(2,4,4,1,0)" οnmοuseup="controlPTZ(2,4,4,1,1)" class="btn btn-app">←</a></div><div class="col-sm-4" style="padding:0px"><a class="btn btn-app">⚪</a></div><div class="col-sm-4" style="padding:0px"><a οnmοusedοwn="controlPTZ(3,4,4,1,0)" οnmοuseup="controlPTZ(3,4,4,1,1)" class="btn btn-app">→</a></div></div><div class="row"><div class="col-sm-4" style="padding:0px"><a οnmοusedοwn="controlPTZ(34,4,4,1,0)" οnmοuseup="controlPTZ(34,4,4,1,1)" class="btn btn-app">↙</a></div><div class="col-sm-4" style="padding:0px"><a οnmοusedοwn="controlPTZ(1,1,4,1,0)" οnmοuseup="controlPTZ(1,1,4,1,1)" class="btn btn-app">↓</a></div><div class="col-sm-4" style="padding:0px"><a οnmοusedοwn="controlPTZ(35,4,4,1,0)" οnmοuseup="controlPTZ(35,4,4,1,1)" class="btn btn-app">↘</a></div></div><div class="row" style="margin-top:50px"><div class="col-sm-4" style="padding:0px"><a οnmοusedοwn="controlPTZ(5,0,1,1,0)" οnmοuseup="controlPTZ(5,0,1,1,1)" class="btn btn-app">-</a></div><div class="col-sm-4" style="font-size:25px;padding:0px;text-align:center">变倍</div><div class="col-sm-4" style="padding:0px"><a οnmοusedοwn="controlPTZ(4,0,1,1,0)" οnmοuseup="controlPTZ(4,0,1,1,1)" class="btn btn-app">+</a></div></div><div class="row"><div class="col-sm-4" style="padding:0px"><a οnmοusedοwn="controlPTZ(7,0,1,1,0)" οnmοuseup="controlPTZ(7,0,1,1,1)" class="btn btn-app" >-</a></div><div class="col-sm-4" style="font-size:25px;padding:0px;text-align:center">焦距</div><div class="col-sm-4" style="padding:0px"><a οnmοusedοwn="controlPTZ(6,0,1,1,0)" οnmοuseup="controlPTZ(6,0,1,1,1)" class="btn btn-app">+</a></div></div><div class="row"><div class="col-sm-4" style="padding:0px"><a οnmοusedοwn="controlPTZ(9,0,1,1,0)" οnmοuseup="controlPTZ(9,0,1,1,1)" class="btn btn-app">-</a></div><div class="col-sm-4" style="font-size:25px;padding:0px;text-align:center">光圈</div><div class="col-sm-4" style="padding:0px"><a οnmοusedοwn="controlPTZ(8,0,1,1,0)" οnmοuseup="controlPTZ(8,0,1,1,1)" class="btn btn-app">+</a></div></div><div class="row" style="margin-top:50px"><div class="col-sm-4" style="padding:0px"><a οnmοuseup="snapPicture()" class="btn btn-app">抓拍</a></div><div class="col-sm-4" style="padding:0px"><a οnmοuseup="openSliid()" class="btn btn-app" id="sliid">灯光</a></div></div><div class="row" style="margin-top:50px"><div class="col-sm-4" style="padding:0px"><a οnmοuseup="camera(1)" class="btn btn-app">1</a></div><div class="col-sm-4" style="padding:0px"><a οnmοuseup="camera(4)" class="btn btn-app">4</a></div><div class="col-sm-4" style="padding:0px"><a οnmοuseup="camera(9)" class="btn btn-app">9</a></div></div></div>
</div>

<script>
var g_ocx;
staticChannel = 2;//默认通道号
$(function(){clearInterval(interval1);clearInterval(interval);var screenHeight = document.documentElement.clientHeight - 45 - 140;$('#f_ocx').css({"height":screenHeight});g_ocx = document.getElementById('ocx');g_ocx.LoginDeviceEx("192.168.8.104",37777,"admin","admin", 0);//ip地址，端口号，用户名，密码，0g_ocx.SetModuleMode(1); //直播模式 g_ocx.SetWinBindedChannel(4, 0, 0, 3);//当前显示的窗口数目，当前选中的窗口，绑定的最小通道号，绑定的最大通道号g_ocx.ConnectRealVideo(0, 1);//连接摄像头g_ocx.ConnectRealVideo(1, 1);g_ocx.ConnectRealVideo(2, 1);g_ocx.ConnectRealVideo(3, 1);
})
function controlPTZ(command, p1, p2, p3, stop){//云台控制g_ocx.ControlPtzEx(0, command, p1, p2, p3, stop);console.log(command, p1, p2, p3, stop);
}function snapPicture(){//抓拍g_ocx.SnapPic(staticChannel);
}function camera(val){g_ocx.SetWinBindedChannel(val, 0, 0, 3);//当前显示的窗口数目，当前选中的窗口，绑定的最小通道号，绑定的最大通道号if(val == 1){g_ocx.ConnectRealVideo(0, 1);}if(val == 4){g_ocx.ConnectRealVideo(0, 1);g_ocx.ConnectRealVideo(1, 1);g_ocx.ConnectRealVideo(2, 1);g_ocx.ConnectRealVideo(3, 1);}if(val == 16){g_ocx.ConnectRealVideo(0, 1);g_ocx.ConnectRealVideo(1, 1);g_ocx.ConnectRealVideo(2, 1);g_ocx.ConnectRealVideo(3, 1);}
}
</script>

Html控制大华摄像头相关推荐

用python控制大华摄像头简单转动
控制摄像头的代码 import socket import timeclass Control:def left(self,i):client = socket.socket()client.conn ...
Unity3d C#通过使用大华SDK控制大华摄像头旋转、变焦等云台操作和预置点等控制操作（含源码）
前言本文的内容和在之前我写过Unity3d C# 接入海康威视摄像头SDK实现接口控制功能(如:控制云台)的文章基本类似,同样是通过官网提供的SDK进行开发,只不过针对的设备不同,和部分实现细节不同 ...
大华摄像头网页端控制+web串口(适用任何浏览器,不能用来打我)通讯合集
大华摄像头网页端控制+web串口(适用任何浏览器,不能用来打我)通讯合集 web界面操作图实现原理通过本地java web服务器开通websocket对服务进行支持,后调用大华java 通用 SD ...
WEB页面播放大华摄像头视频解决方案
目前在网页上播放大华摄像头视频,有如下2种途径: 1)首选获取摄像头的hls协议地址,H5可直接播放 2)获取摄像头rtsp协议地址,用ffmpeg转换成hls再播放近期做的一个项目,需要在WEB端 ...
大华摄像头实现web端实时播放以及录像回放
文章目录前言一.在乐橙云平台上注册账号并添加设备创建应用二.利用云平台的api获取到前端展示需要的相关信息三.前端页面展示内容总结前言前段时间对接了大华摄像头,在此做一次总结,总体思路是 ...
对接第三方《大华摄像头》
首先是进入大华摄像头旗下的乐橙云官网https://open.imou.com/,把sdk下载后,开发文档里有前端和后端的开发对接. 前端一般是轻应用开发(我用的老版轻应用,应该都差不多)有播放器代 ...
基于国标GB28181协议EasyGBS平台与大华摄像头的周界入侵解决方案
随着互联网等技术的发展,以及大众不断提高安防意识,安防行业也迎来快速发展,周界入侵类的场景应用解决方案也较为普遍.在今天的文章中,我们和大家分享基于EasyGBS平台与大华摄像头的周界入侵解决方案. ...
ONVIF方式将大华摄像头接入海康威视录像机
ONVIF方式将大华摄像头接入海康威视录像机一.大华摄像头启用ONVIF,录像机添加后可通过云台控制方向二.大华摄像头添加新的ONVIF用户三.海康威视录像机添加摄像头
海康、大华摄像头网页无插件直播监控流媒体服务EasyNVR使用web和安卓浏览器能正常使用，苹果手机无法打开问题解决
海康.大华摄像头网页无插件直播监控流媒体服务EasyNVR使用web和安卓浏览器能正常使用,苹果手机无法打开问题解决参考文章: (1)海康.大华摄像头网页无插件直播监控流媒体服务EasyNVR使用w ...

Html控制大华摄像头

Html控制大华摄像头

Html控制大华摄像头相关推荐

最新文章

热门文章