
Vue集成海康威视web视频插件
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue

·
1、进入海康威视官网下载插件包
https://open.hikvision.com/download/5c67f1e2f05948198c909700?type=20
2、将js文件放到public目录下
3、在public/index.html页面中引入
4、创建组件页面
<template>
<div
:class="['player', playerType == 'error' ? 'black' : '']"
:style="{ width: videoWidth, height: videoHeight }"
ref="playBox"
>
<div class="error" v-if="playerType == 'error'">视频播放异常</div>
<template v-else>
<div id="playWnd" ref='playWnd' v-if="playShow" style="width: 100%;height: 100%;">{{ playText }}</div>
</template>
</div>
</template>
<script>
export default {
props: {
//视频地址、video的id值
videoData: {
type: Object,
default: {},
},
//视频宽度
videoWidth: {
type: String,
default: "100%",
},
//视频高度
videoHeight: {
type: String,
default: "100%",
},
// 开始时间
startTime: {
type: String,
default: "",
},
// 结束时间
endTime: {
type: String,
default: "",
},
// playMode 1 回放 0 播放
playMode: {
type: Number,
default: 0,
},
videoList: {
type: Array,
default: null,
},
isFocus: {
type: Boolean,
default: false,
},
isPaging: {
type: Boolean,
default: false,
}
},
data() {
return {
playerType: "",
oWebControl: null,
initCount: 0,
pubKey: "",
playText: "",
playWndWidth: '',
playWndHeight: '',
playShow: false
};
},
watch: {
//监听视频地址、video的id值
videoData: {
deep: true,
immediate: true,
handler(val) {
this.$nextTick(() => {
if (this.videoData && this.videoData.videoID) {
this.playShow = true
this.previewClick()
}
});
},
},
videoList: {
deep: true,
immediate: true,
handler(val) {
if (this.videoList && this.videoList.length > 0) {
this.$nextTick(() => {
this.playShow = true
if (this.oWebControl) {
this.oWebControl.JS_HideWnd(); // 先让窗口隐藏,规避插件窗口滞后于浏览器消失问题
}
this.initPlugin()
setTimeout(()=> {
this.getSplitVideo()
}, 3000)
});
}
},
},
playMode() {
this.previewClick()
},
isFocus() {
this.playWndWidth = this.$refs.playBox ? this.$refs.playBox.offsetWidth : 800
this.playWndHeight = this.$refs.playBox ? this.$refs.playBox.offsetHeight : 600
if (this.isPaging) {
if (this.isFocus ) {
this.oWebControl.JS_CuttingPartWindow(this.playWndWidth/2,this.playWndHeight/2,this.playWndWidth/2,this.playWndHeight/2);
} else {
this.oWebControl.JS_RepairPartWindow(this.playWndWidth/2,this.playWndHeight/2,this.playWndWidth/2,this.playWndHeight/2);
}
}
}
},
mounted() {
let that = this
window.addEventListener('resize', () => {
this.$nextTick(() => {
if (this.oWebControl) {
this.playWndWidth = this.$refs.playBox.offsetWidth
this.playWndHeight = this.$refs.playBox.offsetHeight
this.oWebControl.JS_Resize(
that.playWndWidth,
that.playWndHeight
)
}
})
})
},
methods: {
// 播放视频
getVideo() {
let cameraIndexCode = this.videoData.videoID; //获取输入的监控点编号值,必填
let streamMode = 0; //主子码流标识:0-主码流,1-子码流
let transMode = 1; //传输协议:0-UDP,1-TCP
let gpuMode = 0; //是否启用GPU硬解,0-不启用,1-启用
let wndId = -1; //播放窗口序号(在2x2以上布局下可指定播放窗口)
cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
this.oWebControl.JS_RequestInterface({
funcName: "startPreview",
argument: JSON.stringify({
cameraIndexCode:cameraIndexCode, //监控点编号
streamMode: streamMode, //主子码流标识
transMode: transMode, //传输协议
gpuMode: gpuMode, //是否开启GPU硬解
wndId:wndId //可指定播放窗口
})
})
},
// 分屏播放视频
getSplitVideo() {
//获取输入的监控点编号值,必填
let streamMode = 0; //主子码流标识:0-主码流,1-子码流
let transMode = 1; //传输协议:0-UDP,1-TCP
let gpuMode = 0; //是否启用GPU硬解,0-不启用,1-启用
if (this.videoList.length > 0) {
let temp = []
this.videoList.forEach((item, index) => {
let obj = {};
obj.cameraIndexCode = item.indexCode;
obj.wndId = index + 1;
obj.transMode = transMode;
obj.streamMode = streamMode;
obj.gpuMode = gpuMode;
temp.push(obj);
})
this.oWebControl.JS_RequestInterface({
funcName: "startMultiPreviewByCameraIndexCode",
argument: JSON.stringify({
list: temp
})
})
}
},
// 视频预览功能
previewClick() {
if (this.oWebControl) {
this.getStopPlay()
this.oWebControl.JS_HideWnd(); // 先让窗口隐藏,规避插件窗口滞后于浏览器消失问题
}
this.initPlugin()
setTimeout(()=> {
// 如果是回放,重新初始化
if (this.playMode === 1) {
this.getStartPlay()
} else {
this.getVideo();
}
}, 3000)
},
// 录像回放功能
getStartPlay() {
let cameraIndexCode = this.videoData.videoID; //获取输入的监控点编号值,必填
let startTimeStamp = new Date(this.startTime).getTime(); //回放开始时间戳,必填
let endTimeStamp = new Date(this.endTime).getTime(); //回放结束时间戳,必填
let recordLocation = 0; //主子码流标识:0-主码流,1-子码流
let transMode = 1; //传输协议:0-UDP,1-TCP
let gpuMode = 0; //是否启用GPU硬解,0-不启用,1-启用
let wndId = -1; //播放窗口序号(在2x2以上布局下可指定播放窗口)
cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
this.oWebControl.JS_RequestInterface({
funcName: "startPlayback",
argument: JSON.stringify({
cameraIndexCode:cameraIndexCode, //监控点编号
startTimeStamp: Math.floor(startTimeStamp / 1000).toString(), //录像查询开始时间戳,单位:秒
endTimeStamp: Math.floor(endTimeStamp / 1000).toString(), //录像结束开始时间戳,单位:秒
recordLocation: recordLocation, //主子码流标识
transMode: transMode, //传输协议
gpuMode: gpuMode, //是否开启GPU硬解
wndId:wndId //可指定播放窗口
})
})
},
// 停止回放
getStopPlay() {
this.oWebControl.JS_RequestInterface({
funcName: "stopAllPlayback"
})
},
// 创建播放实例
initPlugin() {
this.playWndWidth = this.$refs.playBox.offsetWidth
this.playWndHeight = this.$refs.playBox.offsetHeight
this.playText = ""
let that = this;
that.oWebControl = new WebControl({
szPluginContainer: "playWnd", // 指定容器id
iServicePortStart: 15900, // 指定起止端口号,建议使用该值
iServicePortEnd: 15900,
szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
cbConnectSuccess: function () {
// 创建WebControl实例成功
that.oWebControl.JS_StartService("window", {
// WebControl实例创建成功后需要启动服务
dllPath: "./VideoPluginConnect.dll", // 值"./VideoPluginConnect.dll"写死
})
.then(function () {
that.$emit('loadingSuccess')
// 启动插件服务成功
that.oWebControl.JS_SetWindowControlCallback({
// 设置消息回调
cbIntegrationCallBack: that.cbIntegrationCallBack,
});
that.oWebControl.JS_CreateWnd("playWnd", that.playWndWidth, that.playWndHeight)
.then(function () {
//JS_CreateWnd创建视频播放窗口,宽高可设定
that.init(); // 创建播放实例成功后初始化
});
},
function () {
// 启动插件服务失败
that.playerType = 'error';
}
).catch(() => {
});
},
cbConnectError: function () {
// 创建WebControl实例失败
that.oWebControl = null;
this.playText = "插件未启动,正在尝试启动,请稍候..."
that.initCount++;
if (that.initCount < 3) {
setTimeout(function () {
that.$nextTick(() => {
// if (that.videoData.videoID) {
that.initPlugin()
// }
})
}, 3000);
} else {
this.playText = "插件启动失败,请检查插件是否安装!"
}
},
cbConnectClose: function (bNormalClose) {
// 异常断开:bNormalClose = false
// JS_Disconnect正常断开:bNormalClose = true
that.oWebControl = null;
this.playText = "插件未启动,正在尝试启动,请稍候..."
// WebControl.JS_WakeUp("VideoWebPlugin://");
that.initCount++;
if (that.initCount < 3) {
setTimeout(function () {
that.$nextTick(() => {
// if (that.videoData.videoID) {
that.initPlugin()
// }
})
}, 3000);
} else {
// that.$message.info("插件未安装,请下载后安装!")
}
},
});
},
// 推送消息
cbIntegrationCallBack(oData) {
console.log(oData.responseMsg, 'cbIntegrationCallBack')
},
//初始化
init() {
let that = this;
that.getPubKey(function () {
// 请自行修改以下变量值
let appkey = that.videoList && that.videoList.length > 0 && that.videoList[0] && that.videoList[0].appkey ? that.videoList[0].appkey : that.videoData.appkey; //综合安防管理平台提供的appkey,必填
let secret = that.videoList && that.videoList.length > 0 && that.videoList[0] && that.videoList[0].secret ? that.setEncrypt(that.videoList[0].secret) : that.setEncrypt(that.videoData.secret); //综合安防管理平台提供的secret,必填
let ip = "10.128.89.2"; //综合安防管理平台IP地址,必填
let playMode = that.playMode; //初始播放模式:0-预览,1-回放
let port = 443; //综合安防管理平台端口,若启用HTTPS协议,默认443
let snapDir = "D:\\SnapDir"; //抓图存储路径
let videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
let layout = that.videoList && that.videoList.length > 0 ? that.getLayout(that.videoList) : '1x1'
let enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互,这里总是填1
let encryptedFields = "secret"; //加密字段,默认加密领域为secret
let showToolbar = that.playMode; //是否显示工具栏,0-不显示,非0-显示
let showSmart = that.playMode; //是否显示智能信息(如配置移动侦测后画面上的线框),0-不显示,非0-显示
let buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
// 请自行修改以上变量值
that.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) {
that.oWebControl.JS_Resize(that.playWndWidth, that.playWndHeight); // 初始化后resize一次,规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
});
});
},
//获取公钥
getPubKey(callback) {
this.oWebControl.JS_RequestInterface({
funcName: "getRSAPubKey",
argument: JSON.stringify({
keyLength: 1024,
}),
})
.then((oData) => {
if (oData.responseMsg.data) {
this.pubKey = oData.responseMsg.data;
callback();
}
});
},
//RSA加密
setEncrypt(value) {
let that = this;
let encrypt = new JSEncrypt();
encrypt.setPublicKey(that.pubKey);
return encrypt.encrypt(value);
},
destroyWnd() {
if(this.playMode == 1) {
this.getStopPlay()
}
if (this.oWebControl) {
this.playShow = false
this.oWebControl.JS_HideWnd(); // 先让窗口隐藏,规避插件窗口滞后于浏览器消失问题
this.oWebControl.JS_DestroyWnd().then(function(){}, function() {})
this.oWebControl.JS_RequestInterface({ funcName: "destroyWnd" })
this.oWebControl.JS_Disconnect().then(function(){}, function() {});
}
},
getLayout(list) {
let layout = "1x1"
let number = list.length;
if (list && number > 0) {
if (number > 1 && number <= 2) {
layout = "1x2"
} else if (number > 2 && number <= 4){
layout = "2x2"
} else if (number > 4 && number <= 9){
layout = "3x3"
} else if (number > 9){
layout = "4x4"
}
}
return layout;
}
},
destroyed() {
if (this.oWebControl) {
this.playShow = false
this.oWebControl.JS_HideWnd(); // 先让窗口隐藏,规避插件窗口滞后于浏览器消失问题
this.oWebControl.JS_DestroyWnd().then(function(){}, function() {})
this.oWebControl.JS_RequestInterface({ funcName: "destroyWnd" })
this.oWebControl.JS_Disconnect().then(function(){}, function() {});
}
}
}
</script>
<style lang="scss" scoped>
.player {
.error {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #cccccc;
background: #000;
.parent-wnd {
display: none;
}
}
}
.black {
background: #000;
}
</style>
5、组件使用
该组件集成了web视频的三种播放方式,预览、回放和分屏播放。参数说明如下:
videoData:视频信息参数对象,包含appkey、secret、监控点编码-videoID
videoWidth和videoHeight:用于定义视频容器的宽高
startTime和endTime:用于定义视频的开始时间和结束时间,视频回放时使用
playMode:初始播放模式 1 预览 0 回放,默认为预览模式
videoList:多个videoData的集合,分屏播放时使用
isPaging:分屏视频是否显示分页,和videoList组合使用
isFocus:分页选择是否获取焦点,获取焦点扣除部分插件窗口,失去焦点扣除窗口还原
- 预览
<VideoWebPlugin
:videoData="videoData"
ref="webPlugin"
videoWidth="100%"
videoHeight="70vh"
></VideoWebPlugin>
- 回放
<VideoWebPlugin
:videoData="videoData"
ref="webPlugin"
videoWidth="100%"
videoHeight="63vh"
playMode="1"
:startTime="startTime"
:endTime="endTime"
></VideoWebPlugin>
- 分屏播放
<VideoWebPlugin
:videoList="videoList"
:videoData="null"
:isFocus="isFocus"
:isPaging="isPaging"
ref="webPlugin"
videoWidth="100%"
videoHeight="70vh"
></VideoWebPlugin>




vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:5 个月前 )
9e887079
[skip ci] 3 个月前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 7 个月前
更多推荐
所有评论(0)