1.下载OCX插件http://download.csdn.net/detail/whzhaochao/5965005
已下载
2.注册OCX控件
注册步骤: 1、下载完成之后,把解压包解压到磁盘(如 E:\ocx) 2、同时按住“windows”键(位于键盘左下角Ctrl和Alt中间)和“R”键 3、输入regsvr32 E:\ocx\RealPlayX.ocx(RealPlayX.ocx的路径) 4、点击确定 稍后会注册成功 5、然后设置IE浏览器的安全级别 6、点击【自定义级别】,将 ActiveX控件和插件 下面所有项都设置为启用,设置完成之后点击确定 7、重启浏览器
3.配置SSOcx.SetDeviceInfo(“ip地址”, 端口, 通道号, “账户名”, “密码”);方法
4.以下是示例代码,可以复制直接运行,修改摄像头配置即可。
<!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("172.30.20.34", 80, 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>
如果发现视频头都在内网无法通过外网访问,对接方给的解决方案是直接介入集成平台即可,当然集成平台肯定是外网可以访问的。
1.下载demo页面,
配置与上面讲的配置方法是一样的写入登录信息。
2.安装OCX插件 http://download.csdn.net/detail/ligengdipan/9471364。
3.注意通道ID,通过OCX插件接入集成平台使用的是通道ID,通道ID登录成功后平台会通过XML传给你。