一,将js文件放在public文件下
二,在index中全局引入
三.在视频页面写方法,创建实例,初始化,我写的是1*4屏的
<template>
<!--视频窗口展示-->
<div id='playWnd' className='playWnd' ref='playWnd' style='left: 0; bottom: 0;height: 902px;width: 60vw'>
</div>
</template>
<script>
export default {
name: 'myVideo',
data() {
return {
playWndHeights: 193, //193
playWndWidths: '', //902
initCount: 0, //声明公用变量
pubKey: '',
oWebControl: null,
cameraIndexCodes: "0258c498f9fe49e1938f33eb21ecee3d",
layout: "1x4",
isFull:false, //是否全屏
currentVideoList:[],
}
},
created() {
},
beforeDestroy() {
if (this.oWebControl != null) {
// 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
this.oWebControl.JS_HideWnd()
// 销毁当前播放的视频
this.oWebControl.JS_RequestInterface({ funcName: "destroyWnd" })
// 断开与插件服务连接
this.oWebControl.JS_Disconnect()
}
},
mounted() {
let that = this
// 初始化摄像头
this.$nextTick(() => {
// 首次加载时的到父容器的宽度
this.playWndWidths = window.innerWidth * 0.589
})
// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
window.addEventListener('resize', () => {
if (this.oWebControl != null) {
this.oWebControl.JS_Resize(
that.playWndWidths,
that.playWndHeights
)
}
})
},
methods: {
//父组件调用的方法,传入摄像头编码数组
goplay(videoList){
let that = this
this.currentVideoList = videoList
this.visible = true
this.$nextTick(() => {
if(this.oWebControl == null){
that.initPlugin()
}else{
that.startPreview(that.currentVideoList)
}
})
},
// 创建播放实例
initPlugin() {
let that = this
that.oWebControl = new window.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.oWebControl.JS_SetWindowControlCallback({ // 设置消息回调
cbIntegrationCallBack: function(oData) { // oData 是封装的视频 web 插件回调消息的消息体
console.log(oData.responseMsg, "消息回调----------------------"); // 打印消息体至控制台
// that.hanbleCcallBack(oData)
that.hanbleCcallBack2(oData.responseMsg)
}
});
that.oWebControl.JS_CreateWnd("playWnd", that.playWndWidths, that.playWndHeights).then(function() { //JS_CreateWnd创建视频播放窗口，宽高可设定
that.init(); // 创建播放实例成功后初始化
});
}, function() { // 启动插件服务失败
});
},
cbConnectError: function() { // 创建WebControl实例失败
that.oWebControl = null;
// $("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
that.$refs.playWnd.innerHtml("插件未启动，正在尝试启动，请稍候...");
// WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
that.initCount++;
if (that.initCount < 3) {
setTimeout(function() {
that.initPlugin();
}, 3000)
} else {
// $("#playWnd").html("插件启动失败，请检查插件是否安装！");
that.$refs.playWnd.innerHtml("插件启动失败，请检查插件是否安装！");
}
},
cbConnectClose: function(bNormalClose) {
// 异常断开：bNormalClose = false
// JS_Disconnect正常断开：bNormalClose = true
console.log("cbConnectClose", "错误");
that.oWebControl = null;
//$("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
// that.$refs.playWnd.innerHtml("插件未启动，正在尝试启动，请稍候...");
// that.$message.info("插件未启动，正在尝试启动，请稍候...")
// WebControl.JS_WakeUp("VideoWebPlugin://");
that.initCount++;
if (that.initCount < 3) {
setTimeout(function() {
that.initPlugin();
}, 3000)
} else {
//$("#playWnd").html("插件启动失败，请检查插件是否安装！");
// that.$refs.playWnd.innerHtml("插件启动失败，请检查插件是否安装！");
that.$message.info("插件未安装，请下载后安装！")
that.frontDownload()
}
}
});
},
//处理操作视频回调函数
hanbleCcallBack(oData){
let that = this
if (oData.responseMsg.type == 7) {
//播放窗口双击事件
if(that.isFull == false){
that.clickFullScreen() //显示全屏
}else{
that.clickESCFullScreen() //退出全屏
}
}
if (oData.responseMsg.type == 5) {
//进入全屏,退出全屏
if(oData.responseMsg.msg.result == 1024){
//进入全屏
that.isFull = true
}
if(oData.responseMsg.msg.result == 1025){
//退出全屏
that.isFull = false
}
}
},
hanbleCcallBack2(oData){
let that = this
if (oData.type == 7) {
// this.oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
that.handleLayout2()
that.$emit('showSingeVideo',oData.msg.cameraIndexCode)
}
},
// 下载视频插件
frontDownload() {
var a = document.createElement('a') // 创建一个<a></a>标签
a.href = '//' + window._CONFIG['onlinePreviewDomainURL'] + '/drcp/file/VideoWebPlugin.exe' // 给a标签的href属性值加上地址，注意，这里是绝对路径，不用加 点.
a.download = 'VideoWebPlugin.exe' // 设置下载文件文件名，这里加上.xlsx指定文件类型，pdf文件就指定.fpd即可
a.style.display = 'none' // 障眼法藏起来a标签
document.body.appendChild(a) // 将a标签追加到文档对象中
a.click() // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
a.remove() // 一次性的，用完就删除a标签
},
//视频预览功能
startPreview(data) {
let that = this
console.log(that.cameraIndexCodes)
var cameraIndexCode = that.cameraIndexCodes; //获取输入的监控点编号值，必填
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, "");
that.stopAllPreview()
setTimeout(() => {
let cameraIndexCode1 = ''
let cameraIndexCode2 = ''
let cameraIndexCode3 = ''
let cameraIndexCode4 = ''
let listArr = []
console.log(data)
for (let i = 0; i < data.length; i++) {
if (i == 0) {
cameraIndexCode1 = data[i].indexCode
let obj = {
cameraIndexCode: cameraIndexCode1, //监控点编号
streamMode: streamMode, //主子码流标识
transMode: transMode, //传输协议
gpuMode: gpuMode, //是否开启GPU硬解
wndId: 1 //可指定播放窗口
}
listArr.push(obj)
} else if (i == 1) {
cameraIndexCode2 = data[i].indexCode
let obj = {
cameraIndexCode: cameraIndexCode2, //监控点编号
streamMode: streamMode, //主子码流标识
transMode: transMode, //传输协议
gpuMode: gpuMode, //是否开启GPU硬解
wndId: 2 //可指定播放窗口
}
listArr.push(obj)
} else if (i == 2) {
cameraIndexCode3 = data[i].indexCode
let obj = {
cameraIndexCode: cameraIndexCode3, //监控点编号
streamMode: streamMode, //主子码流标识
transMode: transMode, //传输协议
gpuMode: gpuMode, //是否开启GPU硬解
wndId: 3 //可指定播放窗口
}
listArr.push(obj)
} else if (i == 3) {
cameraIndexCode4 = data[i].indexCode
let obj = {
cameraIndexCode: cameraIndexCode4, //监控点编号
streamMode: streamMode, //主子码流标识
transMode: transMode, //传输协议
gpuMode: gpuMode, //是否开启GPU硬解
wndId: 4 //可指定播放窗口
}
listArr.push(obj)
}
}
that.oWebControl.JS_RequestInterface({
funcName: "startMultiPreviewByCameraIndexCode",
argument: {
list: listArr,
}
}).then(function(oData) {
that.oWebControl.JS_Resize(that.playWndWidths, that.playWndHeights); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
}).catch(err => {
console.log(err)
});
}, 2000)
},
// 设置窗口控制回调
setCallbacks() {
let that = this
that.oWebControl.JS_SetWindowControlCallback({
cbIntegrationCallBack: that.cbIntegrationCallBack
});
},
// 推送消息
cbIntegrationCallBack(oData) {
// showCBInfo(JSON.stringify(oData.responseMsg));
},
//初始化
init() {
let that = this
that.getPubKey(function() {
console.log(window._CONFIG['videoUrl'])
// 请自行修改以下变量值
var appkey = "25939704"; //综合安防管理平台提供的appkey，必填
var secret = that.setEncrypt("5y3JpM3odznu6Jx5b8Hp"); //综合安防管理平台提供的secret，必填
var ip = 127.0.0.1; //综合安防管理平台IP地址，必填
var playMode = 0; //初始播放模式：0-预览，1-回放
var port = 443; //综合安防管理平台端口，若启用HTTPS协议，默认443
var snapDir = "D:\\SnapDir"; //抓图存储路径
var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
var layout = "1x4"; //playMode指定模式的布局
var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
var encryptedFields = 'secret'; //加密字段，默认加密领域为secret
var showToolbar = 0; //是否显示工具栏，0-不显示，非0-显示
var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
var buttonIDs = "0,16,256,257,258"; //自定义工具条按钮
// 请自行修改以上变量值
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: that.layout, //布局
enableHTTPS: enableHTTPS, //是否启用HTTPS协议
encryptedFields: encryptedFields, //加密字段
showToolbar: showToolbar, //是否显示工具栏
showSmart: showSmart, //是否显示智能信息
buttonIDs: buttonIDs,
})
}).then(function(oData) {
that.oWebControl.JS_Resize(that.playWndWidths, that.playWndHeights); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
that.startPreview(that.currentVideoList)
});
});
},
//获取公钥
getPubKey(callback) {
let that = this
that.oWebControl.JS_RequestInterface({
funcName: "getRSAPubKey",
argument: JSON.stringify({
keyLength: 1024
})
}).then(function(oData) {
console.log(oData);
if (oData.responseMsg.data) {
that.pubKey = oData.responseMsg.data;
callback()
}
})
},
//RSA加密
setEncrypt(value) {
let that = this
var encrypt = new JSEncrypt();
encrypt.setPublicKey(that.pubKey);
return encrypt.encrypt(value);
},
//停止全部预览
stopAllPreview() {
this.oWebControl.JS_RequestInterface({
funcName: "stopAllPreview"
}).catch(err => {
console.log(err)
})
},
// 全屏
clickFullScreen() {
this.oWebControl.JS_RequestInterface({
funcName: "setFullScreen"
}).catch(err => {
console.log(err)
})
},
//退出全屏
clickESCFullScreen(){
this.oWebControl.JS_RequestInterface({
funcName: "exitFullScreen"
}).catch(err => {
console.log(err)
})
},
handleLayout2() {
let that = this
this.oWebControl.JS_RequestInterface({
funcName: "setLayout",
argument: JSON.stringify({
layout: "1x4"
})
}).catch(err => {
console.log(err)
})
},
// 标签关闭
close() {
if (this.oWebControl != null) {
this.oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
this.oWebControl.JS_Disconnect().then(function() { // 断开与插件服务连接成功
},
function() { // 断开与插件服务连接失败
});
}
},
}
}
</script>
<style lang='less' scoped>
.playWnd {
position: absolute;
left: 0;
top: 0;
z-index: 10000;
}
.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;
}
</style>使用插件时走过的弯路,总结:
1.注意事件调用的顺序,创建实例时,要有dom,实例创建成功后再调用预览视频方法.
2.将ip改成配置文件
3.页面销毁时记得隐藏视频,断开连接
4.下载插件时遇到跨域问题,解决方案,地址前加//
a.href = '//' + window._CONFIG['onlinePreviewDomainURL'] + '/drcp/file/VideoWebPlugin.exe'
5.下面这行代码,会使浏览器一直弹询问窗口
WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
6.没有双击禁止全屏事件,为了能有双击放大效果,自己获取双击事件重写的.
