刚入职新公司，接手的第一个项目中就有之前没有做过的视频监控的问题，内心是有点期待也有些无奈的，毕竟要给领导留个好印象却又害怕做不好。

根据同事的介绍得知这个视频插件用的是海康威视的插件，下面就跟大家说一下海康威视插件的用法：

<script src="jquery-1.12.4.min.js"></script>
<script src="jsencrypt.min.js"></script>
<script src="jsWebControl-1.0.0.min.js"></script>

html部分：
<div id="playWnd" class="playWnd"></div>
    <div id="operate" class="operate">
        <div class="module">
            <div class="item"><span class="label">appkey:</span><input id="appkey" type="text"></div>
            <div class="item"><span class="label">secret:</span><input id="secret" type="text"></div>
            <div class="item"><span class="label">API网关IP地址:</span><input id="ip" type="text"></div>
			<div class="item">
				<span class="label">是否启用HTTPS协议</span>
				<select id="isHttps" onchange="UpdateValue()" value="不启用">
					<option value="0" selected>不启用</option>
                    <option value="1">启用</option>
				</select>
			</div>
            <div class="item"><span class="label">API网关端口:</span><input id="port" value="80" type="text"></div>
            <div class="item"><span class="label">抓图存储路径:</span><input id="snapDir" type="text" value="D:\SnapDir"></div>
            <div class="item">
                <span class="label">初始化布局:</span>
                <select id="layout" value="2x2">
                    <option value="1x1">1x1</option>
                    <option value="2x2" selected>2x2</option>
                    <option value="3x3">3x3</option>
                    <option value="4x4">4x4</option>
                </select>
            </div>
            <div class="item">
                <span class="label">加密字段:</span>
                <div style="display: inline-block; vertical-align: top;">
                    <label><input type="checkbox" value="secret" disabled checked>secret</label><br>
                    <label><input class="encryptedFields" type="checkbox" value="appkey">appkey</label><br>
                    <label><input class="encryptedFields" type="checkbox" value="ip">ip</label><br>
                    <label><input class="encryptedFields" type="checkbox" value="snapDir">抓图路径</label><br>
                    <label><input class="encryptedFields" type="checkbox" value="layout">布局</label>
                </div>
            </div>
            <div class="item"><button id="init" class="btn">初始化</button></div>
        </div>
        <div class="module">
            <div class="item"><span class="label">监控点编号：</span><input id="cameraIndexCode" type="text"></div>
            <div class="item">
                <span class="label">主子码流标识：</span>
                <select id="streamMode" value="0">
                    <option value="0">主码流</option>
                    <option value="1">子码流</option>
                </select>
            </div>
            <div class="item">
                <span class="label">传输协议：</span>
                <select id="transMode" value="1">
                    <option value="1">TCP</option>
                    <option value="0">UDP</option>
                </select>
            </div>
            <div class="item">
                <span class="label">是否启用GPU硬解：</span>
                <select id="gpuMode" value="0">
                    <option value="0">不启用</option>
                    <option value="1">启用</option>
                </select>
            </div>
            <div class="item"><button id="startPreview" class="btn">预览</button></div>
            <div class="item"><button id="stopAllPreview" class="btn">停止全部预览</button></div>
            <div class="item"><button id="uninit" class="btn">反初始化</button></div>
        </div>
        <fieldset class="cbInfoDiv">
            <legend>返回值信息</legend>
            <div id="cbInfo" class="cbInfo"></div>
            <button id="clear">清空</button>
        </fieldset>
    </div>
js部分：    
    var oWebControl = null;// 插件对象
    var bIE = (!!window.ActiveXObject || 'ActiveXObject' in window);// 是否为IE浏览器
    var pubKey = '';

    var iLastCoverLeft = 0;
    var iLastCoverTop = 0;
    var iLastCoverRight = 0;
    var iLastCoverBottom = 0;
	var initCount = 0;

    console.log('1')
    // 标签关闭
    $(window).unload(function () {
        if (oWebControl != null){
                oWebControl.JS_Disconnect().then(function(){}, function() {});
            }
    });

    // 窗口resize
    $(window).resize(function () {
        if (oWebControl != null) {
            oWebControl.JS_Resize(600, 400);
            setWndCover();
        }
    });

    // 滚动条scroll
    $(window).scroll(function () {
        if (oWebControl != null) {
            oWebControl.JS_Resize(600, 400);
            setWndCover();
        }
    });

    // 设置窗口遮挡
    function setWndCover() {
        console.log('设置窗口遮挡')
        var iWidth = $(window).width();
        var iHeight = $(window).height();
        var oDivRect = $("#playWnd").get(0).getBoundingClientRect();

        var iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left): 0;
        var iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top): 0;
        var iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0;
        var iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0;

        iCoverLeft = (iCoverLeft > 600) ? 600 : iCoverLeft;
        iCoverTop = (iCoverTop > 400) ? 400 : iCoverTop;
        iCoverRight = (iCoverRight > 600) ? 600 : iCoverRight;
        iCoverBottom = (iCoverBottom > 400) ? 400 : iCoverBottom;

        if (iLastCoverLeft != iCoverLeft) {
            console.log("iCoverLeft: " + iCoverLeft);
            iLastCoverLeft = iCoverLeft;
            oWebControl.JS_SetWndCover("left", iCoverLeft);
        }
        if (iLastCoverTop != iCoverTop) {
            console.log("iCoverTop: " + iCoverTop);
            iLastCoverTop = iCoverTop;
            oWebControl.JS_SetWndCover("top", iCoverTop);
        }
        if (iLastCoverRight != iCoverRight) {
            console.log("iCoverRight: " + iCoverRight);
            iLastCoverRight = iCoverRight;
            oWebControl.JS_SetWndCover("right", iCoverRight);
        }
        if (iLastCoverBottom != iCoverBottom) {
            console.log("iCoverBottom: " + iCoverBottom);
            iLastCoverBottom = iCoverBottom;
            oWebControl.JS_SetWndCover("bottom", iCoverBottom);
        }
    }
	
	function UpdateValue()
	{
		var sel = document.getElementById("isHttps");
		var selectedId = sel.selectedIndex;
		var v = sel.options[selectedId].value;
		if (0 == v)
		{
			document.getElementById("port").value = 80;
		}
		else
		{
			document.getElementById("port").value = 443;
		}						
	}
	
    // 初始化插件
	function initPlugin () {
        console.log('初始化插件')
		$("#init").attr('disabled', false);
		$("#startPreview").attr('disabled', false);
	    $("#stopAllPreview").attr('disabled', false);
	    $("#uninit").attr('disabled', false);
		oWebControl = new WebControl({
			szPluginContainer: "playWnd",
			iServicePortStart: 15900,
			iServicePortEnd: 15909,
			cbConnectSuccess: function () {
				setCallbacks();
                console.log('初始化插件setCallbacks')

				oWebControl.JS_StartService("window", {
					dllPath: "./VideoPluginConnect.dll"
					//dllPath: "./DllForTest-Win32.dll"
				}).then(function () {
					oWebControl.JS_CreateWnd("playWnd", 600, 400).then(function () {
                        // console.log('初始化插件setCallbacks')
						console.log("JS_CreateWnd success");
						$("#init").attr('disabled', false);
						$("#startPreview").attr('disabled', false);
						$("#stopAllPreview").attr('disabled', false);
						$("#uninit").attr('disabled', false);
					});
				}, 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 () {
				console.log("cbConnectClose");
				oWebControl = null;
			}
		});
	}
	
	initPlugin();

  
    

    // 获取公钥
    function getPubKey (callback) {
        oWebControl.JS_RequestInterface({
            funcName: "getRSAPubKey",
            argument: JSON.stringify({
                keyLength: 1024
            })
        }).then(function (oData) {
            console.log(oData)
            if (oData.responseMsg.data) {
                pubKey = oData.responseMsg.data
                callback()
            }
        })
    }

    // 设置窗口控制回调
    function setCallbacks() {
        oWebControl.JS_SetWindowControlCallback({
            cbIntegrationCallBack: cbIntegrationCallBack
        });
    }

    // 推送消息
    function cbIntegrationCallBack(oData) {
        showCBInfo(JSON.stringify(oData.responseMsg));
    }

    // RSA加密
    function setEncrypt (value) {
        var encrypt = new JSEncrypt();
        encrypt.setPublicKey(pubKey);
        return encrypt.encrypt(value);
    }

    // 初始化
    $("#init").click(function () {
        getPubKey(function () {
            console.log('初始化')
            var appkey = $("#appkey").val();
            var secret = setEncrypt($("#secret").val());
            var ip = $("#ip").val();
            var port = parseInt($("#port").val());
            var snapDir = $("#snapDir").val();
            var layout = $("#layout").val();
            var encryptedFields = ['secret'];
			var enableHttps = parseInt($("#isHttps").val());
            $(".encryptedFields").each(function (index, item) {
                var $item = $(item);
                if ($item.prop('checked')) {
                    var value = $item.val();
                    if (value !== 'secret') {
                        encryptedFields.push(value);
                    }
                    
                    // secret固定加密，其它根据用户勾选加密
                    if (value == 'ip') {
                        ip = setEncrypt(ip)
                    }
                    if (value == 'appkey') {
                        appkey = setEncrypt(appkey)
                    }
                    if (value == 'snapDir') {
                        snapDir = setEncrypt(snapDir)
                    }
                    if (value == 'layout') {
                        layout = setEncrypt(layout)
                    }
                }
            })
            encryptedFields = encryptedFields.join(",");

            if (!appkey) {
                showCBInfo("appkey不能为空！", 'error');
                return
            }
            if (!$("#secret").val()) {
                showCBInfo("secret不能为空！", 'error');
                return
            }
            if (!ip) {
                showCBInfo("ip不能为空！", 'error');
                return
            }
            if (!$("#port").val()) {
                showCBInfo("端口不能为空！", 'error');
                return
            } else if (!/^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-5])$/.test($("#port").val())) {
                showCBInfo("端口填写有误！", 'error');
                return
            }
            console.log({
                appkey: appkey,
                secret: secret,
                ip: ip,
                playMode: 0, // 预览
                port: port,
                snapDir: snapDir,
                layout: layout,
				enableHTTPS: enableHttps,
                encryptedFields: encryptedFields
            })

            oWebControl.JS_RequestInterface({
                funcName: "init",
                argument: JSON.stringify({
                    appkey: appkey,
                    secret: secret,
                    ip: ip,
                    playMode: 0, // 预览
                    port: port,
                    snapDir: snapDir,
                    layout: layout,
					enableHTTPS: enableHttps,
                    encryptedFields: encryptedFields
                })
            }).then(function (oData) {
                showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));
            });
        })
    });

    // 视频预览
	$("#startPreview").click(function () {
        var cameraIndexCode  = $("#cameraIndexCode ").val();
        var streamMode = +$("#streamMode").val();
        var transMode = +$("#transMode").val();
        var gpuMode = +$("#gpuMode").val();

        if (!cameraIndexCode ) {
            showCBInfo("监控点编号不能为空！", 'error');
            return
        }

        oWebControl.JS_RequestInterface({
            funcName: "startPreview",
            argument: JSON.stringify({
                cameraIndexCode : cameraIndexCode ,
                streamMode: streamMode,
                transMode: transMode,
                gpuMode: gpuMode
            })
        }).then(function (oData) {
            showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));
        });
    });

    // 停止预览
    $("#stopAllPreview").click(function () {
        oWebControl.JS_RequestInterface({
            funcName: "stopAllPreview"
        }).then(function (oData) {
            showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));
        });
    })

    // 反初始化
    function uninit (cbFunc) {
        oWebControl.JS_RequestInterface({
            funcName: "uninit"
        }).then(function (oData) {
            showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));

            cbFunc && cbFunc();
        });
    }
    $("#uninit").click(uninit)


    // 显示回调信息
    function showCBInfo(szInfo, type) {
        if (type === 'error') {
            szInfo = "<div style='color: red;'>" + dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") + " " + szInfo + "</div>";
        } else {
            szInfo = "<div>" + dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") + " " + szInfo + "</div>";
        }
        $("#cbInfo").html(szInfo + $("#cbInfo").html());
    }

    $("#clear").click(function() {
        $("#cbInfo").html('');
    })

    // 格式化时间
    function dateFormat(oDate, fmt) {
        var o = {
            "M+": oDate.getMonth() + 1, //月份
            "d+": oDate.getDate(), //日
            "h+": oDate.getHours(), //小时
            "m+": oDate.getMinutes(), //分
            "s+": oDate.getSeconds(), //秒
            "q+": Math.floor((oDate.getMonth() + 3) / 3), //季度
            "S": oDate.getMilliseconds()//毫秒
        };
        if (/(y+)/.test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (oDate.getFullYear() + "").substr(4 - RegExp.$1.length));
        }
        for (var k in o) {
            if (new RegExp("(" + k + ")").test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            }
        }
        return fmt;
    }

以上是最原始的demo.html，有兴趣的朋友可以看一下。当然需要提前和你们公司的同事获取一些参数值

好了，完事。

可以从下面的链接中下载插件中的js文件

https://github.com/triumphic/-