zc

src/api/basicsModules/index.js

@@ -195,3 +195,12 @@ export function laboratoryHazardDetailNotToken(query) {
     params: query
   })
 }
+
+//获取摄像头流地址
+export function iotCameraFindByCondition(data) {
+  return request({
+    url: '/iot/camera/findByCondition',
+    method: 'post',
+    data: data
+  })
+}

src/components/H5PlayerVideo/H5PlayerVideo.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="H5PlayerVideo">
     <div :id="videoData.id" :ref="videoData.id"></div>
-    <!--<p class="el-icon-full-screen full-screen-button" @click="fullScreen"></p>-->
+    <p class="full-screen-button" @click="fullScreen"></p>
+    <!--<p class="full-failed-button" v-if="fullScreenType" @click="outFullScreen"></p>-->
   </div>
 </template>
 
@@ -13,6 +14,7 @@
     },
     data() {
       return {
+        fullScreenType:false,
         videoCover: localStorage.getItem('fileBrowseEnvironment') + localStorage.getItem('videoCover'),
         videoData: {},
       }
@@ -32,6 +34,36 @@
       })
     },
     methods: {
+      //全屏
+      fullScreen() {
+        let self = this;
+        this.myPlugin.JS_FullScreenDisplay(true).then(
+          (res) => {
+            console.info('JS_FullScreenDisplay success');
+            // do you want...
+          },
+          (err) => {
+            console.info('JS_FullScreenDisplay failed');
+            // do you want...
+          }
+        );
+        self.$set(self,'fullScreenType',true);
+      },
+      //退出全屏
+      outFullScreen() {
+        let self = this;
+        this.myPlugin.JS_FullScreenDisplay(false).then(
+          (res) => {
+            console.info('JS_FullScreenDisplay success');
+            // do you want...
+          },
+          (err) => {
+            console.info('JS_FullScreenDisplay failed');
+            // do you want...
+          }
+        );
+        self.$set(self,'fullScreenType',false);
+      },
       initH5Player(split) {
         this.myPlugin = new window.JSPlugin({
           szId: this.videoData.id, //需要英文字母开头，唯一性，必填
@@ -48,31 +80,43 @@
           iMaxSplit: split,
           iCurrentSplit: split
         })
+        let iWndNum = 1;
+        let InterruptTime = 5;
+        this.myPlugin.JS_SetInterruptTime(iWndNum, InterruptTime).then(
+          () => {
+            // console.info('JS_SetInterruptTime success');
+            // do you want...
+          },
+          (err) => {
+            // console.info('JS_SetInterruptTime failed');
+            // do you want...
+          }
+        );
         // 事件回调绑定
         this.myPlugin.JS_SetWindowControlCallback({
-          windowEventSelect: function(iWndIndex) {  //插件选中窗口回调
-            console.log('windowSelect callback: ', iWndIndex)
+          windowEventSelect: function (iWndIndex) {  //插件选中窗口回调
+            // console.log('windowSelect callback: ', iWndIndex)
           },
-          pluginErrorHandler: function(iWndIndex, iErrorCode, oError) {  //插件错误回调
-            console.log('pluginError callback: ', iWndIndex, iErrorCode, oError)
+          pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {  //插件错误回调
+            // console.log('pluginError callback: ', iWndIndex, iErrorCode, oError)
           },
-          windowEventOver: function(iWndIndex) {  //鼠标移过回调
+          windowEventOver: function (iWndIndex) {  //鼠标移过回调
             //console.log(iWndIndex);
           },
-          windowEventOut: function(iWndIndex) {  //鼠标移出回调
+          windowEventOut: function (iWndIndex) {  //鼠标移出回调
             //console.log(iWndIndex);
           },
-          windowEventUp: function(iWndIndex) {  //鼠标mouseup事件回调
+          windowEventUp: function (iWndIndex) {  //鼠标mouseup事件回调
             //console.log(iWndIndex);
           },
-          windowFullCcreenChange: function(bFull) {  //全屏切换回调
-            console.log('fullScreen callback: ', bFull)
+          windowFullCcreenChange: function (bFull) {  //全屏切换回调
+            // console.log('fullScreen callback: ', bFull)
           },
-          firstFrameDisplay: function(iWndIndex, iWidth, iHeight) {  //首帧显示回调
-            console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight)
+          firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {  //首帧显示回调
+            // console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight)
           },
-          performanceLack: function() {  //性能不足回调
-            console.log('performanceLack callback: ')
+          performanceLack: function () {  //性能不足回调
+            // console.log('performanceLack callback: ')
           }
         })
       },
@@ -136,7 +180,8 @@
     }
     position: relative;
     .full-screen-button {
-      color: #fff;
+      background: url("../../assets/ZDimages/basicsModules/icon_0.png");
+      background-size: 100%;
       position: absolute;
       font-size: 20px;
       height: 30px;
@@ -145,7 +190,21 @@
       text-align: center;
       top: 0;
       right: 0;
-      z-index: 1;
+      z-index: 999;
+      cursor: pointer;
+    }
+    .full-failed-button {
+      background: url("../../assets/ZDimages/basicsModules/icon_0.png");
+      background-size: 100%;
+      position: fixed;
+      font-size: 20px;
+      height: 30px;
+      width: 30px;
+      line-height: 30px;
+      text-align: center;
+      bottom: 0;
+      right: 0;
+      z-index: 999999;
       cursor: pointer;
     }
   }

src/views/demo.vue

@@ -2,49 +2,67 @@
   <div class="app-container demo">
     <div class="page-top-title-box">
       <p class="page-top-title-name-p">测试页面</p>
-      <p class="page-top-title-add-p" @click="demo2">测试</p>
+      <p class="page-top-title-add-p">测试</p>
     </div>
     <div class="scrollbar-box" v-if="pageType">
-      <!--<xgPlayerVideo v-for="(item,index) in videoList" :key="index" :videoProps="item"-->
-                     <!--:style="'display: inline-block;width:'+item.width+'px;height:'+item.height+'px;'"></xgPlayerVideo>-->
-      <!--<mpegts-video :style="'display: inline-block;width:'+item.width+'px;height:'+item.height+'px;'" :videoProps="item" v-for="(item,index) in videoList" :key="index"></mpegts-video>-->
       <H5PlayerVideo v-for="(item,index) in videoList" :key="index" :videoProps="item"></H5PlayerVideo>
     </div>
   </div>
 </template>
 <script>
-  import { jobAdminLogin } from "@/api/commonality/homologouspermission";
-  import mpegtsVideo from '@/components/mpegtsVideo/mpegtsVideo.vue';
-  import xgPlayerVideo from '@/components/xgPlayerVideo/xgPlayerVideo.vue';
+  import { iotCameraFindByCondition } from "@/api/basicsModules/index";
   import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue';
   export default {
     name: 'demo',
     components: {
-      mpegtsVideo,
-      xgPlayerVideo,
       H5PlayerVideo
     },
     data () {
       return {
         pageType:true,
-        videoList:[
-          {
-            width:600,    //(宽度:非必传-默认600)
-            height:338,   //(高度:非必传-默认338)
-            url: 'http://www.sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-480p.flv',
-          },
-        ],
+        videoList:[],
       }
     },
     created(){
 
     },
     mounted(){
-      // this.demo();
+      this.getUrl();
     },
     methods:{
-      demo2(){
-        this.$set(this,'pageType',!this.pageType);
+      getUrl() {
+        let self = this;
+        // type 1.楼栋 2.楼层 3.楼道 4.实验室
+        let obj = {
+          page:'1',
+          pageSize:'4',
+          buildId:'',
+          floorId:'',
+          passageway:'',
+          subIds:['1793100035379396609'],
+        };
+        iotCameraFindByCondition(obj).then(response => {
+          if (!response.data.records[0]){
+            this.msgError('视频异常,请联系管理员')
+          }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,
+                }
+              )
+            }
+            this.$set(this,'videoList',list)
+            this.$nextTick(()=>{
+              setTimeout(function(){
+                self.$set(self, 'pageType', true);
+              },1000);
+            })
+          }
+        });
       },
     },
   }