Html控制大华摄像头

PS.

1. bootstrap和JQuery需要各位自己引入
2. 需要用到的API和插件都在这里【链接】
3. 需要压缩包中的RealPlayX文件夹和Dahua_web3.0控件-直连DVR文件夹中的webplugin.exe
4. 如果想播放.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>