海康web无插件开发实现4*3窗口布局

业务需求，要求实现摄像头窗口4*3的布局，可是海康提供的api只有1x1,2x2,3x3,4x4这样的平方数。

本文提供一个解决方法，来实现4*3,3*4等不规则的窗口分割布局，先上图。

思路：

找到修改布局的函数 WebVideoCtrl.I_ChangeWndNum(iType) iType是一个整数，在WebVideoCtrl.js查找该函数，找到如下代码

this.I_ChangeWndNum = function (e) {
        return isNaN(parseInt(e, 10)) ? -1 : (ct() ? p.JS_ArrangeWindow(e) : p.HWP_ArrangeWindow(e), 0)
}

其中ct()是一个判断浏览器版本，类型的函数，由于本项目在谷歌浏览器下运行，所以调用的是JS_ArrangeWindow()方法。查找该函数，发现没有，经过一番摸索，最终，在jsplugin.js中找该函数，如下，

key: "JS_ArrangeWindow", value: function e(t) {
            if (t < w[S].iMaxSplit) {
              w[S].iCurrentSplit = t
            } else {
              w[S].iCurrentSplit = w[S].iMaxSplit
            }
            if (U.oTool.isFirefox()) {
              for (var i = 0; i < w[S].iMaxSplit * w[S].iMaxSplit; i++) {
                if (w[P][i].oPlayCtrl) {
                  w[P][i].oPlayCtrl.PlayM4_ClearCanvas()
                }
              }
            }           
            q();
            w.EventCallback.windowEventSelect(0)
          }

仔细阅读，可知，传入的参数为窗口分割数，会限制在一个范围，即<=iMaxSplit，所以先找到iMaxSplit的初始设置，如图，得知iMaxSplit=4。

现在我修改为5，即最大可以进行5*5的布局（原本的含义），但是在这里我修改5的实际意义为当传入的参数为5时，表示4*3窗口布局，而非5*5。

var t = {
            szId: "playWnd",
            iMode: 0,
            iType: 1,
            iWidth: 400,
            iHeight: 300,
            iMaxSplit: 4,
            iCurrentSplit: 2,
            szBasePath: "./"
          };
          // 新增：e.iMaxSplit = 5; iCurrentSplit为5时表示4*3布局
          e.iMaxSplit = 5;
          this[S] = Object.assign(t, e);

在jsplugin.js找到如上代码，将iMaxSplit改为5。

然后回到JS_ArrangeWindow()函数，可知这个函数，做了三件事，1.修改当前布局为传入的iType，2.执行q()函数，3.添加窗口事件。

所以q()函数就显得极为重要，找到q()函数。

function q() {
        var e = g.find(".parent-wnd").eq(0).children().length;
        var t = w[S].iWidth % w[S].iCurrentSplit;
        var i = w[S].iHeight % w[S].iCurrentSplit;
        var n = (w[S].iWidth - t - w[S].iCurrentSplit * 2) / w[S].iCurrentSplit;
        var r = (w[S].iHeight - i - w[S].iCurrentSplit * 2) / w[S].iCurrentSplit;
        var o = (w[S].iWidth - t) / w[S].iCurrentSplit;
        var a = (w[S].iHeight - i) / w[S].iCurrentSplit;
        var s = w[S].iCurrentSplit;
        for (var l = 0; l < e; l++) {
          var u = n + (l % s === s - 1 ? t : 0);
          var f = r + (l + s >= Math.pow(s, 2) ? i : 0);
          var h = o + (l % s === s - 1 ? t : 0);
          var c = a + (l + s >= Math.pow(s, 2) ? i : 0);
          g.find(".parent-wnd").eq(0).children().eq(l).width(h);
          g.find(".parent-wnd").eq(0).children().eq(l).height(c);
          g.find(".parent-wnd").eq(0).children().eq(l).find(".draw-window").attr("width", u);
          g.find(".parent-wnd").eq(0).children().eq(l).find(".draw-window").attr("height", f);
          g.find(".parent-wnd").eq(0).children().eq(l).find(".play-window").attr("width", h);
          g.find(".parent-wnd").eq(0).children().eq(l).find(".play-window").attr("height", c)
        }
        g.find(".parent-wnd").eq(w[E]).find(".draw-window").css("border", "1px solid " + w[S].oStyle.border);
        g.find(".parent-wnd").eq(w[E]).children().eq(0).find(".draw-window").eq(0).css("border", "1px solid " + w[S].oStyle.borderSelect)
      }

不难知道，它的实际作用就是来绘制新的布局。

也就是说，修改q()函数，使其在传入的窗口分割数为5时（前面已经提到，为什么窗口分割为5，绘制出4*3布局），让它来绘制出4*3布局即可！对齐修改如下：

var e = g.find(".parent-wnd").eq(0).children().length;

        var iWigthSplit = w[S].iCurrentSplit;
        var iHeightSplit = w[S].iCurrentSplit;
        if (w[S].iCurrentSplit === 5) {
          iWigthSplit = 4;
          iHeightSplit = 3;
        }
        var t = w[S].iWidth % iWigthSplit;
        var i = w[S].iHeight % iHeightSplit;
        var n = (w[S].iWidth - t - iWigthSplit * 2) / iWigthSplit;
        var r = (w[S].iHeight - i - iHeightSplit * 2) / iHeightSplit;
        var o = (w[S].iWidth - t) / iWigthSplit;
        var a = (w[S].iHeight - i) / iHeightSplit;
        var s = iWigthSplit;
        for (var l = 0; l < e; l++) {
          var u = n + (l % s === s - 1 ? t : 0);
          var f = r + (l + s >= Math.pow(s, 2) ? i : 0);
          var h = o + (l % s === s - 1 ? t : 0);
          var c = a + (l + s >= Math.pow(s, 2) ? i : 0);
          g.find(".parent-wnd").eq(0).children().eq(l).width(h);
          g.find(".parent-wnd").eq(0).children().eq(l).height(c);
          g.find(".parent-wnd").eq(0).children().eq(l).find(".draw-window").attr("width", u);
          g.find(".parent-wnd").eq(0).children().eq(l).find(".draw-window").attr("height", f);
          g.find(".parent-wnd").eq(0).children().eq(l).find(".play-window").attr("width", h);
          g.find(".parent-wnd").eq(0).children().eq(l).find(".play-window").attr("height", c)
        }
        g.find(".parent-wnd").eq(w[E]).find(".draw-window").css("border", "1px solid " + w[S].oStyle.border);
        g.find(".parent-wnd").eq(w[E]).children().eq(0).find(".draw-window").eq(0).css("border", "1px solid " + w[S].oStyle.borderSelect)

如此，调用函数 WebVideoCtrl.I_ChangeWndNum(5) 窗口分割布局将修改为4*3（宽x高）。

总结：这里只是提供一种思路来实现，并且如果按照这种解决方式，实现空间是有辖制的！

由于本项目只需要展示4*3这一种不规则布局，所以按照这种思路实现最快！

在提供一种解决思路，供大家参考，

自己仿照q()写一个绘制函数，根据不同的参数，来绘制不同的布局，不过这样需要自己多进行调试，防止窗口大小改变，布局被打乱，比如说全屏后，退出全屏后，修改窗口大小后，初始化时，等等，总之要费些时间测试，需要修改的量也会大许多，不过这样可以解决绝大部分需求。