添加管理页面上的视频播放功能

src/views/biz/dc/index.vue

@@ -49,15 +49,43 @@
       @pagination="getList"
     />
 
+      <div class="contrlset" v-show="open">
+        <div class="video-play">
+            <Player ref="playerVideo"/>
+        </div>
+                    <div class="cloudset">
+                      <div><span class="close" @click.stop="cancel()" style="top:10px"></span></div>
+                      <div class="camername">{{ playerObj.deviceName }}摄像头</div>
+                      <div class="cc">
+                        <div class="cc_bg"></div>
+                        <div class="cc_01" @click="ccMove(1,5)"></div>
+                        <div class="cc_02" @click="ccMove(2,5)"></div>
+                        <div class="cc_03" @click="ccMove(3,5)"></div>
+                        <div class="cc_04" @click="ccMove(4,5)"></div>
+                      </div>
+                      <div class="cc_params"><span class="span1">变倍</span><img src="/images/cc_sub.png" @click="ccParamsSet(1,-1)"><span class="span2">|</span><span class="span3"><span class="span31" :style="{'width':cc_params1+'%'}"></span><span class="span32" :style="{'left':(cc_params1-8)+'px'}"></span></span><span class="span4">|</span><img src="/images/cc_add.png" @click="ccParamsSet(1,1)"></div>
+                      <div class="cc_params"><span class="span1">变焦</span><img src="/images/cc_sub.png" @click="ccParamsSet(2,-1)"><span class="span2">|</span><span class="span3"><span class="span31" :style="{'width':cc_params2+'%'}"></span><span class="span32" :style="{'left':(cc_params2-8)+'px'}"></span></span><span class="span4">|</span><img src="/images/cc_add.png" @click="ccParamsSet(2,1)"></div>
+                      <div class="cc_params"><span class="span1">光圈</span><img src="/images/cc_sub.png" @click="ccParamsSet(3,-1)"><span class="span2">|</span><span class="span3"><span class="span31" :style="{'width':cc_params3+'%'}"></span><span class="span32" :style="{'left':(cc_params3-8)+'px'}"></span></span><span class="span4">|</span><img src="/images/cc_add.png" @click="ccParamsSet(3,1)"></div>
+                      <div class="audio">
+                        <img v-if="cc_params4>0" src="/images/cc_a.png" @click="cc_params4=0">
+                        <img v-else src="/images/cc_b.png" @click="cc_params4=50">
+                      </div>
+                      <div class="cc_params"><span class="span1">音量</span><img src="/images/cc_sub.png" @click="ccParamsSet(4,-10)"><span class="span2">|</span><span class="span3"><span class="span31" :style="{'width':cc_params4+'%'}"></span><span class="span32" :style="{'left':(cc_params4-8)+'px'}"></span></span><span class="span4">|</span><img src="/images/cc_add.png" @click="ccParamsSet(4,10)"></div>
+                    </div>
+      </div>
   </div>
 </template>
 
 <script setup name="Dc">
 import { listDc, getDc, delDc, addDc, updateDc } from "@/api/biz/dc";
 import { useRoute } from "vue-router";
+import request from '@/utils/request';
+import Player from '../../components/player.vue'
 
 const { proxy } = getCurrentInstance();
 
+const playerVideo = ref(null);
+const playerObj = ref({});
 const route = useRoute();
 const dcList = ref([]);
 const open = ref(false);
@@ -68,6 +96,10 @@ const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
 const title = ref("");
+const cc_params1=ref(0);
+const cc_params2=ref(0);
+const cc_params3=ref(0);
+const cc_params4=ref(50);
 
 const data = reactive({
   form: {},
@@ -121,8 +153,68 @@ function getList() {
 
 // 取消按钮
 function cancel() {
+  playerVideo.value.destroy();
   open.value = false;
-  reset();
+}
+
+//旋转
+//1:向上 ptzcmd=A50F0108007D003A 2：向下 ptzcmd=A50F0104007D0036 3：向右 ptzcmd=A50F01017D000033 4：向左 ptzcmd=A50F01027D000034
+//Bearer monibuca
+//停止指令：ptzcmd=A50F0100000000B5
+const ccMove=(dir,v)=>{
+  let cmd = "";
+  //http://47.108.159.150:8080/gb28181/api/ptz/34020000001180000003/34020000001310000051?ptzcmd=A50F0108007D003A
+  if(dir==1){
+    cmd = "A50F0108007D003A"
+  }else if(dir==2){
+    cmd = "A50F0104007D0036"
+  }else if(dir==3){
+    cmd = "A50F01017D000033"
+  }else if(dir==4){
+    cmd = "A50F01027D000034"
+  }
+  request({
+      url: 'http://47.108.159.150:8080/gb28181/api/ptz/34020000001180000003/34020000001310000051?ptzcmd='+cmd,
+      headers: {
+        authorization: 'Bearer monibuca',
+      },
+      method: 'get',
+      data: null
+    }).then(res=>{
+      if(res.code==0){
+        cmd='A50F0100000000B5';
+        request({
+            url: 'http://47.108.159.150:8080/gb28181/api/ptz/34020000001180000003/34020000001310000051?ptzcmd='+cmd,
+            headers: {
+              authorization: 'Bearer monibuca',
+            },
+            method: 'get',
+            data: null
+          }).then(res=>{});
+      }
+  });
+}
+
+const ccParamsSet=(type,value)=>{
+  if(type==1){
+    cc_params1.value += value;
+    if(cc_params1.value>100) cc_params1.value=100
+    if(cc_params1.value<0) cc_params1.value=0
+  }  else if(type==2) {
+    cc_params2.value += value;
+    if(cc_params2.value>100) cc_params2.value=100
+    if(cc_params2.value<0) cc_params2.value=0
+  }  else if(type==3) {
+    cc_params3.value += value;
+    if(cc_params3.value>100) cc_params3.value=100
+    if(cc_params3.value<0) cc_params3.value=0
+  }  else if(type==4) {
+    //音量
+    cc_params4.value += value;
+    if(cc_params4.value>100) cc_params4.value=100
+    if(cc_params4.value<0) cc_params4.value=0
+    playerVideo.value.volumeChange(cc_params4.value);
+  }
 }
 
 // 表单重置
@@ -174,8 +266,10 @@ function handleAdd() {
 
 /** 修改按钮操作 */
 function handleUpdate(row) {
+  playerObj.value = row;
+  open.value=true
   const url = `http://47.108.159.150:8080/flv/${row.deviceCode}/${row.channelId}`;
-  alert(url);
+  playerVideo.value.play(url);
   // reset();
   // const _channelId = row.channelId || ids.value
   // getDc(_channelId).then(response => {
@@ -226,3 +320,187 @@ function handleExport() {
 
 getList();
 </script>
+<style>
+.contrlset{
+                      position: absolute;
+                      width: 1088px !important;
+                      height: 560px !important;
+                      z-index: 1000;
+                      left: 50%;
+                      top: 50%;
+                      margin-top: -280px !important;
+                      margin-left: -544px !important;
+                      border-radius: 10px;
+                      border: 1px solid #4f555c;
+                      .video-title{
+                        border-radius: 10px 10px 0 0 !important;
+                      }
+                      .cloudset{
+                        width: 258px !important;
+                        margin-left: 4px;
+                        background-color: #303740;
+                        border: 1px solid #4f555c;
+                        height: calc(100% - 0px);
+                        float: right;
+                        border-radius: 0 0 10px 0;
+                        .close{
+                            position: absolute;
+                            right: 15px;
+                            top: 20px;
+                            background-image: url(/images/close.png);
+                            cursor: pointer;
+                            width: 16px;
+                            height: 16px;
+                            background-size: 55%;
+                            background-repeat: no-repeat;
+                            background-position-x: center;
+                            background-position-y: center;
+                            border: 1px solid #ccc;
+                        }
+                        .camername{
+                          color: #dadada;
+                          font-weight: bold;
+                          font-size: 20px;
+                          width: 100%;
+                          text-align: center;
+                          height: 80px;
+                          line-height: 80px;
+                        }
+                        .cc{
+                          position: relative;
+                          height: 200px;
+                          width: 100%;
+                          .cc_bg{
+                            background-image: url('/images/cc_bg.png');
+                            width: 150px;
+                            height: 150px;
+                            position: absolute;
+                            top: 50%;
+                            left: 50%;
+                            margin-left: -75px;
+                            margin-top: -75px;
+                            background-size: contain;                            
+                          }
+                          .cc_01{
+                            background-image: url('/images/cc_01.png');
+                            background-size: contain;
+                            width: 20px;
+                            height: 20px;
+                            position: absolute;
+                            top:50px;
+                            left:50%;
+                            margin-left: -10px;
+                            cursor: pointer;
+                          }
+                          .cc_02{
+                            background-image: url('/images/cc_02.png');
+                            background-size: contain;
+                            width: 20px;
+                            height: 20px;
+                            position: absolute;
+                            bottom:50px;
+                            left:50%;
+                            margin-left: -10px;
+                            cursor: pointer;
+                          }
+                          .cc_03{
+                            background-image: url('/images/cc_03.png');
+                            background-size: contain;
+                            width: 20px;
+                            height: 20px;
+                            position: absolute;
+                            top:50%;
+                            right:73px;
+                            margin-top: -10px;
+                            margin-left: -10px;
+                            cursor: pointer;
+                          }
+                          .cc_04{
+                            background-image: url('/images/cc_04.png');
+                            background-size: contain;
+                            width: 20px;
+                            height: 20px;
+                            position: absolute;
+                            top:50%;
+                            left:82px;
+                            margin-top: -10px;
+                            margin-left: -10px;
+                            cursor: pointer;
+                          }
+                        }
+                        .cc_params{
+                          color: #dadada;
+                          height: 40px;
+                          line-height: 40px;
+                          font-size: 12px;
+                          width: 100%;
+                          padding: 0 20px;
+                          display: flex;
+                          img{
+                            height: 32px;
+                            width: 32px;
+                            cursor: pointer;
+                            margin-top: 4px;
+                          }
+                          .span1{
+                            width:36px;
+                          }
+                          .span2{
+                            margin-left:5px;
+                            font-size: 10px;
+                          }
+                          .span3{
+                            font-size: 10px;
+                            display: inline-block;
+                            width: 100px;
+                            height: 2px;
+                            background: #ffffff33;
+                            margin: 20px 0;
+                            position: relative;
+                            .span31{
+                              position: absolute;
+                              height: 2px;
+                              background-color: #fff;
+                              left:0;
+                              top:0;
+                              width:0%;
+                            }
+                            .span32{
+                              background-image: url('/images/cc_p.png');
+                              background-size: contain;
+                              width: 20px;
+                              height: 20px;
+                              position: absolute;
+                              top:-9px;
+                              left:-8px;
+                            }
+                          }
+                          .span4{
+                            font-size: 10px;
+                            opacity: 0.2;
+                            margin-right:5px;
+                          }
+                        }
+                        .audio{
+                          position: relative;
+                          height: 50px;
+                          margin-top: 30px;
+                          width: 100%;
+                          img{
+                            width:48px;
+                            height: 48px;
+                            position: absolute;
+                            top: 50%;
+                            left: 50%;
+                            margin-left: -24px;
+                            margin-top: -24px;
+                          }
+                        }
+                      }
+                      .video-play{
+                        width:824px !important;
+                        height: calc(100% - 0px);
+                        float: left;
+                      }
+                    }
+</style>

src/views/components/player.vue

@@ -158,7 +158,7 @@
                   // background: "bg.jpg",
                   loadingText: "疯狂加载中...",
                   // hasAudio:false,
-                  debug: true,
+                  debug: false,
                   supportDblclickFullscreen: true,
                   showBandwidth: this.showBandwidth, // 显示网速
                   operateBtns: {