h5player播放接口添加

front/src/api/file.js

@@ -116,11 +116,22 @@ export function getPlaceType() {
 
 //西海岸 根据标签树查询视频列表
 export function CameraConditionPlaceType(params) {
-  return axios.post(
+    return axios.post(
-    'http://10.134.135.92:9537/data_service/getCamera/CameraConditionPlaceType',
+        'http://10.134.135.92:9537/data_service/getCamera/CameraConditionPlaceType' +
-    params,
+        params,
-    config2
+        config2
-  )
+    )
+}
+
+// 西海岸视频wss流获取
+export function getCameraLiveStream(params) {
+    return axios.get(
+        'http://10.134.135.92:9537/data_service/getCamera/getCameraLiveStream?cameraIndexCode=' +
+        params.channelId +
+        '&protocol=' +
+        'wss' + '&transmode=1&streamType=1',
+        config2
+    )
 }
 // 西海岸--获取摄像头列表的后台地址 (测试环境地址：10.134.135.92:9537)
 let _cameraUrl =

front/src/supermap/advance-init.js

@@ -1734,8 +1734,9 @@ export function MapFun(mapObj) {
                         //     })
                         // }
                     marker.on('click', e => {
-                        console.log('点位数据', e)
+                        //console.log('点位数据', e)
-                        clickDataList.push(e.resourceData);
+                        //console.log('点位数据1', e.sourceTarget.resourceData)
+                        clickDataList.push(e.sourceTarget.resourceData);
                         // 判断是否需要选中之后更换marker的图标
                         //const layers = layerGroup.get(layerName).getLayers()
                         // layers.forEach((layer) => {

front/src/views/home/components/H5Player.vue

@@ -7,6 +7,7 @@
 <script>
 const IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否移动设备
 const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
+import { message } from 'ant-design-vue'
   export default {
     name: 'H5Player',
     props: {
@@ -57,8 +58,20 @@ const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
       this.createPlayer()
       this.arrangeWindow()
       //videoUrl this.realplay(this.videoUrl,0);//循环传过来的数组进行播放，index根据选中的个数
-      this.realplay('wss://10.134.135.44:6014/proxy/10.10.20.14:559/openUrl/y3mFfcA',0);
+      this.realplay(this.videoUrl,0);
+      //this.realplay('wss://10.134.135.44:6014/proxy/10.10.20.14:559/openUrl/y3mFfcA',0);
     },
+     watch: {
+            videoUrl: {
+            	// 数据发生变化就会调用这个函数  
+                handler(newVal, oldVal) {
+                    console.log('oldVal:', oldVal)
+                    console.log('newVal:', newVal)
+                },
+                // 立即处理 进入页面就触发
+                immediate: true
+            }
+        },
     methods: {
      // 海康视频初始化加载
      init () {
@@ -127,7 +140,10 @@ const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
        () => {
          console.log('realplay success')
        },
-       e => { console.error(e) }
+       e => { 
+        console.error(e);
+        message.error('请联系视频提供方!')
+         }
      )
    },
    // 关闭所有视频

front/src/views/home/videoSurveillance/components/CameraPopupOnMap.vue

@@ -28,11 +28,11 @@
               <h5-player :video-url="videoUrl"></h5-player> 
               </div>
               <div class="text-label">
-                <span>{{defaultIndex}}</span>/<span>{{cameraDataList.length}}</span>
+                <span>{{defaultIndex+1}}</span>/<span>{{cameraDataList.length}}</span>
               </div>
               <div class="footer-button"> 
-                <a-button type="primary" @click="applyNow(url)">立即申请</a-button>
+                <a-button type="primary" @click="applyNow(cameraDataList[defaultIndex])">立即申请</a-button>
-                <a-button type="primary" style="margin-left:20px" @click="addIntoCart(url)">加入申购车</a-button>
+                <a-button type="primary" style="margin-left:20px" @click="addIntoCart(cameraDataList[defaultIndex])">加入申购车</a-button>
                 </div>
       </div>
     </div>
@@ -46,9 +46,11 @@
     LeftCircleOutlined,
     RightCircleOutlined,
   } from '@ant-design/icons-vue'
+  import { useRouter } from 'vue-router'
   import H5Player from '@/views/home/components/H5Player.vue'
   import mybus from '@/myplugins/mybus'
   import { getStreamByChannelCode } from '@/api/videoSurveillance'
+  import {getCameraLiveStream} from '@/api/file'
   export default {
     name: '',
     components: {
@@ -65,7 +67,9 @@
         },
       },
     },
-    mounted() {},
+    mounted() {
+      this.getVideoUrl(this.cameraDataList[this.defaultIndex]);
+    },
     // directives: {
     //     viewer: viewer({
     //         debug: true,
@@ -76,7 +80,8 @@
         openVideo: false,
         videoStream: '',  
          videoUrl:'', //视频预览url
-         defaultIndex:0//默认显示列表中的对一个
+         defaultIndex:0,//默认显示列表中的对一个
+         router:useRouter()
       }
     },
     methods: {
@@ -90,32 +95,59 @@
       //立即申请
       applyNow(item){
         console.log('applyNowapplyNow',item);
-         mybus.emit('selectCamera', item)
+       //跳转至申请页面
+          this.router.push({
+          path: '/apply',
+          query: {
+         
+          },
+        })
       },
       //加入申购车
       addIntoCart(item){
          console.log('addIntoCartaddIntoCart',item);
           mybus.emit('selectCamera', item)
       },
+      //获取视频控件所需播放地址
+      getVideoUrl(data){
+      let param = data;
+      getCameraLiveStream(param).then((res) => {
+      //console.log('555555rrrrr',res)
+      if(res.data.data){
+        this.videoUrl = res.data.data.url;
+      }
+      //visible.value = true
+      //options.src = res.data.data
+      //options.src ="wss://10.134.135.45:6014/proxy/10.10.20.15:559/openUrl/0kIF7La"
+      })
+      },
+      //查看前一个
       handlePrev(){
         let maxLength = this.cameraDataList.length-1;
-        this.defaultIndex = this.defaultIndex - 1;
          console.log('opopopop',this.cameraDataList[maxLength]);
         if(this.defaultIndex === 0){
+          this.defaultIndex = maxLength;
           console.log('opopopop',this.cameraDataList[maxLength]);
           //根据当前数据的channelId查询视频播放的url传递给H5组件调用接口
           //this.videoUrl =
+            this.getVideoUrl(this.cameraDataList[maxLength]);
         } else{
+           this.defaultIndex = this.defaultIndex - 1;
            console.log('uyutyuyopopopop',this.cameraDataList[this.defaultIndex]);
+            this.getVideoUrl(this.cameraDataList[this.defaultIndex]);
         }
        
       },
+      //查看下一个
       handleNext(){
-         this.defaultIndex = this.defaultIndex + 1;
           if(this.defaultIndex === this.cameraDataList.length){
-          console.log('opopopop',this.cameraDataList[0]);
+            this.defaultIndex = this.cameraDataList.length;
+            console.log('opopopop',this.cameraDataList[0]);
+            this.getVideoUrl(this.cameraDataList[0]);
           }else{
+            this.defaultIndex = this.defaultIndex + 1;
                console.log('opopopop',this.cameraDataList[this.defaultIndex]); 
+                  this.getVideoUrl(this.cameraDataList[this.defaultIndex]);
           }
        
       }

front/src/views/home/videoSurveillance/index.vue

@@ -224,6 +224,12 @@ import { ElMessage } from 'element-plus'
         this.queryCameraConditionPlace(data)
 
       })
+
+      //清空地图上所有数据
+       mybus.off('clearLeftSelect')
+      mybus.on('clearLeftSelect', () => {
+       this.hiMapFun.clearAllLayers();
+      })
     },
     methods: {
       //查询标签视频