zc

.env.production

@@ -23,8 +23,11 @@ VUE_APP_VERSION_DIFFERENCE_FIELD = 'kuangYeDaXue_nanHu'
 
 # ####################外网接口配置####################
 
-# 现场
-VUE_APP_BASE_API = 'labcontrol.nwafu.edu.cn/api'
+# 西农
+# VUE_APP_BASE_API = 'labcontrol.nwafu.edu.cn/api'
+
+# 山西农大
+VUE_APP_BASE_API = 'lasfl.sxau.edu.cn/api'
 
 # 1.8外网地址
 # VUE_APP_BASE_API = 'lab.zjznai.com/labTest'
@@ -37,8 +40,11 @@ VUE_APP_BASE_API = 'labcontrol.nwafu.edu.cn/api'
 
 # ####################内网接口配置####################
 
-# 现场
-VUE_APP_BASE_LOCAL_API = '172.16.0.65/api'
+# 西农
+# VUE_APP_BASE_LOCAL_API = '172.16.0.65/api'
+
+# 山西农大
+VUE_APP_BASE_API = 'lasfl.sxau.edu.cn/api'
 
 # 1.8内网地址
 # VUE_APP_BASE_LOCAL_API = '192.168.1.8/api'

src/views/home.vue

@@ -4,22 +4,26 @@
       <miniProgramPlayback v-if="pageType == 'miniProgramPlayback'"></miniProgramPlayback>
       <miniProgramVideo v-if="pageType == 'miniProgramVideo'"></miniProgramVideo>
       <miniProgramVideoMpegts v-if="pageType == 'miniProgramVideoMpegts'"></miniProgramVideoMpegts>
+      <miniProgramVideoHls v-if="pageType == 'miniProgramVideoHls'"></miniProgramVideoHls>
     </div>
 </template>
 <script>
     import miniProgramPlayback from '@/views/miniProgramPlayback/index.vue';
     import miniProgramVideo from '@/views/miniProgramVideo/index.vue';
     import miniProgramVideoMpegts from '@/views/miniProgramVideoMpegts/index.vue';
+    import miniProgramVideoHls from '@/views/miniProgramVideoHls/index.vue';
     export default {
         name: 'home',
         components: {
           miniProgramPlayback,
           miniProgramVideo,
           miniProgramVideoMpegts,
+          miniProgramVideoHls,
         },
         data() {
             return {
               pageType:null,
+              appName:null,
             }
         },
         created() {
@@ -34,6 +38,8 @@
             // });
             if(text.indexOf('mpegts') != -1){
               this.$set(this,'pageType','miniProgramVideoMpegts');
+            }else if(text.indexOf('hls') != -1){
+              this.$set(this,'pageType','miniProgramVideoHls');
             }else{
               this.$set(this,'pageType','miniProgramVideo');
             }

src/views/miniProgramVideoHls/index.vue

@@ -0,0 +1,254 @@
+<template>
+  <div class="miniProgramVideoHls">
+    <!--<p>{{webType?webType:'无'}}</p>-->
+    <p class="null-text" v-if="nullType">{{nullType}}</p>
+    <div class="video-max-box" v-if="buttonType&&!fullVideoType">
+      <video
+        v-for="(item,index) in videoList" :key="index"
+        :id="item.cameraIndexCode" ref="hlsVideo"
+        :width="item.width" :height="item.height"
+        :src="item.url"
+        controls
+        controlsList="nodownload noplaybackrate"
+        autoplay muted playsinline loop
+        preload="auto"
+        webkit-playsinline
+        x5-video-player-type="h5"
+        x5-video-player-fullscreen="true"
+        x5-video-orientation="portrait"
+      ></video>
+
+      <!--x5-video-orientation="landscape"-->
+    </div>
+  </div>
+</template>
+<script>
+  import mpegtsVideo from '@/components/mpegtsVideo/mpegtsVideo.vue'
+  export default {
+    name: 'index',
+    components: {
+      mpegtsVideo,
+    },
+    data () {
+      return {
+        buttonType: false,
+        width: null,
+        height: null,
+        videoList: [],
+        nullType:false,
+        //报警视频数据
+        videoProps:null,
+        //全屏视频参数
+        fullVideoProps:{},
+        fullVideoType:false,
+        //浏览器类型
+        webType:null,
+      }
+    },
+    created(){
+      const ratio = 0.5625;
+      const winWidth = window.innerWidth;
+      let width = parseInt(winWidth - 20);
+      let height = parseInt(this.accMul(width, ratio));
+      this.$set(this, 'width', width);
+      this.$set(this, 'height', height)
+    },
+    mounted(){
+      // this.getUrl();
+      let userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
+      if (userAgent.indexOf("iPhone") > -1) {
+        this.$set(this,'webType','iPhone');
+      }else if (userAgent.indexOf("Android") > -1) {
+        this.$set(this,'webType','Android');
+      }
+      this.$set(this,'buttonType',true);
+      if(this.webType == 'iPhone'){
+        this.$set(this,'videoList',[
+          {
+            width:this.width,    //(宽度:非必传-默认600)
+            height:this.height,   //(高度:非必传-默认338)
+            url:"http://192.168.1.88:8230/rtp/440102004920000000010064_34020000001320000064/hls.m3u8",
+            cameraIndexCode:1,        //(ID:非必传-默认随机生成)       //(视频地址:必传)
+          },
+          {
+            width:this.width,    //(宽度:非必传-默认600)
+            height:this.height,   //(高度:非必传-默认338)
+            url:"http://192.168.1.88:8230/rtp/440102004920000000010064_34020000001320000064/hls.m3u8",
+            cameraIndexCode:2,        //(ID:非必传-默认随机生成)       //(视频地址:必传)
+          },
+        ]);
+      }else{
+        this.$set(this,'videoList',[
+          {
+            width:this.width,    //(宽度:非必传-默认600)
+            height:this.height,   //(高度:非必传-默认338)
+            url:"http://192.168.1.88:8230/rtp/440102004920000000010064_34020000001320000064.live.mp4",
+            cameraIndexCode:1,        //(ID:非必传-默认随机生成)       //(视频地址:必传)
+          },
+          {
+            width:this.width,    //(宽度:非必传-默认600)
+            height:this.height,   //(高度:非必传-默认338)
+            url:"http://192.168.1.88:8230/rtp/440102004920000000010064_34020000001320000064.live.mp4",
+            cameraIndexCode:2,        //(ID:非必传-默认随机生成)       //(视频地址:必传)
+          },
+        ]);
+      }
+    },
+    methods:{
+      getUrl() {
+        let text = decodeURIComponent(window.location.href);
+        if(text.indexOf('touken') != -1){
+          this.subVideo(text);
+        }else{
+          this.$set(this,'nullType','参数异常,请联系管理员');
+        }
+      },
+      subVideo(text){
+        let self = this;
+        if(text.indexOf('touken') == -1){
+          this.$set(this,'nullType','touken参数异常,请联系管理员');
+          return
+        }
+        if(text.indexOf('source') == -1){
+          this.$set(this,'nullType','source参数异常,请联系管理员');
+          return
+        }
+        if(text.indexOf('type') == -1){
+          this.$set(this,'nullType','type参数异常,请联系管理员');
+          return
+        }
+        let urlList = text.split("?")[1].split("&");
+        let urlData = {};
+        urlList.forEach((item) => {
+          urlData[item.split("=")[0]] = item.split("=")[1];
+        });
+        localStorage.setItem('touken',urlData.touken)
+        // type 1.楼栋 2.楼层 3.楼道 4.实验室 5.楼道+实验室
+        let obj = {
+          page:'1',
+          pageSize:'4',
+          protocol:window.location.href.indexOf('https') !== -1?'wss':'ws',
+          streamType:1,
+        };
+        if(urlData.type == 1){
+          obj.buildId = urlData.buildId;
+        }else  if(urlData.type == 2){
+          obj.floorId = urlData.floorId;
+        }else  if(urlData.type == 3){
+          obj.passageway = urlData.floorId;
+        }else  if(urlData.type == 4){
+          obj.subIds = [urlData.subId];
+        }else if(urlData.type == 5){
+          obj.passageway = urlData.floorId;
+          obj.subIds = [urlData.subId];
+        }
+        if(urlData.source == '2'){
+          obj.source = 2;
+        }else if (urlData.source == '5'){
+          obj.source = 5;
+        }
+        if(urlData.type){
+          iotCameraFindByCondition(obj).then(response => {
+            if (!response.data.records[0]){
+              this.$set(this,'nullType','视频异常,请联系管理员');
+            }else{
+              let list = [];
+              for(let i=0;i<response.data.records.length;i++){
+                list.push(
+                  {
+                    width: this.width, //(宽度:非必传-默认600)
+                    height: this.height, //(高度:非必传-默认338)
+                    url: response.data.records[i].streamUrl,
+                    cameraIndexCode: response.data.records[i].deviceNo,
+                  }
+                )
+              }
+              this.$set(this,'videoList',list)
+              this.$nextTick(()=>{
+                setTimeout(function(){
+                  self.$set(self, 'buttonType', true);
+                },1000);
+              })
+            }
+          });
+        }else{
+          this.$set(this,'nullType','参数异常,请联系管理员');
+        }
+      },
+      //乘法
+      accMul(arg1, arg2) {
+        var m = 0, s1 = arg1.toString(), s2 = arg2.toString();
+        try {
+          m += s1.split(".")[1].length
+        } catch (e) {
+        }
+        try {
+          m += s2.split(".")[1].length
+        } catch (e) {
+        }
+        return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m)
+      },
+    },
+  }
+</script>
+<style scoped lang="scss">
+  .miniProgramVideoHls{
+    flex:1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    .null-text{
+      text-align: center;
+      font-size:16px;
+      line-height:80px;
+    }
+    .video-max-box {
+      padding-top:10px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+    }
+
+    .video-box {
+      margin: 0 auto 10px;
+      display: inline-block
+    }
+    video::-webkit-media-controls-play-button {
+      display: none !important;
+    }
+    video::-webkit-media-controls-current-time-display {
+      display: none !important;
+    }
+    video::-webkit-media-controls-time-remaining-display {
+      display: none !important;
+    }
+    video::-webkit-media-controls-timeline {
+      display: none !important;
+    }
+    video::-webkit-media-controls-mute-button {
+      display: none !important;
+    }
+    video::-webkit-media-controls-volume-slider {
+      display: none !important;
+    }
+    /*video::-webkit-media-controls-fullscreen-button {*/
+      /*display: none !important;*/
+    /*}*/
+    video::-webkit-media-controls-toggle-closed-captions-button {
+      display: none !important;
+    }
+    /* 隐藏画中画按钮（非标准） */
+    video::-webkit-media-controls-picture-in-picture-button {
+      display: none !important;
+    }
+
+    /* 隐藏下载按钮（部分浏览器） */
+    video::-internal-media-controls-download-button {
+      display: none !important;
+    }
+
+    /* 移动端额外控制 */
+    video {
+      -webkit-tap-highlight-color: transparent;
+    }
+  }
+</style>

src/views/miniProgramVideoMpegts/index.vue

@@ -2,9 +2,8 @@
   <div class="miniProgramVideoMpegts">
     <p class="null-text" v-if="nullType">{{nullType}}</p>
     <div class="video-max-box" v-if="buttonType&&!fullVideoType">
-      <mpegts-video class="video-box" :videoProps="item" v-for="(item,index) in videoList" :key="index"></mpegts-video>
+      <mpegts-video class="video-box" :videoProps="item" ref="mpegtsRef" v-for="(item,index) in videoList" :key="index"></mpegts-video>
     </div>
-
   </div>
 </template>
 <script>
@@ -40,6 +39,18 @@
       this.getUrl();
     },
     methods:{
+      fullScreenWindowSwitch(data){
+        let self = this;
+        for(let i=0;i<self.$refs.mpegtsRef.length;i++){
+          if(data.cameraIndexCode != self.$refs.mpegtsRef[i].videoData.cameraIndexCode){
+            if(data.type){
+              self.$refs.mpegtsRef[i].stopVideo();
+            }else{
+              self.$refs.mpegtsRef[i].playVideo();
+            }
+          }
+        }
+      },
       getUrl() {
         let text = decodeURIComponent(window.location.href);
         if(text.indexOf('touken') != -1){