准备工作

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

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

websocket端口

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

开始开发

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中进行预览相关代码
jsPlugin-1.2.0.min.js中进行预览相关代码
改写完毕后，在对nginx进行配置。

	location ^~ /webSocketVideoCtrlProxy {
	    #web socket
	    proxy_http_version 1.1;
	    proxy_set_header Upgrade $http_upgrade;
	    proxy_set_header Connection "upgrade";
	    proxy_set_header Host $host;
		proxy_pass http://$arg_orgIP:$arg_orgWSPort/$arg_Channel?$args;
	}