目录
1.后端
1.1 导入依赖
<dependency>
<groupId>com.hikvision.ga</groupId>
<artifactId>artemis-http-client</artifactId>
<version>1.1.3</version>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.51</version>
</dependency>1.2 代码实战
新建ArtemisPostTest类，代码如下，设置认证信息，设置ArtemisConfig的host，appKey(AK)，appSecret(SK)。设置接口URL。.设置接口入参。接口调用，调用doPostStringArtemis方法（该方法内部实现了登入认证逻辑），传入接口URL，接口入参，数据提交类型等信息，完成接口调用。
public class ArtemisPostTest {
static {
ArtemisConfig.host = "";// 代理API网关nginx服务器ip端口
ArtemisConfig.appKey = "";// 秘钥appkey
ArtemisConfig.appSecret = "";// 秘钥appSecret
}
/**
* 能力开放平台的网站路径
* TODO 路径不用修改，就是/artemis
*/
private static final String ARTEMIS_PATH = "/artemis";
public static String path="";
public static JSONObject jsonBody=new JSONObject();
/**
* 调用POST请求类型(application/json)接口，这里以入侵报警事件日志为例
* https://open.hikvision.com/docs/918519baf9904844a2b608e558b21bb6#e6798840
*
* @return
*/
public static String callPostStringApi(){
/**
* http://10.33.47.50/artemis/api/scpms/v1/eventLogs/searches
* 根据API文档可以看出来，这是一个POST请求的Rest接口，而且传入的参数值为一个json
* ArtemisHttpUtil工具类提供了doPostStringArtemis这个函数，一共六个参数在文档里写明其中的意思，因为接口是https，
* 所以第一个参数path是一个hashmap类型，请put一个key-value，query为传入的参数，body为传入的json数据
* 传入的contentType为application/json，accept不指定为null
* header没有额外参数可不传,指定为null
*
*/
final String getCamsApi = ARTEMIS_PATH +ArtemisPostTest.path;
Map<String, String> path = new HashMap<String, String>(2) {
{
put("https://", getCamsApi);//根据现场环境部署确认是http还是https
}
};
String body = jsonBody.toJSONString();
String result = ArtemisHttpUtil.doPostStringArtemis(path,body,null,null,"application/json",null);// post请求application/json类型参数
return result;
}
}新建实体类Camera代码如下：
@Data
@AllArgsConstructor
@NoArgsConstructor
@Accessors(chain = true)
public class Camera {
String cameraIndexCode;
String camereName;
String url;
}在Controller中进行调用，代码如下：
首先根据分页获取监控点列表，这里获取的是第三页，每一页为六个监控点。
查询监控点列表v2
接口说明
根据条件查询目录下有权限的监控点列表
接口版本
v2
接口地址
/api/resource/v2/camera/search
请求方法
POST
数据提交方式
application/json
然后根据监控点唯一的标识获取预览url
接口说明
1.平台正常运行；平台已经添加过设备和监控点信息。
2.平台需要安装mgc取流服务。
3.三方平台通过openAPI获取到监控点数据，依据自身业务开发监控点导航界面。
4.调用本接口获取预览取流URL，协议类型包括：hik、rtsp、rtmp、hls。
5.通过开放平台的开发包进行实时预览或者使用标准的GUI播放工具进行实时预览。
6.为保证数据的安全性，取流URL设有有效时间，有效时间为5分钟。
接口版本
v2
接口地址
/api/video/v2/cameras/previewURLs
请求方法
POST
数据提交方式
application/json
最后就是进行属性的赋值，赋值给建立的Camera 实体类。
@GetMapping("/test")
public List<Camera> test(){
ArtemisPostTest.path="/api/resource/v1/cameras";
ArtemisPostTest.jsonBody.clear();
ArtemisPostTest.jsonBody.put("pageNo", 3);
ArtemisPostTest.jsonBody.put("pageSize", 6);
String StringeResult = ArtemisPostTest.callPostStringApi();
JSONObject result = (JSONObject) JSONObject.parse(StringeResult);
String data = result.get("data").toString();
JSONObject resultdata = (JSONObject) JSONObject.parse(data);
JSONArray list = resultdata.getJSONArray("list");
// System.out.println("StringeResult结果示例: "+JSONObject.toJSON(StringeResult));
// callPostImgStringApi();
ArtemisPostTest.path="/api/video/v2/cameras/previewURLs";
List<Camera> cameraList=new ArrayList<>();
for (Object i : list) {
Camera camera=new Camera();
JSONObject jsonObject = (JSONObject) JSONObject.parse(i.toString());
String cameraIndexCode = jsonObject.get("cameraIndexCode").toString();
String cameraName = jsonObject.get("cameraName").toString();
ArtemisPostTest.jsonBody.clear();
ArtemisPostTest.jsonBody.put("cameraIndexCode",cameraIndexCode);
ArtemisPostTest.jsonBody.put("protocol","rtsp");
String m = ArtemisPostTest.callPostStringApi();
JSONObject jsonObject1 = (JSONObject) JSONObject.parse(m);
JSONObject data1 = (JSONObject) jsonObject1.get("data");
String url = data1.get("url").toString();
camera.setCameraIndexCode(cameraIndexCode).setCamereName(cameraName).setUrl(url);
cameraList.add(camera);
}
return cameraList;
}2.前端
2.1 首先安装海康的web插件，前端vue3代码如下：
<template>
<div style="display: flex;flex-direction: row;flex-wrap: wrap">
<div v-for="item in state.list">
<el-button @click="go(item.cameraIndexCode)">预览{{item.camereName}}</el-button>
</div>
</div>
<div class="main" ref="playWndBox">
<div
id="playWnd"
class="playWnd"
:style="{
height: playWndHeight + 'px',
width: playWndWidth + 'px',
}"
></div>
</div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount, getCurrentInstance, nextTick,reactive } from 'vue'
import axios from "../utils/axios.js"
const playWndBox = ref(null)
let playWndHeight = ref('')
let playWndWidth = ref('')
let pubKey = ref('')
let oWebControl = ref(null)
let objData = ref({
appkey: "", //海康提供的appkey
ip: "", //海康提供的ip
secret: "", //海康提供的secret
port: 443,
playMode: 0, // 0 预览 1回放
layout: "1x1", //页面展示的模块数【16】
})
const go=(data)=>{
previewVideo(data)
}
const state=reactive({
list:[]
})
const load=()=>{
axios.get("/test").then(res=>{
state.list=res
console.log(res)
})
}
load()
onMounted(() => {
// 获取页面的实例对象
const pageInstance = getCurrentInstance();
// 获取dom节点对象
const tagDomObj = pageInstance.refs.playWndBox;
playWndHeight.value = tagDomObj.clientHeight;
playWndWidth.value = tagDomObj.clientWidth;
// 监听scroll事件，使插件窗口尺寸跟随DIV窗口变化
window.addEventListener("scroll", () => {
console.log(5);
// return
if (oWebControl.value != null) {
oWebControl.JS_Resize(
tagDomObj.clientWidth,
tagDomObj.clientHeight
);
this.setWndCover();
}
});
// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
window.addEventListener("resize", (e) => {
console.log(0);
if (oWebControl.value != null) {
oWebControl.JS_Resize(
tagDomObj.clientWidth,
tagDomObj.clientHeight
);
this.setWndCover();
}
});
// 初始化播放器插件
nextTick(() => {
initPlugin();
})
})
onBeforeUnmount(() => {
if (oWebControl.value != null) {
// 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
oWebControl.JS_HideWnd();
// 销毁当前播放的视频
oWebControl.JS_RequestInterface({ funcName: "destroyWnd" });
// 断开与插件服务连接
oWebControl.JS_Disconnect();
}
})
const initPlugin = () => {
oWebControl = new WebControl({
szPluginContainer: "playWnd", // 指定容器id
iServicePortStart: 15900, // 指定起止端口号，建议使用该值
iServicePortEnd: 15900,
szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
cbConnectSuccess: () => {
// 创建WebControl实例成功
oWebControl
.JS_StartService("window", {
// WebControl实例创建成功后需要启动服务
// 值"./VideoPluginConnect.dll"写死
dllPath: "./VideoPluginConnect.dll",
})
.then(
function () {
// 设置消息回调
oWebControl.JS_SetWindowControlCallback({
// cbIntegrationCallBack: cbIntegrationCallBack,
});
//JS_CreateWnd创建视频播放窗口，宽高可设定
oWebControl
.JS_CreateWnd("playWnd", 1152, 581, { bEmbed: true })//这一部分很重要，两个参数为你盒子的宽高，这样是写死是防止组件加载之前出现白屏；bEmbed: true 防止窗口闪烁
.then(function () {
// 创建播放实例成功后初始化
init();
});
},
function () {
// 启动插件服务失败
}
);
},
// 创建WebControl实例失败
cbConnectError: function () {
// 这里写创建WebControl实例失败时的处理步骤,下面的代码仅做参看，具体实现步骤根据个人需求进行编写！！！！！！！！
// console.log(0);
// oWebControl.value = null;
// // 程序未启动时执行error函数，采用wakeup来启动程序
// window.WebControl.JS_WakeUp("VideoWebPlugin://");
// initCount++;
// if (initCount < 3) {
// setTimeout(function () {
// initPlugin();
// }, 3000);
// } else {
// setTimeout(function () {
// setTimeout(function () {
// $router.push('/home/PlugDown')
// }, 4000)
// }, 4000)
// }
},
cbConnectClose: () => {
// 异常断开：bNormalClose = false
// JS_Disconnect正常断开：bNormalClose = true
// console.log("cbConnectClose");
oWebControl.value = null;
},
});
// oWebControl.JS_CuttingPartWindow(500, 500, 500, 500);
}
// 初始化
const init = (callback) => {
getPubKey(() => {
let appkey = objData.value.appkey; //综合安防管理平台提供的appkey，必填
let secret = setEncrypt(objData.value.secret); //综合安防管理平台提供的secret，必填
let ip = objData.value.ip; //综合安防管理平台IP地址，必填
let playMode = objData.value.playMode; //初始播放模式：0-预览，1-回放
let port = objData.value.port; //综合安防管理平台端口，若启用HTTPS协议，默认443
let snapDir = "D:\\SnapDir"; //抓图存储路径
let videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
let layout = objData.value.layout; //playMode指定模式的布局
let enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
let encryptedFields = "secret"; //加密字段，默认加密领域为secret
let showToolbar = 1; //是否显示工具栏，0-不显示，非0-显示
let showSmart = 0; //是否显示移动框线框，0-不显示，非0-显示
let buttonIDs =
"0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
// var toolBarButtonIDs = "2049,2304" // 工具栏上自定义按钮
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, //自定义工具条按钮
}),
})
.then(function (oData) {
oWebControl.JS_Resize(playWndWidth.value, playWndHeight.value); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
if (callback) {
callback();
}
// 隐藏
// oWebControl.JS_HideWnd()
});
});
}
// RSA 加密
let setEncrypt = (value) => {
let encrypt = new window.JSEncrypt();
encrypt.setPublicKey(pubKey);
return encrypt.encrypt(value);
}
// 获取公钥
const getPubKey = (callback) => {
oWebControl
.JS_RequestInterface({
funcName: "getRSAPubKey",
argument: JSON.stringify({
keyLength: 1024,
}),
})
.then(function (oData) {
if (oData.responseMsg.data) {
pubKey = oData.responseMsg.data;
callback();
}
});
}
// 调用这个函数可进行视频播放
// 视频预览功能
const previewVideo = (data) => {
let cameraIndexCode = data; // 获取输入的监控点编号值，必填
let streamMode = 0; // 主子码流标识：0-主码流，1-子码流
let transMode = 1; // 传输协议：0-UDP，1-TCP
let gpuMode = 0; // 是否启用GPU硬解，0-不启用，1-启用
let wndId = -1; // 播放窗口序号（在2x2以上布局下可指定播放窗口）
oWebControl.JS_RequestInterface({
funcName: "startPreview",
argument: JSON.stringify({
cameraIndexCode: cameraIndexCode, // 监控点编号
streamMode: streamMode, // 主子码流标识
transMode: transMode, // 传输协议
gpuMode: gpuMode, // 是否开启GPU硬解
wndId: wndId, // 可指定播放窗口
}),
})
.then(function () {
oWebControl.JS_SetWindowControlCallback({
});
});
}
</script>
<style scoped>
.main {
position: fixed;
top: 50%;
left: 20%;
transform: translateY(-50%);
width: 60vw;
height: 60vh;
margin: auto;
background-color: #ccc;
}
</style>版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/196991.html
