upright
/
duoji-frontend
mirror of https://gitlab.hzleaper.com:81/duoji/duoji-frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

实时视频流操作

Browse Source
taiwan-tingli
yiming 4 years ago
parent 9bef504cb7
commit 575d95545d
2 changed files with 443 additions and 11 deletions
Show Stats Download Patch File Download Diff File

449
src/views/realTimeMonitoring/index.vue
Unescape Escape View File

@ -15,15 +15,54 @@
marginBottom: ((selectTab.videoStyleRow * selectTab.videoStyleColumn - index - 1) >= selectTab.videoStyleColumn) ? '20px': 0
}"
>
<video
:style="{
height: videoHeight,
}"
<div style="position: relative;width: 100%;">
<video :style="{ height: videoHeight,}" :id="`camera${item.id}`" autoplay muted controls>
</video>
<div class="operation-list">
<div class="operation-item">
<img :src="zoomSubUrl" alt="" @mousedown=zoomDecStart($event,item.id)
@mouseup=zoomDecStop($event,item.id)>
<span>变倍</span>
<img :src="zoomAddUrl" alt="" @mousedown=zoomAddStart($event,item.id)
@mouseup=zoomAddStop($event,item.id)>
</div>
<div class="operation-item">
<img :src="focusSubUrl" alt="" @mousedown=focusDecStart($event,item.id)
@mouseup=focusDecStop($event,item.id)>
<span>变焦</span>
<img :src="focusAddUrl" alt="" @mousedown=focusAddStart($event,item.id)
@mouseup=focusAddStop($event,item.id)>
</div>
<div class="operation-item">
<img :src="irisSubUrl" alt="" @mousedown=irisDecStart($event,item.id) @mouseup=irisDecStop($event,item.id)>
<span>光圈</span>
<img :src="irisAddUrl" alt="" @mousedown=irisAddStart($event,item.id) @mouseup=irisAddStop($event,item.id)>
</div>
</div>
<div class="direction-list">
<div class="direction-item">
<img :src="leftUpUrl" alt="" @mousedown=leftUpStart($event,item.id) @mouseup=leftUpStop($event,item.id)>
<img :src="upUrl" alt="" @mousedown=upStart($event,item.id) @mouseup=upStop($event,item.id)>
<img :src="rightUpUrl" alt="" @mousedown=rightUpStart($event,item.id) @mouseup=rightUpStop($event,item.id)>
</div>
<div class="direction-item">
<img :src="leftUrl" alt="" @mousedown=leftStart($event,item.id) @mouseup=leftStop($event,item.id)>
<img :src="rightUrl" alt="" @mousedown=rightStart($event,item.id) @mouseup=rightStop($event,item.id)>
</div>
<div class="direction-item">
<img :src="leftDownUrl" alt="" @mousedown=leftDownStart($event,item.id)
@mouseup=leftDownStop($event,item.id)>
<img :src="downUrl" alt="" @mousedown=downStart($event,item.id) @mouseup=downStop($event,item.id)>
<img :src="rightDownUrl" alt="" @mousedown=rightDownStart($event,item.id)
@mouseup=rightDownStop($event,item.id)>
</div>
</div>
</div>
:id="`camera${item.id}`"
autoplay muted ></video>
</a-col>
</a-row>
</div>
</template>
@ -46,7 +85,21 @@ export default {
modelData: [],
clientHeight: 0,
players: []
players: [],
zoomSubUrl:require('@/assets/sub-icon.png'),
zoomAddUrl:require('@/assets/add-icon.png'),
focusSubUrl:require('@/assets/sub-icon.png'),
focusAddUrl:require('@/assets/add-icon.png'),
irisSubUrl:require('@/assets/sub-icon.png'),
irisAddUrl:require('@/assets/add-icon.png'),
leftUpUrl:require('@/assets/left-up-icon.png'),
upUrl:require('@/assets/up-icon.png'),
rightUpUrl:require('@/assets/right-up-icon.png'),
leftUrl:require('@/assets/left-icon.png'),
rightUrl:require('@/assets/right-icon.png'),
leftDownUrl:require('@/assets/left-down-icon.png'),
downUrl:require('@/assets/down-icon.png'),
rightDownUrl:require('@/assets/right-down-icon.png'),
};
},
computed: {
@ -115,7 +168,6 @@ export default {
console.log("play:"+b.id)
let server = b.rtcServer+":"+b.rtcServerPort;
let player = new WebRtcPlayer(server,video,'camera'+b.id);
//player.play('camera'+b.id);
this.players.push(player)
}
@ -129,7 +181,318 @@ export default {
console.log("stop")
player.destroy()
}
}
},
zoomDecStart(event,id){
console.log('变倍-按下')
console.log(id)
this.zoomSubUrl=require('@/assets/sub-active-icon.png')
this.$axios.post('/camera/control/zoomDec/start/'+id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
zoomDecStop(event,id){
console.log('变倍-抬起')
console.log(id)
this.zoomSubUrl=require('@/assets/sub-icon.png')
this.$axios.post('/camera/control/zoomDec/stop/'+id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
zoomAddStart(event,id){
console.log('变倍+按下')
this.zoomAddUrl=require('@/assets/add-active-icon.png')
this.$axios.post('/camera/control/zoomAdd/start/'+id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
zoomAddStop(event,id){
console.log('变倍+抬起')
this.zoomAddUrl=require('@/assets/add-icon.png')
this.$axios.post('/camera/control/zoomAdd/stop/'+id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
focusDecStart(event,id){
console.log('变焦-按下')
this.focusSubUrl=require('@/assets/sub-active-icon.png')
this.$axios.post('/camera/control/focusDec/start/'+id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
focusDecStop(event,id){
console.log('变焦-抬起')
this.focusSubUrl=require('@/assets/sub-icon.png')
this.$axios.post('/camera/control/focusDec/stop/'+id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
focusAddStart(event,id){
console.log('变焦+按下')
this.focusAddUrl=require('@/assets/add-active-icon.png')
this.$axios.post('/camera/control/focusAdd/start/'+id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
focusAddStop(event,id){
console.log('变焦+抬起')
this.focusAddUrl=require('@/assets/add-icon.png')
this.$axios.post('/camera/control/focusAdd/stop/'+id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
irisDecStart(event,id){
console.log('光圈-按下')
this.irisSubUrl=require('@/assets/sub-active-icon.png')
this.$axios.post('/camera/control/irisDec/start/'+id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
irisDecStop(event,id){
console.log('光圈-抬起')
this.irisSubUrl=require('@/assets/sub-icon.png')
this.$axios.post('/camera/control/irisDec/stop/'+id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
irisAddStart(event,id){
console.log('光圈+按下')
this.irisAddUrl=require('@/assets/add-active-icon.png')
this.$axios.post('/camera/control/irisAdd/start/'+id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
irisAddStop(event,id){
console.log('光圈+抬起')
this.irisAddUrl=require('@/assets/add-icon.png')
this.$axios.post('/camera/control/irisAdd/stop/'+id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
leftUpStart(event,id){
console.log('左上鼠标按下')
this.leftUpUrl=require('@/assets/left-up-active-icon.png')
this.$axios.post('/camera/control/leftUp/'+id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
leftUpStop(event,id){
console.log('左上鼠标抬起')
this.leftUpUrl=require('@/assets/left-up-icon.png')
this.$axios.post('/camera/control/leftUp/stop/'+id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
upStart(event,id){
console.log('上鼠标按下')
this.upUrl=require('@/assets/up-active-icon.png')
this.$axios.post('/camera/control/up/'+id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
upStop(event,id){
console.log('上鼠标抬起')
this.upUrl=require('@/assets/up-icon.png')
this.$axios.post('/camera/control/up/stop/'+id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
rightUpStart(event,id){
console.log('右上鼠标按下')
this.rightUpUrl=require('@/assets/right-up-active-icon.png')
this.$axios.post('/camera/control/rightUp/'+id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
rightUpStop(event,id){
console.log('右上鼠标抬起')
this.rightUpUrl=require('@/assets/right-up-icon.png')
this.$axios.post('/camera/control/rightUp/stop/'+id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
leftStart(event,id){
// console.log(this.id)
console.log('左转鼠标按下')
this.leftUrl=require('@/assets/left-active-icon.png')
this.$axios.post('/camera/control/left/'+id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
leftStop(event,id){
this.leftUrl=require('@/assets/left-icon.png')
console.log('左转鼠标抬起')
this.$axios.post('/camera/control/left/stop/'+id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
rightStart(event,id){
console.log('右转鼠标按下')
this.rightUrl=require('@/assets/right-active-icon.png')
this.$axios.post('/camera/control/right/'+id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
rightStop(event,id){
console.log('右转鼠标抬起')
this.rightUrl=require('@/assets/right-icon.png')
this.$axios.post('/camera/control/right/stop/'+id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
leftDownStart(event,id){
console.log('左下鼠标按下')
this.leftDownUrl=require('@/assets/left-down-active-icon.png')
this.$axios.post('/camera/control/leftDown/'+id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
leftDownStop(event,id){
console.log('左下鼠标抬起')
this.leftDownUrl=require('@/assets/left-down-icon.png')
this.$axios.post('/camera/control/leftDown/stop/'+id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
downStart(event,id){
console.log('下鼠标按下')
this.downUrl=require('@/assets/down-active-icon.png')
this.$axios.post('/camera/control/down/'+id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
downStop(event,id){
console.log('下鼠标抬起')
this.downUrl=require('@/assets/down-icon.png')
this.$axios.post('/camera/control/down/stop/'+id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
rightDownStart(event,id){
console.log('右下鼠标按下')
this.rightDownUrl=require('@/assets/right-down-active-icon.png')
this.$axios.post('/camera/control/rightDown/'+id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
rightDownStop(event,id){
console.log('右下鼠标抬起')
this.rightDownUrl=require('@/assets/right-down-icon.png')
this.$axios.post('/camera/control/rightDown/stop/'+id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
},
};
@ -139,4 +502,72 @@ export default {
.realTime {
padding: 10px;
}
//全屏按钮
//播放按钮
video::-webkit-media-controls-play-button {
display: none;
}
//进度条
video::-webkit-media-controls-timeline {
display: none;
}
//观看的当前时间
video::-webkit-media-controls-current-time-display{
display: none;
}
//剩余时间
video::-webkit-media-controls-time-remaining-display {
display: none;
}
//音量按钮
video::-webkit-media-controls-mute-button {
display: none;
}
video::-webkit-media-controls-toggle-closed-captions-button {
display: none;
}
//音量的控制条
video::-webkit-media-controls-volume-slider {
display: none;
}
//所有控件
video::-webkit-media-controls-enclosure{
display: none;
}
.operation-list{
position: absolute;
right: 200px;
bottom: 20px;
/*width: 150px;*/
/*border: solid 1px blue;*/
z-index: 10;
.operation-item{
img{
width: 32px;
}
span{
padding: 3px 6px;
background: rgba(0,0,0,0.5);
font-size: 16px;
color: #ffffff;
}
}
}
.direction-list{
position: absolute;
right: 30px;
bottom: 20px;
width: 150px;
z-index: 10;
/*border: solid 1px blue;*/
.direction-item{
display: flex;
align-items: center;
justify-content: space-between;
img{
width: 32px;
}
}
}
</style>

5
src/views/videoWall/index.vue
Unescape Escape View File

@ -4,8 +4,8 @@
<a-button type="primary" @click="full" v-if="!isFullscreen"> 全屏<a-icon type="right" /> </a-button>
<a-button type="primary" @click="full" v-if="isFullscreen"><a-icon type="left" /> 退出全屏 </a-button>
<a-row v-for='rowIndex in row' :key='rowIndex'>
<a-col v-for='colIndex in column' :key='colIndex' :span="24/column" :style="{height: videoHeight}">
<video class="camera" :id="rowIndex+'-'+colIndex" autoplay muted controls :style="{'height': '100%',width:'100%','object-fit':'fill'}"></video>
<a-col v-for='colIndex in column' :key='colIndex' :span="24/column" :style="{height: videoHeight}" >
<video class="camera" :id="rowIndex+'-'+colIndex" autoplay muted :style="{'height': '100%',width:'100%','object-fit':'fill'}" ></video>
</a-col>
</a-row>
@ -77,6 +77,7 @@ export default {
});
},
methods: {
getWallStyle(){
this.$api.httpApi.getWallStyle({
data: {}

Write Preview
Loading…
Cancel
Save