海康web3.2无插件开发指北

准备工作

查看硬盘录像机是否支持无插件开发

进入硬盘录像机后台配置界面，在网络-高级配置界面查看是否有网络服务这一栏，如果没有，则不支持无插件开发。
如果有这一栏，请确保启用websocket这一栏是选中的。

websocket端口

硬盘录像机websocket端口号为7681，请确保该端口号能够访问。

开始开发

demo演示

根据海康官网上的demo进行相关配置，填入ip、端口号、用户名、密码。这个端口号是访问硬盘录像机后台的端口号，并不是摄像头的通道号，笔者前期在这块踩了坑。
信息确认无误的情况下，点击登录，选择摄像头进行预览，左上角会显示摄像头实时画面。

插件初始化

在引入相应JS后，需要初始化。

	// 初始化插件参数及插入插件
    WebVideoCtrl.I_InitPlugin('100%', '100%', {
   
        bWndFull: true,     //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
        iPackageType: 2,
        iWndowType: 2,
        bNoPlugin: true,
        cbSelWnd: function (xmlDoc) {
   
            g_iWndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);
            var szInfo = "当前选择的窗口编号：" + g_iWndIndex;
            console.log(szInfo);
        },
        cbDoubleClickWnd: function (iWndIndex, bFullScreen) {
   
            var szInfo = "当前放大的窗口编号：" + iWndIndex;
            if (!bFullScreen) {
   
                szInfo = "当前还原的窗口编号：" + iWndIndex;
            }
            console.log(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);
            }
        },
        cbRemoteConfig: function () {
   
            console.log("关闭远程配置库！");
        },
        cbInitPluginComplete: function () {
   
            WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
            $("#divPlugin canvas").dblclick(function() {
   
                WebVideoCtrl.I_FullScreen(true);
            })
        }
    });

在初始化完成之后会调用cbInitPluginComplete这个方法，需要在这个方法选择DOM元素嵌入播放插件，笔者这里是在id为divPlugin的DOM元素嵌入播放插件。

进行登录和预览

插件初始化完毕后进行登录，填入对应的参数即可。

登录完毕才可以进行预览。

HTTPS服务进行预览

海康提供的demo上使用http请求来访问硬盘录像机的。如果是https服务的话，虽然文档上面的登录接口给的参数中包含协议类型，选择了https协议也只是能登录成功，无法进行预览。
在询问海康的客服后，客服说不支持https协议。但是在经过排查后发现是因为websocket连接用的是wss协议，但是硬盘录像机没有域名和可信的SSL证书，初步怀疑是这个原因导致wss连接不上。由于条件有限，不大可能给每个硬盘录像机都配上域名和SSL证书，所以只能另辟蹊径，想让JS发起的websocket请求发给自己，然后由nginx来进行转发。
在查看JS代码后，发现了生成wss连接地址的地方，接下来进行改写，将地址指向自己。

修改 webVideoCtrl.js

原webVideoCtrl.js方法：

yt.prototype.startRealPlay = function (e, t) {
   
    var n = 100 * t.iChannelID + t.iStreamType, r = "", i = -1, o = e.szIP;
    if ("rtsp://" === t.urlProtocol && (o = U(o)), t.bZeroChannel ? (lt() && (n = 0), r = X(t.cgi.zeroChannels, t.urlProtocol, o, t.iPort, n)) : r = X(t.cgi.channels, t.urlProtocol, o, t.iPort, n), d.proxyAddress && lt()) {
   
        S.cookie("webVideoCtrlProxy", o + ":" + t.iPort, {