修改hik VideoWebPlugin插件支持iframe

1. videowebplugin

hik web視頻插件videowebplugin目前只支持配合div使用不，支持基於 iframe 方式也不支持瀏覽器頁面彈出頁面的使用方式

加載完成之後顯示如下

如果是iframe中加載一個iframe用於打開頁面，Chrome瀏覽器中點擊插件會閃爍，分析jsWebControl-1.0.0.min.js可看到插件加載順序爲獲取到play所在div位置（width和hight，沒有margin時，會按照默認計算），加載插件顯示的位，第二我理解爲加載插件前置動畫（後來查看到加載完成之後是動態img只是會一直不斷加載，像是一個流，只是通過websocket一直接受然後加載），第三步通過該用戶名和密碼加載插件顯示在設置div的位置。

插件位置對應的div

<div id="playWnd" class="playWnd" style="background-color: #515A6E">

function initPlugin () {
		oWebControl = new WebControl({
			szPluginContainer: "playWnd",
			iServicePortStart: 15900,
			iServicePortEnd: 15909,
			szClassId:"23BF3B0A-2C56-4D97-9C03-0CB103AA8F11",   // 用於IE10使用ActiveX的clsid
			cbConnectSuccess: function () {
				setCallbacks();			
				oWebControl.JS_StartService("window", {
					dllPath: "./VideoPluginConnect.dll"
				}).then(function () {
					oWebControl.JS_CreateWnd("playWnd", width, height).then(function () {
						initCamera();
					});
				}, function () {
				
				});
			},
			cbConnectError: function () {
				oWebControl = null;
				$("#weberr").html("插件未啓動，正在嘗試啓動，請稍候...");
				WebControl.JS_WakeUp("VideoWebPlugin://");
				initCount ++;
				if (initCount < 3) {
					setTimeout(initPlugin, 3000);
				} else {
					$("#weberr").html("插件啓動失敗，請檢查插件是否安裝！");
				}
			},
			cbConnectClose: function (bNormalClose) {
				// JS_Disconnect正常斷開：bNormalClose = true
				oWebControl = null;
			}
		});
	}

這個函數用於調用剛纔安裝的web插件，顯示動畫

function initCamera(){

        getPubKey(function () {
			
			appkey = appkey.replace(/(^\s*)/g, "");
			appkey = appkey.replace(/(\s*$)/g, "");
			
			secret = setEncrypt(res_secret);
			secret = secret.replace(/(^\s*)/g, "");
			secret = secret.replace(/(\s*$)/g, "");
			
			ip = ip.replace(/(^\s*)/g, "");
			ip = ip.replace(/(\s*$)/g, "");
			
			szPort = szPort.replace(/(^\s*)/g, "");
			szPort = szPort.replace(/(\s*$)/g, "");
			
			snapDir = snapDir.replace(/(^\s*)/g, "");
			snapDir = snapDir.replace(/(\s*$)/g, "");
			
			videoDir = videoDir.replace(/(^\s*)/g, "");
			videoDir = videoDir.replace(/(\s*$)/g, "");
			
			var port = parseInt(szPort);
			var showSmart = parseInt(szShowSmart);
			var showToolbar = parseInt(szShowToolbar);
			var isHttps = "1";
			var enableHttps = parseInt(isHttps);
			$(".encryptedFields").each(function (index, item) {
                var $item = $(item);
                if ($item.prop('checked')) {
                    var value = $item.val();
                    if (value !== 'secret') {
                        encryptedFields.push(value);
                    }

                    if (value == 'ip') {
                        ip = setEncrypt(ip)
                    }
                    if (value == 'appkey') {
                        appkey = setEncrypt(appkey)
                    }
                    if (value == 'snapDir') {
                        snapDir = setEncrypt(snapDir)
                    }
					if (value == 'videoDir') {
                        videoDir = setEncrypt(videoDir)
                    }
                    if (value == 'layout') {
                        layout = setEncrypt(layout)
                    }
                }
            });
            encryptedFields = encryptedFields.join(",");

            if (!appkey) {
                showCBInfo("appkey不能爲空！", 'error');
                return
            }
            if (!secret) {
                showCBInfo("secret不能爲空！", 'error');
                return
            }
            if (!ip) {
                showCBInfo("ip不能爲空！", 'error');
                return
            }
            if (!port) {
                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)) {
                showCBInfo("端口填寫有誤！", 'error');
                return
            }
            oWebControl.JS_RequestInterface({
                funcName: "init",
                argument: JSON.stringify({
                    appkey: appkey,
                    secret: secret,
                    ip: ip,
                    playMode: 0, // 預覽
                    port: port,
                    snapDir: snapDir,
					videoDir: videoDir,
                    layout: layout,
					enableHTTPS: enableHttps,
					showToolbar: showToolbar,
					showSmart: showSmart,
					buttonIDs: btIds,
                    encryptedFields: encryptedFields
                })
            }).then(function (oData) {
                showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));
                UpdatePlayTypeValue();
                UpdateSnapTypeValue();
                UpdateSetOSDTypeValue();
            });
        })
 	}

這兩個方法加載完成之後插件就正常顯示出來了，但是前邊說過，hik只支持div，所以在此處需要修改一下插件加載方式。jsWebControl-1.0.0.min.js發現initPlugin和initCamera函數分別加載了插件，但是加載的方式不同。initPlugin加載通過最外層iframe開始計算div所在位置，initCamera通過當前iframe計算div所在位置，結果就是兩個插件顯示位置不一樣，導致插件閃爍。
所以我們可以修改js函數，當然這樣最簡單，但是難度太大，很多參數完全不知道內部方法，後邊我就把i寫了一個初始化方法，用於每次初始化width和hight

function checkRise(){
	 clientHeight = window.parent.parent.document.documentElement.clientHeight;
	//當前頁面高度
	 ifrHeight = document.documentElement.clientHeight;
	//head寬度
	 //topHeight = clientHeight - ifrHeight;
	//總寬度
	 clientWidth = window.parent.parent.document.documentElement.clientWidth;
	//當前頁寬度
	 ifrtWidth = document.documentElement.clientWidth;
	//菜單寬度
	// menuwidth = clientWidth - ifrtWidth;
	 width = ifrtWidth - menuwidth - 200;
	 height = ifrHeight - 23;
}

第一次可以計算頁面寬高，然後通過瀏覽器大小計算出加載插件的位置，第二步我們就可以將插件平移過去
監聽瀏覽器大小事件和插件窗口大小改變事件‘’

監聽瀏覽器窗口改變大小事件

$(window).resize(function () {
    	checkRise();
		var newheight = clientHeight - topHeight - inittop - 5;
    	var newWidth  =clientWidth - menuwidth - 200;
    	
    	$("#playWnd").css("margin-top", Number(topHeight) + Number(inittop) -10 + "px");
		$("#playWnd").css("margin-left", Number(menuwidth) + Number(initLeft) + 1 + "px");
		$("#playWnd").css("width", newWidth + "px");
    	$("#playWnd").css("height", newheight + "px");
    	if (oWebControl != null) {
            oWebControl.JS_Resize(newWidth, newheight);
            //setWndCover();
            $("#playWnd").css("margin-top", Number(inittop) +1 + "px");
    		$("#playWnd").css("margin-left",   Number(initLeft) + 1 + "px");
            /* $("#playWnd").css("width", newWidth + "px");
        	$("#playWnd").css("height", newheight + "px"); */
        }
    });

監聽瀏覽器滾動事件

$(window).scroll(function () {
    	checkRise();
    	var newheight = clientHeight - topHeight - inittop - 5;
    	var newWidth  =clientWidth - menuwidth - 200;
    	
    	$("#playWnd").css("margin-top", Number(topHeight) + Number(inittop) + "px");
		$("#playWnd").css("margin-left", Number(menuwidth) + Number(initLeft) + 1 + "px");
		$("#playWnd").css("width", newWidth + "px");
    	$("#playWnd").css("height", newheight + "px");
    	if (oWebControl != null) {
            oWebControl.JS_Resize(newWidth, newheight);
            //setWndCover();
            $("#playWnd").css("margin-top", Number(inittop) + 15 + "px");
    		$("#playWnd").css("margin-left",   Number(initLeft) + 1 + "px");
            /* $("#playWnd").css("width", newWidth + "px");
        	$("#playWnd").css("height", newheight + "px"); 
        }
    });

後續我還補充了Windows隱藏和顯示事件等，代碼後續在下載中可自行下載。
插件和demo以及開發文檔下載