333 lines
10 KiB
Vue
333 lines
10 KiB
Vue
<template>
|
||
|
||
<!-- 绑定父组件class：videoWindow -->
|
||
<div
|
||
:id="playWndId"
|
||
ref="video-preview">
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
/* eslint-disable */
|
||
|
||
export default {
|
||
name: 'video-preview',
|
||
data() {
|
||
return {
|
||
width: 0,
|
||
height: 0,
|
||
secret: '',
|
||
oWebControl: null,
|
||
initCount: 0,
|
||
appkey: import.meta.env.VITE_APP_HAIKANG_APPKEY,
|
||
ip: import.meta.env.VITE_APP_HAIKANG_IP,
|
||
port: parseInt(import.meta.env.VITE_APP_HAIKANG_PORT),
|
||
playMode: 1,
|
||
pubKey: '',
|
||
isInit: false
|
||
}
|
||
},
|
||
props: {
|
||
layout: {
|
||
type: String,
|
||
default: () => '1x1'
|
||
},
|
||
cameraIndexCode: {},
|
||
timeOut: {
|
||
type: Number,
|
||
default: () => 500
|
||
},
|
||
videoWindowClassName: {
|
||
type: String,
|
||
default: "videoWindow",
|
||
required: false
|
||
},
|
||
playWndId: {
|
||
type: String,
|
||
default: "playWnd",
|
||
required: false
|
||
}
|
||
},
|
||
mounted() {
|
||
var that = this
|
||
this.$nextTick(function() {
|
||
that.windowChange()
|
||
setTimeout(() => {
|
||
that.initPlugin()
|
||
}, that.timeOut)
|
||
window.addEventListener('resize', function() {
|
||
that.onResize()
|
||
})
|
||
})
|
||
},
|
||
destroyed() {
|
||
this.uninit()
|
||
},
|
||
methods: {
|
||
onResize(change=true){
|
||
let that = this
|
||
if (that.oWebControl) {
|
||
if(change){
|
||
that.windowChange()
|
||
}
|
||
that.oWebControl.JS_Resize(that.width, that.height)
|
||
}
|
||
},
|
||
wait (fn, timeout, tick) {
|
||
timeout = timeout || 5000;
|
||
tick = tick || 250;
|
||
var timeoutTimer = null;
|
||
var execTimer = null;
|
||
|
||
return new Promise(function(resolve, reject) {
|
||
|
||
timeoutTimer = setTimeout(function() {
|
||
clearTimeout(execTimer);
|
||
reject(new Error('polling fail because timeout'));
|
||
}, timeout);
|
||
|
||
tickHandler(fn);
|
||
|
||
function tickHandler(fn) {
|
||
var ret = fn();
|
||
if (!ret) {
|
||
execTimer = setTimeout(function() {
|
||
tickHandler(fn);
|
||
}, tick)
|
||
} else {
|
||
clearTimeout(timeoutTimer);
|
||
resolve();
|
||
}
|
||
}
|
||
});
|
||
},
|
||
// 初始化plugin
|
||
initPlugin() {
|
||
let that = this
|
||
this.oWebControl = new WebControl({
|
||
szPluginContainer: this.playWndId,
|
||
iServicePortStart: 15900,
|
||
iServicePortEnd: 15909,
|
||
szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
|
||
cbConnectSuccess: function() {
|
||
that.setCallbacks();
|
||
//实例创建成功后需要启动服务
|
||
that.oWebControl
|
||
.JS_StartService("window", {
|
||
dllPath: "./VideoPluginConnect.dll"
|
||
})
|
||
.then(
|
||
function() {
|
||
that.oWebControl
|
||
.JS_CreateWnd(that.playWndId, that.width, that.height)
|
||
.then(function() {
|
||
//JS_CreateWnd创建视频播放窗口，宽高可设定
|
||
that.init(); //创建播放实例成功后初始化
|
||
});
|
||
},
|
||
function() {}
|
||
);
|
||
},
|
||
cbConnectError: function() {
|
||
that.oWebControl = null;
|
||
$("#" + that.playWndId).html("插件未启动，正在尝试启动，请稍候...");
|
||
WebControl.JS_WakeUp("VideoWebPlugin://"); //程序未启动时执行error函数，采用wakeup来启动程序
|
||
initCount++;
|
||
if (initCount < 3) {
|
||
setTimeout(function() {
|
||
that.initPlugin();
|
||
}, 2000);
|
||
} else {
|
||
$("#" + that.playWndId).html("插件启动失败，请检查插件是否安装！");
|
||
}
|
||
},
|
||
cbConnectClose: function(bNormalClose) {
|
||
that.oWebControl = null
|
||
}
|
||
})
|
||
},
|
||
init() {
|
||
|
||
let that = this;
|
||
that.getPubKey(function() {
|
||
////////////////////////////////// 请自行修改以下变量值 ////////////////////////////////////
|
||
var snapDir = "d:\\SnapDir"; //抓图存储路径
|
||
var videoDir = "d:\\VideoDir"; //紧急录像或录像剪辑存储路径
|
||
var layout = "1x1"; //playMode指定模式的布局
|
||
var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，是为1，否为0
|
||
var encryptedFields = "secret"; //加密字段，默认加密领域为secret
|
||
var showToolbar = 1; //是否显示工具栏，0-不显示，非0-显示
|
||
var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
|
||
var buttonIDs = "0,16,256,257,258,259,260,512,515,516,517,768,769"; //自定义工具条按钮
|
||
////////////////////////////////// 请自行修改以上变量值 ////////////////////////////////////
|
||
that.secret = that.setEncrypt(import.meta.env.VITE_APP_HAIKANG_SECRET);
|
||
that.oWebControl
|
||
.JS_RequestInterface({
|
||
funcName: "init",
|
||
argument: JSON.stringify({
|
||
appkey: that.appkey, //API网关提供的appkey
|
||
secret: that.secret, //API网关提供的secret
|
||
ip: that.ip, //API网关IP地址
|
||
playMode: that.playMode, //播放模式（决定显示预览还是回放界面）
|
||
port: that.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.width, that.height); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
|
||
});
|
||
});
|
||
},
|
||
// 获取公钥
|
||
getPubKey(callback) {
|
||
var that = this
|
||
this.oWebControl.JS_RequestInterface({
|
||
funcName: 'getRSAPubKey',
|
||
argument: JSON.stringify({
|
||
keyLength: 1024
|
||
})
|
||
}).then(function(oData) {
|
||
if (oData.responseMsg.data) {
|
||
that.pubKey = oData.responseMsg.data
|
||
that.isInit = true
|
||
callback()
|
||
}
|
||
})
|
||
},
|
||
// 设置窗口控制回调
|
||
setCallbacks() {
|
||
let that = this;
|
||
that.oWebControl.JS_SetWindowControlCallback({
|
||
cbIntegrationCallBack: function (oData) {
|
||
if(oData.responseMsg.msg.result === 816){
|
||
that.$emit('close')
|
||
}
|
||
}
|
||
});
|
||
},
|
||
// RSA加密
|
||
setEncrypt(value) {
|
||
let that = this;
|
||
var encrypt = new JSEncrypt();
|
||
encrypt.setPublicKey(that.pubKey);
|
||
return encrypt.encrypt(value);
|
||
},
|
||
ready() {
|
||
let that = this;
|
||
return new Promise((resolve, reject) => {
|
||
this.wait(
|
||
function() {
|
||
return that.isInit;
|
||
},
|
||
6000 + that.timeOut || 500,
|
||
100
|
||
)
|
||
.then(function() {
|
||
resolve();
|
||
})
|
||
.catch(function(err) {
|
||
// that.$Message.info({
|
||
// content: "视频控件加载超时，请检查:" + err,
|
||
// duration: 3
|
||
// });
|
||
// reject("视频控件加载超时，请检查:" + err);
|
||
});
|
||
});
|
||
},
|
||
|
||
playBack(codes, startTime, endTime) {
|
||
let that = this;
|
||
const startTimeStamp = this.timrStr2Stamp(startTime) + "";
|
||
const endTimeStamp = this.timrStr2Stamp(endTime) + "";
|
||
var recordLocation = 0; //录像存储位置：0-中心存储，1-设备存储
|
||
var transMode = 1; //传输协议：0-UDP，1-TCP
|
||
var gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
|
||
var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
|
||
that.oWebControl
|
||
.JS_RequestInterface({
|
||
funcName: "startPlayback",
|
||
argument: JSON.stringify({
|
||
cameraIndexCode: codes, //监控点编号
|
||
startTimeStamp: startTimeStamp, //录像查询开始时间戳，单位：秒
|
||
endTimeStamp: endTimeStamp, //录像结束开始时间戳，单位：秒
|
||
recordLocation: recordLocation, //录像存储类型：0-中心存储，1-设备存储
|
||
transMode: transMode, //传输协议：0-UDP，1-TCP
|
||
gpuMode: gpuMode, //是否启用GPU硬解，0-不启用，1-启用
|
||
wndId: wndId //可指定播放窗口
|
||
})
|
||
})
|
||
.then(res => {
|
||
console.log("回放的参数", res);
|
||
});
|
||
},
|
||
timrStr2Stamp(str) {
|
||
let date = new Date(str);
|
||
let time = date.getTime();
|
||
return time / 1000;
|
||
},
|
||
stopPlayBack() {
|
||
this.oWebControl.JS_RequestInterface({
|
||
funcName: "stopAllPlayback"
|
||
});
|
||
},
|
||
uninit() {
|
||
console.log(999);
|
||
|
||
let that = this;
|
||
if (that.oWebControl != null) {
|
||
that.oWebControl.JS_RequestInterface({
|
||
funcName: "stopAllPreview"
|
||
});
|
||
that.oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
|
||
that.oWebControl.JS_Disconnect().then(
|
||
function() {
|
||
// 断开与插件服务连接成功
|
||
},
|
||
function() {
|
||
// 断开与插件服务连接失败
|
||
console.log("oWebControl close error");
|
||
}
|
||
);
|
||
that.oWebControl = null;
|
||
}
|
||
},
|
||
windowChange() {
|
||
|
||
//列表选项在下方
|
||
this.width = document.getElementsByClassName(
|
||
this.videoWindowClassName
|
||
)[0].scrollWidth;
|
||
var btnHeight = 0;
|
||
if (document.getElementsByClassName("playBtn").length > 0) {
|
||
btnHeight = document.getElementsByClassName("playBtn")[0].clientHeight;
|
||
this.height =
|
||
document.getElementsByClassName(this.videoWindowClassName)[0]
|
||
.scrollHeight -
|
||
btnHeight -
|
||
10;
|
||
} else {
|
||
this.height = document.getElementsByClassName(
|
||
this.videoWindowClassName
|
||
)[0].scrollHeight;
|
||
}
|
||
if (document.getElementById(this.playWndId)) {
|
||
document.getElementById(this.playWndId).style.height = this.height + "px";
|
||
document.getElementById(this.playWndId).style.width = this.width + "px";
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
|
||
</style>
|