WEB端项目中接入海康监控视频播放监控画面

2023-10-19 10:19| 来源: 网络整理| 查看: 265

需求：以树形结构展示组织以及组织下的摄像头列表，点击单个摄像头进行预览效果图：

在这里插入图片描述

该博客基于海康开放平台API开发准备工作 1. APPkey、APPsecret、服务器ip地址、端口号 2. [OpenAPI 安全认证库（JAVA） V1.1.3](https://open.hikvision.com/download/5c67f20bb254d61550c2f63e?type=10) 3. [视频web插件 V1.4.1](https://open.hikvision.com/download/5c67f20bb254d61550c2f63e?type=10) 流程 API文档里可以通过APPkey和APPsecret获取区域信息列表然后通过区域信息的indexCode获取监控资源信息通过监控资源信息的cameraIndexCode来预览监控画面（web端可以根据cameraIndexCode来直接预览画面，但是其他端需要通过cameraIndexCode来获取播放地址）后端代码获取区域信息

（获取区域信息和获取监控资源信息可以合并到一起，两个分页对象也可以使用一个，我在开发时没有优化，大家使用时可以再优化一下；后端代码可直接复制使用）

public class ResourceRegions { static { ArtemisConfig.host = "服务器IP地址:端口号"; ArtemisConfig.appKey = "AppKey"; ArtemisConfig.appSecret = "AppSecret"; } private static final String ARTEMIS_PATH = "/artemis"; //能力开放平台的网站路径无需修改 public static String regions(RegionsRequest regionsRequest ){ //RegionsRequest是一个人分页实体对象 String regionsDataApi = ARTEMIS_PATH +"/api/resource/v1/regions"; Map path = new HashMap(2){ { put("https://",regionsDataApi); //这里根据实际情况是http还是https } }; String body=JSON.toJSONString(regionsRequest); String result =ArtemisHttpUtil.doPostStringArtemis(path,body,null,null,"application/json"); return result; } } 根据区域信息获取下级监控资源信息 public class RegionIndexCodeCameras { static { ArtemisConfig.host = "服务器IP地址:端口号"; ArtemisConfig.appKey = "AppKey"; ArtemisConfig.appSecret = "AppSecret"; } private static final String ARTEMIS_PATH = "/artemis"; //能力开放平台的网站路径无需修改 public static String cameras(CamerasRequest camerasRequest ){//CamerasRequest是一个人分页实体对象 String camerasDataApi = ARTEMIS_PATH +"/api/resource/v1/regions/regionIndexCode/cameras"; Map path = new HashMap(2){ { put("https://",camerasDataApi);//这里根据实际情况是http还是https } }; String body=JSON.toJSONString(camerasRequest); String result =ArtemisHttpUtil.doPostStringArtemis(path,body,null,null,"application/json"); return result; } } 两个分页对象 /** * 分页获取区域信息 */ public class RegionsRequest { private Integer pageNo; private Integer pageSize; private String treeCode; } /** * 根据区域编号获取下级监控点列表 */ public class CamerasRequest { private Integer pageNo; private Integer pageSize; private String regionIndexCode; //区域信息的indexCode private String treeCode; } Service层 @Override public DefaultReturn search(Map map) throws Exception { DefaultReturn ru = this.getReturn(map);//统一返回对象 //1.获取区域列表 /分页获取区域信息/ RegionsRequest regions=new RegionsRequest(); regions.setPageNo(1); regions.setPageSize(25); regions.setTreeCode("0"); String regionsResult = ResourceRegions.regions(regions); /处理区域的JSON数据(目的是为了前端好展示)可以再优化/ JSONObject regionsResultJson = JSON.parseObject(regionsResult); String data = regionsResultJson.get("data").toString(); JSONObject dataJson = JSON.parseObject(data); String listString = dataJson.get("list").toString(); /这里单纯为了展示树结构做了替换/ String replaceAll = listString.replaceAll("indexCode","id"); String replaceAll2 = replaceAll.replaceAll("parentIndexCode", "pId"); /处理完区域的JSON数据后的数据,存放的是区域信息的list/ JSONArray list = JSON.parseArray(replaceAll2); //2.根据区域编号获取下级监控点列表 List ret = new ArrayList();//ret存放所有摄像头的cameraIndexCode CamerasRequest request=new CamerasRequest(); request.setPageNo(1); request.setPageSize(8); request.setTreeCode("0"); String result=""; int a=list.size(); /** 外层循环设置分页对象的RegionIndexCode为区域的indexCode,然后查询该区域下的摄像头信息 */ for(int i=1;i JSONObject jsonObject2 = new JSONObject(); String object2 = parseArray.get(j).toString(); JSONObject parseObject = JSON.parseObject(object2); String cameraIndexCode = parseObject.get("cameraIndexCode").toString(); String name = parseObject.get("name").toString(); jsonObject2.put("name", name); jsonObject2.put("id", cameraIndexCode); jsonObject2.put("pId", id); list.fluentAdd(jsonObject2); } } ru.setList1(ret); ru.setList3(list); return returnNormal(ru, true); } 前端

(由于我前端框架是公司自己封装的不适用大家，就贴出官方给的demo吧)

preview_demo html, body { padding: 0; margin: 0; } .playWnd { margin: 30px 0 0 400px; width: 1000px; /*播放容器的宽和高设定*/ height: 600px; border: 1px solid red; } .operate { margin-top: 24px; } .operate::after { content: ''; display: block; clear: both; } .module { float: left; width: 340px; /*min-height: 320px;*/ margin-left: 16px; padding: 16px 8px; box-sizing: border-box; border: 1px solid #e5e5e5; } .module .item { margin-bottom: 4px; } .module input[type="text"] { box-sizing: border-box; display: inline-block; vertical-align: middle; margin-left: 0; width: 150px; min-height: 20px; } .module .btn { min-width: 80px; min-height: 24px; margin-top: 100px; margin-left: 80px; } 监控点编号： ;;;;;;;;; 预览 ;;;;;;;;; 停止全部预览 //页面加载时创建播放实例初始化 $(window).load(function () { initPlugin(); }); //声明公用变量 var initCount = 0; var pubKey = ''; // 创建播放实例 function initPlugin () { oWebControl = new WebControl({ szPluginContainer: "playWnd", // 指定容器id iServicePortStart: 15900, // 指定起止端口号，建议使用该值 iServicePortEnd: 15909, szClassId:"23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid cbConnectSuccess: function () { // 创建WebControl实例成功 oWebControl.JS_StartService("window", { // WebControl实例创建成功后需要启动服务 dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"写死 }).then(function () { // 启动插件服务成功 oWebControl.JS_SetWindowControlCallback({ // 设置消息回调 cbIntegrationCallBack: cbIntegrationCallBack }); oWebControl.JS_CreateWnd("playWnd", 1000, 600).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定 init(); // 创建播放实例成功后初始化 }); }, function () { // 启动插件服务失败 }); }, cbConnectError: function () { // 创建WebControl实例失败 oWebControl = null; $("#playWnd").html("插件未启动，正在尝试启动，请稍候..."); WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序 initCount ++; if (initCount initPlugin(); }, 3000) } else { $("#playWnd").html("插件启动失败，请检查插件是否安装！"); } }, cbConnectClose: function (bNormalClose) { // 异常断开：bNormalClose = false // JS_Disconnect正常断开：bNormalClose = true console.log("cbConnectClose"); oWebControl = null; } }); } // 设置窗口控制回调 function setCallbacks() { oWebControl.JS_SetWindowControlCallback({ cbIntegrationCallBack: cbIntegrationCallBack }); } // 推送消息 function cbIntegrationCallBack(oData) { showCBInfo(JSON.stringify(oData.responseMsg)); } //初始化 function init() { getPubKey(function () { // 请自行修改以下变量值 var appkey = "28730366"; //综合安防管理平台提供的appkey，必填 var secret = setEncrypt("HSZkCJpSJ7gSUYrO6wVi"); //综合安防管理平台提供的secret，必填 var ip = "10.19.132.75"; //综合安防管理平台IP地址，必填 var playMode = 0; //初始播放模式：0-预览，1-回放 var port = 443; //综合安防管理平台端口，若启用HTTPS协议，默认443 var snapDir = "D:\\SnapDir"; //抓图存储路径 var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径 var layout = "1x1"; //playMode指定模式的布局 var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1 var encryptedFields = 'secret'; //加密字段，默认加密领域为secret var showToolbar = 1; //是否显示工具栏，0-不显示，非0-显示 var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示 var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮 // 请自行修改以上变量值 oWebControl.JS_RequestInterface({ funcName: "init", argument: JSON.stringify({ appkey: appkey, //API网关提供的appkey secret: secret, //API网关提供的secret ip: ip, //API网关IP地址 playMode: playMode, //播放模式（决定显示预览还是回放界面） port: port, //端口 snapDir: snapDir, //抓图存储路径 videoDir: videoDir, //紧急录像或录像剪辑存储路径 layout: layout, //布局 enableHTTPS: enableHTTPS, //是否启用HTTPS协议 encryptedFields: encryptedFields, //加密字段 showToolbar: showToolbar, //是否显示工具栏 showSmart: showSmart, //是否显示智能信息 buttonIDs: buttonIDs //自定义工具条按钮 }) }).then(function (oData) { oWebControl.JS_Resize(1000, 600); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题 }); }); } //获取公钥 function getPubKey (callback) { oWebControl.JS_RequestInterface({ funcName: "getRSAPubKey", argument: JSON.stringify({ keyLength: 1024 }) }).then(function (oData) { console.log(oData); if (oData.responseMsg.data) { pubKey = oData.responseMsg.data; callback() } }) } //RSA加密 function setEncrypt (value) { var encrypt = new JSEncrypt(); encrypt.setPublicKey(pubKey); return encrypt.encrypt(value); } // 监听resize事件，使插件窗口尺寸跟随DIV窗口变化 $(window).resize(function () { if (oWebControl != null) { oWebControl.JS_Resize(1000, 600); setWndCover(); } }); // 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动 $(window).scroll(function () { if (oWebControl != null) { oWebControl.JS_Resize(1000, 600); setWndCover(); } }); // 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口 function setWndCover() { var iWidth = $(window).width(); var iHeight = $(window).height(); var oDivRect = $("#playWnd").get(0).getBoundingClientRect(); var iCoverLeft = (oDivRect.left 0) ? Math.round(oDivRect.bottom - iHeight) : 0; iCoverLeft = (iCoverLeft > 1000) ? 1000 : iCoverLeft; iCoverTop = (iCoverTop > 600) ? 600 : iCoverTop; iCoverRight = (iCoverRight > 1000) ? 1000 : iCoverRight; iCoverBottom = (iCoverBottom > 600) ? 600 : iCoverBottom; oWebControl.JS_RepairPartWindow(0, 0, 1001, 600); // 多1个像素点防止还原后边界缺失一个像素条 if (iCoverLeft != 0) { oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 600); } if (iCoverTop != 0) { oWebControl.JS_CuttingPartWindow(0, 0, 1001, iCoverTop); // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条 } if (iCoverRight != 0) { oWebControl.JS_CuttingPartWindow(1000 - iCoverRight, 0, iCoverRight, 600); } if (iCoverBottom != 0) { oWebControl.JS_CuttingPartWindow(0, 600 - iCoverBottom, 1000, iCoverBottom); } } //视频预览功能 $("#startPreview").click(function () { var cameraIndexCode = $("#cameraIndexCode").val(); //获取输入的监控点编号值，必填 var streamMode = 0; //主子码流标识：0-主码流，1-子码流 var transMode = 1; //传输协议：0-UDP，1-TCP var gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用 var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口） cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, ""); cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, ""); oWebControl.JS_RequestInterface({ funcName: "startPreview", argument: JSON.stringify({ cameraIndexCode:cameraIndexCode, //监控点编号 streamMode: streamMode, //主子码流标识 transMode: transMode, //传输协议 gpuMode: gpuMode, //是否开启GPU硬解 wndId:wndId //可指定播放窗口 }) }) }); //停止全部预览 $("#stopAllPreview").click(function () { oWebControl.JS_RequestInterface({ funcName: "stopAllPreview" }); }); // 标签关闭 $(window).unload(function () { if (oWebControl != null){ oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题 oWebControl.JS_Disconnect().then(function(){ // 断开与插件服务连接成功 }, function() { // 断开与插件服务连接失败 }); } }); 前端遇到的问题

1.插件加载成功会出现效果图上的黑窗口，如果出不来就是加载失败，我的解决方案是把

$(window).load(function () { initPlugin(); }); 修改为 $(document).ready(function() { initPlugin(); });

2.注意引入的jquery会和项目中其他jquery冲突 3.海康官方给的demo都在视频web插件中

DEBUG

debug地址：http://ip:port/artemis-web/debug/index

分页获取区域信息

在这里插入图片描述

根据区域编号获取下级监控点列表

在这里插入图片描述

根据cameraIndexCode获取预览url

获取的url可以通过【VLC】软件来播放在这里插入图片描述

【本文地址】

公司简介

联系我们