视频对接
This commit is contained in:
parent
13678f98b1
commit
7870bcc510
|
|
@ -8,14 +8,14 @@
|
|||
<link rel="icon" href="<%= BASE_URL %>canteen2.ico">
|
||||
<title><%= webpackConfig.name %></title>
|
||||
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
|
||||
<script src="./codebase/jsPlugin-1.2.0.min.js"></script>
|
||||
<script src="./codebase/jquery-3.6.4.min.js"></script>
|
||||
<script src="./codebase/jsPlugin-1.2.0.min.js"></script>
|
||||
<script src="./codebase/encryption/AES.js"></script>
|
||||
<script src="./monitor/codebase/jsPlugin-1.2.0.min.js"></script>
|
||||
<script src="./monitor/codebase/jquery-3.6.4.min.js"></script>
|
||||
<script src="./monitor/codebase/jsPlugin-1.2.0.min.js"></script>
|
||||
<script src="./monitor/codebase/encryption/AES.js"></script>
|
||||
<!-- <script src="./codebase/transform/SystemTransform.js"></script> -->
|
||||
<script src="./codebase/encryption/cryptico.min.js"></script>
|
||||
<script src="./codebase/encryption/crypto-3.1.2.min.js"></script>
|
||||
<script src="./codebase/webVideoCtrl.js"></script>
|
||||
<script src="./monitor/codebase/encryption/cryptico.min.js"></script>
|
||||
<script src="./monitor/codebase/encryption/crypto-3.1.2.min.js"></script>
|
||||
<script src="./monitor/codebase/webVideoCtrl.js"></script>
|
||||
<!-- <script src="./codebase/playctrl/Decoder.js"></script> -->
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -34,13 +34,13 @@ var type = urlParams.get('type');
|
|||
console.log(type)
|
||||
$(function () {
|
||||
var height = '350';
|
||||
var width = $("body").width();
|
||||
var width = $("body").width();
|
||||
if(type=="1"){
|
||||
width = $("body").width();
|
||||
width = $("body").width() * 0.5;
|
||||
height = '350';
|
||||
}
|
||||
if(type=="2"){
|
||||
width = $("body").width();
|
||||
width = $("body").width() * 0.5;
|
||||
height = '600';
|
||||
}
|
||||
// <20><>ʼ<EFBFBD><CABC><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="header" @click="getData"><span>历史视频</span></div>
|
||||
<div class="contant">
|
||||
<div style="width: 80%;height: 400px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px;" >
|
||||
<iframe src="iframe.html" ref="videoIframe1" frameborder="0" style="width: 100%;height: 100%;"></iframe>
|
||||
<iframe src="monitor/iframe.html" ref="videoIframe1" frameborder="0" style="width: 100%;height: 100%;"></iframe>
|
||||
<span style="position: absolute;left: 0.2rem;bottom:0.2rem;font-size: 14px;color: aliceblue;">{{deviceName1}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -14,26 +14,11 @@
|
|||
></el-tree>
|
||||
</div>
|
||||
<div class="contant">
|
||||
<div style="width: 45%;height: 350px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px;">
|
||||
<div style="width: 100%;height: 100%;position: fixed;" @click="chosenWindow('1')"></div>
|
||||
<iframe src="iframe.html?type=1" ref="videoIframe1" frameborder="0" style="width: 100%;height: 100%;"></iframe>
|
||||
<div style="width: 100%;height: 700px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px;">
|
||||
<!-- <div style="width: 100%;height: 100%;position: fixed;"></div> -->
|
||||
<iframe src="monitor/iframe.html?type=1" ref="videoIframe1" frameborder="0" style="width: 100%;height: 700px;"></iframe>
|
||||
<span style="position: absolute;left: 0.2rem;bottom:0.2rem;font-size: 14px;color: aliceblue;">{{deviceName1}}</span>
|
||||
</div>
|
||||
<div style="width: 45%;height: 350px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px">
|
||||
<div style="width: 100%;height: 100%;position: fixed;" @click="chosenWindow('2')"></div>
|
||||
<iframe src="iframe.html?type=1" ref="videoIframe2" frameborder="0" style="width: 100%;height: 100%;"></iframe>
|
||||
<span style="position: absolute;left: 0.2rem;bottom:0.2rem;font-size: 14px;color: aliceblue;">{{deviceName2}}</span>
|
||||
</div>
|
||||
<div style="width: 45%;height: 350px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px">
|
||||
<div style="width: 100%;height: 100%;position: fixed;" @click="chosenWindow('3')"></div>
|
||||
<iframe src="iframe.html?type=1" ref="videoIframe3" frameborder="0" style="width: 100%;height: 100%;"></iframe>
|
||||
<span style="position: absolute;left: 0.2rem;bottom:0.2rem;font-size: 14px;color: aliceblue;">{{deviceName3}}</span>
|
||||
</div>
|
||||
<div style="width: 45%;height: 350px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px">
|
||||
<div style="width: 100%;height: 100%;position: fixed;" @click="chosenWindow('4')"></div>
|
||||
<iframe src="iframe.html?type=1" ref="videoIframe4" frameborder="0" style="width: 100%;height: 100%;"></iframe>
|
||||
<span style="position: absolute;left: 0.2rem;bottom:0.2rem;font-size: 14px;color: aliceblue;">{{deviceName4}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
|
@ -44,14 +29,14 @@
|
|||
<el-tree style="height: 700px; overflow: scroll"
|
||||
:data="devicesOptions" :props="defaultProps"
|
||||
:default-expand-all="true"
|
||||
:expand-on-click-node="false" @node-click="handleNodeClick"
|
||||
:expand-on-click-node="false" @node-click="handleNodeClick2"
|
||||
ref="typeTree" node-key="deviceId" highlight-current
|
||||
></el-tree>
|
||||
</div>
|
||||
<div class="contant">
|
||||
<div style="width: 100%;height: 600px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px;">
|
||||
<div style="width: 100%;height: 100%;position: fixed;"></div>
|
||||
<iframe src="iframe.html?type=2" ref="videoIframe5" frameborder="0" style="width: 100%;height: 100%;"></iframe>
|
||||
<iframe src="monitor/iframe.html?type=2" ref="videoIframe5" frameborder="0" style="width: 100%;height: 600px;"></iframe>
|
||||
<span style="position: absolute;left: 0.2rem;bottom:0.2rem;font-size: 14px;color: aliceblue;">{{deviceName1}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -88,7 +73,7 @@ data() {
|
|||
label: "deviceName",
|
||||
id: "deviceId"
|
||||
},
|
||||
chosenWinNo:1,
|
||||
chosenWinNo:0,
|
||||
chosenChannel:null
|
||||
};
|
||||
},
|
||||
|
|
@ -109,10 +94,7 @@ methods:{
|
|||
// 初始化监控列表
|
||||
videoLogin(){
|
||||
setTimeout(() => {
|
||||
this.iframeLogin('1','11')
|
||||
this.iframeLogin('2','12')
|
||||
this.iframeLogin('3','27')
|
||||
this.iframeLogin('4','28')
|
||||
this.iframeLogin()
|
||||
}, 1000);
|
||||
},
|
||||
//点击设备
|
||||
|
|
@ -124,30 +106,70 @@ methods:{
|
|||
if(this.activeName=='2'){
|
||||
|
||||
}
|
||||
},
|
||||
handleNodeClick(data, node) {
|
||||
// if(this.chosenWinNo==3){
|
||||
// this.chosenWinNo=0
|
||||
// }else{
|
||||
// this.chosenWinNo = this.chosenWinNo+1
|
||||
// }
|
||||
var oLiveView = {
|
||||
iProtocol: 1, // protocol 1<EFBFBD><EFBFBD>http, 2:https
|
||||
szIP: "192.168.1.10", // protocol ip
|
||||
szPort: "80", // protocol port
|
||||
szUsername: "admin", // device username
|
||||
szPassword: "hzx12345", // device password
|
||||
iStreamType: 2, // stream 1<EFBFBD><EFBFBD>main stream 2<EFBFBD><EFBFBD>sub-stream 3<EFBFBD><EFBFBD>third stream 4<EFBFBD><EFBFBD>transcode stream
|
||||
iChannelID: 1, // channel no
|
||||
bZeroChannel: false // zero channel
|
||||
};
|
||||
var oWebVideoCtrl1 = this.$refs.videoIframe1.contentWindow.WebVideoCtrl;
|
||||
var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
|
||||
oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
|
||||
iWndIndex:2,
|
||||
iStreamType: oLiveView.iStreamType,
|
||||
iChannelID: 11,
|
||||
bZeroChannel: oLiveView.bZeroChannel
|
||||
});
|
||||
// if(data.deviceExtendInfo&&data.deviceExtendInfo!=""){
|
||||
// let obj = JSON.parse(data.deviceExtendInfo)
|
||||
// console.log(obj)
|
||||
// this.chosenChannel = 11
|
||||
|
||||
// }else{
|
||||
// this.$modal.msgError("设备未绑定通道号");
|
||||
// }
|
||||
},
|
||||
chosenWindow(num){
|
||||
console.log(num)
|
||||
this.chosenWinNo = num;
|
||||
setTimeout(() => {
|
||||
this.iframeLoaded(this.chosenWinNo,this.chosenChannel)
|
||||
}, 500);
|
||||
},
|
||||
async handleNodeClick(data, node) {
|
||||
console.log(data)
|
||||
async handleNodeClick2(data, node) {
|
||||
var oLiveView = {
|
||||
iProtocol: 1, // protocol 1<EFBFBD><EFBFBD>http, 2:https
|
||||
szIP: "192.168.1.10", // protocol ip
|
||||
szPort: "80", // protocol port
|
||||
szUsername: "admin", // device username
|
||||
szPassword: "hzx12345", // device password
|
||||
iStreamType: 2, // stream 1<EFBFBD><EFBFBD>main stream 2<EFBFBD><EFBFBD>sub-stream 3<EFBFBD><EFBFBD>third stream 4<EFBFBD><EFBFBD>transcode stream
|
||||
iChannelID: 1, // channel no
|
||||
bZeroChannel: false // zero channel
|
||||
};
|
||||
// var oWebVideoCtrl5 = this.$refs.videoIframe5.contentWindow.WebVideoCtrl;
|
||||
// var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
|
||||
if(data.deviceExtendInfo&&data.deviceExtendInfo!=""){
|
||||
let obj = JSON.parse(data.deviceExtendInfo)
|
||||
console.log(obj)
|
||||
this.chosenChannel = '28'
|
||||
setTimeout(() => {
|
||||
this.iframeLogin(this.chosenWinNo,this.chosenChannel)
|
||||
// oWebVideoCtrl5.I_StartRealPlay(szDeviceIdentify, {
|
||||
// iWndIndex:0,
|
||||
// iStreamType: oLiveView.iStreamType,
|
||||
// iChannelID: this.chosenChannel,
|
||||
// bZeroChannel: oLiveView.bZeroChannel
|
||||
// });
|
||||
}, 500);
|
||||
}else{
|
||||
this.$modal.msgError("设备未绑定通道号");
|
||||
}
|
||||
},
|
||||
iframeLoaded(domId,channel){
|
||||
console.log(domId)
|
||||
console.log(channel)
|
||||
},
|
||||
iframeLogin(){
|
||||
var oLiveView = {
|
||||
iProtocol: 1, // protocol 1<EFBFBD><EFBFBD>http, 2:https
|
||||
szIP: "192.168.1.10", // protocol ip
|
||||
|
|
@ -157,143 +179,53 @@ methods:{
|
|||
iStreamType: 2, // stream 1<EFBFBD><EFBFBD>main stream 2<EFBFBD><EFBFBD>sub-stream 3<EFBFBD><EFBFBD>third stream 4<EFBFBD><EFBFBD>transcode stream
|
||||
iChannelID: 1, // channel no
|
||||
bZeroChannel: false // zero channel
|
||||
};
|
||||
if(domId=='1'){
|
||||
var oWebVideoCtrl1 = this.$refs.videoIframe1.contentWindow.WebVideoCtrl;
|
||||
oWebVideoCtrl1.I_Logout(oLiveView.szIP + "_" + oLiveView.szPort)
|
||||
// oWebVideoCtrl1.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
|
||||
// success: function (xmlDoc) {
|
||||
// var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
|
||||
// setTimeout(function () {
|
||||
// oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
|
||||
// iStreamType: oLiveView.iStreamType,
|
||||
// iChannelID: channel,
|
||||
// bZeroChannel: oLiveView.bZeroChannel
|
||||
// });
|
||||
// }, 500);
|
||||
// }
|
||||
// });
|
||||
}
|
||||
if(domId=='2'){
|
||||
var oWebVideoCtrl2 = this.$refs.videoIframe2.contentWindow.WebVideoCtrl;
|
||||
oWebVideoCtrl2.I_Logout(oLiveView.szIP + "_" + oLiveView.szPort)
|
||||
// oWebVideoCtrl2.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
|
||||
// success: function (xmlDoc) {
|
||||
// var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
|
||||
// setTimeout(function () {
|
||||
// oWebVideoCtrl2.I_StartRealPlay(szDeviceIdentify, {
|
||||
// iStreamType: oLiveView.iStreamType,
|
||||
// iChannelID: channel,
|
||||
// bZeroChannel: oLiveView.bZeroChannel
|
||||
// });
|
||||
// }, 500);
|
||||
// }
|
||||
// });
|
||||
}
|
||||
if(domId=='3'){
|
||||
var oWebVideoCtrl3 = this.$refs.videoIframe3.contentWindow.WebVideoCtrl;
|
||||
oWebVideoCtrl3.I_Logout(oLiveView.szIP + "_" + oLiveView.szPort)
|
||||
// oWebVideoCtrl3.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
|
||||
// success: function (xmlDoc) {
|
||||
// var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
|
||||
// setTimeout(function () {
|
||||
// oWebVideoCtrl3.I_StartRealPlay(szDeviceIdentify, {
|
||||
// iStreamType: oLiveView.iStreamType,
|
||||
// iChannelID: channel,
|
||||
// bZeroChannel: oLiveView.bZeroChannel
|
||||
// });
|
||||
// }, 500);
|
||||
// }
|
||||
// });
|
||||
}
|
||||
if(domId=='4'){
|
||||
var oWebVideoCtrl4 = this.$refs.videoIframe4.contentWindow.WebVideoCtrl;
|
||||
oWebVideoCtrl4.I_Logout(oLiveView.szIP + "_" + oLiveView.szPort)
|
||||
// oWebVideoCtrl4.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
|
||||
// success: function (xmlDoc) {
|
||||
// var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
|
||||
// setTimeout(function () {
|
||||
// oWebVideoCtrl4.I_StartRealPlay(szDeviceIdentify, {
|
||||
// iStreamType: oLiveView.iStreamType,
|
||||
// iChannelID: channel,
|
||||
// bZeroChannel: oLiveView.bZeroChannel
|
||||
// });
|
||||
// }, 500);
|
||||
// }
|
||||
// });
|
||||
}
|
||||
},
|
||||
iframeLogin(domId,channel){
|
||||
var oLiveView = {
|
||||
iProtocol: 1, // protocol 1<EFBFBD><EFBFBD>http, 2:https
|
||||
szIP: "192.168.1.10", // protocol ip
|
||||
szPort: "80", // protocol port
|
||||
szUsername: "admin", // device username
|
||||
szPassword: "hzx12345", // device password
|
||||
iStreamType: 2, // stream 1<EFBFBD><EFBFBD>main stream 2<EFBFBD><EFBFBD>sub-stream 3<EFBFBD><EFBFBD>third stream 4<EFBFBD><EFBFBD>transcode stream
|
||||
iChannelID: 1, // channel no
|
||||
bZeroChannel: false // zero channel
|
||||
};
|
||||
if(domId=='1'){
|
||||
var oWebVideoCtrl1 = this.$refs.videoIframe1.contentWindow.WebVideoCtrl;
|
||||
oWebVideoCtrl1.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
|
||||
success: function (xmlDoc) {
|
||||
var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
|
||||
setTimeout(function () {
|
||||
oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
|
||||
iStreamType: oLiveView.iStreamType,
|
||||
iChannelID: channel,
|
||||
bZeroChannel: oLiveView.bZeroChannel
|
||||
});
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
}
|
||||
if(domId=='2'){
|
||||
var oWebVideoCtrl2 = this.$refs.videoIframe2.contentWindow.WebVideoCtrl;
|
||||
oWebVideoCtrl2.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
|
||||
success: function (xmlDoc) {
|
||||
var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
|
||||
setTimeout(function () {
|
||||
oWebVideoCtrl2.I_StartRealPlay(szDeviceIdentify, {
|
||||
iStreamType: oLiveView.iStreamType,
|
||||
iChannelID: channel,
|
||||
bZeroChannel: oLiveView.bZeroChannel
|
||||
});
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
}
|
||||
if(domId=='3'){
|
||||
var oWebVideoCtrl3 = this.$refs.videoIframe3.contentWindow.WebVideoCtrl;
|
||||
oWebVideoCtrl3.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
|
||||
success: function (xmlDoc) {
|
||||
var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
|
||||
setTimeout(function () {
|
||||
oWebVideoCtrl3.I_StartRealPlay(szDeviceIdentify, {
|
||||
iStreamType: oLiveView.iStreamType,
|
||||
iChannelID: channel,
|
||||
bZeroChannel: oLiveView.bZeroChannel
|
||||
});
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
}
|
||||
if(domId=='4'){
|
||||
var oWebVideoCtrl4 = this.$refs.videoIframe4.contentWindow.WebVideoCtrl;
|
||||
oWebVideoCtrl4.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
|
||||
success: function (xmlDoc) {
|
||||
var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
|
||||
setTimeout(function () {
|
||||
oWebVideoCtrl4.I_StartRealPlay(szDeviceIdentify, {
|
||||
iStreamType: oLiveView.iStreamType,
|
||||
iChannelID: channel,
|
||||
bZeroChannel: oLiveView.bZeroChannel
|
||||
});
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
var oWebVideoCtrl1 = this.$refs.videoIframe1.contentWindow.WebVideoCtrl;
|
||||
oWebVideoCtrl1.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
|
||||
success: function (xmlDoc) {
|
||||
var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
|
||||
setTimeout(()=>{
|
||||
oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
|
||||
iWndIndex:0,
|
||||
iStreamType: oLiveView.iStreamType,
|
||||
iChannelID: 11,
|
||||
bZeroChannel: oLiveView.bZeroChannel
|
||||
});
|
||||
oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
|
||||
iWndIndex:1,
|
||||
iStreamType: oLiveView.iStreamType,
|
||||
iChannelID: 12,
|
||||
bZeroChannel: oLiveView.bZeroChannel
|
||||
});
|
||||
oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
|
||||
iWndIndex:2,
|
||||
iStreamType: oLiveView.iStreamType,
|
||||
iChannelID: 23,
|
||||
bZeroChannel: oLiveView.bZeroChannel
|
||||
});
|
||||
oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
|
||||
iWndIndex:3,
|
||||
iStreamType: oLiveView.iStreamType,
|
||||
iChannelID: 24,
|
||||
bZeroChannel: oLiveView.bZeroChannel
|
||||
});
|
||||
},500);
|
||||
}
|
||||
});
|
||||
// var oWebVideoCtrl5 = this.$refs.videoIframe5.contentWindow.WebVideoCtrl;
|
||||
// oWebVideoCtrl5.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
|
||||
// success: function (xmlDoc) {
|
||||
// var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
|
||||
// setTimeout(()=>{
|
||||
// oWebVideoCtrl5.I_StartRealPlay(szDeviceIdentify, {
|
||||
// iWndIndex:0,
|
||||
// iStreamType: oLiveView.iStreamType,
|
||||
// iChannelID: 22,
|
||||
// bZeroChannel: oLiveView.bZeroChannel
|
||||
// });
|
||||
// },500);
|
||||
// }
|
||||
// });
|
||||
},
|
||||
openVideo(playId){
|
||||
// this.$emit('openVideo',true,playId);
|
||||
|
|
@ -329,8 +261,7 @@ methods:{
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
flex-wrap: wrap;
|
||||
padding-top: 1%;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,337 @@
|
|||
<template>
|
||||
<div id="video">
|
||||
<div style="width: 100%;">
|
||||
<el-tabs v-model="activeName" type="card" @tab-click="handleTabClick">
|
||||
<el-tab-pane label="视频监控" name="1">
|
||||
<div class="header"><span>视频监控</span></div>
|
||||
<div style="width: 100%;display: flex;justify-content: space-between;">
|
||||
<div style="width: 20%;">
|
||||
<el-tree style="height: 700px; overflow: scroll"
|
||||
:data="devicesOptions" :props="defaultProps"
|
||||
:default-expand-all="true"
|
||||
:expand-on-click-node="false" @node-click="handleNodeClick"
|
||||
ref="typeTree" node-key="deviceId" highlight-current
|
||||
></el-tree>
|
||||
</div>
|
||||
<div class="contant">
|
||||
<div style="width: 45%;height: 350px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px;">
|
||||
<div style="width: 100%;height: 100%;position: fixed;" @click="chosenWindow('1')"></div>
|
||||
<iframe src="monitor/iframe.html?type=1" ref="videoIframe1" frameborder="0" style="width: 100%;height: 100%;"></iframe>
|
||||
<span style="position: absolute;left: 0.2rem;bottom:0.2rem;font-size: 14px;color: aliceblue;">{{deviceName1}}</span>
|
||||
</div>
|
||||
<div style="width: 45%;height: 350px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px">
|
||||
<div style="width: 100%;height: 100%;position: fixed;" @click="chosenWindow('2')"></div>
|
||||
<iframe src="monitor/iframe.html?type=1" ref="videoIframe2" frameborder="0" style="width: 100%;height: 100%;"></iframe>
|
||||
<span style="position: absolute;left: 0.2rem;bottom:0.2rem;font-size: 14px;color: aliceblue;">{{deviceName2}}</span>
|
||||
</div>
|
||||
<div style="width: 45%;height: 350px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px">
|
||||
<div style="width: 100%;height: 100%;position: fixed;" @click="chosenWindow('3')"></div>
|
||||
<iframe src="monitor/iframe.html?type=1" ref="videoIframe3" frameborder="0" style="width: 100%;height: 100%;"></iframe>
|
||||
<span style="position: absolute;left: 0.2rem;bottom:0.2rem;font-size: 14px;color: aliceblue;">{{deviceName3}}</span>
|
||||
</div>
|
||||
<div style="width: 45%;height: 350px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px">
|
||||
<div style="width: 100%;height: 100%;position: fixed;" @click="chosenWindow('4')"></div>
|
||||
<iframe src="monitor/iframe.html?type=1" ref="videoIframe4" frameborder="0" style="width: 100%;height: 100%;"></iframe>
|
||||
<span style="position: absolute;left: 0.2rem;bottom:0.2rem;font-size: 14px;color: aliceblue;">{{deviceName4}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="历史视频" name="2">
|
||||
<div class="header"><span>历史视频</span></div>
|
||||
<div style="width: 100%;display: flex;justify-content: space-between;">
|
||||
<div style="width: 20%;">
|
||||
<el-tree style="height: 700px; overflow: scroll"
|
||||
:data="devicesOptions" :props="defaultProps"
|
||||
:default-expand-all="true"
|
||||
:expand-on-click-node="false" @node-click="handleNodeClick"
|
||||
ref="typeTree" node-key="deviceId" highlight-current
|
||||
></el-tree>
|
||||
</div>
|
||||
<div class="contant">
|
||||
<div style="width: 100%;height: 600px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px;">
|
||||
<div style="width: 100%;height: 100%;position: fixed;"></div>
|
||||
<iframe src="monitor/iframe.html?type=2" ref="videoIframe5" frameborder="0" style="width: 100%;height: 100%;"></iframe>
|
||||
<span style="position: absolute;left: 0.2rem;bottom:0.2rem;font-size: 14px;color: aliceblue;">{{deviceName1}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script src="./codebase/webVideoCtrl.js"></script>
|
||||
<script>
|
||||
import $ from 'jquery';
|
||||
import { getKitchenDeviceSelectApi } from "@/api/kitchen/devices";
|
||||
export default {
|
||||
name: 'videoMonitoring',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName:'1',
|
||||
deviceData:[
|
||||
],
|
||||
deviceName1:'监控1',
|
||||
deviceName2:'监控2',
|
||||
deviceName3:'监控3',
|
||||
deviceName4:'监控4',
|
||||
titleList:[],
|
||||
devicesOptions:[],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "deviceName",
|
||||
id: "deviceId"
|
||||
},
|
||||
chosenWinNo:1,
|
||||
chosenChannel:null
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// monitor.clickLogin()
|
||||
},
|
||||
mounted() {
|
||||
this.getKitchenDeviceSelect();
|
||||
this.videoLogin();
|
||||
},
|
||||
methods:{
|
||||
// 门禁设备选项
|
||||
getKitchenDeviceSelect(){
|
||||
getKitchenDeviceSelectApi({deviceType:1}).then((response) => {
|
||||
this.devicesOptions = response.data
|
||||
})
|
||||
},
|
||||
// 初始化监控列表
|
||||
videoLogin(){
|
||||
setTimeout(() => {
|
||||
this.iframeLogin('1','11')
|
||||
this.iframeLogin('2','12')
|
||||
this.iframeLogin('3','27')
|
||||
this.iframeLogin('4','28')
|
||||
}, 1000);
|
||||
},
|
||||
//点击设备
|
||||
handleTabClick(tab){
|
||||
console.log(this.activeName)
|
||||
if(this.activeName=='1'){
|
||||
|
||||
}
|
||||
if(this.activeName=='2'){
|
||||
|
||||
}
|
||||
},
|
||||
chosenWindow(num){
|
||||
console.log(num)
|
||||
this.chosenWinNo = num;
|
||||
setTimeout(() => {
|
||||
this.iframeLoaded(this.chosenWinNo,this.chosenChannel)
|
||||
}, 500);
|
||||
},
|
||||
async handleNodeClick(data, node) {
|
||||
console.log(data)
|
||||
if(data.deviceExtendInfo&&data.deviceExtendInfo!=""){
|
||||
let obj = JSON.parse(data.deviceExtendInfo)
|
||||
console.log(obj)
|
||||
this.chosenChannel = '28'
|
||||
setTimeout(() => {
|
||||
this.iframeLogin(this.chosenWinNo,this.chosenChannel)
|
||||
}, 500);
|
||||
}else{
|
||||
this.$modal.msgError("设备未绑定通道号");
|
||||
}
|
||||
},
|
||||
iframeLoaded(domId,channel){
|
||||
console.log(domId)
|
||||
console.log(channel)
|
||||
var oLiveView = {
|
||||
iProtocol: 1, // protocol 1<EFBFBD><EFBFBD>http, 2:https
|
||||
szIP: "192.168.1.10", // protocol ip
|
||||
szPort: "80", // protocol port
|
||||
szUsername: "admin", // device username
|
||||
szPassword: "hzx12345", // device password
|
||||
iStreamType: 2, // stream 1<EFBFBD><EFBFBD>main stream 2<EFBFBD><EFBFBD>sub-stream 3<EFBFBD><EFBFBD>third stream 4<EFBFBD><EFBFBD>transcode stream
|
||||
iChannelID: 1, // channel no
|
||||
bZeroChannel: false // zero channel
|
||||
};
|
||||
if(domId=='1'){
|
||||
var oWebVideoCtrl1 = this.$refs.videoIframe1.contentWindow.WebVideoCtrl;
|
||||
oWebVideoCtrl1.I_Logout(oLiveView.szIP + "_" + oLiveView.szPort)
|
||||
// oWebVideoCtrl1.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
|
||||
// success: function (xmlDoc) {
|
||||
// var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
|
||||
// setTimeout(function () {
|
||||
// oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
|
||||
// iStreamType: oLiveView.iStreamType,
|
||||
// iChannelID: channel,
|
||||
// bZeroChannel: oLiveView.bZeroChannel
|
||||
// });
|
||||
// }, 500);
|
||||
// }
|
||||
// });
|
||||
}
|
||||
if(domId=='2'){
|
||||
var oWebVideoCtrl2 = this.$refs.videoIframe2.contentWindow.WebVideoCtrl;
|
||||
oWebVideoCtrl2.I_Logout(oLiveView.szIP + "_" + oLiveView.szPort)
|
||||
// oWebVideoCtrl2.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
|
||||
// success: function (xmlDoc) {
|
||||
// var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
|
||||
// setTimeout(function () {
|
||||
// oWebVideoCtrl2.I_StartRealPlay(szDeviceIdentify, {
|
||||
// iStreamType: oLiveView.iStreamType,
|
||||
// iChannelID: channel,
|
||||
// bZeroChannel: oLiveView.bZeroChannel
|
||||
// });
|
||||
// }, 500);
|
||||
// }
|
||||
// });
|
||||
}
|
||||
if(domId=='3'){
|
||||
var oWebVideoCtrl3 = this.$refs.videoIframe3.contentWindow.WebVideoCtrl;
|
||||
oWebVideoCtrl3.I_Logout(oLiveView.szIP + "_" + oLiveView.szPort)
|
||||
// oWebVideoCtrl3.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
|
||||
// success: function (xmlDoc) {
|
||||
// var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
|
||||
// setTimeout(function () {
|
||||
// oWebVideoCtrl3.I_StartRealPlay(szDeviceIdentify, {
|
||||
// iStreamType: oLiveView.iStreamType,
|
||||
// iChannelID: channel,
|
||||
// bZeroChannel: oLiveView.bZeroChannel
|
||||
// });
|
||||
// }, 500);
|
||||
// }
|
||||
// });
|
||||
}
|
||||
if(domId=='4'){
|
||||
var oWebVideoCtrl4 = this.$refs.videoIframe4.contentWindow.WebVideoCtrl;
|
||||
oWebVideoCtrl4.I_Logout(oLiveView.szIP + "_" + oLiveView.szPort)
|
||||
// oWebVideoCtrl4.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
|
||||
// success: function (xmlDoc) {
|
||||
// var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
|
||||
// setTimeout(function () {
|
||||
// oWebVideoCtrl4.I_StartRealPlay(szDeviceIdentify, {
|
||||
// iStreamType: oLiveView.iStreamType,
|
||||
// iChannelID: channel,
|
||||
// bZeroChannel: oLiveView.bZeroChannel
|
||||
// });
|
||||
// }, 500);
|
||||
// }
|
||||
// });
|
||||
}
|
||||
},
|
||||
iframeLogin(domId,channel){
|
||||
var oLiveView = {
|
||||
iProtocol: 1, // protocol 1<EFBFBD><EFBFBD>http, 2:https
|
||||
szIP: "192.168.1.10", // protocol ip
|
||||
szPort: "80", // protocol port
|
||||
szUsername: "admin", // device username
|
||||
szPassword: "hzx12345", // device password
|
||||
iStreamType: 2, // stream 1<EFBFBD><EFBFBD>main stream 2<EFBFBD><EFBFBD>sub-stream 3<EFBFBD><EFBFBD>third stream 4<EFBFBD><EFBFBD>transcode stream
|
||||
iChannelID: 1, // channel no
|
||||
bZeroChannel: false // zero channel
|
||||
};
|
||||
if(domId=='1'){
|
||||
var oWebVideoCtrl1 = this.$refs.videoIframe1.contentWindow.WebVideoCtrl;
|
||||
oWebVideoCtrl1.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
|
||||
success: function (xmlDoc) {
|
||||
var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
|
||||
setTimeout(function () {
|
||||
oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
|
||||
iStreamType: oLiveView.iStreamType,
|
||||
iChannelID: channel,
|
||||
bZeroChannel: oLiveView.bZeroChannel
|
||||
});
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
}
|
||||
if(domId=='2'){
|
||||
var oWebVideoCtrl2 = this.$refs.videoIframe2.contentWindow.WebVideoCtrl;
|
||||
oWebVideoCtrl2.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
|
||||
success: function (xmlDoc) {
|
||||
var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
|
||||
setTimeout(function () {
|
||||
oWebVideoCtrl2.I_StartRealPlay(szDeviceIdentify, {
|
||||
iStreamType: oLiveView.iStreamType,
|
||||
iChannelID: channel,
|
||||
bZeroChannel: oLiveView.bZeroChannel
|
||||
});
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
}
|
||||
if(domId=='3'){
|
||||
var oWebVideoCtrl3 = this.$refs.videoIframe3.contentWindow.WebVideoCtrl;
|
||||
oWebVideoCtrl3.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
|
||||
success: function (xmlDoc) {
|
||||
var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
|
||||
setTimeout(function () {
|
||||
oWebVideoCtrl3.I_StartRealPlay(szDeviceIdentify, {
|
||||
iStreamType: oLiveView.iStreamType,
|
||||
iChannelID: channel,
|
||||
bZeroChannel: oLiveView.bZeroChannel
|
||||
});
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
}
|
||||
if(domId=='4'){
|
||||
var oWebVideoCtrl4 = this.$refs.videoIframe4.contentWindow.WebVideoCtrl;
|
||||
oWebVideoCtrl4.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
|
||||
success: function (xmlDoc) {
|
||||
var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
|
||||
setTimeout(function () {
|
||||
oWebVideoCtrl4.I_StartRealPlay(szDeviceIdentify, {
|
||||
iStreamType: oLiveView.iStreamType,
|
||||
iChannelID: channel,
|
||||
bZeroChannel: oLiveView.bZeroChannel
|
||||
});
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
openVideo(playId){
|
||||
// this.$emit('openVideo',true,playId);
|
||||
// this.videoVisible = true;
|
||||
// monitor.clickStopRealPlay()
|
||||
// monitor.clickStartRealPlay(null,'1')
|
||||
// this.$refs.vueRef.play();//播放
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
#video{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 0.2rem;
|
||||
.header{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #000;
|
||||
margin-top: 20px;
|
||||
span{
|
||||
margin-left: 40px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.contant{
|
||||
width: 80%;
|
||||
height: auto;
|
||||
// height: 85%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
flex-wrap: wrap;
|
||||
padding-top: 1%;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue