跳转海康视频播放

components.d.ts

@@ -11,17 +11,12 @@ declare module 'vue' {
     500: typeof import('./src/components/errorMessage/500.vue')['default']
     AButton: typeof import('ant-design-vue/es')['Button']
     AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider']
-    ADropdown: typeof import('ant-design-vue/es')['Dropdown']
     AForm: typeof import('ant-design-vue/es')['Form']
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
     AImage: typeof import('ant-design-vue/es')['Image']
     AInput: typeof import('ant-design-vue/es')['Input']
     AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
-    AMenu: typeof import('ant-design-vue/es')['Menu']
-    AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
-    ASegmented: typeof import('ant-design-vue/es')['Segmented']
     ASpin: typeof import('ant-design-vue/es')['Spin']
-    AStatistic: typeof import('ant-design-vue/es')['Statistic']
     ATimeline: typeof import('ant-design-vue/es')['Timeline']
     ATimelineItem: typeof import('ant-design-vue/es')['TimelineItem']
     ATree: typeof import('ant-design-vue/es')['Tree']

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@amap/amap-jsapi-loader": "^1.0.1",
         "@amap/amap-jsapi-types": "^0.0.13",
+        "@ant-design/icons-vue": "^7.0.1",
         "@codemirror/lang-java": "^6.0.1",
         "@codemirror/lang-json": "^6.0.1",
         "@codemirror/lang-sql": "^6.5.4",
@@ -42,6 +43,7 @@
         "pinia": "^2.1.6",
         "pinia-plugin-persistedstate": "^3.2.0",
         "terser": "^5.19.2",
+        "v-scale-screen": "^2.2.0",
         "vue": "^3.3.4",
         "vue-codemirror": "^6.1.1",
         "vue-router": "4",
@@ -4230,6 +4232,17 @@
         "uuid": "dist/bin/uuid"
       }
     },
+    "node_modules/v-scale-screen": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/v-scale-screen/-/v-scale-screen-2.2.0.tgz",
+      "integrity": "sha512-GHzwRYQwj5MTiYWxtdxI5S6DgEzFjSSMxg53TLddRgXjNSe/dG++Q+6AgrYS3HKDcWzccs19agF6UFcckxn1yA==",
+      "dependencies": {
+        "vue": "^3.2.37"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.37"
+      }
+    },
     "node_modules/vite": {
       "version": "4.5.3",
       "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.3.tgz",

src/views/page/hkplay.vue

@@ -1,66 +1,92 @@
 <template>
-	 <div id="player"></div>
+  <div id="player"></div>
 </template>
-<script script lang="ts" setup>
+<script lang="ts" setup>
-	import api from "@/axios";
+import api from '@/axios'
-	import { Ref, ref, watch, onMounted, onBeforeMount, reactive, getCurrentInstance } from 'vue';
+import { Ref, ref, watch, onMounted, onBeforeMount, reactive, getCurrentInstance } from 'vue'
-	import { useRouter } from 'vue-router';
+import { useRouter } from 'vue-router'
-	const router = useRouter();
+const router = useRouter()
-	const infoData = ref();
+const infoData = ref()
-	onMounted(() => {
+onMounted(() => {
-		var data={
+  var data = {
-		    cameraIndexCode:router.currentRoute.value.query.pointId
+    cameraIndexCode: router.currentRoute.value.query.pointId,
-		}
+  }
-		api.post('/multialarm/hik/device/preview',data).then((res) => {
+  console.log(data)
-			console.log('router222',res,res["code"] )
+  // ws://218.76.54.6:559/openUrl/aUPPuCy
-			var code=res["code"];
+  api.post('/multialarm/video/preview', { pointId: data.cameraIndexCode }).then((res) => {
-			if(code==0){
+    console.log('router222', res)
-			    var data=JSON.parse(res["data"]);
+    console.log('播放地址', res.data.videoUrl)
-			    var playURL=data["data"]["url"];
+    var code = res['code']
-				    playURL = playURL.replace('ws://218.76.54.20:559',`wss://${location.host}:443/haikang_play`)
+    if (code == 0) {
-			    var IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否移动设备
+      var playURL = res.data.videoUrl
-			    var MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
+      var IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否移动设备
-			    var player = new window.JSPlugin({
+      var MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
-			        szId: 'player',
+      var player = new window.JSPlugin({
-			        szBasePath: "./",
+        // 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高
-			        iMaxSplit: 1,
+        // iWidth: 600,
-			        iCurrentSplit: IS_MOVE_DEVICE ? 1 : 2,
+        // iHeight: 400,
-			        openDebug: true,
+        szId: 'player', //需要英文字母开头，唯一性，必填
-			        oStyle: {
+        szBasePath: './', // 必填,与h5player.min.js的引用目录一致
-			        borderSelect: IS_MOVE_DEVICE ? '#000' : '#FFCC00',
+        iMaxSplit: 1, // 分屏播放，默认最大分屏4*4
-			        }
+        iCurrentSplit: IS_MOVE_DEVICE ? 1 : 2,
-			    })
+        openDebug: true,
+        oStyle: {
+          borderSelect: IS_MOVE_DEVICE ? '#000' : '#FFCC00',
+        },
+        bSupporDoubleClickFull: true, //是否支持双击全屏，默认true
+      })
 
-			    var index=2;
+      var index = 2
-			    playVideo();
+      playVideo()
-			    function playVideo(){
+      function playVideo() {
-			        player.JS_Play(playURL, { playURL:playURL, mode:1 }, 0).then(
+        //   JS_Play 参数说明
-			            () => { console.log('realplay success') },
+        //   JS_Play(url, config, windowIndex, startTime, endTime)
-			            e => { 
+        player
-							console.log('?')
+          .JS_Play(
-			                index--;
+            playURL,
-			                if(index<=0){
+            {
-			                    return;
+              playURL: playURL, // 流媒体播放时必传
-			                }
+              mode: 1, // 解码类型：0=普通模式; 1=高级模式 默认为0
-			                var inUrl="192.168.10.240:559"
+            },
-			                var outUrl="218.76.54.20:559";
+            0 //当前窗口下标
-			                playURL=playURL.replace(outUrl,inUrl)
+          )
-			                playVideo();
+          .then(
-			            }
+            () => {
-			        )
+              console.info('JS_Play success')
-			    }
+              // do you want...
-			
+            },
-			}else{
+            (err: any) => {
-			    alert("播放失败")
+              console.info('JS_Play failed:', err)
-			}
+              playVideo()
-		});
+              // do you want...
-	});
+            }
+            // () => {
+            //   console.log('realplay success')
+            // },
+            // (e) => {
+            //   console.log('?')
+            //   index--
+            //   if (index <= 0) {
+            //     return
+            //   }
+            //   var inUrl = '192.168.10.240:559'
+            //   var outUrl = '218.76.54.20:559'
+            //   playURL = playURL.replace(outUrl, inUrl)
+            //   playVideo()
+            // }
+          )
+      }
+    } else {
+      alert('播放失败')
+    }
+  })
+})
 </script>
 
-<style  scoped lang="scss">
+<style scoped lang="scss">
-	#player{
+#player {
-	    height:100%;
+  height: 100%;
-	    width:100%;
+  width: 100%;
-	    background:#000;
+  background: #000;
-	}
+}
 </style>

src/views/page/index.vue

@@ -1016,6 +1016,7 @@
 	}
 
 	const getSubstanceInfoWindowContent2 = (obj, type) => {
+		console.log("🚀 ~ getSubstanceInfoWindowContent2 ~ obj, type:", obj, type)
 		var station = obj['station']
 		var nickname = ''
 		if (obj.deviceType == '04' || obj.deviceType == '00') {