前言
最近开发的一个新平台，有要求接入视频监控通道，公司接入了海康威视平台提供的插件。于是自己去官网下载了demo和开发文档，准备自己捣鼓一下，经过一两天的时间，简单的实现了实时监控的播放和视频水印的开发，在这里分享一下。
海康威视插件下载
官网： open.hikvision.com/download/5c…
我自己的git仓库下载地址：github.com/blueSky1008…
目录结构：
使用此插件的时候，如果电脑没有安装此插件的支持软件，需提示用户下载安装软件
创建播放实例
// 创建失败后，自动重连的次数
let initCount = 0
// 容器的宽高
let width = $("#playWnd").width();
let height = $("#playWnd").height();
initPlugin() {
oWebControl = new WebControl({
szPluginContainer: "playWnd", // 指定播放容器id
iServicePortStart: 15900, // 指定起止端口号，建议直接使用该值
iServicePortEnd: 15909,
szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid，固定参数
cbConnectSuccess: () => {
// 创建WebControl实例成功
oWebControl
.JS_StartService("window", {
// WebControl实例创建成功后需要启动服务
dllPath: "./VideoPluginConnect.dll", // 值"./VideoPluginConnect.dll"写死
})
.then(
() => {
// 启动插件服务成功
oWebControl.JS_SetWindowControlCallback({
// 设置消息回调
cbIntegrationCallBack: this.cbIntegrationCallBack,
});
oWebControl.JS_CreateWnd("playWnd", width, height).then(() => {
//JS_CreateWnd创建视频播放窗口，宽高可设定
this.init(); // 创建播放实例成功后，初始化参数
});
},
() => {
// 启动插件服务失败
}
);
},
cbConnectError: () => {
// 创建WebControl实例失败
oWebControl = null;
$("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
initCount++;
if (initCount < 3) {
setTimeout(() => {
this.initPlugin();
}, 3000);
} else {
$("#playWnd").html("插件启动失败，请检查插件是否安装！");
}
},
cbConnectClose: (bNormalClose) => {
// 异常断开：bNormalClose = false
// JS_Disconnect正常断开：bNormalClose = true
console.log("cbConnectClose");
oWebControl = null;
},
});
},
// 窗口回调事件和点击事件
cbIntegrationCallBack(oData) {
// 这里可以拿到每个窗口的id和其他值，包括窗口的点击事件回调
console.log(oData.responseMsg)
},
初始化参数
// 初始化参数
init() {
this.getPubKey(() => {
////////////////////////////////// 请自行修改以下变量值 ////////////////////////////////////
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((oData) => {
oWebControl.JS_Resize(width, height); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
this.setWndCover()
});
});
},
// 获取公钥
getPubKey(callback) {
oWebControl
.JS_RequestInterface({
funcName: "getRSAPubKey",
argument: JSON.stringify({
keyLength: 1024,
}),
})
.then((oData) => {
if (oData.responseMsg.data) {
pubKey = oData.responseMsg.data;
callback();
}
});
},
// RSA加密
setEncrypt(value) {
let encrypt = new JSEncrypt();
encrypt.setPublicKey(pubKey);
return encrypt.encrypt(value);
},
视频播放预览
// 视频预览
startRealPlay() {
oWebControl.JS_RequestInterface({
funcName: "startPreview",
argument: JSON.stringify({
cameraIndexCode: 'safhasasigvbasfgbhsdf', //监控点编号
streamMode: 0, //主子码流标识
transMode: 1, //传输协议
gpuMode: 0, //是否开启GPU硬解
wndId: 2, //播放窗口id, 具体的可以查看文档
}),
}).then(oData=>{
if(oData.responseMsg.code == 0) { // 播放成功
setTimeout(() => {
this.addText(data, 1) // 添加文字水印
}, 4000);
}
})
},
添加水印文字
addText(data, index) {
oWebControl.JS_RequestInterface({
funcName: "drawOSD",
argument: JSON.stringify({
text : '我时水印',
x: 30, // 像素
y: 30,
color: 65536 * 255 + 256 * 255 + 255, // 65536 * R + 256 * G + B
fontSize: 30,
bold: 1, // 0-不加粗 1-加粗
wndId: 2, //播放窗口
}),
}).then(oData=>{
if(oData.responseMsg.code != 0) {
console.log('添加文字失败')
}
})
},
处理因为页面滚动条，遮挡问题
// 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
setWndCover() {
var iWidth = $(window).width();
var iHeight = $(window).height();
var oDivRect = $("#playWnd").get(0).getBoundingClientRect();
var iCoverLeft = oDivRect.left < 0 ? Math.abs(oDivRect.left) : 0;
var iCoverTop = oDivRect.top < 0 ? Math.abs(oDivRect.top) : 0;
var iCoverRight =
oDivRect.right - iWidth > 0 ? Math.round(oDivRect.right - iWidth) : 0;
var iCoverBottom =
oDivRect.bottom - iHeight > 0
? Math.round(oDivRect.bottom - iHeight)
: 0;
iCoverLeft = iCoverLeft > width ? width : iCoverLeft;
iCoverTop = iCoverTop > height ? height : iCoverTop;
iCoverRight = iCoverRight > width ? width : iCoverRight;
iCoverBottom = iCoverBottom > height ? height : iCoverBottom;
oWebControl.JS_RepairPartWindow(0, 0, width + 1, height); // 多1个像素点防止还原后边界缺失一个像素条
if (iCoverLeft != 0) {
oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, height);
}
if (iCoverTop != 0) {
oWebControl.JS_CuttingPartWindow(0, 0, width + 1, iCoverTop); // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
}
if (iCoverRight != 0) {
oWebControl.JS_CuttingPartWindow(
width - iCoverRight,
0,
iCoverRight,
height
);
}
if (iCoverBottom != 0) {
oWebControl.JS_CuttingPartWindow(
0,
height - iCoverBottom,
width,
iCoverBottom
);
}
},
完整例子
// 配置参数 config.js
videoConfig={
appkey:'28730366', //公钥
appSecret:'HSZkCJpSJ7gSUYrO6wVi', //合作方secet
enableHTTPS:1, //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
ip:'10.19.132.75', //IP地址
port:443, //端口
language:"zh_CN", //语言：中文
playMode: 0, //初始播放模式：0-预览，1-回放
snapDir:'D:\\SnapDir', //抓图存储路径
videoDir:'D:\\VideoDir', //视频存储路径
// 1,0,16,256,257,258,259,260,512,513,514,515,516,517,768,769 //工具条按钮ID集
buttonIDs: '0,16,256,257,259,260,512,514,515,516,517,768,769', //工具条按钮ID
showToolbar: 0, //是否显示工具栏，0-不显示，非0-显示
showSmart:0, //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
x: 20,
y: 90,
color: 65536 * 255 + 256 * 255 + 255, // 65536 * R + 256 * G + B;
fontSize: 30,
bold: 1, // 0-不加粗 1-加粗
}
// 播放组件 video.vue
<template>
<div class="video_hk_box" id="video_box">
<template v-if="isInit">
<div class="video" id="playWnd"></div>
</template>
<template v-else>
<div class="down u-f u-f-ac u-f-jc">
<a href="VideoWebPlugin.exe">下载插件--安装完后请刷新</a>
</div>
</template>
</div>
</template>
<script>
import $ from "jquery";
let width = null;
let height = null;
let oWebControl = null;
let initCount = 0; // 创建播放实例时，失败的重连次数
let pubKey = ""; // 公钥
let addTextTime = null
let startCount = 0 // 获取播放的code时，失败时重新获取的次数
export default {
data() {
return {
isInit: true, // 是否创建WebControl实例成功
videoData: [],
isParams: false, // 参数是否初始化成功
clickWndId: 1, // 多个窗口时，点击的窗口id
codeLength: 4, // 播放的code的长度
};
},
props: {
layout: {
default: "2x2",
},
},
mounted() {
width = $("#video_box").width();
height = $("#video_box").height();
this.initScroll = this.createDebounce(()=>{
if (oWebControl != null) {
oWebControl.JS_Resize(width, height);
this.setWndCover();
}
})
window.addEventListener("resize", () => {
width = $("#video_box").width();
height = $("#video_box").height();
if (oWebControl != null) {
oWebControl.JS_Resize(width, height);
this.setWndCover();
}
// this.initScroll()
});
window.addEventListener("scroll",()=>{
this.initScroll()
})
this.initPlugin();
},
beforeDestroy() {
console.log(oWebControl, 'oWebControl')
clearTimeout(addTextTime)
addTextTime = null
if (oWebControl != null) {
oWebControl.JS_Disconnect().then(
function () {},
function () {}
);
}
},
methods: {
getVideoData(data, length) { // 获取播放的code
if (oWebControl != null && this.isParams) {
this.startRealPlay(data, length);
} else {
startCount ++
if(startCount < 4) {
setTimeout(() => {
this.getVideoData(data, length);
}, 1500);
}
}
},
// 创建播放实例
initPlugin() {
oWebControl = new WebControl({
szPluginContainer: "playWnd", // 指定容器id
iServicePortStart: 15900, // 指定起止端口号，建议使用该值
iServicePortEnd: 15909,
szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
cbConnectSuccess: () => {
// 创建WebControl实例成功
this.isInit = true;
oWebControl
.JS_StartService("window", {
// WebControl实例创建成功后需要启动服务
dllPath: "./VideoPluginConnect.dll", // 值"./VideoPluginConnect.dll"写死
})
.then(
() => {
// 启动插件服务成功
oWebControl.JS_SetWindowControlCallback({
// 设置消息回调
cbIntegrationCallBack: this.cbIntegrationCallBack,
});
oWebControl.JS_CreateWnd("playWnd", width, height).then(() => {
//JS_CreateWnd创建视频播放窗口，宽高可设定
this.init(); // 创建播放实例成功后初始化
});
},
() => {
// 启动插件服务失败
}
);
},
cbConnectError: () => {
// 创建WebControl实例失败
oWebControl = null;
$("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
initCount++;
if (initCount < 3) {
setTimeout(() => {
this.initPlugin();
}, 3000);
} else {
$("#playWnd").html("插件启动失败，请检查插件是否安装！");
this.isInit = false;
}
},
cbConnectClose: (bNormalClose) => {
// 异常断开：bNormalClose = false
// JS_Disconnect正常断开：bNormalClose = true
console.log("cbConnectClose");
oWebControl = null;
},
});
},
// 初始化参数
init() {
this.getPubKey(() => {
////////////////////////////////// 请自行修改以下变量值 ////////////////////////////////////
var appkey = this.videoConfig.appkey; //综合安防管理平台提供的appkey，必填
var secret = this.setEncrypt(this.videoConfig.appSecret); //综合安防管理平台提供的secret，必填
var ip = this.videoConfig.ip; //综合安防管理平台IP地址，必填
var playMode = this.videoConfig.playMode; //初始播放模式：0-预览，1-回放
var port = this.videoConfig.port; //综合安防管理平台端口，若启用HTTPS协议，默认443
var snapDir = this.videoConfig.snapDir; //抓图存储路径
var videoDir = this.videoConfig.videoDir; //紧急录像或录像剪辑存储路径
var layout = this.layout; //playMode指定模式的布局
var enableHTTPS = this.videoConfig.enableHTTPS; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
var encryptedFields = "secret"; //加密字段，默认加密领域为secret
var showToolbar = this.videoConfig.showToolbar; //是否显示工具栏，0-不显示，非0-显示
var showSmart = this.videoConfig.showSmart; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
var buttonIDs = this.videoConfig.buttonIDs; //自定义工具条按钮
////////////////////////////////// 请自行修改以上变量值 ////////////////////////////////////
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((oData) => {
this.isParams = true;
oWebControl.JS_Resize(width, height); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
this.setWndCover()
});
});
},
// 视频预览
startRealPlay(data, length) {
this.codeLength = length
if (this.layout == "1x1") {
oWebControl.JS_RequestInterface({
funcName: "startPreview",
argument: JSON.stringify({
cameraIndexCode: data, //监控点编号
streamMode: 0, //主子码流标识
transMode: 1, //传输协议
gpuMode: 0, //是否开启GPU硬解
wndId: 1, //可指定播放窗口
}),
})
} else if (this.layout == "2x2") {
if(length == 1) {
oWebControl.JS_RequestInterface({
funcName: "startPreview",
argument: JSON.stringify({
cameraIndexCode: data.playCode, //监控点编号
streamMode: 0, //主子码流标识
transMode: 1, //传输协议
gpuMode: 0, //是否开启GPU硬解
wndId: this.clickWndId, //可指定播放窗口
}),
}).then(oData=>{
if(oData.responseMsg.code == 0) {
setTimeout(() => {
this.addText(data, 1)
}, 4000);
}
})
}else if(length == 4) {
data.forEach((item, index) => {
oWebControl.JS_RequestInterface({
funcName: "startPreview",
argument: JSON.stringify({
cameraIndexCode: item.playCode, //监控点编号
streamMode: 0, //主子码流标识
transMode: 1, //传输协议
gpuMode: 0, //是否开启GPU硬解
wndId: index + 1, //可指定播放窗口
}),
}).then(oData=>{
if(oData.responseMsg.code == 0) {
setTimeout(() => {
this.addText(item, index + 1)
}, 4000);
}
})
});
}
//
}
},
addText(data, index) {
oWebControl.JS_RequestInterface({
funcName: "drawOSD",
argument: JSON.stringify({
text : data.stationShotname,
x: this.videoConfig.x,
y: this.videoConfig.y,
color: this.videoConfig.color,
fontSize: this.videoConfig.fontSize,
bold: this.videoConfig.bold,
wndId: index, //播放窗口
}),
}).then(oData=>{
if(oData.responseMsg.code != 0) {
console.log('添加文字失败')
}
})
},
// 窗口回调事件和点击事件
cbIntegrationCallBack(oData) {
if(this.layout == '2x2') {
this.clickWndId = oData.responseMsg.msg.wndId
}
},
// 获取公钥
getPubKey(callback) {
oWebControl
.JS_RequestInterface({
funcName: "getRSAPubKey",
argument: JSON.stringify({
keyLength: 1024,
}),
})
.then((oData) => {
if (oData.responseMsg.data) {
pubKey = oData.responseMsg.data;
callback();
}
});
},
// RSA加密
setEncrypt(value) {
let encrypt = new JSEncrypt();
encrypt.setPublicKey(pubKey);
return encrypt.encrypt(value);
},
// 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
setWndCover() {
var iWidth = $(window).width();
var iHeight = $(window).height();
var oDivRect = $("#playWnd").get(0).getBoundingClientRect();
console.log(oDivRect)
var iCoverLeft = oDivRect.left < 0 ? Math.abs(oDivRect.left) : 0;
var iCoverTop = oDivRect.top < 0 ? Math.abs(oDivRect.top) : 0;
var iCoverRight =
oDivRect.right - iWidth > 0 ? Math.round(oDivRect.right - iWidth) : 0;
var iCoverBottom =
oDivRect.bottom - iHeight > 0
? Math.round(oDivRect.bottom - iHeight)
: 0;
iCoverLeft = iCoverLeft > width ? width : iCoverLeft;
iCoverTop = iCoverTop > height ? height : iCoverTop;
iCoverRight = iCoverRight > width ? width : iCoverRight;
iCoverBottom = iCoverBottom > height ? height : iCoverBottom;
oWebControl.JS_RepairPartWindow(0, 0, width + 1, height); // 多1个像素点防止还原后边界缺失一个像素条
if (iCoverLeft != 0) {
oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, height);
}
if (iCoverTop != 0) {
oWebControl.JS_CuttingPartWindow(0, 0, width + 1, iCoverTop); // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
}
if (iCoverRight != 0) {
oWebControl.JS_CuttingPartWindow(
width - iCoverRight,
0,
iCoverRight,
height
);
}
if (iCoverBottom != 0) {
oWebControl.JS_CuttingPartWindow(
0,
height - iCoverBottom,
width,
iCoverBottom
);
}
},
//
createDebounce(fn, delay = 500) {
let timmer = null;
return ()=>{
clearTimeout(timmer)
timmer = setTimeout(() => {
fn && fn()
}, delay);
}
},
},
};
</script>
<style lang="scss" scoped>
.video_hk_box {
width: 100%;
height: 100%;
.video {
width: 100%;
height: 100%;
}
.down{
width: 100%;
height: 100%;
a{
font-size: 40px;
color: #ffffff;
text-decoration: none;
}
}
}
</style>
