From 93c0c8c2fd1a93178acc911401a69b4dbf3840fa Mon Sep 17 00:00:00 2001
From: huangweitao <90564@runjian.com>
Date: Fri, 11 Mar 2022 14:25:19 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E6=97=B6=E8=A7=86=E9=A2=91=E6=A0=B9?=
 =?UTF-8?q?=E6=8D=AEhttps=E5=8D=8F=E8=AE=AE=E8=AE=BE=E7=BD=AE=E8=A7=86?=
 =?UTF-8?q?=E9=A2=91=E8=B7=AF=E5=BE=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web_src/src/components/live.vue | 645 +++++++++++++++++---------------
 1 file changed, 346 insertions(+), 299 deletions(-)

diff --git a/web_src/src/components/live.vue b/web_src/src/components/live.vue
index beab9e45..fc797043 100644
--- a/web_src/src/components/live.vue
+++ b/web_src/src/components/live.vue
@@ -7,351 +7,398 @@
       <el-container v-loading="loading" element-loading-text="拼命加载中">
         <el-aside width="300px" style="background-color: #ffffff">
           <div style="text-align: center;padding-top: 20px;">设备列表</div>
-          <el-menu  v-loading="loading">
-            <el-submenu v-for="device in deviceList" :key="device.deviceId" :index="device.deviceId" @click="sendDevicePush(item)">
-              <template slot="title" >
+          <el-menu v-loading="loading">
+            <el-submenu
+              v-for="device in deviceList"
+              :key="device.deviceId"
+              :index="device.deviceId"
+              @click="sendDevicePush(item)"
+            >
+              <template slot="title">
                 <i class="el-icon-location-outline"></i>
-                {{device.name}}
+                {{ device.name }}
               </template>
-              <ChannelTree :device="device" @sendDevicePush="sendDevicePush"></ChannelTree>
+              <ChannelTree
+                :device="device"
+                @sendDevicePush="sendDevicePush"
+              ></ChannelTree>
             </el-submenu>
           </el-menu>
         </el-aside>
-          <el-container>
-            <!-- <LivePlay></LivePlay> -->
-            <el-header height="40px" style="text-align: left;font-size: 17px;line-height: 40px;">
-              分屏:
-              <i class="el-icon-full-screen btn" :class="{active:spilt==1}" @click="spilt=1"/>
-              <i class="el-icon-menu btn" :class="{active:spilt==4}" @click="spilt=4"/>
-              <i class="el-icon-s-grid btn" :class="{active:spilt==9}" @click="spilt=9"/>
-            </el-header>
-            <el-main>
-              <div style="width: 100%;height: calc( 100vh - 110px );display: flex;flex-wrap: wrap;background-color: #000;">
-                <div v-for="i in spilt" :key="i" class="play-box"
-                    :style="liveStyle" :class="{redborder:playerIdx == (i-1)}"
-                    @click="playerIdx = (i-1)"
+        <el-container>
+          <!-- <LivePlay></LivePlay> -->
+          <el-header
+            height="40px"
+            style="text-align: left;font-size: 17px;line-height: 40px;"
+          >
+            分屏:
+            <i
+              class="el-icon-full-screen btn"
+              :class="{ active: spilt == 1 }"
+              @click="spilt = 1"
+            />
+            <i
+              class="el-icon-menu btn"
+              :class="{ active: spilt == 4 }"
+              @click="spilt = 4"
+            />
+            <i
+              class="el-icon-s-grid btn"
+              :class="{ active: spilt == 9 }"
+              @click="spilt = 9"
+            />
+          </el-header>
+          <el-main>
+            <div
+              style="width: 100%;height: calc( 100vh - 110px );display: flex;flex-wrap: wrap;background-color: #000;"
+            >
+              <div
+                v-for="i in spilt"
+                :key="i"
+                class="play-box"
+                :style="liveStyle"
+                :class="{ redborder: playerIdx == i - 1 }"
+                @click="playerIdx = i - 1"
+              >
+                <div
+                  v-if="!videoUrl[i - 1]"
+                  style="color: #ffffff;font-size: 30px;font-weight: bold;"
                 >
-                  <div v-if="!videoUrl[i-1]" style="color: #ffffff;font-size: 30px;font-weight: bold;">{{i}}</div>
-                  <player v-else :ref="'player'+i" :videoUrl="videoUrl[i-1]"  fluent autoplay :height="true"
-                          :idx="'player'+i" @screenshot="shot" @destroy="destroy"></player>
-                  <!-- <player v-else ref="'player'+i" :idx="'player'+i" :visible.sync="showVideoDialog" :videoUrl="videoUrl[i-1]"  :height="true" :hasAudio="hasAudio" fluent autoplay live ></player> -->
+                  {{ i }}
                 </div>
+                <player
+                  v-else
+                  :ref="'player' + i"
+                  :videoUrl="videoUrl[i - 1]"
+                  fluent
+                  autoplay
+                  :height="true"
+                  :idx="'player' + i"
+                  @screenshot="shot"
+                  @destroy="destroy"
+                ></player>
+                <!-- <player v-else ref="'player'+i" :idx="'player'+i" :visible.sync="showVideoDialog" :videoUrl="videoUrl[i-1]"  :height="true" :hasAudio="hasAudio" fluent autoplay live ></player> -->
               </div>
-            </el-main>
-          </el-container>
+            </div>
+          </el-main>
+        </el-container>
       </el-container>
     </el-container>
   </div>
 </template>
 
 <script>
-  import uiHeader from "./UiHeader.vue";
-  import player from './jessibuca.vue'
-  import ChannelTree from './channelTree.vue'
+import uiHeader from "./UiHeader.vue";
+import player from "./jessibuca.vue";
+import ChannelTree from "./channelTree.vue";
 
-  export default {
-    name: "live",
-    components: {
-      uiHeader, player, ChannelTree
-    },
-    data() {
-      return {
-        showVideoDialog: true,
-        hasAudio: false,
-        videoUrl:[''],
-        spilt:1,//分屏
-        playerIdx:0,//激活播放器
-
-        deviceList: [], //设备列表
-        currentDevice: {}, //当前操作设备对象
+export default {
+  name: "live",
+  components: {
+    uiHeader,
+    player,
+    ChannelTree
+  },
+  data() {
+    return {
+      showVideoDialog: true,
+      hasAudio: false,
+      videoUrl: [""],
+      spilt: 1, //分屏
+      playerIdx: 0, //激活播放器
 
-        videoComponentList: [],
-        updateLooper: 0, //数据刷新轮训标志
-        currentDeviceChannelsLenth:0,
-        winHeight: window.innerHeight - 200,
-        currentPage:1,
-        count:15,
-        total:0,
-        getDeviceListLoading: false,
+      deviceList: [], //设备列表
+      currentDevice: {}, //当前操作设备对象
 
-        //channel
-        searchSrt: "",
-        channelType: "",
-        online: "",
-        channelTotal:0,
-        deviceChannelList:[],
-        loading:false
-      };
-    },
-    mounted() {
-      this.initData();
+      videoComponentList: [],
+      updateLooper: 0, //数据刷新轮训标志
+      currentDeviceChannelsLenth: 0,
+      winHeight: window.innerHeight - 200,
+      currentPage: 1,
+      count: 15,
+      total: 0,
+      getDeviceListLoading: false,
 
-    },
-    created(){
-      this.checkPlayByParam()
-    },
+      //channel
+      searchSrt: "",
+      channelType: "",
+      online: "",
+      channelTotal: 0,
+      deviceChannelList: [],
+      loading: false
+    };
+  },
+  mounted() {
+    this.initData();
+  },
+  created() {
+    this.checkPlayByParam();
+  },
 
-    computed:{
-      liveStyle(){
-        if(this.spilt==1){
-          return {width:'100%',height:'100%'}
-        }else if(this.spilt==4){
-          return {width:'49%',height:'49%'}
-        }else if(this.spilt==9){
-          return {width:'32%',height:'32%'}
+  computed: {
+    liveStyle() {
+      if (this.spilt == 1) {
+        return { width: "100%", height: "100%" };
+      } else if (this.spilt == 4) {
+        return { width: "49%", height: "49%" };
+      } else if (this.spilt == 9) {
+        return { width: "32%", height: "32%" };
+      }
+    }
+  },
+  watch: {
+    spilt(newValue) {
+      console.log("切换画幅;" + newValue);
+      let that = this;
+      for (let i = 1; i <= newValue; i++) {
+        if (!that.$refs["player" + i]) {
+          continue;
         }
+        this.$nextTick(() => {
+          if (that.$refs["player" + i] instanceof Array) {
+            that.$refs["player" + i][0].resize();
+          } else {
+            that.$refs["player" + i].resize();
+          }
+        });
       }
+      window.localStorage.setItem("split", newValue);
     },
-    watch:{
-      spilt(newValue){
-        console.log("切换画幅;"+newValue)
-        let that = this
-        for (let i = 1; i <= newValue; i++) {
-          if(!that.$refs['player'+i]){
-            continue
-          }
-          this.$nextTick(()=>{
-            if(that.$refs['player'+i] instanceof Array){
-              that.$refs['player'+i][0].resize()
-            }else {
-              that.$refs['player'+i].resize()
-            }
-          })
-
-        }
-        window.localStorage.setItem('split',newValue)
-      },
-      '$route.fullPath':'checkPlayByParam'
+    "$route.fullPath": "checkPlayByParam"
+  },
+  destroyed() {
+    clearTimeout(this.updateLooper);
+  },
+  methods: {
+    initData: function() {
+      this.getDeviceList();
     },
-    destroyed() {
-      clearTimeout(this.updateLooper);
+    destroy(idx) {
+      console.log(idx);
+      this.clear(idx.substring(idx.length - 1));
     },
-    methods: {
-      initData: function () {
-        this.getDeviceList();
-
-      },
-      destroy(idx) {
-        console.log(idx);
-        this.clear(idx.substring(idx.length-1))
-      },
-      getDeviceList: function() {
-        let that = this;
-        this.$axios({
-          method: 'get',
-          url:`/api/device/query/devices`,
-          params: {
-            page: that.currentPage,
-            count: that.count
-          }
-        }).then(function (res) {
+    getDeviceList: function() {
+      let that = this;
+      this.$axios({
+        method: "get",
+        url: `/api/device/query/devices`,
+        params: {
+          page: that.currentPage,
+          count: that.count
+        }
+      })
+        .then(function(res) {
           console.log(res.data.list);
           that.total = res.data.total;
 
-          that.deviceList = res.data.list.map(item=>{return {deviceChannelList:[],...item}});
+          that.deviceList = res.data.list.map(item => {
+            return { deviceChannelList: [], ...item };
+          });
           that.getDeviceListLoading = false;
-        }).catch(function (error) {
+        })
+        .catch(function(error) {
           console.log(error);
           that.getDeviceListLoading = false;
         });
-      },
-      //通知设备上传媒体流
-      sendDevicePush: function (itemData) {
-        if(itemData.status===0){
-          this.$message.error('设备离线!');
-          return
-        }
-        this.save(itemData)
-        let deviceId = itemData.deviceId;
-        // this.isLoging = true;
-        let channelId = itemData.channelId;
-        console.log("通知设备推流1：" + deviceId + " : " + channelId );
-        let idxTmp = this.playerIdx
-        let that = this;
-        this.loading = true
-        this.$axios({
-          method: 'get',
-          url: '/api/play/start/' + deviceId + '/' + channelId
-        }).then(function (res) {
-          // that.isLoging = false;
-          console.log('=====----=====')
-          console.log(res)
+    },
+    //通知设备上传媒体流
+    sendDevicePush: function(itemData) {
+      if (itemData.status === 0) {
+        this.$message.error("设备离线!");
+        return;
+      }
+      this.save(itemData);
+      let deviceId = itemData.deviceId;
+      // this.isLoging = true;
+      let channelId = itemData.channelId;
+      console.log("通知设备推流1：" + deviceId + " : " + channelId);
+      let idxTmp = this.playerIdx;
+      let that = this;
+      this.loading = true;
+      this.$axios({
+        method: "get",
+        url: "/api/play/start/" + deviceId + "/" + channelId
+      })
+        .then(function(res) {
+          console.log(res, "res");
           if (res.data.code == 0 && res.data.data) {
-            itemData.playUrl = res.data.data.httpsFlv
-            that.setPlayUrl(res.data.data.ws_flv,idxTmp)
-          }else {
+            itemData.playUrl = res.data.data.httpsFlv;
+            if (location.protocol === "https:") {
+              that.setPlayUrl(res.data.data.wss_flv, idxTmp);
+            } else {
+              that.setPlayUrl(res.data.data.ws_flv, idxTmp);
+            }
+          } else {
             that.$message.error(res.data.msg);
           }
-        }).catch(function (e) {
-        }).finally(()=>{
-          that.loading = false
+        })
+        .catch(function(e) {})
+        .finally(() => {
+          that.loading = false;
         });
-      },
-      setPlayUrl(url,idx){
-        this.$set(this.videoUrl,idx,url)
-        let _this = this
-        setTimeout(()=>{
-          window.localStorage.setItem('videoUrl',JSON.stringify(_this.videoUrl))
-        },100)
-
-      },
-      checkPlayByParam(){
-        let {deviceId,channelId} = this.$route.query
-        if(deviceId && channelId){
-          this.sendDevicePush({deviceId,channelId})
+    },
+    setPlayUrl(url, idx) {
+      this.$set(this.videoUrl, idx, url);
+      let _this = this;
+      setTimeout(() => {
+        window.localStorage.setItem("videoUrl", JSON.stringify(_this.videoUrl));
+      }, 100);
+    },
+    checkPlayByParam() {
+      let { deviceId, channelId } = this.$route.query;
+      if (deviceId && channelId) {
+        this.sendDevicePush({ deviceId, channelId });
+      }
+    },
+    convertImageToCanvas(image) {
+      var canvas = document.createElement("canvas");
+      canvas.width = image.width;
+      canvas.height = image.height;
+      canvas.getContext("2d").drawImage(image, 0, 0);
+      return canvas;
+    },
+    shot(e) {
+      // console.log(e)
+      // send({code:'image',data:e})
+      var base64ToBlob = function(code) {
+        let parts = code.split(";base64,");
+        let contentType = parts[0].split(":")[1];
+        let raw = window.atob(parts[1]);
+        let rawLength = raw.length;
+        let uInt8Array = new Uint8Array(rawLength);
+        for (let i = 0; i < rawLength; ++i) {
+          uInt8Array[i] = raw.charCodeAt(i);
         }
-      },
-      convertImageToCanvas(image) {
-        var canvas = document.createElement("canvas");
-        canvas.width = image.width;
-        canvas.height = image.height;
-        canvas.getContext("2d").drawImage(image, 0, 0);
-        return canvas;
-      },
-      shot(e){
-        // console.log(e)
-        // send({code:'image',data:e})
-        var base64ToBlob = function(code) {
-          let parts = code.split(';base64,');
-          let contentType = parts[0].split(':')[1];
-          let raw = window.atob(parts[1]);
-          let rawLength = raw.length;
-          let uInt8Array = new Uint8Array(rawLength);
-          for(let i = 0; i < rawLength; ++i) {
-              uInt8Array[i] = raw.charCodeAt(i);
-          }
-          return new Blob([uInt8Array], {
-              type: contentType
-          });
-        };
-        let aLink = document.createElement('a');
-        let blob = base64ToBlob(e); //new Blob([content]);
-        let evt = document.createEvent("HTMLEvents");
-        evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
-        aLink.download = '截图';
-        aLink.href = URL.createObjectURL(blob);
-        aLink.click();
-      },
-      save(item){
-        let dataStr = window.localStorage.getItem('playData') || '[]'
-        let data = JSON.parse(dataStr);
-        data[this.playerIdx] = item
-        window.localStorage.setItem('playData',JSON.stringify(data))
-      },
-      clear(idx) {
-        let dataStr = window.localStorage.getItem('playData') || '[]'
-        let data = JSON.parse(dataStr);
-        data[idx-1] = null;
-        console.log(data);
-        window.localStorage.setItem('playData',JSON.stringify(data))
-      },
-      loadAndPlay(){
-        let dataStr = window.localStorage.getItem('playData') || '[]'
-        let data = JSON.parse(dataStr);
+        return new Blob([uInt8Array], {
+          type: contentType
+        });
+      };
+      let aLink = document.createElement("a");
+      let blob = base64ToBlob(e); //new Blob([content]);
+      let evt = document.createEvent("HTMLEvents");
+      evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
+      aLink.download = "截图";
+      aLink.href = URL.createObjectURL(blob);
+      aLink.click();
+    },
+    save(item) {
+      let dataStr = window.localStorage.getItem("playData") || "[]";
+      let data = JSON.parse(dataStr);
+      data[this.playerIdx] = item;
+      window.localStorage.setItem("playData", JSON.stringify(data));
+    },
+    clear(idx) {
+      let dataStr = window.localStorage.getItem("playData") || "[]";
+      let data = JSON.parse(dataStr);
+      data[idx - 1] = null;
+      console.log(data);
+      window.localStorage.setItem("playData", JSON.stringify(data));
+    },
+    loadAndPlay() {
+      let dataStr = window.localStorage.getItem("playData") || "[]";
+      let data = JSON.parse(dataStr);
 
-        data.forEach((item,i)=>{
-          if(item){
-            this.playerIdx = i
-            this.sendDevicePush(item)
-          }
-        })
-      }
+      data.forEach((item, i) => {
+        if (item) {
+          this.playerIdx = i;
+          this.sendDevicePush(item);
+        }
+      });
     }
-  };
+  }
+};
 </script>
 <style>
-  .btn{
-    margin: 0 10px;
-
-  }
-  .btn:hover{
-      color: #409EFF;
-  }
-  .btn.active{
-    color: #409EFF;
-
-  }
-  .redborder{
-    border: 2px solid red !important;
-  }
-  .play-box{
-    background-color: #000000;
-    border: 2px solid #505050;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
+.btn {
+  margin: 0 10px;
+}
+.btn:hover {
+  color: #409eff;
+}
+.btn.active {
+  color: #409eff;
+}
+.redborder {
+  border: 2px solid red !important;
+}
+.play-box {
+  background-color: #000000;
+  border: 2px solid #505050;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 </style>
 <style>
-  .videoList {
-    display: flex;
-    flex-wrap: wrap;
-    align-content: flex-start;
-  }
+.videoList {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+}
 
-  .video-item {
-    position: relative;
-    width: 15rem;
-    height: 10rem;
-    margin-right: 1rem;
-    background-color: #000000;
-  }
+.video-item {
+  position: relative;
+  width: 15rem;
+  height: 10rem;
+  margin-right: 1rem;
+  background-color: #000000;
+}
 
-  .video-item-img {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    margin: auto;
-    width: 100%;
-    height: 100%;
-  }
+.video-item-img {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  width: 100%;
+  height: 100%;
+}
 
-  .video-item-img:after {
-    content: "";
-    display: inline-block;
-    position: absolute;
-    z-index: 2;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    margin: auto;
-    width: 3rem;
-    height: 3rem;
-    background-image: url("../assets/loading.png");
-    background-size: cover;
-    background-color: #000000;
-  }
+.video-item-img:after {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  width: 3rem;
+  height: 3rem;
+  background-image: url("../assets/loading.png");
+  background-size: cover;
+  background-color: #000000;
+}
 
-  .video-item-title {
-    position: absolute;
-    bottom: 0;
-    color: #000000;
-    background-color: #ffffff;
-    line-height: 1.5rem;
-    padding: 0.3rem;
-    width: 14.4rem;
-  }
+.video-item-title {
+  position: absolute;
+  bottom: 0;
+  color: #000000;
+  background-color: #ffffff;
+  line-height: 1.5rem;
+  padding: 0.3rem;
+  width: 14.4rem;
+}
 
-  .baidumap {
-    width: 100%;
-    height: 100%;
-    border: none;
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    margin: auto;
-  }
+.baidumap {
+  width: 100%;
+  height: 100%;
+  border: none;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+}
 
-  /* 去除百度地图版权那行字 和 百度logo */
-  .baidumap > .BMap_cpyCtrl {
-    display: none !important;
-  }
-  .baidumap > .anchorBL {
-    display: none !important;
-  }
+/* 去除百度地图版权那行字 和 百度logo */
+.baidumap > .BMap_cpyCtrl {
+  display: none !important;
+}
+.baidumap > .anchorBL {
+  display: none !important;
+}
 </style>