海康视频监控---Demo

时间：2023-03-09 03:58:03
海康视频监控---Demo

1，使用在页面中调用ActiveX控件

         <object classid='clsid:E7EF736D-B4E6-4A5A-BA94-732D71107808' codebase='' standby='Waiting...' id='PreviewActiveX' width='100%' height='100%' name='ocx' align='center'>

            <param name='wndtype' value='1'>

            <param name='playmode' value='undefined'>

        </object>

这里的

classid,是ActiveX控件的编号，可以在注册表中查到

codebase，是控件没有安装的情况下需要去查找的路径，通常后面要加上版本号.如：codebase/NetVideoActiveX23.cab#version=2,3,9,1

param，   子节点的param则是该控件的参数列表

注意：这里的activex是微软开发且闭源的,仅适用于IE（本人一直用的是Chrome所以一直不显示控件，这里提醒一下）

Firefox和Chrome需要安装特定的插件：

　　　　如果chrome安装：ActiveX for Chrome （未测试）

　　　　如果是Firfox安装：npActivexPlugin（未测试）

2，操作说明这里的海康视频监控有两个OCX控件供调用

一个是 NetVideoActiveX23.ocx

另一个是WebVideoActiveX.ocx

*区别这里我没找到，如果知道的可以留言说一下~

我在用的时候是用的WebVideoActiveX.ocx

因为NetVideoActiveX23.ocx我尝试调用StartRealPlay方法总是返回-1，所以预览不成功，然后就改用WebVideoActiveX.ocx

cmd下注册WebVideoActiveX.ocx：regsvr32 WebVideoActiveX.ocx

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <script src="script/Jquery.js"></script>

    <script src="script/mjpegPlugin.js"></script>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>10.24.1.114V23</title>

    <script src="script/dvr.js"></script>

    <script src="script/js.js"></script>

</head>

<body>

    <%--<div style="margin: 0px; width: 600px; height: 300px; background-color: #343434" id="main_plugin"></div>--%>

    <div style="width: 640px; height: 480px; margin: auto auto;">

        <object classid='clsid:E7EF736D-B4E6-4A5A-BA94-732D71107808' codebase='' standby='Waiting...' id='PreviewActiveX' width='100%' height='100%' name='ocx' align='center'>

            <param name='wndtype' value='1'>

            <param name='playmode' value='undefined'>

        </object>

    </div>

    <div style="float: left">

        <div>

            <input type="button" value="初始化插件" onclick="InitPreviewOCX()" />

        </div>

        <div>

            <select id="wintype">

                <option>1</option>

                <option>2</option>

                <option>3</option>

            </select>

            <input type="button" value="设置窗口模式" onclick="InitWindow()" />

        </div>

        <div>

            <span style="margin-right: 20px">窗口号:

                <select id="winNum">

                    <option>0</option>

                    <option>1</option>

                    <option>2</option>

                </select>

            </span>

            <span>通道号:

                <select id="chanelNum">

                    <option>0</option>

                    <option>1</option>

                    <option>2</option>

                </select>

            </span>

            <input type="button" value="预览" onclick="StartRealPlay()" />

        </div>

    </div>

</body>

</html>

<script type="text/javascript">

    var m_PreviewOCX = null

    var ipAddress = "192.168.13.211";

    var rstpPort = "554";

    var userPwd = "YWRtaW46MTIzNDU="

    //初始化OCX插件

    function InitPreviewOCX() {

        //if (!checkPlugin()) {

        //    m_PreviewOCX = $("#mjpegPlugin").mjpegPlugin();

        //}

        setTimeout(m_PreviewOCX = document.getElementById("PreviewActiveX"), 5000);

    }

    function InitWindow() {

        //iWindowType  画面分割模式。  1 - 1窗口模式，2 - 4窗口模式，3 - 9窗口模

        var iWindowType = $("#wintype").val();

        m_PreviewOCX.HWP_ArrangeWindow(iWindowType);

    }

    function StartRealPlay() {

        var iChannelNum = $("#chanelNum").val();

        var iWinNun = $("#winNum").val();

        var rstpUri = "rtsp://" + ipAddress + ":" + rstpPort + "/PSIA/streaming/channels/" + (iChannelNum * 100 + 1);

        m_PreviewOCX.HWP_Play(rstpUri, userPwd, iWinNun, "", "");

    }

    function GetSelectWndInfo(SelectWndInfo) {

    }

    function GetAllWndInfo(RealplayInfo) {

    }

    function PluginEventHandler(iEventType, iParam1, iParam2) {

    }

    function SetZeroChanEnlarge(EnlargeInfo) {

    }

</script>

<script for="PreviewActiveX" event="GetSelectWndInfo(SelectWndInfo)">

    GetSelectWndInfo(SelectWndInfo);

</script>

<script for="PreviewActiveX" event="GetAllWndInfo(RealplayInfo)">

    GetAllWndInfo(RealplayInfo);

</script>

<script for="PreviewActiveX" event="PluginEventHandler(iEventType, iParam1, iParam2)">

    PluginEventHandler(iEventType, iParam1, iParam2);

</script>

<script for="PreviewActiveX" event="SetZeroChanEnlarge(EnlargeInfo)">

    SetZeroChanEnlarge(EnlargeInfo);

</script>

　　
这里要注意，一定要先调用

  m_PreviewOCX.HWP_ArrangeWindow(iWindowType);
否则预览不成功

相关文章