海康威视二次开发笔记

最近遇到客户需要在web页面实时查看监控视频，故写此文章。为记录、也为分享，希望大家对本文的不足之处加以指正。

这里将我用到的方法一一说明，页面尾部附下载连接。

首先设置页面宽高

var oPlugin = {
        iWidth: 730,
        iHeight: 400
    };

oPlugin

其次传递参数

var oLiveView = {
        iProtocol: 1, // 协议 1：http, 2:https
        szIP: "@ip", // ip
        szPort: "@port", //  port
        szUsername: "@userName", //  username
        szPassword: "@password", //  password
        iStreamType: 1, // stream 1：main stream  2：sub-stream  3：third stream  4：transcode stream
        bZeroChannel: false
    };

oLiveView

检查插件是否已安装（安装插件完成后需要重新启动浏览器），未安装则提示安装插件。其次也要考虑插件版本问题。登录设备开始预览实时画面（这里需注意登录设备时存在无法播放的情况，需要先行登出设备以防无法播放影响用户体验）。

var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
$(function () {
         //检查插件是否已经安装过
        var iRet = WebVideoCtrl.I_CheckPluginInstall();
        if (-1 == iRet) {
            alert("您还未安装过插件，双击开发包目录里的WebComponents.exe安装！");
            return;
        }
        // 初始化插件参数及插入插件
        WebVideoCtrl.I_Logout(szDeviceIdentify); //登出
        WebVideoCtrl.I_InitPlugin(oPlugin.iWidth, oPlugin.iHeight, {
            bWndFull: true, //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
            iWndowType: 1,
            cbInitPluginComplete: function () {
                WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");

                // 检查插件是否最新
                if (-1 == WebVideoCtrl.I_CheckPluginVersion()) {
                    alert("检测到新的插件版本，双击开发包目录里的WebComponentsKit.exe升级！");
                    return;
                }

                // 登录设备
                WebVideoCtrl.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort,
                    oLiveView.szUsername, oLiveView.szPassword, {
                        success: function (xmlDoc) {
                            getChannelInfo(); //获取通道
                            // 开始预览
                            setTimeout(function () {
                                WebVideoCtrl.I_Stop();
                                WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
                                    iStreamType: oLiveView.iStreamType,
                                    iChannelID: oLiveView.iChannelID,
                                    bZeroChannel: oLiveView.bZeroChannel
                                });
                            }, 1000);
                        }
                    });
            }
        });

View Code

获取模拟通道、数字通道、零通道

function getChannelInfo() {
            var channels = $("#channels").empty();
            // 模拟通道
            WebVideoCtrl.I_GetAnalogChannelInfo(szDeviceIdentify, {
                async: false,
                success: function (xmlDoc) {
                    var oChannels = $(xmlDoc).find("VideoInputChannel");

                    $.each(oChannels, function (i) {
                        var id = $(this).find("id").eq(0).text(),
                            name = $(this).find("name").eq(0).text();
                        if ("" == name) {
                            name = "Camera " + (i < 9 ? "0" + (i + 1) : (i + 1));
                        }
                        channels.append("<li><a onclick=clickStartRealPlay('" + id + "')> " + name + "</a></li>");
                    });
                    //获取模拟通道成功;
                },
                error: function (status, xmlDoc) {
                    //获取模拟通道失败！
                }
            });
            // 数字通道
            WebVideoCtrl.I_GetDigitalChannelInfo(szDeviceIdentify, {
                async: false,
                success: function (xmlDoc) {
                    var oChannels = $(xmlDoc).find("InputProxyChannelStatus");

                    $.each(oChannels, function (i) {
                        var id = $(this).find("id").eq(0).text(),
                            name = $(this).find("name").eq(0).text(),
                            online = $(this).find("online").eq(0).text();
                        if ("false" == online) { // 过滤禁用的数字通道
                            return true;
                        }
                        if ("" == name) {
                            name = "IPCamera " + (i < 9 ? "0" + (i + 1) : (i + 1));
                        }
                        channels.append("<li><a onclick=clickStartRealPlay('" + id + "')> " + name + "</a></li>");
                    });
                    //获取模拟通道成功;
                },
                error: function (status, xmlDoc) {
                    //获取模拟通道失败！
                }
            });
            // 零通道
            WebVideoCtrl.I_GetZeroChannelInfo(szDeviceIdentify, {
                async: false,
                success: function (xmlDoc) {
                    var oChannels = $(xmlDoc).find("ZeroVideoChannel");

                    $.each(oChannels, function (i) {
                        var id = $(this).find("id").eq(0).text(),
                            name = $(this).find("name").eq(0).text();
                        if ("" == name) {
                            name = "Zero Channel " + (i < 9 ? "0" + (i + 1) : (i + 1));
                        }
                        if ("true" == $(this).find("enabled").eq(0).text()) { // 过滤禁用的零通道
                            channels.append("<li><a onclick=clickStartRealPlay('" + id + "')> " + name + "</a></li>");
                        }
                    });
                    //获取模拟通道成功;
                },
                error: function (status, xmlDoc) {
                    //获取模拟通道失败！
                }
            });
        }

getChannelInfo

以上是HTML页面所有内容。

注意此种方式目前只支持IE浏览器观看视频。

所以浏览器也需设置一些内容以防止安全性较高的浏览器将我们的ActiveX插件自动拦截或过滤。

IE浏览器打开设置-->Internet选项-->安全-->点击自定义级别-->找到ActiveX控件和插件设置以下内容：

扫描二维码关注公众号，回复： 4927699 查看本文章

a)对标记为可安全执行脚本的ActiveX控件执行脚本。启用
b)对未标记为可安全执行脚本的ActiveX控件初始化并执行脚本。提示
c)二进制和脚本行为。启用
d)下载未签名的ActiveX控件。提示
e)下载已签名的ActiveX控件。提示
f)允许运行以前未使用的ActiveX控件而不提示。启用
g)运行ActiveX控件和插件。启用
h)设置完毕后重启浏览器。

在这里需要说明一下，安装插件是一定要注意插件版本及操作系统的版本。

附件下载连接提取码：16b4

使用该文件时将codebase文件夹放至项目根目录。

以上内容就是本次的开发过程，为记录、也为分享。

海康威视二次开发笔记

猜你喜欢