海康監控WEB3.0 3.2 前端安裝記錄 win10可用

個人經驗和程式碼
1.親測win10可用
2.瀏覽器必須用低版本的，我用 Firefox51
3.64位或32位 指的是瀏覽器，不是作業系統。
4.因為是區域網使用不用考慮域名和安全的問題。
5.前端vue2.6.12 axios0.21.0 jquery2.0.0 這個版本號後臺取值沒問題 低版本或高版本的有的有問題，跳過這個坑。

我這裡有70多個攝像頭，只想顯示4路，所以改下官方的Demo就可以了

感謝海康官方給的參考資料
open.hikvision.com/download/5cda56...

WEB3.0控制元件開發包，基於ActiveX或者NPAPI外掛，提供封裝好的js介面。需要先安裝demo/codebase中WebComponentsKit.exe外掛，之後開啟demo/cn中demo.html測試。該控制元件開發包對瀏覽器版本有要求，注意事項：

1、支援的瀏覽器有：IE6IE11、Chrome8 Chrome42、Firefox3.5~ Firefox52（32位，64位是到Firefox40），需要瀏覽器支援NPAPI；

2、外掛是根據瀏覽器位數來的，比如說您64位電腦，使用的32位瀏覽器，則需要使用32位的控制元件開發包。如果出現已安裝外掛，但是仍舊提示未安裝外掛，可以將32位外掛和64位外掛都安裝一下，之後再用IE瀏覽器開啟我們demo.html測試下；

3、WEB3.0控制元件開發包，登陸使用的是HTTP埠（預設80）；

4、WEB控制元件開發包適用於裝置和PC位於同一區域網中或者裝置在公網上，且有固定IP地址。

WEB3.2無外掛版本開發包，支援高版本谷歌、火狐瀏覽器，同時需要裝置支援WebSocket取流（如下圖所示可以檢視裝置是否支援並且啟用WebSocket）。無外掛版本需要使用nginx代理伺服器，Demo測試參考開發包裡面文件《WEB無外掛版本Demo測試.pdf》。

var iRet = WebVideoCtrl.I_CheckPluginInstall();
    if (-1 == iRet) {
        alert("您還未安裝過外掛，雙擊開發包目錄裡的WebComponentsKit.exe安裝！");
        return;
    }

    var oPlugin = {
        iWidth: 750,             // plugin width
        iHeight: 550             // plugin height
    };

    var oLiveView = {
        iProtocol: 1,            // protocol 1：http, 2:https
        szIP: "192.168.1.2",    // protocol ip
        szPort: "80",            // protocol port
        szUsername: "錄影機賬號",     // device username
        szPassword: "錄影機密碼", // device password
        iStreamType: 2,          // stream 1：main stream  2：sub-stream  3：third stream  4：transcode stream
        iChannelID: 1,           // channel no
        bZeroChannel: false      // zero channel
    };    

    // 初始化外掛引數及插入外掛
    WebVideoCtrl.I_InitPlugin(oPlugin.iWidth, oPlugin.iHeight, {
        bWndFull: false,//是否支援單視窗雙擊全屏，預設支援 true:支援 false:不支援
        iWndowType: 2,//分屏 我要的是4個畫面
        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) {
                    // 開始預覽     登入成功之後 直接4次預覽不同的視窗和通道就可以了
                    var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;                    
                    setTimeout(function () {
                        WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
                            iWndIndex:0,//播放視窗
                            iStreamType: oLiveView.iStreamType,//播放碼流
                            iChannelID: 6,//播放通道號
                            bZeroChannel: oLiveView.bZeroChannel
                        });
                    }, 1000);

                    setTimeout(function () {
                        WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
                            iWndIndex:1,//播放視窗
                            iStreamType: oLiveView.iStreamType,//播放碼流
                            iChannelID: 14,//播放通道號
                            bZeroChannel: oLiveView.bZeroChannel
                        });
                    }, 1000);

                    setTimeout(function () {
                        WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
                            iWndIndex:2,//播放視窗
                            iStreamType: oLiveView.iStreamType,//播放碼流
                            iChannelID: 19,//播放通道號
                            bZeroChannel: oLiveView.bZeroChannel
                        });
                    }, 1000);

                    setTimeout(function () {
                        WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
                            iWndIndex:3,//播放視窗
                            iStreamType: oLiveView.iStreamType,//播放碼流
                            iChannelID: 16,//播放通道號
                            bZeroChannel: oLiveView.bZeroChannel
                        });
                    }, 1000);
                }
            });
        }
    });

    // 關閉瀏覽器
    $(window).unload(function () {
        WebVideoCtrl.I_Stop();        
    });

實時資料效果圖：

本作品採用《CC 協議》，轉載必須註明作者和本文連結