Libt
/
multiple-police-situations
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

跳转海康视频播放

This commit is contained in:
TimSpan 2024-07-24 15:50:24 +08:00
parent e596818270
commit 61ddfb56f4
4 changed files with 102 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components.d.ts vendored
View File

@ -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']

13
package-lock.json generated
View File

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

150
src/views/page/hkplay.vue
View File

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

1
src/views/page/index.vue
View File

@ -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') {