一套搞定 海康web3.3对接流程

1.环境准备

1.1官网下载开发包

官网链接：海康开放平台

1.2 引入开发包中的三个资源：

 webVideoCtrl.js                           jsVideoPlugin-1.0.0.min.js                  jquery-1.7.1.min.js

1.3 启动视频播放控件

     HCWebSDKPlugin.exe

2.代码实现

// 引入js---
<script th:src="@{/js/jquery-1.7.1.min.js}"></script>
<script th:src="@{/js/webVideoCtrl.js}"></script>





let ip = ''     //硬盘录像机ip
let port = '80'            //默认为80端口
let username = 'admin'         //账号：
let password = ''       // 密码
let iRtspPort = ''



// 1.初始化插件参数及插入插件
WebVideoCtrl.I_InitPlugin({
    bWndFull: true, //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
    iWndowType: 3,
    bDebugMode: true,
    cbSelWnd: function (xmlDoc) {
        g_iWndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);
        const szInfo = "当前选择的窗口编号：" + g_iWndIndex;
        console.log(szInfo, "szInfo");
    },
    cbDoubleClickWnd: function (iWndIndex, bFullScreen) {
        let szInfo = "当前放大的窗口编号：" + iWndIndex;
        if (!bFullScreen) {
            szInfo = "当前还原的窗口编号：" + iWndIndex;
        }
        console.log(szInfo, "szInfo");
    },
    cbEvent: function (iEventType, iParam1, iParam2) {
        if (2 == iEventType) {
            // 回放正常结束
            console.log("窗口" + iParam1 + "回放结束！");
        } else if (-1 == iEventType) {
            console.log("设备" + iParam1 + "网络错误！");
        } else if (3001 == iEventType) {
            clickStopRecord(g_szRecordType, iParam1);
        }
    },
    //2.登录摄像头
    cbInitPluginComplete: function () {
        const oLiveView = {
            iProtocol: 1, // protocol 1：http, 2:https
            szIP: ip, // protocol ip
            szPort: port, // protocol port
            szUsername: username, // device username
            szPassword: password, // device password
            iStreamType: 1, // stream 1：main stream  2：sub-stream  3：third stream  4：transcode stream
            iChannelID: 1, // channel no
            bZeroChannel: false, // zero channel
        };
        WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin").then(
            () => {
                WebVideoCtrl.I_Login(
                    oLiveView.szIP,
                    oLiveView.iProtocol,
                    oLiveView.szPort,
                    oLiveView.szUsername,
                    oLiveView.szPassword,
                    {
                        timeout: 3000,
                        async: false,
                        success: function (xmlDoc) {
                            console.log(" 登录成功！");
                            let a = ip
                            setTimeout(function () {
                               //延迟方法
                                setTimeout(function () {
                                    //调用预览摄像头这里可以循环创建
                                    clickStartRealPlay(a, 1, 0, 1);
                                    clickStartRealPlay(a, 1, 1, 2);
                                    clickStartRealPlay(a, 1, 2, 3);
                                    clickStartRealPlay(a, 1, 3, 4);
                                    clickStartRealPlay(a, 1, 4, 5);
                                    clickStartRealPlay(a, 1, 5, 6);
                                    clickStartRealPlay(a, 1, 6, 7);
                                    clickStartRealPlay(a, 1, 7, 8);
                                }, 1000);


                                setTimeout(function () {
                                        // 获取通道 (如果多个摄像头需要获取多个通道需要调用)
                                        getChannelInfo(a);
                                           //获取端口 （在这里获取RTSP 端口号 预览时传入）
                                        getDevicePort(a);
                                    }
                                    , 10)

                            }, 10);
                        },
                        error: function (oError) {
                            console.log(" 登录失败！", oError);
                        },
                    }
                );
                // 检查插件是否最新
                WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {
                    if (bFlag) {
                        alert(
                            "检测到新的插件版本，双击开发包目录里的HCWebSDKPlugin.exe升级！"
                        );

                    }
                });
            },
            () => {
                alert(
                    "插件初始化失败，请确认是否已安装插件；如果未安装，请双击开发包目录里的HCWebSDKPlugin.exe安装！"
                );

            }
        );
    },
});




// 3.获取通道
function getChannelInfo(a) {
    var szDeviceIdentify = a,
        oSel = null;   //通道列表
    if (null == szDeviceIdentify) {
        return;
    }

    // 模拟通道 有
    WebVideoCtrl.I_GetAnalogChannelInfo(szDeviceIdentify, {
        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));
                }

                console.log(id + "通道id是")
                console.log(name + "通道name是")
            });
            console.log(szDeviceIdentify + " 获取模拟通道成功！");
        },
        error: function (oError) {
            console.log(szDeviceIdentify + " 获取模拟通道失败！", oError.errorCode, oError.errorMsg);
        }
    });
    // 数字通道
    WebVideoCtrl.I_GetDigitalChannelInfo(szDeviceIdentify, {
        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));
                }
                console.log(id + "数字通道获取的id是")
                console.log(name + "数字通道获取的通道name是")
            });
            console.log(szDeviceIdentify + " 获取数字通道成功！");
        },
        error: function (oError) {
            console.log(szDeviceIdentify + " 获取数字通道失败！", oError.errorCode, oError.errorMsg);
        }
    });
    // 零通道
    WebVideoCtrl.I_GetZeroChannelInfo(szDeviceIdentify, {
        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()) {// 过滤禁用的零通道
                    console.log(id + "零通道获取的id是")
                    console.log(name + "零通道获取的通道name是")
                }
                console.log(id + "零通道获取的id是")
                console.log(name + "零通道获取的通道name是")
            });
            console.log(szDeviceIdentify + " 获取零通道成功！");
        },
        error: function (oError) {
            console.log(szDeviceIdentify + " 获取零通道失败！", oError.errorCode, oError.errorMsg);
        }
    });
}

//4.获取端口
function getDevicePort(a) {
    var szDeviceIdentify = a;

    if (null == szDeviceIdentify) {
        return;
    }

    WebVideoCtrl.I_GetDevicePort(szDeviceIdentify).then((oPort) => {
        console.log(oPort.iDevicePort + "iDevicePort的值是")
        console.log(oPort.iRtspPort + "iRtspPort的值是")
        console.log(szDeviceIdentify + " 获取端口成功！");
        iRtspPort = oPort.iRtspPort
    }, (oError) => {
        var szInfo = "获取端口失败！";
        console.log(szDeviceIdentify + szInfo, oError.errorCode, oError.errorMsg);
    });
}

// 5.开始预览
function clickStartRealPlay(szIP, iStreamType, iWndIndex, iChannelID) {
    console.log(szIP + "szip")
    console.log(iStreamType + "iStreamType")
    console.log(iWndIndex + "iWndIndex")
    console.log(iChannelID + "iChannelID")
    console.log(iRtspPort + "在预览方法中ip的值是")
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
        szDeviceIdentify = szIP + "_80",    //ip
        iChannelID = iChannelID,
        bZeroChannel = false,
        iPort = iRtspPort
        szInfo = "";
     iStreamType = iStreamType;
    if (null == szDeviceIdentify) {
        return null;
    }
    var startRealPlay = function () {
        WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
            iStreamType: iStreamType,      
            iChannelID: iChannelID,
            bZeroChannel: bZeroChannel,
            iWndIndex: iWndIndex,    //要播放的窗口
            iPort: iPort,            //如果多个摄像头需要必填 （RTSP 端口号）
            success: function () {
                szInfo = "开始预览窗口" + iWndIndex + "成功！";
                console.log(szDeviceIdentify + " " + szInfo);
            },
            error: function (oError) {
                console.log(szDeviceIdentify + " 开始预览窗口" + iWndIndex + "失败！", oError.errorCode, oError.errorMsg);
            }
        });
    };

    if (oWndInfo != null) {// 已经在播放了，先停止
        WebVideoCtrl.I_Stop({
            success: function () {
                startRealPlay();
            }
        });
    } else {
        startRealPlay();
    }
}