最近遇到客戶需要在web頁面實時查看監控視頻，故寫此文章。為記錄、也為分享，希望大家對本文的不足之處加以指正。

這裏將我用到的方法一一說明，頁面尾部附下載連接。

首先設置頁面寬高

var oPlugin = {
        iWidth: 730,
        iHeight: 400
    };

其次傳遞參數

var oLiveView = {
        iProtocol: 1, // 協議 1：http, 2:https
        szIP: "@ip", // ip
        szPort: "@port", //  port
        szUsername: "@userName", //
 
  username
        szPassword: "@password", //  password
        iStreamType: 1, // stream 1：main stream  2：sub-stream  3：third stream  4：transcode stream
        bZeroChannel: false
    };

檢查插件是否已安裝（安裝插件完成後需要重新啟動瀏覽器），未安裝則提示安裝插件。其次也要考慮插件版本問題。登錄設備開始預覽實時畫面（這裏需註意登錄設備時存在無法播放的情況，需要先行登出設備以防無法播放影響用戶體驗）。

var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
$(function () {
         //檢查插件是否已經安裝過
        var iRet = WebVideoCtrl.I_CheckPluginInstall();
        if (-1 == iRet) {
            alert("您還未安裝過插件，雙擊開發包目錄裏的WebComponents.exe安裝！");
            return;
        }
        // 初始化插件參數及插入插件
        WebVideoCtrl.I_Logout(szDeviceIdentify); //
 
登出
        WebVideoCtrl.I_InitPlugin(oPlugin.iWidth, oPlugin.iHeight, {
            bWndFull: true, //是否支持單窗口雙擊全屏，默認支持 true:支持 false:不支持
            iWndowType: 1,
            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) {
                            getChannelInfo(); //獲取通道
                            // 開始預覽
                            setTimeout(function () {
                                WebVideoCtrl.I_Stop();
                                WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
                                    iStreamType: oLiveView.iStreamType,
                                    iChannelID: oLiveView.iChannelID,
                                    bZeroChannel: oLiveView.bZeroChannel
                                });
                            }, 1000);
                        }
                    });
            }
        });

獲取模擬通道、數字通道、零通道

function getChannelInfo() {
            var channels = $("#channels").empty();
            // 模擬通道
            WebVideoCtrl.I_GetAnalogChannelInfo(szDeviceIdentify, {
                async: false,
                success: function (xmlDoc) {
                    var oChannels = $(xmlDoc).find("VideoInputChannel");

                    $.each(oChannels, function (i) {
                        var id = $(this).find("id").eq(0).text(),
                            name = $(this).find("name").eq(0).text();
                        if ("" == name) {
                            name = "Camera " + (i < 9 ? "0" + (i + 1) : (i + 1));
                        }
                        channels.append("<li><a onclick=clickStartRealPlay(‘" + id + "‘)> " + name + "</a></li>");
                    });
                    //獲取模擬通道成功;
                },
                error: function (status, xmlDoc) {
                    //獲取模擬通道失敗！
                }
            });
            // 數字通道
            WebVideoCtrl.I_GetDigitalChannelInfo(szDeviceIdentify, {
                async: false,
                success: function (xmlDoc) {
                    var oChannels = $(xmlDoc).find("InputProxyChannelStatus");

                    $.each(oChannels, function (i) {
                        var id = $(this).find("id").eq(0).text(),
                            name = $(this).find("name").eq(0).text(),
                            online = $(this).find("online").eq(0).text();
                        if ("false" == online) { // 過濾禁用的數字通道
                            return true;
                        }
                        if ("" == name) {
                            name = "IPCamera " + (i < 9 ? "0" + (i + 1) : (i + 1));
                        }
                        channels.append("<li><a onclick=clickStartRealPlay(‘" + id + "‘)> " + name + "</a></li>");
                    });
                    //獲取模擬通道成功;
                },
                error: function (status, xmlDoc) {
                    //獲取模擬通道失敗！
                }
            });
            // 零通道
            WebVideoCtrl.I_GetZeroChannelInfo(szDeviceIdentify, {
                async: false,
                success: function (xmlDoc) {
                    var oChannels = $(xmlDoc).find("ZeroVideoChannel");

                    $.each(oChannels, function (i) {
                        var id = $(this).find("id").eq(0).text(),
                            name = $(this).find("name").eq(0).text();
                        if ("" == name) {
                            name = "Zero Channel " + (i < 9 ? "0" + (i + 1) : (i + 1));
                        }
                        if ("true" == $(this).find("enabled").eq(0).text()) { // 過濾禁用的零通道
                            channels.append("<li><a onclick=clickStartRealPlay(‘" + id + "‘)> " + name + "</a></li>");
                        }
                    });
                    //獲取模擬通道成功;
                },
                error: function (status, xmlDoc) {
                    //獲取模擬通道失敗！
                }
            });
        }

以上是HTML頁面所有內容。

註意此種方式目前只支持IE瀏覽器觀看視頻。

所以瀏覽器也需設置一些內容以防止安全性較高的瀏覽器將我們的ActiveX插件自動攔截或過濾。

IE瀏覽器打開設置-->Internet選項-->安全-->點擊自定義級別-->找到ActiveX控件和插件 設置以下內容：

a)對標記為可安全執行腳本的ActiveX控件執行腳本。啟用
b)對未標記為可安全執行腳本的ActiveX控件初始化並執行腳本。提示
c)二進制和腳本行為。啟用
d)下載未簽名的ActiveX控件。提示
e)下載已簽名的ActiveX控件。提示
f)允許運行以前未使用的ActiveX控件而不提示。啟用
g)運行ActiveX控件和插件。啟用
h)設置完畢後重啟瀏覽器。

在這裏需要說明一下，安裝插件是一定要註意插件版本及操作系統的版本。

附件下載連接 提取碼：16b4

使用該文件時將codebase文件夾放至項目根目錄。

以上內容就是本次的開發過程，為記錄、也為分享。

海康威視二次開發筆記