关于jQuery正确使用海康视频插件的问题

海康视频监控成为了大多可视化大屏的必须要的一个应用插件，网上多流传vue版本巨多，今天我这边整理了自己使用的一些经验来浅写一下。

在项目使用前我们需要注意两件事情，第一，海康视频使用前必须安装对应的插件

 启动完之后第二件事也是蛮关键的一件事，海康视频不是所谓的元素嵌套他只是一个应用程序，所以在拖拽这些操作下可能会略显难度。

 

 那么如何正确用jQuery书写海康插件呢，经过我的研究发现很简单。我们使用这个demo即可

 找到这两个按钮的事件把他合并到一个按钮即可，那么废话少说直接上代码

function initPlugin() {

    oWebControl = new WebControl({

        szPluginContainer: "playWnd",

        iServicePortStart: 15900,

        iServicePortEnd: 15900,

        szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11",   // 用于IE10使用ActiveX的clsid

        cbConnectSuccess: function () {

            initCount = 0;

            // setCallbacks();

            oWebControl.JS_StartService("window", {

                dllPath: "./VideoPluginConnect.dll"

            }).then(function () {

                oWebControl.JS_SetWindowControlCallback({

                    // 设置消息回调

                    cbIntegrationCallBack: cbIntegrationCallBack,

                });

                oWebControl.JS_CreateWnd("playWnd").then(function () { //这边初始化我们可以把宽高写为0

                    console.log("JS_CreateWnd success");

                    oWebControl.JS_RequestInterface({

                        funcName: "getRSAPubKey",

                        argument: JSON.stringify({

                            keyLength: 1024

                        })

                    }).then(function (oData) {

                        console.log(oData)

                        if (oData.responseMsg.data) {

                            pubKey = oData.responseMsg.data

                        }

                    });

                });

            }, function () {

            });

        },

        cbConnectError: function () {

            console.log("cbConnectError");

            oWebControl = null;

            $("#playWnd").html("插件未启动，正在尝试启动，请稍候...");

            WebControl.JS_WakeUp("VideoWebPlugin://");

            initCount++;

            if (initCount < 3) {

                setTimeout(function () {

                    initPlugin();

                }, 3000)

            } else {

                $("#playWnd").html("插件启动失败，请检查插件是否安装！");

            }

        },

        cbConnectClose: function (bNormalClose) {

            // 异常断开：bNormalClose = false

            // JS_Disconnect正常断开：bNormalClose = true

            console.log("cbConnectClose");

            oWebControl = null;

        }

    });

}

//通过按钮点击触发创建实例以及初始化

if (oWebControl == null) {  判断有无实例

                    initPlugin()

                }

 

init()

                    var params = JSON.stringify({

                        "argument": {

                            "authUuid": "",

                            "cameraIndexCode": ‘’,

                            "ezvizDirect": 0,

                            "startTimeStamp": "10237898985",

                            "endTimeStamp": "10237899985",

                            "gpuMode": 0,

                            "streamMode": 0,

                            "transMode": 1,

                            "wndId": -1,

                            "cascade": 1

                        },

                        "funcName": "startPreview"

                    })

                    requestInterface(params)

                    oWebControl.JS_ShowWnd() // 同时让实例显示

初始化这边

function init() {

    var param = JSON.stringify({

        "argument": {

            "appKey": "", //去管理中心拿去

            "ip": "",

            "port": 443,

            "secreT": "",

            "enableHTTPS": 1,

            "language": "zh_CN",

            "layout": "1x1",

            "playMode": 0,

            "reconnectDuration": 5,

            "reconnectTimes": 5,

            "showSmart": 0,

            "showToolbar": 1,

            "toolBarButtonIDs": "2048,2049,2050,2304,2306,2305,2307,2308,2309,4096,4608,4097,4099,4098,4609,4100",

            "snapDir": "D:/snap",

            "videoDir": "D:/video"

        },

        "funcName": "init"

    })

    //删除字符串中的回车换行和空格

    //param = param.replace(/(\s*)/g, "");

    //解析初始化时的playMode字段

    isJSON(param);

    var JsonParam = JSON.parse(param);

    if (!JsonParam.hasOwnProperty("argument")) {

        showCBInfo("init failed, param miss argument field");

    }

    else {

        if (JsonParam.argument.hasOwnProperty("playMode")) {

            playMode = JsonParam.argument.playMode;

        }

        //隐藏/显示轮巡功能模块

 

        //如果包含加密处理，处理加密字段

        if (JsonParam.argument.hasOwnProperty("encryptedFields")) {

            var enFields = JsonParam.argument.encryptedFields;

            var strArray = new Array();

            strArray = enFields.split(",");

            for (var i = 0, len = strArray.length; i < len; i++) {

                if ("appkey" == strArray[i]) {

                    if (JsonParam.argument.hasOwnProperty("appkey")) {

                        var appkey = JsonParam.argument.appkey;

                        appkey = setEncrypt(appkey);

                        JsonParam.argument.appkey = appkey;

                    }

                }

                if ("secret" == strArray[i]) {

                    if (JsonParam.argument.hasOwnProperty("secret")) {

                        var secret = JsonParam.argument.secret;

                        secret = setEncrypt(secret);

                        JsonParam.argument.secret = secret;

                    }

                }

                if ("ip" == strArray[i]) {

                    if (JsonParam.argument.hasOwnProperty("ip")) {

                        var ip = JsonParam.argument.ip;

                        ip = setEncrypt(ip);

                        JsonParam.argument.ip = ip;

                    }

                }

                if ("snapDir" == strArray[i]) {

                    if (JsonParam.argument.hasOwnProperty("snapDir")) {

                        var snapDir = JsonParam.argument.snapDir;

                        snapDir = setEncrypt(snapDir);

                        JsonParam.argument.snapDir = snapDir;

                    }

                }

                if ("layout" == strArray[i]) {

                    if (JsonParam.argument.hasOwnProperty("layout")) {

                        var layout = JsonParam.argument.layout;

                        layout = setEncrypt(layout);

                        JsonParam.argument.layout = layout;

                    }

                }

                if ("videoDir" == strArray[i]) {

                    if (JsonParam.argument.hasOwnProperty("videoDir")) {

                        var videoDir = JsonParam.argument.videoDir;

                        videoDir = setEncrypt(videoDir);

                        JsonParam.argument.videoDir = videoDir;

                    }

                }

            }

        }

        //1.4.1及以上版本支持argument字段为json，以下版本argument必须为string

        var JsonArgument = JsonParam.argument;

        JsonParam.argument = JSON.stringify(JsonArgument);

    }

    oWebControl.JS_RequestInterface(JsonParam).then(function (oData) {

        console.log(oData)

        // showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));

        // UpdatePlayParamValue();

        oWebControl.JS_Resize(400, 250);  //

    });;

}

那么基本操作就是这样其他demo代码照搬修改

对于海康视频所放的div的嵌套显示隐藏我这边使用的是

oWebControl.JS_HideWnd() // 隐藏

// 同时断开服务 

oWebControl.JS_Disconnect().then(function () { }, function () { });

oWebControl.JS_ShowWnd() //显示同时判断有无实例创建 切记一定要注意执行顺序！！！！！！

目前就这些，是我写项目所使用的到的，感谢借鉴和点评