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地址,端口号,用户名,密码,0
g_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>