|
|
|
|
@ -18,22 +18,47 @@
|
|
|
|
|
</a-tabs>
|
|
|
|
|
<div class="flex-layouts">
|
|
|
|
|
<div class="video-list" v-for="(item,index) in realTimeListData" :key="(index+1).toString()" v-show="tabKey==0? tabKey==0 : tabKey==(index+1).toString()">
|
|
|
|
|
<div class="video-item" v-for="i in item.cameras" :key="i.id" @click="showModel(i)">
|
|
|
|
|
<canvas :class="['video',i.id?'video'+i.id:'']">
|
|
|
|
|
<div class="video-item" v-for="i in item.cameras" :key="i.id">
|
|
|
|
|
<!-- <canvas :class="['video',i.id?'video'+i.id:'']">-->
|
|
|
|
|
|
|
|
|
|
</canvas>
|
|
|
|
|
<!-- </canvas>-->
|
|
|
|
|
<div class="vxgplayer" :id="'video'+i.id"
|
|
|
|
|
:url="i.rtsp"
|
|
|
|
|
autostart
|
|
|
|
|
avsync
|
|
|
|
|
nmf-src="video_play_plugins/pnacl/Release/media_player.nmf"
|
|
|
|
|
nmf-path="media_player.nmf"
|
|
|
|
|
width="390" height="219"
|
|
|
|
|
latency="0"
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="video-name">
|
|
|
|
|
{{item.streetName}} {{i.name}}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="video-model" @click="showModel(i)">
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<Model
|
|
|
|
|
:visible.sync="visible"
|
|
|
|
|
:modelData.sync="modelData"
|
|
|
|
|
@sure="submit"
|
|
|
|
|
@close="closeModel"
|
|
|
|
|
/>
|
|
|
|
|
<!-- <div class="vxgplayer" id="video"-->
|
|
|
|
|
<!-- url="rtsp://admin:admin123@192.168.66.108:554/cam/realmonitor?channel=1&subtype=0"-->
|
|
|
|
|
<!-- autostart-->
|
|
|
|
|
<!-- controls-->
|
|
|
|
|
<!-- avsync-->
|
|
|
|
|
<!-- nmf-src="video_play_plugins/pnacl/Release/media_player.nmf"-->
|
|
|
|
|
<!-- nmf-path="media_player.nmf"-->
|
|
|
|
|
<!-- width="400" height="227"-->
|
|
|
|
|
<!-- latency="0"-->
|
|
|
|
|
<!-- >-->
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
@ -44,103 +69,15 @@ export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
// 收起true 展开false
|
|
|
|
|
videoWarpShow:true,
|
|
|
|
|
controlLabel: true,
|
|
|
|
|
realTimeListData:[{
|
|
|
|
|
"streetId": 1,
|
|
|
|
|
"streetName": "巷道1",
|
|
|
|
|
"cameras": [
|
|
|
|
|
{
|
|
|
|
|
"id": 13,
|
|
|
|
|
"name": "测试球机 不要动11",
|
|
|
|
|
"ip": "192.168.1.105",
|
|
|
|
|
"port": 37777,
|
|
|
|
|
"user": "admin",
|
|
|
|
|
"password": "hzleaper123",
|
|
|
|
|
"rtsp": "rtsp://admin:hzleaper123@192.168.1.105:554/cam/realmonitor?channel=1&subtype=0",
|
|
|
|
|
"position": "222",
|
|
|
|
|
"focusing": "123",
|
|
|
|
|
"aperture": "123",
|
|
|
|
|
"multiple": 111,
|
|
|
|
|
"updateTime": "2020-12-25T13:50:32"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": 14,
|
|
|
|
|
"name": "测试球机 不要动106",
|
|
|
|
|
"ip": "192.168.1.106",
|
|
|
|
|
"port": 37777,
|
|
|
|
|
"user": "admin",
|
|
|
|
|
"password": "hzleaper123",
|
|
|
|
|
"rtsp": "rtsp://admin:hzleaper123@192.168.1.106:554/cam/realmonitor?channel=1&subtype=0",
|
|
|
|
|
"position": "222",
|
|
|
|
|
"focusing": "123",
|
|
|
|
|
"aperture": "123",
|
|
|
|
|
"multiple": 111,
|
|
|
|
|
"updateTime": "2020-12-25T13:50:47"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"streetId": 36,
|
|
|
|
|
"streetName": "巷道2",
|
|
|
|
|
"cameras": [
|
|
|
|
|
{
|
|
|
|
|
"id": 15,
|
|
|
|
|
"name": "测试球机 不要动107",
|
|
|
|
|
"ip": "192.168.1.107",
|
|
|
|
|
"port": 37777,
|
|
|
|
|
"user": "admin",
|
|
|
|
|
"password": "hzleaper123",
|
|
|
|
|
"rtsp": "rtsp://admin:hzleaper123@192.168.1.107:554/cam/realmonitor?channel=1&subtype=0",
|
|
|
|
|
"position": "222",
|
|
|
|
|
"focusing": "123",
|
|
|
|
|
"aperture": "123",
|
|
|
|
|
"multiple": 111,
|
|
|
|
|
"updateTime": "2020-12-25T13:50:55"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": 16,
|
|
|
|
|
"name": "测试球机 不要动108",
|
|
|
|
|
"ip": "192.168.1.108",
|
|
|
|
|
"port": 37777,
|
|
|
|
|
"user": "admin",
|
|
|
|
|
"password": "hzleaper123",
|
|
|
|
|
"rtsp": "rtsp://admin:hzleaper123@192.168.1.108:554/cam/realmonitor?channel=1&subtype=0",
|
|
|
|
|
"position": "222",
|
|
|
|
|
"focusing": "123",
|
|
|
|
|
"aperture": "123",
|
|
|
|
|
"multiple": 111,
|
|
|
|
|
"updateTime": "2020-12-25T13:51:04"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"streetId": 37,
|
|
|
|
|
"streetName": "gge",
|
|
|
|
|
"cameras": [
|
|
|
|
|
{
|
|
|
|
|
"id": 17,
|
|
|
|
|
"name": "测试球机 不要动111",
|
|
|
|
|
"ip": "192.168.1.111",
|
|
|
|
|
"port": 37777,
|
|
|
|
|
"user": "admin",
|
|
|
|
|
"password": "hzleaper123",
|
|
|
|
|
"rtsp": "rtsp://admin:admin123@192.168.1.111:554/cam/realmonitor?channel=1&subtype=0",
|
|
|
|
|
"position": "222",
|
|
|
|
|
"focusing": "123",
|
|
|
|
|
"aperture": "123",
|
|
|
|
|
"multiple": 111,
|
|
|
|
|
"updateTime": "2020-12-25T13:51:18"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}],
|
|
|
|
|
realTimeListData:[],
|
|
|
|
|
url:"722e6f04-bb3c-34b1-bcc7-ae9f6cd72e68",
|
|
|
|
|
tabKey: "0",
|
|
|
|
|
path:[],
|
|
|
|
|
player:"",
|
|
|
|
|
visible:false,
|
|
|
|
|
modelData:[],
|
|
|
|
|
timer:'',
|
|
|
|
|
num:240
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
inject: ['reload'],
|
|
|
|
|
@ -148,115 +85,110 @@ export default {
|
|
|
|
|
this.getRealTimeList()
|
|
|
|
|
console.log('index mounted执行了')
|
|
|
|
|
// this.getSdVideos()
|
|
|
|
|
this.timerFn()
|
|
|
|
|
// this.playVideo()
|
|
|
|
|
},
|
|
|
|
|
destroyed(){
|
|
|
|
|
console.log('2222222')
|
|
|
|
|
// this.player.destroy()
|
|
|
|
|
clearInterval(this.timer)
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// 展开收起
|
|
|
|
|
// handleUpDown() {
|
|
|
|
|
// this.controlLabel = !this.controlLabel;
|
|
|
|
|
// },
|
|
|
|
|
getSdVideos(channel,id,that){
|
|
|
|
|
console.log('首页getSdVideos方法执行了')
|
|
|
|
|
// var url = 'ws://192.168.66.56:9007/api/lychee/stream/live/'+channel
|
|
|
|
|
var url = 'ws://127.0.0.1:9007/api/lychee/stream/live/'+ channel
|
|
|
|
|
var player = new JSMpeg.Player(url, {
|
|
|
|
|
canvas: document.querySelector('.video'+id),
|
|
|
|
|
audio: false,
|
|
|
|
|
pauseWhenHidden: false,
|
|
|
|
|
videoBufferSize: 16 * 1024 * 1024,
|
|
|
|
|
loop:false,
|
|
|
|
|
onPlay: function() {
|
|
|
|
|
//开始播放事件回调
|
|
|
|
|
console.log('play')
|
|
|
|
|
},
|
|
|
|
|
onEnded: function() {
|
|
|
|
|
//播放完成事件回调
|
|
|
|
|
console.log('end')
|
|
|
|
|
},
|
|
|
|
|
onPause:function(){
|
|
|
|
|
//暂停时的回调
|
|
|
|
|
console.log('pause')
|
|
|
|
|
},
|
|
|
|
|
onVideoDecode:function(){
|
|
|
|
|
//–在每个解码和渲染的视频帧之后调用的回调
|
|
|
|
|
}
|
|
|
|
|
// getSdVideos(channel,id,that){
|
|
|
|
|
// console.log('首页getSdVideos方法执行了')
|
|
|
|
|
// var url = 'ws://192.168.66.56:9007/api/lychee/stream/live/'+channel
|
|
|
|
|
// // var url = 'ws://127.0.0.1:9007/api/lychee/stream/live/'+ channel
|
|
|
|
|
// var player = new JSMpeg.Player(url, {
|
|
|
|
|
// canvas: document.querySelector('.video'+id),
|
|
|
|
|
// audio: false,
|
|
|
|
|
// pauseWhenHidden: false,
|
|
|
|
|
// videoBufferSize: 16 * 1024 * 1024,
|
|
|
|
|
// loop:false,
|
|
|
|
|
// onPlay: function() {
|
|
|
|
|
// //开始播放事件回调
|
|
|
|
|
// console.log('play')
|
|
|
|
|
// },
|
|
|
|
|
// onEnded: function() {
|
|
|
|
|
// //播放完成事件回调
|
|
|
|
|
// console.log('end')
|
|
|
|
|
// },
|
|
|
|
|
// onPause:function(){
|
|
|
|
|
// //暂停时的回调
|
|
|
|
|
// console.log('pause')
|
|
|
|
|
// },
|
|
|
|
|
// onVideoDecode:function(){
|
|
|
|
|
// //–在每个解码和渲染的视频帧之后调用的回调
|
|
|
|
|
// }
|
|
|
|
|
//
|
|
|
|
|
// })
|
|
|
|
|
// player.play()
|
|
|
|
|
// return that.player=player
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
|
|
playVideo(id,rtsp){
|
|
|
|
|
this.videoWarpShow = true;
|
|
|
|
|
// 设置url 播放 ---添加到事件队列在下一个tick执行，避免 TypeError: t.module.postMessage is not a function
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
// window.vxgplayer('vxg_media_player1').stop();
|
|
|
|
|
window.vxgplayer(id).src(rtsp);
|
|
|
|
|
window.vxgplayer(id).play();
|
|
|
|
|
})
|
|
|
|
|
player.play()
|
|
|
|
|
return that.player=player
|
|
|
|
|
},
|
|
|
|
|
getRealTimeList(){
|
|
|
|
|
var that=this
|
|
|
|
|
// this.$api.httpApi.getRealTimeList({
|
|
|
|
|
// data: {}
|
|
|
|
|
// }).then(res => {
|
|
|
|
|
// console.log(res.data)
|
|
|
|
|
// if(res.code == 200){
|
|
|
|
|
// this.realTimeListData = res.data
|
|
|
|
|
console.log('首页getRealTimeList方法执行了')
|
|
|
|
|
that.realTimeListData.forEach(function(item){
|
|
|
|
|
// console.log(item.cameras)
|
|
|
|
|
var $that = that
|
|
|
|
|
console.log('进来第一层循环了')
|
|
|
|
|
item.cameras.forEach(function(item){
|
|
|
|
|
// console.log(item.rtsp)
|
|
|
|
|
console.log('进来第二层循环了')
|
|
|
|
|
$that.$api.httpApi.getChannel({
|
|
|
|
|
data:{
|
|
|
|
|
"clarity":"SD", //标清SD
|
|
|
|
|
"sourceUrl":item.rtsp,
|
|
|
|
|
"paramBefore": "-y -i",
|
|
|
|
|
"paramBehind": "-f mpegts -codec:v mpeg1video -an -s 400*225 -b:v 500k -r 20 -bf 0 -codec:a mp2 -ar 44100 -ac 1 -b:a 128k"
|
|
|
|
|
}
|
|
|
|
|
}).then(res => {
|
|
|
|
|
console.log(res.data)
|
|
|
|
|
console.log('首页push调用channel执行了')
|
|
|
|
|
$that.getSdVideos(res.data.channel,item.id,$that)
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
console.log(err)
|
|
|
|
|
this.$api.httpApi.getRealTimeList({
|
|
|
|
|
data: {}
|
|
|
|
|
}).then(res => {
|
|
|
|
|
console.log(res.data)
|
|
|
|
|
if(res.code == 200) {
|
|
|
|
|
this.realTimeListData = res.data
|
|
|
|
|
console.log('首页getRealTimeList方法执行了')
|
|
|
|
|
res.data.forEach(function (item) {
|
|
|
|
|
// console.log(item.cameras)
|
|
|
|
|
var $that = that
|
|
|
|
|
console.log('进来第一层循环了')
|
|
|
|
|
item.cameras.forEach(function (item) {
|
|
|
|
|
// console.log(item.rtsp)
|
|
|
|
|
console.log('进来第二层循环了')
|
|
|
|
|
$that.playVideo('video'+item.id,item.rtsp)
|
|
|
|
|
// $that.$api.httpApi.getChannel({
|
|
|
|
|
// data: {
|
|
|
|
|
// "clarity": "SD", //标清SD
|
|
|
|
|
// "sourceUrl": item.rtsp,
|
|
|
|
|
// "paramBefore": "-y -i",
|
|
|
|
|
// "paramBehind": "-f mpegts -codec:v mpeg1video -an -s 400*225 -b:v 500k -r 20 -bf 0 -codec:a mp2 -ar 44100 -ac 1 -b:a 128k"
|
|
|
|
|
// }
|
|
|
|
|
// }).then(res => {
|
|
|
|
|
// console.log(res.data)
|
|
|
|
|
// console.log('首页push调用channel执行了')
|
|
|
|
|
// $that.getSdVideos(res.data.channel, item.id, $that)
|
|
|
|
|
// }).catch(err => {
|
|
|
|
|
// console.log(err)
|
|
|
|
|
// })
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// }).catch(err => {
|
|
|
|
|
// console.log(err)
|
|
|
|
|
// })
|
|
|
|
|
},
|
|
|
|
|
timerFn(){
|
|
|
|
|
const that=this
|
|
|
|
|
this.timer = setInterval(function () {
|
|
|
|
|
that.num = that.num-1;
|
|
|
|
|
console.log(that.num)
|
|
|
|
|
if(that.num == -1){
|
|
|
|
|
that.reload() //局部刷新
|
|
|
|
|
that.num = 240
|
|
|
|
|
}
|
|
|
|
|
},1000)
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
console.log(err)
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
tabsChange(key){
|
|
|
|
|
console.log(key)
|
|
|
|
|
},
|
|
|
|
|
showModel(item){
|
|
|
|
|
console.log(11111)
|
|
|
|
|
clearInterval(this.timer)
|
|
|
|
|
this.player= this.player.destroy()
|
|
|
|
|
document.querySelector('.video').remove();
|
|
|
|
|
console.log(item)
|
|
|
|
|
this.visible = true
|
|
|
|
|
this.modelData=item
|
|
|
|
|
// this.$router.push({path: '/realTimeMonitoring/model', query: {id: "2"}});
|
|
|
|
|
},
|
|
|
|
|
submit(visible){
|
|
|
|
|
this.visible = visible
|
|
|
|
|
console.log(vxgplayer('video'+item.id))
|
|
|
|
|
// vxgplayer('video'+item.id).fullscreen()
|
|
|
|
|
},
|
|
|
|
|
closeModel(visible,data){
|
|
|
|
|
this.visible = visible
|
|
|
|
|
this.modelData=data
|
|
|
|
|
// vxgplayer('video'+data.id).changedFullscreen()
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
components:{
|
|
|
|
|
@ -266,6 +198,9 @@ export default {
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang='scss'>
|
|
|
|
|
.vxgplayer{
|
|
|
|
|
margin:0!important;
|
|
|
|
|
}
|
|
|
|
|
.realTime {
|
|
|
|
|
padding: 24px;
|
|
|
|
|
&-position {
|
|
|
|
|
@ -300,14 +235,13 @@ export default {
|
|
|
|
|
position: fixed;
|
|
|
|
|
z-index: 999;
|
|
|
|
|
border: solid 1px skyblue;
|
|
|
|
|
width: 400px;
|
|
|
|
|
height: 225px;
|
|
|
|
|
width: 390px;
|
|
|
|
|
height: 219px;
|
|
|
|
|
}
|
|
|
|
|
.flex-layouts{
|
|
|
|
|
display: flex;
|
|
|
|
|
width: 1630px;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
position: fixed
|
|
|
|
|
}
|
|
|
|
|
.video-list{
|
|
|
|
|
display: flex;
|
|
|
|
|
@ -317,20 +251,30 @@ export default {
|
|
|
|
|
position: relative;
|
|
|
|
|
margin: 3px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
z-index: 10;
|
|
|
|
|
.video-name{
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 10px;
|
|
|
|
|
left: 10px;
|
|
|
|
|
top: 15px;
|
|
|
|
|
left: 15px;
|
|
|
|
|
color: #ffda62;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
font-size: 17px;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
z-index: 10;
|
|
|
|
|
}
|
|
|
|
|
.video{
|
|
|
|
|
border: solid 1px #000000;
|
|
|
|
|
background: #001529;
|
|
|
|
|
width: 400px;
|
|
|
|
|
height: 225px;
|
|
|
|
|
.video-model{
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
z-index: 10;
|
|
|
|
|
}
|
|
|
|
|
/*.video{*/
|
|
|
|
|
/* border: solid 1px #000000;*/
|
|
|
|
|
/* background: #001529;*/
|
|
|
|
|
/* width: 400px;*/
|
|
|
|
|
/* height: 225px;*/
|
|
|
|
|
/*}*/
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
张鑫
5 years ago