Merge pull request #448 from hotcoffie/wvp-28181-2.0

1.修正了播放地址无法正常播放视频的问题，包含两个错误：

Merge pull request #448 from hotcoffie/wvp-28181-2.0
1.修正了播放地址无法正常播放视频的问题，包含两个错误：
648540858 · GitHub
2 parents 9ab99edc b8166053
Showing 6 changed files with 277 additions and 324 deletions
web_src/src/App.vue
web_src/src/components/common/jessibuca.vue
web_src/src/components/dialog/devicePlayer.vue
web_src/src/components/live.vue
web_src/src/layout/index.vue
web_src/src/router/index.js
@@ -81,4 +81,24 @@ body,
   text-align: center;
   padding-top: 0px !important;
 }
+
+/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+/*定义滚动条轨道 内阴影+圆角*/
+::-webkit-scrollbar-track {
+  border-radius: 4px;
+  background-color: #F5F5F5;
+}
+
+/*定义滑块 内阴影+圆角*/
+::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background-color: #c8c8c8;
+  box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
+}
 </style>
 <template>
-  <div :id="containerId" :ref="containerId" @dblclick="fullscreenSwich">
+  <div id="container" ref="containerId" @dblclick="fullscreenSwich" style="width: 100%">
     <div class="buttons-box" id="buttonsBox">
       <div class="buttons-box-left">
         <i v-if="!playing" class="iconfont icon-play jessibuca-btn" @click="playBtnClick"></i>
@@ -44,7 +44,7 @@ export default {
       forceNoOffscreen: false,
     };
   },
-  props: ['containerId', 'videoUrl', 'error', 'hasAudio', 'height'],
+  props: ['videoUrl', 'error', 'hasAudio', 'height'],
   mounted() {
     window.onerror = (msg) => {
       // console.error(msg)
@@ -71,19 +71,19 @@ export default {
   },
   methods: {
     updatePlayerDomSize() {
-      let dom = document.getElementById(this.containerId);
+      let dom = document.getElementById('container');
       const width = dom.parentNode.clientWidth
       dom.style.width = width + 'px';
       dom.style.height = (9 / 16) * width + "px";
     },
     create() {
       let options = {};
-      console.log(this.$refs[this.containerId])
+      console.log(this.$refs.containerId)
       console.log("hasAudio  " + this.hasAudio)
  
       this.jessibuca = new window.Jessibuca(Object.assign(
         {
-          container: this.$refs[this.containerId],
+          container: this.$refs.containerId,
           videoBuffer: 0.2, // 最大缓冲时长，单位秒
           isResize: true,
           decoder: "static/js/jessibuca/decoder.js",
@@ -204,19 +204,6 @@ export default {
  
       });
     },
-    resize() {
-      if (this.jessibuca) {
-        this.jessibuca.resize()
-        this.$nextTick(() => {
-          let dom = document.getElementById(this.containerId);
-          if (dom.parentNode.clientHeight == 0) {
-            dom.style.height = (9 / 16) * dom.clientWidth + "px"
-          }
-          dom.style.height = dom.parentNode.clientHeight + "px";
-          dom.style.width = dom.parentNode.clientWidth + "px";
-        })
-      }
-    },
     playBtnClick: function (event) {
       this.play(this.videoUrl)
     },
@@ -4,7 +4,7 @@
     <el-dialog title="视频播放" top="0" :close-on-click-modal="false" :visible.sync="showVideoDialog" @close="close()">
         <!-- <LivePlayer v-if="showVideoDialog" ref="videoPlayer" :videoUrl="videoUrl" :error="videoError" :message="videoError" :hasaudio="hasaudio" fluent autoplay live></LivePlayer> -->
       <div style="width: 100%; height: 100%">
-        <player containerId="container" ref="videoPlayer" :visible.sync="showVideoDialog" :videoUrl="videoUrl" :error="videoError" :message="videoError" height="100px" :hasAudio="hasAudio" fluent autoplay live ></player>
+        <player ref="videoPlayer" :visible.sync="showVideoDialog" :videoUrl="videoUrl" :error="videoError" :message="videoError" height="100px" :hasAudio="hasAudio" fluent autoplay live ></player>
       </div>
         <div id="shared" style="text-align: right; margin-top: 1rem;">
             <el-tabs v-model="tabActiveName" @tab-click="tabHandleClick">
 <template>
   <div id="devicePosition" style="width:100vw; height: 91vh">
-    <el-container v-loading="loading" style="height: 91vh;" element-loading-text="拼命加载中" >
+    <el-container v-loading="loading" style="height: 91vh;" element-loading-text="拼命加载中">
       <el-aside width="300px" style="background-color: #ffffff">
-        <DeviceTree :clickEvent="clickEvent" :contextMenuEvent="contextMenuEvent" ></DeviceTree>
+        <DeviceTree :clickEvent="clickEvent" :contextMenuEvent="contextMenuEvent"></DeviceTree>
       </el-aside>
       <el-container>
         <el-header height="5vh" style="text-align: left;font-size: 17px;line-height:5vh">
@@ -17,9 +17,8 @@
                  :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;">{{i}}</div>
-              <player v-else :ref="'player'+i" :videoUrl="videoUrl[i-1]"  fluent autoplay :height="true"
-                      :containerId="'player'+i" @screenshot="shot" @destroy="destroy"></player>
+              <div v-if="!videoUrl[i-1]" style="color: #ffffff;font-size: 30px;font-weight: bold;">{{ i }}</div>
+              <player v-else :videoUrl="videoUrl[i-1]" fluent autoplay @screenshot="shot" @destroy="destroy"/>
             </div>
           </div>
         </el-main>
@@ -29,297 +28,268 @@
 </template>
  
 <script>
-  import uiHeader from "../layout/UiHeader.vue";
-  import player from './common/jessibuca.vue'
-  import DeviceTree from './common/DeviceTree.vue'
+import uiHeader from "../layout/UiHeader.vue";
+import player from './common/jessibuca.vue'
+import DeviceTree from './common/DeviceTree.vue'
  
-  export default {
-    name: "live",
-    components: {
-      uiHeader, player, DeviceTree
-    },
-    data() {
-      return {
-        showVideoDialog: true,
-        hasAudio: false,
-        videoUrl:[''],
-        spilt:1,//分屏
-        playerIdx:0,//激活播放器
+export default {
+  name: "live",
+  components: {
+    uiHeader, player, DeviceTree
+  },
+  data() {
+    return {
+      videoUrl: [''],
+      spilt: 1,//分屏
+      playerIdx: 0,//激活播放器
  
-        deviceList: [], //设备列表
-        currentDevice: {}, //当前操作设备对象
+      updateLooper: 0, //数据刷新轮训标志
+      count: 15,
+      total: 0,
  
-        videoComponentList: [],
-        updateLooper: 0, //数据刷新轮训标志
-        currentDeviceChannelsLenth:0,
-        winHeight: window.innerHeight - 200,
-        currentPage:1,
-        count:15,
-        total:0,
-        getDeviceListLoading: false,
+      //channel
+      loading: false
+    };
+  },
+  mounted() {
  
-        //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%'}
+      }
+    }
+  },
+  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)
     },
-    created(){
-      this.checkPlayByParam()
+    '$route.fullPath': 'checkPlayByParam'
+  },
+  destroyed() {
+    clearTimeout(this.updateLooper);
+  },
+  methods: {
+    destroy(idx) {
+      console.log(idx);
+      this.clear(idx.substring(idx.length - 1))
     },
-
-    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%'}
-        }
+    clickEvent: function (data) {
+      if (data.channelId && data.subCount == 0) {
+        this.sendDevicePush(data)
       }
     },
-    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()
-            }
-          })
+    contextMenuEvent: function (data) {
  
-        }
-        window.localStorage.setItem('split',newValue)
-      },
-      '$route.fullPath':'checkPlayByParam'
-    },
-    destroyed() {
-      clearTimeout(this.updateLooper);
     },
-    methods: {
-      destroy(idx) {
-        console.log(idx);
-        this.clear(idx.substring(idx.length-1))
-      },
-      clickEvent: function (data) {
-        if (data.channelId && data.subCount == 0) {
-          this.sendDevicePush(data)
+    //通知设备上传媒体流
+    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)
+        if (res.data.code == 0 && res.data.data) {
+          itemData.playUrl = res.data.data.httpsFlv
+          that.setPlayUrl(res.data.data.ws_flv, idxTmp)
+        } else {
+          that.$message.error(res.data.msg);
         }
-      },
-      contextMenuEvent: function (data) {
+      }).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)
  
-      },
-      //通知设备上传媒体流
-      sendDevicePush: function (itemData) {
-        if(itemData.status===0){
-          this.$message.error('设备离线!');
-          return
+    },
+    checkPlayByParam() {
+      let {deviceId, channelId} = this.$route.query
+      if (deviceId && channelId) {
+        this.sendDevicePush({deviceId, channelId})
+      }
+    },
+    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);
         }
-        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)
-          if (res.data.code == 0 && res.data.data) {
-            itemData.playUrl = res.data.data.httpsFlv
-            that.setPlayUrl(res.data.data.ws_flv,idxTmp)
-          }else {
-            that.$message.error(res.data.msg);
-          }
-        }).catch(function (e) {
-        }).finally(()=>{
-          that.loading = false
+        return new Blob([uInt8Array], {
+          type: contentType
         });
-      },
-      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);
-          }
-          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)
-          }
-        })
-      }
-    }
-  };
+      };
+      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))
+    },
+  }
+};
 </script>
 <style>
-  .btn{
-    margin: 0 10px;
+.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: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>
@@ -24,26 +24,6 @@ export default {
 }
 </script>
 <style>
-/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-/*定义滚动条轨道 内阴影+圆角*/
-::-webkit-scrollbar-track {
-  border-radius: 4px;
-  background-color: #F5F5F5;
-}
-
-/*定义滑块 内阴影+圆角*/
-::-webkit-scrollbar-thumb {
-  border-radius: 4px;
-  background-color: #c8c8c8;
-  box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
-}
-
 /*定义标题栏*/
 .page-header {
   background-color: #FFFFFF;
@@ -64,10 +44,6 @@ export default {
 }
 </style>
 <style scoped>
-.el-main {
-  margin: 0;
-}
-
 .fade-enter {
   visibility: hidden;
   opacity: 0;
@@ -99,16 +99,6 @@ export default new VueRouter({
           component: media,
         },
         {
-          path: '/play/wasm/:url',
-          name: 'wasmPlayer',
-          component: wasmPlayer,
-        },
-        {
-          path: '/play/rtc/:url',
-          name: 'rtcPlayer',
-          component: rtcPlayer,
-        },
-        {
           path: '/map',
           name: 'devicePosition',
           component: devicePosition,
@@ -125,5 +115,15 @@ export default new VueRouter({
       name: 'deviceTree',
       component: deviceTree,
     },
+    {
+      path: '/play/wasm/:url',
+      name: 'wasmPlayer',
+      component: wasmPlayer,
+    },
+    {
+      path: '/play/rtc/:url',
+      name: 'rtcPlayer',
+      component: rtcPlayer,
+    },
   ]
 })