摘要：海康摄像头视频实时监控与预览，有两种方式：1、 vlc插件预览视频。2、 使用海康自带的ActiveX控件预览视频。一、vlc插件预览视频vlc 提供了ie浏览器的activeX插件和火狐或者chrome的插件，基本上覆盖了所有浏览器，所以...
海康摄像头视频实时监控与预览，有两种方式：
1、 vlc插件预览视频。
2、 使用海康自带的ActiveX控件预览视频。
一、vlc插件预览视频
vlc 提供了ie浏览器的activeX插件和火狐或者chrome的插件，基本上覆盖了所有浏览器，所以在复杂解码需求的情况下用vlc来解决网页播放视频。
<html>
<title>VLC Mozilla plugin testpage</title>
<head>
<scripttype="text/javascript">
functiongetVLC(name)
{
if (window.document[name])
{
return window.document[name];
}
if (navigator.appName.indexOf("Microsoft Internet")==-1)
{
if (document.embeds && document.embeds[name])
return document.embeds[name];
}
else // if(navigator.appName.indexOf("Microsoft Internet")!=-1)
{
return document.getElementById(name);
}
}
functioninit()
{
var vlc = getVLC("vlc");
alert(vlc.versionInfo());
}
functionplay(videoUrl)
{
varvlc = getVLC("vlc");
vlc.playlist.clear();
vlc.playlist.add(videoUrl);
vlc.playlist.play();
}
function pause()
{
varvlc = getVLC("vlc");
vlc.playlist.pause();
}
functionstop()
{
varvlc = getVLC("vlc");
vlc.playlist.stop();
}
functiontoggleFullscreen()
{
varvlc = getVLC("vlc");
vlc.video.toggleFullscreen();
}
</script>
</head>
<body>
<h1>Demo of VLC ie - Example1</h1>
<object id="vlc"width="640" height="540"classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab">
<param name="volume" value="50" />
<param name="autoplay" value="false" />
<param name="loop" value="false" />
<param name="fullscreen" value="true" />
<EMBEDpluginspage="http://www.videolan.org"
type="application/x-vlc-plugin"
version="VideoLAN.VLCPlugin.2"
width="640"
height="480"
toolbar="true"
loop="true"
text="Waiting for video"
name="vlc">
</EMBED>
</object>
<br/>
<a href="javascript:;"οnclick="init()">init</a>
<a href="javascript:;" οnclick="play("rtsp://admin:12345@192.168.1.100:554/h264/ch1/main/av_stream")">Playvideo</a>
<a href="javascript:;"οnclick="play("rtsp://admin:12345@192.168.1.100:554/Streaming/tracks/101?starttime=20160612t113812z&endtime=20160612t135959z")">Playhistory video</a>
<a href="javascript:;"οnclick="pause()">Pause video</a>
<a href="javascript:;"οnclick="stop()">Stop video</a>
<a href="javascript:;"οnclick="toggleFullscreen()">Fullscreen</a>
</body>
</html>
注意：Chrome浏览器42以上版本已经陆续不再支持NPAPI插件。你可以用使用低版本的Chrome浏览器。
二、使用海康自带的Active控件预览视频。
2.1. 选取海康网络摄像头并进行部署，假设访问地址为：http://192.168.1.100:80。
2.2. 访问http://192.168.1.100:80，IE浏览器会提示需要安装ActiveX控件，将ActiveX控件存储到本地（IPCameraActiveX.cab.cab）。
2.3. 解压IPCameraActiveX.cab，用记事本打开IPCameraActiveX.inf文件，查看代码段：
[NetVideoActiveX23.ocx]
file-win32-x86=thiscab
RegisterServer=yes
clsid={CAFCF48D-8E34-4490-8154-026191D73924}
DestDir= 11
FileVersion=2,3,21,1
2.4. 记录上面的“clsid”。
2.5. 在网页中注册上述ocx控件，使用js调用控件的中的方法进行登录，查看等操作(查看其他操作可查找：海康OCX控件接口文档)，代码如下：
<html>
<head>
<title>海康摄像头实时监控</title>
<script type="text/javascript">
function login()
{
var videoPlugin = window.document.getElementById("videoPlugin");
loginRes=videoPlugin.Login("192.168.6.64","81","admin","12345");
playRes= videoPlugin.StartRealPlay(0,1,0);
}
</script>
</head>
<body>
<form id="form1">
<objectid="video Plugin" class="objectClass"
classid="clsid:CAFCF48D-8E34-4490-8154-026191D73924"
codebase="IPCameraActiveX.cab" width="800"height="600"></object>
<input id="Button1" type="button"value="button" οnclick="login()" />
</form>
</body>
</html>
