<template>
<div style="height: 100%; width: 100%; position: relative;">
<el-button v-if="playText !=''" style="position: absolute;top: 0;right: 0;left: 0; bottom: 0;margin: auto;height: 40px;width: 100px;" type="primary" @click="frontDownload">下载插件</el-button>
<div style="width:800px;height:630px;overflow:hidden;" :style="{'width':Width,'height':Height}">
<div id="playWnd" class="playWnd" ref="playWnd" />
</div>
</div>
</template>
<script>
import moment from "moment";
import JSEncrypt from 'jsencrypt/bin/jsencrypt'
//页面加载时创建播放实例初始化
//声明公用变量
var initCount = 0;
var pubKey = '';
let oWebControl =null;
let playWndWidth = 630;
let playWndHeight = 300;
var that = null;
// 创建WebControl实例与启动插件
function initPlugin () {
oWebControl = new WebControl({
szPluginContainer: "playWnd", //指定容器id
iServicePortStart: 15900, //指定起止端口号，建议使用该值
iServicePortEnd: 15909,
cbConnectSuccess: function () {
// setCallbacks();
//实例创建成功后需要启动服务
oWebControl.JS_StartService("window", {
dllPath: "./VideoPluginConnect.dll"
}).then(function () {
oWebControl.JS_SetWindowControlCallback({ // 设置消息回调
cbIntegrationCallBack: cbIntegrationCallBack
});
oWebControl.JS_CreateWnd("playWnd", playWndWidth,playWndHeight).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定
// that.playText = ''
console.log("JS_CreateWnd success");
init(); //创建播放实例成功后初始化
});
}, function () {
});
},
cbConnectError: function () {
console.log("cbConnectError");
oWebControl = null;
that.playText = '插件未启动，正在尝试启动，请稍候...'
WebControl.JS_WakeUp("VideoWebPlugin://"); //程序未启动时执行error函数，采用wakeup来启动程序
initCount ++;
if (initCount < 3) {
setTimeout(function () {
initPlugin();
}, 3000)
} else {
that.playText = '插件启动失败，请检查插件是否安装！'
}
},
cbConnectClose: function () {
console.log("cbConnectClose");
oWebControl = null;
}
});
}
// 推送消息
function cbIntegrationCallBack(oData) {
console.log(JSON.stringify(oData.responseMsg));
}
//初始化
function init()
{
getPubKey(function () {
////////////////////////////////// 请自行修改以下变量值 ////////////////////////////////////
var appkey = "xxx"; //综合安防管理平台提供的appkey，必填
var secret = setEncrypt("xxxx"); //综合安防管理平台提供的secret，必填
var ip = "1.1.1.1"; //综合安防管理平台IP地址，必填，需要真实的ip
var playMode = 1; //初始播放模式：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"; //自定义工具条按钮
//var reconnectTimes = 2; // 重连次数，回放异常情况下有效
//var reconnectTime = 4; // 每次重连的重连间隔 >= reconnectTime
////////////////////////////////// 请自行修改以上变量值 ////////////////////////////////////
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 //自定义工具条按钮
//reconnectTimes：reconnectTimes, //重连次数
//reconnectDuration：reconnectTime //重连间隔
})
}).then(function (oData) {
oWebControl.JS_Resize(playWndWidth,playWndHeight); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
// that.playback(that.code)
});
});
}
// 获取公钥
function getPubKey (callback) {
oWebControl.JS_RequestInterface({
funcName: "getRSAPubKey",
argument: JSON.stringify({
keyLength: 1024
})
}).then(function (oData) {
console.log(oData);
if (oData.responseMsg.data) {
pubKey = oData.responseMsg.data;
callback()
}
})
}
// RSA加密
function setEncrypt (value) {
var encrypt = new JSEncrypt();
encrypt.setPublicKey(pubKey);
return encrypt.encrypt(value);
}
// // 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
window.onresize=function () {
if (oWebControl != null) {
oWebControl.JS_Resize(playWndWidth,playWndHeight);
setWndCover();
}
};
// // 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
window.onscroll=function () {
if (oWebControl != null) {
oWebControl.JS_Resize(playWndWidth,playWndHeight);
setWndCover();
}
};
// 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
function setWndCover() {
var iWidth = 500;
var iHeight = 300;
var oDivRect = that.$refs.playWnd.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 > 1000) ? 1000 : iCoverLeft;
iCoverTop = (iCoverTop > 630) ? 630 : iCoverTop;
iCoverRight = (iCoverRight > 1000) ? 1000 : iCoverRight;
iCoverBottom = (iCoverBottom > 630) ? 630 : iCoverBottom;
oWebControl.JS_RepairPartWindow(0, 0, 1001, 630); // 多1个像素点防止还原后边界缺失一个像素条
if (iCoverLeft != 0) {
oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 630);
}
if (iCoverTop != 0) {
oWebControl.JS_CuttingPartWindow(0, 0, 1001, iCoverTop); // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
}
if (iCoverRight != 0) {
oWebControl.JS_CuttingPartWindow(1000 - iCoverRight, 0, iCoverRight, 630);
}
if (iCoverBottom != 0) {
oWebControl.JS_CuttingPartWindow(0, 630 - iCoverBottom, 1000, iCoverBottom);
}
}
export default {
props: ['mode', 'code','StyleObj','Time'],
components: {},
data() {
return {
playText: '',
startTime:'',
endTime:'',
// number:"34020000001320000018",
number:"2b8202412fa74d938e96740ea1dbaedd",
Width:0,
Height:0,
count:0
};
},
computed: {
},
beforeDestroy(){
this.$bus.$off('playback')
},
methods: {
frontDownload() {
var a = document.createElement('a') // 创建一个<a></a>标签
a.href = process.env.VUE_APP_Download + 'VideoWebPlugin.exe'
a.download = '监控插件.zip' // 设置下载文件文件名，这里加上.xlsx指定文件类型，pdf文件就指定.fpd即可
a.style.display = 'none' // 障眼法藏起来a标签
document.body.appendChild(a) // 将a标签追加到文档对象中
a.click() // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
a.remove() // 一次性的，用完就删除a标签
},
// 停止回放
stopAllPlayback(){
oWebControl.JS_RequestInterface({
funcName: "stopAllPlayback"
})
},
playback(e){
var startTimeStamp = new Date(this.startTime.replace('-', '/').replace('-', '/')).getTime(); //回放开始时间戳，必填
var endTimeStamp = new Date(this.endTime.replace('-', '/').replace('-', '/')).getTime();
oWebControl.JS_RequestInterface({
funcName: "startPlayback",
argument: JSON.stringify({
cameraIndexCode: e,
// cameraIndexCode: '579f7926668349409f64604c47bcbf92', //监控点编号
startTimeStamp: Math.floor(startTimeStamp / 1000).toString(), //录像查询开始时间戳，单位：秒
endTimeStamp: Math.floor(endTimeStamp / 1000).toString(), //录像结束开始时间戳，单位：秒
recordLocation: 1, //录像存储类型：0-中心存储，1-设备存储
transMode: 1, //传输协议：0-UDP，1-TCP
gpuMode: 0, //是否启用GPU硬解，0-不启用，1-启用
wndId:0 //可指定播放窗口
})
}).then((oData) => {
console.log(oData)
})
},
},
created() {
that = this;
if(this.StyleObj){
this.Width = this.StyleObj.W?this.StyleObj.W+'px':'630px';
this.Height = this.StyleObj.H?this.StyleObj.H+'px':'630px';
playWndWidth = this.StyleObj.W?this.StyleObj.W: 630;
playWndHeight = this.StyleObj.H?this.StyleObj.H: 630;
}
initPlugin(that);
},
beforeDestroy() {
if (oWebControl != null){
oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避插件窗口滞后于浏览器消失问题
oWebControl.JS_Disconnect().then(function(){}, function() {});
}
},
mounted() {
that = this;
let M1 = moment(this.Time).subtract(5, "m").format("YYYY-MM-DD HH:mm:ss")
// 获取指定时间后5分钟
let M2 = moment(this.Time).subtract(-5, "m").format("YYYY-MM-DD HH:mm:ss")
this.startTime = M1;
this.endTime = M2;
setTimeout(()=>{
that.playback(that.code)
},500)
},
}
</script>
<style scoped>
.playWnd {
width: 100%;
height: 100%;
background: #000;
}
</style>
*** 需要注意的是视频回放最多支持初始化传入7天内的时间段查看，（必须在初始化的时候出入要查看的时间段，否则不能查看其他时间段内的视频）
