海康视频对接
1.登录海康开放平台,下载插件和demo
https://open.hikvision.com/resourceCenter
要选择平台对应的版本
安装 VideoWebPlugin.exe 插件包,可以打开demo页面,填入重要数据,测试视频是否可调取
官方文档的开发流程
代码实现
1.引入依赖
// 1.引入依赖,注意要在index.html中引入
<script src="jquery-1.12.4.min.js"></script>
<script src="jsencrypt.min.js"></script> <!-- 用于RSA加密 -->
<script src="web-control_1.2.5.min.js"></script> <!-- 用于前端与插件交互
<template> <div id="plugin" class="players-box"></div> </template>
const { WebControl, JSEncrypt, } = window;
// 公共密钥
const pubKey = ref<string>('');
let initCount = 0;
let oWebControl :any = null;
const width = ref<number>(0);
const height = ref<number>(0);
onMounted(() => {
const container = document.querySelector('#plugin');
width.value = getStyle(container, 'width').replace(/px/g, '');
height.value = getStyle(container, 'height').replace(/px/g, '');
initPlugin('plugin');
window.addEventListener('resize', reSize);
});
onUnmounted(() => {
// 销毁摄像头组件
window.removeEventListener('resize', reSize);
return oWebControl && oWebControl.JS_DestroyWnd();
});
/*
* 初始化播放区域
* 初始化WebControl实例,加载播放插件并设置消息回调
* 插件服务启动成功后创建插件窗口
*/
const initPlugin = (domId:string) => {
if (!WebControl) {
return;
}
oWebControl = new WebControl({
// 指定容器id
szPluginContainer: domId,
// 指定起止端口号,建议使用该值
iServicePortStart: 15900,
iServicePortEnd: 15900,
// 用于IE10使用ActiveX的clsid
szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11',
// 创建WebControl实例成功
cbConnectSuccess: () => {
// WebControl实例创建成功后需要启动服务
oWebControl.JS_StartService('window', {
// 值"./VideoPluginConnect.dll"写死
dllPath: './VideoPluginConnect.dll',
}).then(() => {
// 启动插件服务成功
oWebControl.JS_SetWindowControlCallback({
// 设置消息回调
cbIntegrationCallBack: null,
});
oWebControl.JS_CreateWnd(domId, width.value, height.value)
.then(() => {
// 创建播放实例成功后初始化
init();
});
});
},
// 创建WebControl实例失败
cbConnectError: () => {
oWebControl = null;
// 程序未启动时执行error函数,采用wakeup来启动程序
WebControl.JS_WakeUp('VideoWebPlugin://');
initCount++;
if (initCount < 3) {
setTimeout(() => {
initPlugin();
}, 3000);
} else {
noPlugin();
}
},
cbConnectClose: () => {
// 异常断开:bNormalClose = false JS_Disconnect正常断开:bNormalClose = true
noPlugin();
oWebControl = null;
},
});
};
/* 获取公钥 */
const getPubKey = (callback) => {
oWebControl.JS_RequestInterface({
funcName: 'getRSAPubKey',
argument: JSON.stringify({
keyLength: 1024,
}),
}).then(({ responseMsg: { data, }, }) => {
if (data) {
pubKey.value = data;
return callback && callback();
}
});
};
/* RSA加密 */
const setEncrypt = (value) => {
const encrypt = new JSEncrypt();
encrypt.setPublicKey(pubKey.value);
return encrypt.encrypt(value);
};
/*
* 初始化预览
* 申请密钥并进行初始化 * 需要填入appkey,secret,网关IP和端口
*/
const init = () => {
getPubKey(() => {
oWebControl.JS_RequestInterface({
funcName: 'init',
argument: JSON.stringify({
// API网关提供的appkey
appkey: 'xxxxxxx',
// API网关提供的secret
secret: setEncrypt('xxxxxxxxxxxxx'),
// API网关IP地址
ip: 'xxxxxxxx',
// 播放模式(决定显示预览还是回放界面)
playMode: 0,
// 端口
port: xxx,
// 抓图存储路径
snapDir: 'D:\\SnapDir',
// 紧急录像或录像剪辑存储路径
videoDir: 'D:\\VideoDir',
layout: '1x1',
// 是否启用HTTPS协议
enableHTTPS: 1,
// 加密字段
encryptedFields: 'secret',
// 是否显示工具栏
showToolbar: 1,
// 是否显示智能信息
showSmart: 1,
}),
}).then((oData) => {
console.log(oData);// 打印接口失败返回信息
oWebControl.JS_Resize(width.value, height.value);
// 初始化后resize一次,规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
startPreview(indexCode)
});
});
};
/* 开始预览 */
const startPreview = (code, index = 0) => {
oWebControl.JS_RequestInterface({
funcName: 'startPreview',
argument: JSON.stringify({
// 监控点编号
cameraIndexCode: code,
// 主子码流标识
streamMode: 0,
// 传输协议
transMode: 1,
// 是否开启GPU硬解
gpuMode: 0,
// 可指定播放窗口
wndId: index + 1,
}),
});
};
/**
* 设置视图布局
* @param {string} data data “1x1”、“2x2”、“3x3”、“4x4”、“5x5”、“1x2”、“1+2”、“1+5”、“1+7”、 “1+8”、“1+9”、“1+12”、“1+16”、“4+9”、“1+1+12”、“3+4”、“1x4”、“4x6”
* @returns {void}
*/
const setLayout = (data) => {
if (!(oWebControl && oWebControl.JS_RequestInterface)) {
return;
}
oWebControl.JS_RequestInterface({
funcName: 'setLayout',
argument: JSON.stringify({
layout: data,
}),
}).then(() => {
startPreview(code);
});
};
实现效果