视频插件修改。
This commit is contained in:
wangwei
parent
3a4c37cc41
commit
7bf371fb08
|
|
@ -69,6 +69,12 @@ var CONFIGITEM = {
|
|||
{ channelId: '37028528001321820196' },
|
||||
{ channelId: '37028528001321820201' }
|
||||
],
|
||||
channelAreaList: [
|
||||
'37020220001321113922'
|
||||
],
|
||||
channelsArea: [
|
||||
{ channelId: '37020220001321113922'},
|
||||
],
|
||||
name_32:
|
||||
'General_DSS-LightWeight-Client_x86_V2.1.0.2110.R.20211106.exe',
|
||||
url_32:
|
||||
|
|
|
|||
|
|
@ -0,0 +1,291 @@
|
|||
<!--
|
||||
* @Author: hisense.wuhongjian
|
||||
* @Date: 2021-08-09 15:54:31
|
||||
* @LastEditors: hisense.wuhongjian
|
||||
* @LastEditTime: 2022-01-14 21:24:55
|
||||
* @Description: 视频播放组件
|
||||
-->
|
||||
<template>
|
||||
<div class="video-play">
|
||||
<div id="dom2" class="dh-view" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
props: {
|
||||
ws: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
channelIds: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
channelList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
splitNum: {
|
||||
type: Number,
|
||||
default: 4,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// ws: DHWsInstance1,
|
||||
showConfigVideoFlag: false,
|
||||
activePanel: "key1",
|
||||
isLogin: false,
|
||||
loginType: "1",
|
||||
loginIp: _global.config.loginInfo.loginIp,
|
||||
userName: _global.config.loginInfo.userName,
|
||||
userPwd: _global.config.loginInfo.userPwd,
|
||||
loginPort: _global.config.loginInfo.loginPort,
|
||||
// ctrlType: 'realMonitorUI', // 带监控树
|
||||
ctrlType: "playerWin", // 带监控树
|
||||
ctrlList: [
|
||||
{
|
||||
value: "ctrl1",
|
||||
label: "控件1",
|
||||
},
|
||||
{
|
||||
value: "ctrl2",
|
||||
label: "控件2",
|
||||
},
|
||||
{
|
||||
value: "ctrl3",
|
||||
label: "控件3",
|
||||
},
|
||||
],
|
||||
splitList: [
|
||||
{
|
||||
value: 1,
|
||||
label: "1 * 1",
|
||||
},
|
||||
|
||||
{
|
||||
value: 4,
|
||||
label: "2 * 2",
|
||||
},
|
||||
{
|
||||
value: 9,
|
||||
label: "3 * 3",
|
||||
},
|
||||
],
|
||||
displayModeList: [
|
||||
{
|
||||
value: 1,
|
||||
label: "播放器预览模式",
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: "播放器回放模式",
|
||||
},
|
||||
],
|
||||
ctrl: "ctrl2",
|
||||
// splitNum: 4,
|
||||
displayMode: 1,
|
||||
displayTimeRange: [],
|
||||
recordPath: "C:\\DSS LightWeight\\DSS LightWeight Client\\Record\\",
|
||||
downloadName: "",
|
||||
downTimeRange: [],
|
||||
downloadFormat: 0,
|
||||
downloadFormatList: [
|
||||
{
|
||||
value: 0,
|
||||
label: "dav",
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
label: "avi",
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: "mp4",
|
||||
},
|
||||
],
|
||||
downloadSource: 3,
|
||||
downloadSourceList: [
|
||||
{
|
||||
value: 3,
|
||||
label: "中心录像",
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: "设备录像",
|
||||
},
|
||||
],
|
||||
showDownloadStreamType: false,
|
||||
downloadStreamType: 1,
|
||||
downloadStreamTypeList: [
|
||||
{
|
||||
value: 1,
|
||||
label: "主码流",
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: "辅码流",
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: "三码流",
|
||||
},
|
||||
],
|
||||
downloadIsShow: true,
|
||||
downloadIsShowList: [
|
||||
{
|
||||
value: true,
|
||||
label: "是",
|
||||
},
|
||||
{
|
||||
value: false,
|
||||
label: "否",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {},
|
||||
mounted() {
|
||||
// this.login();
|
||||
console.log("数组是否有变化", this.channelList);
|
||||
setTimeout(() => {
|
||||
this.create();
|
||||
}, 1000);
|
||||
},
|
||||
destroyed() {
|
||||
console.log('销毁前钩子');
|
||||
this.destroy();
|
||||
},
|
||||
activated(){
|
||||
setTimeout(() => {
|
||||
this.create();
|
||||
}, 1000);
|
||||
},
|
||||
deactivated(){
|
||||
this.destroy();
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* @description: 打开视频配置弹窗
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
configVideo() {
|
||||
console.log("打开视频配置弹窗");
|
||||
// this.showConfigVideoFlag = true;
|
||||
this.$emit("videoSetting", true);
|
||||
},
|
||||
refreshVideo() {
|
||||
this.$emit("refreshVideo", true);
|
||||
},
|
||||
loginOut() {
|
||||
this.ws.logout({
|
||||
loginIp: _global.config.loginInfo.loginIp,
|
||||
});
|
||||
},
|
||||
create() {
|
||||
const params = [
|
||||
{
|
||||
ctrlType: this.ctrlType,
|
||||
ctrlCode: this.ctrl,
|
||||
ctrlProperty: {
|
||||
displayMode: this.displayMode,
|
||||
splitNum: this.splitNum,
|
||||
channelList: this.channelList,
|
||||
},
|
||||
visible: true,
|
||||
domId: "dom2",
|
||||
},
|
||||
];
|
||||
this.ws.createCtrl(params);
|
||||
this.ws.on("createCtrlResult", (res) => {
|
||||
console.info("插件返回信息12345", res);
|
||||
// this.realTimeVideo();
|
||||
});
|
||||
},
|
||||
login() {
|
||||
// 调用登录接口
|
||||
this.ws.login({
|
||||
loginIp: _global.config.loginInfo.loginIp,
|
||||
loginPort: _global.config.loginInfo.loginPort,
|
||||
userName: _global.config.loginInfo.userName,
|
||||
userPwd: _global.config.loginInfo.userPwd,
|
||||
// userPwd: this.loginType == "1" ? this.userPwd : "",
|
||||
// token: this.loginType == "2" ? this.token : "",
|
||||
});
|
||||
this.ws.on("loginState", (res) => {
|
||||
this.isLogin = res;
|
||||
if (res) {
|
||||
console.info("登陆成功");
|
||||
this.activePanel = "key2";
|
||||
// this.create();
|
||||
} else {
|
||||
console.info("登陆失败");
|
||||
}
|
||||
});
|
||||
},
|
||||
setVisible() {
|
||||
// 调用设置控件显隐接口
|
||||
if (!this.isLogin) {
|
||||
// this.$message.info("正在登陆客户端，请稍等......");
|
||||
return false;
|
||||
}
|
||||
const params = [
|
||||
{
|
||||
ctrlCode: this.ctrl,
|
||||
visible: !this.ws.ctrls.find((i) => {
|
||||
if (i.ctrlCode === this.ctrl) {
|
||||
return i;
|
||||
}
|
||||
}).visible,
|
||||
},
|
||||
];
|
||||
this.ws.setCtrlVisible(params);
|
||||
},
|
||||
realTimeVideo() {
|
||||
const params = {
|
||||
ctrlCode: this.ctrl,
|
||||
channelIds: this.channelIds,
|
||||
};
|
||||
console.log("已监听到变化,替换播放内容", params);
|
||||
this.ws.openCtrlPreview(params);
|
||||
},
|
||||
destroy() {
|
||||
// 调用销毁控件接口
|
||||
// if (!this.isLogin) {
|
||||
// this.$message.info("正在登陆客户端，请稍等......");
|
||||
// return false;
|
||||
// }
|
||||
const ctrls = this.ws.ctrls.map((i) => {
|
||||
if (i.ctrlCode === this.ctrl) {
|
||||
return i.ctrlCode;
|
||||
}
|
||||
});
|
||||
console.log("销毁的插件名称", ctrls);
|
||||
this.ws.destroyCtrl(ctrls);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.video-play {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: solid 1px #2ab1e9;
|
||||
.dh-view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: darkgrey;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -17,7 +17,10 @@
|
|||
</span>
|
||||
</div>
|
||||
<div class="video-List">
|
||||
<video-play v-if="openVideo" :channel-id="channelCode"></video-play>
|
||||
<video-control-play
|
||||
:ws="ws"
|
||||
:channel-ids="channelIds"
|
||||
:channel-list="channelList"></video-control-play>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -26,22 +29,35 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
const DHWsInstance = DHWs.getInstance({
|
||||
reConnectCount: 2,
|
||||
connectionTimeout: 30 * 1000,
|
||||
messageEvents: {
|
||||
loginState() {
|
||||
console.log('aaaa');
|
||||
}
|
||||
}
|
||||
});
|
||||
import bus from "@/views/layout/bus";
|
||||
import * as echarts from "echarts";
|
||||
import VideoPlay from './VideoPlay'
|
||||
import VideoControlPlay from './VideoControlPlay'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ws: DHWsInstance,
|
||||
openVideo:true,
|
||||
channelCode: ['37020220001321113922'],
|
||||
channelIds: _global.config.loginInfo.channelAreaList || ['37020220001321113922'], // 字符串数组
|
||||
channelList: _global.config.loginInfo.channelsArea || [{ channelId: '37020220001321113922' }],
|
||||
videoVisible: false,
|
||||
};
|
||||
},
|
||||
components: {VideoPlay},
|
||||
components: {VideoPlay,VideoControlPlay},
|
||||
created() {},
|
||||
mounted() {
|
||||
|
||||
this.login();
|
||||
},
|
||||
methods: {
|
||||
//打开视频列表
|
||||
|
|
@ -49,6 +65,75 @@ export default {
|
|||
this.videoVisible=!this.videoVisible
|
||||
this.$emit("IsShowLideoVisible",this.videoVisible);
|
||||
},
|
||||
// 视频插件相关函数
|
||||
login() {
|
||||
// 调用登录接口
|
||||
this.ws.detectConnectQt().then(res => {
|
||||
if (res) {
|
||||
// 连接客户端成功
|
||||
this.ws.login({
|
||||
loginIp: _global.config.loginInfo.loginIp,
|
||||
loginPort: _global.config.loginInfo.loginPort,
|
||||
userName: _global.config.loginInfo.userName,
|
||||
userPwd: _global.config.loginInfo.userPwd,
|
||||
https: 1
|
||||
});
|
||||
this.$message.info('登录中...');
|
||||
this.ws.on('loginState', res => {
|
||||
// this.isLogin = res;
|
||||
if (res) {
|
||||
this.$message.success('登录成功');
|
||||
// this.activePanel = 'key2';
|
||||
} else {
|
||||
this.$message.info('登录失败');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// 连接客户端失败
|
||||
// this.$message.info('请重新安装客户端');
|
||||
this.$confirm('未检测到相关视频插件，是否进行下载？', '提示', {
|
||||
customClass: 'fire3-message-box',
|
||||
confirmButtonClass: 'fire3-button',
|
||||
cancelButtonClass: 'fire3-button',
|
||||
confirmButtonText: '下载',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
const agent = this.getPCNum();
|
||||
if (agent === 32) {
|
||||
// 64位操作系统
|
||||
this.downloadFile(
|
||||
_global.config.loginInfo.name_32,
|
||||
_global.config.loginInfo.url_32
|
||||
);
|
||||
} else {
|
||||
// 32位操作系统
|
||||
this.downloadFile(
|
||||
_global.config.loginInfo.name_64,
|
||||
_global.config.loginInfo.url_64
|
||||
);
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
});
|
||||
},
|
||||
downloadFile(name, url) {
|
||||
const alink = document.createElement('a');
|
||||
alink.download = name;// 文件名,大部分浏览器兼容,IE10及以下不兼容
|
||||
alink.href = url;// 创建 url地址
|
||||
alink.click(); // 自动点击
|
||||
},
|
||||
getPCNum() {
|
||||
const agent = navigator.userAgent.toLowerCase();
|
||||
if (agent.indexOf('win32') >= 0 || agent.indexOf('wow32') >= 0) {
|
||||
return 32;
|
||||
}
|
||||
if (agent.indexOf('win64') >= 0 || agent.indexOf('wow64') >= 0) {
|
||||
return 64;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue