通过WEB调用大华网络摄像头

女爷i 2024-04-17 22:32 84阅读 0赞

通过WEB调用大华网络摄像头

1.要调用的大华摄像头为Dahua 大华DH-IPC-HFW2100P-0600B 网络摄像机 (白色)，摄像头外形如下图所示

![Center][]

2.调用效果如下图所示  
![Center 1][]

3.下载大华网络摄像头OCX包，下载地址[http://download.csdn.net/detail/whzhaochao/5965005][http_download.csdn.net_detail_whzhaochao_5965005]

4.解压OCX包单击文件中的reg.bat注册dll

5.新建index.html关输入以下代码

<!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" />
    <title>视频控件</title>
    <style>
    body {font-family:"", arial;margin:0 auto; padding:0; }
    div,form,img,ul,p {margin: 0 auto; padding: 0; border: 0; overflow:hidden; list-style-type:none; }
    h1,h2,h3,h4,h5,h6 { margin:0; padding:0;}
    .bigbg{
    	width:1280px;
    	height:820px;
    	position:relative;
    	top:50px;
    	background:#fff;}
    .kuang{
    	background:url(img/video_03.gif) no-repeat;
    	width:1280px;
    	height:820px;
    	margin-top:12px;}
    .close a{
    	background:url(img/1_04.gif) no-repeat;
    	width:41px;
    	height:36px;
    	position:absolute;
    	left:618px;
    	top:5px;
    }
    .close a:hover{
    	background:url(img/2_04.gif) no-repeat;
    	with:41px;
    	height:36px;
    	position:absolute;
    	left:618px;
    	top:5px;
    }	
    
    .videoscreen{
    width:1280px;
    	height:720px;
    background-color:#999;
    	position:absolute;
    	right:17px;
    	top:45px;
    	}
    
    .sfream {
    	background:url(img/video_05.jpg) no-repeat;
    	width:627px;
    	height:42px;
    	margin-top:400px;}
    	
    .play a{
    	background:url(img/video_25.gif) no-repeat;
    	width:19px;
    	height:19px;
    	position:absolute;
    	left:26px;
    	bottom:17px;}
    	
    .pause a{	background:url(img/video_26.gif) no-repeat;
    	width:21px;
    	height:19px;
    	position:absolute;
    	left:46px;
    	bottom:17px;
    }
    .progressbar a{	background:url(img/video_28.gif) no-repeat;
    	width:291px;
    	height:20px;
    	position:absolute;
    	left:76px;
    	bottom:17px;
    }
    .snapshot-picture a{	background:url(img/video_16.gif) no-repeat;
    	width:25px;
    	height:25px;
    	position:absolute;
    	left:377px;
    	bottom:17px;}
    
    .stepback a {	background:url(img/video_18.gif) no-repeat;
    	width:24px;
    	height:25px;
    	position:absolute;
    	left:409px;
    	bottom:17px;}
    
    .camera a{background:url(img/video_20.gif) no-repeat;
    	width:26px;
    	height:27px;
    	position:absolute;
    	left:439px;
    	bottom:14px;}
    	
    .stopcamera a{background:url(img/video_22.gif) no-repeat;
    	width:27px;
    	height:27px;
    	position:absolute;
    	left:472px;
    	bottom:14px;}
    	
    .singlescreen a{background:url(img/video_09.gif) no-repeat;
    	width:31px;
    	height:29px;
    	position:absolute;
    	left:506px;
    	bottom:12px;}
    	
    .doublescreen a{background:url(img/video_11.gif) no-repeat;
    	width:31px;
    	height:29px;
    	position:absolute;
    	left:546px;
    	bottom:12px;}
    	
    .ninescreen a{background:url(img/video_13.gif) no-repeat;
    	width:32px;
    	height:29px;
    	position:absolute;
    	left:586px;
    	bottom:12px;}
    	
    .ninescreen a:hover{background:url(img/design_05.gif) no-repeat;
    	width:40px;
    	height:29px;
    	position:absolute;
    	left:586px;
    	bottom:82px;}
    
    </style>
    
    <script language="javascript">
    
    
    function StartPreview()
    {	alert("开始");
    	var SSOcx = document.getElementById("playOcx");
    	SSOcx.SetDeviceInfo("192.168.1.108",37777,0,"admin","admin");
            SSOcx.StartPlay();		
    }
    
    
    function StoptPreview()
    {
        var SSOcx = document.getElementById("playOcx");
        SSOcx.StopPlay();
    	
    }
    
    function Capture()
    {
    
        var SSOcx = document.getElementById("playOcx");
       var dd= SSOcx.GetCapturePicture("d:\\1.bmp");
    
    }
    
    function StartRecord()
    {	
    
     var SSOcx = document.getElementById("playOcx");
         SSOcx.SaveRealData("d:\\1.avi");
    }
    
    function StopRecord()
    {	
     var SSOcx = document.getElementById("playOcx");
         SSOcx.StopSaveRealDate();
    }
    
    
    </script>
    </head>
    
    <body>
    <div class="bigbg">
    <div class="kuang">
        <div class="videoscreen"> 
        <td width="50%"   align="right" style="padding-right:50px">
        
        
             <object classid="clsid:30209FBC-57EB-4F87-BF3E-740E3D8019D2" codebase=""
                  standby="Waiting..." id="playOcx" width="1280" height="720" name="playOcx" align="center" >
                <embed width="618" height="360" align="center"></embed>
             </object>
        
        </td>
         </div>
    
    <div class="sfream">
    <div class="play"><a href="javascript:StartPreview()">播放</a><br/></div>
    <div class="pause"><a href="javascript:StoptPreview()">暂停</a><br /></div>
    <div class="progressbar"><a href=""></a></div>
    <div class="snapshot-picture"><a href="javascript:Capture()">拍照</a><br/></div>
    <div class="stepback"><a href=""></a></div>
    <div class="camera"><a href="javascript:StartRecord()">录制</a><br/></div>
    <div class="stopcamera"><a href="javascript:StopRecord()">停止录制</a></div>
    <div class="singlescreen"><a href=""></a></div>
    <div class="doublescreen"><a href=""></a></div>
    <div class="ninescreen"><a href=""></a></div>
    </div>
    </div>
    <div class="close"><a href=""></a></div>
    
    </div>
    
    
    
    
    </body>
    </html>

6.保存并用IE打开，请允许加载Active控件，如果不出问题则调用成功

**注意事项：**

**1.**SSOcx.SetDeviceInfo("192.168.1.108",37777,0,"admin","admin");注意修改成你的摄像机的IP地址、端口、通道、用户名、密码

2.大华的dll要注册成功，检查有没有注册的方法：打开注册表，搜索classid号，如果有表明OCX控件注册成功，classid号为：30209FBC-57EB-4F87-BF3E-740E3D8019D2

3.改方法试用于IE，其它浏览器不行

4.第一次用IE打开一定要加载控件，如果IE阻止控件会导致调用失败。如果IE阻止加载控件，请在Internet项目->安全->自定义级别 中将ActiveX控件和插件下的所有项都启用

[Center]: https://img-blog.csdn.net/20130817153051578?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2h6aGFvY2hhbw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: https://img-blog.csdn.net/20130817153351359?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2h6aGFvY2hhbw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[http_download.csdn.net_detail_whzhaochao_5965005]: http://download.csdn.net/detail/whzhaochao/5965005