实时视频流操作

src/views/realTimeMonitoring/index.vue

@@ -15,15 +15,54 @@
                         marginBottom: ((selectTab.videoStyleRow * selectTab.videoStyleColumn - index - 1) >= selectTab.videoStyleColumn) ? '20px': 0
                     }"
             >
-                <video 
+            <div style="position: relative;width: 100%;">
-                :style="{
+                <video :style="{ height: videoHeight,}" :id="`camera${item.id}`"  autoplay muted controls>
-                        height: videoHeight,
+                </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>

src/views/videoWall/index.vue

@@ -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}">
+            <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>
+                <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: {}