视频插件修改。
This commit is contained in:
wangwei
parent
3a4c37cc41
commit
7bf371fb08
|
|
@ -69,6 +69,12 @@ var CONFIGITEM = {
|
||||||
{ channelId: '37028528001321820196' },
|
{ channelId: '37028528001321820196' },
|
||||||
{ channelId: '37028528001321820201' }
|
{ channelId: '37028528001321820201' }
|
||||||
],
|
],
|
||||||
|
channelAreaList: [
|
||||||
|
'37020220001321113922'
|
||||||
|
],
|
||||||
|
channelsArea: [
|
||||||
|
{ channelId: '37020220001321113922'},
|
||||||
|
],
|
||||||
name_32:
|
name_32:
|
||||||
'General_DSS-LightWeight-Client_x86_V2.1.0.2110.R.20211106.exe',
|
'General_DSS-LightWeight-Client_x86_V2.1.0.2110.R.20211106.exe',
|
||||||
url_32:
|
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>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="video-List">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -26,22 +29,35 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
const DHWsInstance = DHWs.getInstance({
|
||||||
|
reConnectCount: 2,
|
||||||
|
connectionTimeout: 30 * 1000,
|
||||||
|
messageEvents: {
|
||||||
|
loginState() {
|
||||||
|
console.log('aaaa');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
import bus from "@/views/layout/bus";
|
import bus from "@/views/layout/bus";
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
import VideoPlay from './VideoPlay'
|
import VideoPlay from './VideoPlay'
|
||||||
|
import VideoControlPlay from './VideoControlPlay'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
ws: DHWsInstance,
|
||||||
openVideo:true,
|
openVideo:true,
|
||||||
channelCode: ['37020220001321113922'],
|
channelCode: ['37020220001321113922'],
|
||||||
|
channelIds: _global.config.loginInfo.channelAreaList || ['37020220001321113922'], // 字符串数组
|
||||||
|
channelList: _global.config.loginInfo.channelsArea || [{ channelId: '37020220001321113922' }],
|
||||||
videoVisible: false,
|
videoVisible: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
components: {VideoPlay},
|
components: {VideoPlay,VideoControlPlay},
|
||||||
created() {},
|
created() {},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.login();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
//打开视频列表
|
//打开视频列表
|
||||||
|
|
@ -49,6 +65,75 @@ export default {
|
||||||
this.videoVisible=!this.videoVisible
|
this.videoVisible=!this.videoVisible
|
||||||
this.$emit("IsShowLideoVisible",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