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

648540858

2022-04-24 7f965a6922a079124671ad233e3c783da92c8e69

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

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

 web_src/src/App.vue

@@ -81,4 +81,24 @@
  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>

 web_src/src/components/common/jessibuca.vue

@@ -1,5 +1,5 @@
<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 @@
      forceNoOffscreen: false,
    };
  },
  props: ['containerId', 'videoUrl', 'error', 'hasAudio', 'height'],
  props: ['videoUrl', 'error', 'hasAudio', 'height'],
  mounted() {
    window.onerror = (msg) => {
      // console.error(msg)
@@ -71,19 +71,19 @@
  },
  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",
@@ -203,19 +203,6 @@
      this.jessibuca.on('metadata', function () {

      });
    },
    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)

 web_src/src/components/dialog/devicePlayer.vue

@@ -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">

 web_src/src/components/live.vue

@@ -18,8 +18,7 @@
                 @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>
              <player v-else :videoUrl="videoUrl[i-1]" fluent autoplay @screenshot="shot" @destroy="destroy"/>
            </div>
          </div>
        </el-main>
@@ -40,35 +39,19 @@
    },
    data() {
      return {
        showVideoDialog: true,
        hasAudio: false,
        videoUrl:[''],
        spilt:1,//分屏
        playerIdx:0,//激活播放器

        deviceList: [], //设备列表
        currentDevice: {}, //当前操作设备对象

        videoComponentList: [],
        updateLooper: 0, //数据刷新轮训标志
        currentDeviceChannelsLenth:0,
        winHeight: window.innerHeight - 200,
        currentPage:1,
        count:15,
        total:0,
        getDeviceListLoading: false,

        //channel
        searchSrt: "",
        channelType: "",
        online: "",
        channelTotal:0,
        deviceChannelList:[],
        loading:false
      };
    },
    mounted() {
      this.initData();

    },
    created(){
@@ -169,13 +152,6 @@
          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})
@@ -213,17 +189,6 @@
        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)
          }
        })
      }
    }
  };
</script>
@@ -232,16 +197,20 @@
    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;
@@ -319,6 +288,7 @@
  .baidumap > .BMap_cpyCtrl {
    display: none !important;
  }

  .baidumap > .anchorBL {
    display: none !important;
  }

 web_src/src/layout/index.vue

@@ -24,26 +24,6 @@
}
</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 @@
}
</style>
<style scoped>
.el-main {
  margin: 0;
}

.fade-enter {
  visibility: hidden;
  opacity: 0;

 web_src/src/router/index.js

@@ -99,16 +99,6 @@
          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 @@
      name: 'deviceTree',
      component: deviceTree,
    },
    {
      path: '/play/wasm/:url',
      name: 'wasmPlayer',
      component: wasmPlayer,
    },
    {
      path: '/play/rtc/:url',
      name: 'rtcPlayer',
      component: rtcPlayer,
    },
  ]
})