parent
61ddfb56f4
commit
7038e38809
File diff suppressed because one or more lines are too long
|
|
@ -11,12 +11,17 @@ 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']
|
||||
|
|
|
|||
38
index.html
38
index.html
|
|
@ -1,19 +1,23 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> -->
|
||||
<link rel="icon" type="image/svg+xml" href="/gw.png" style="width:40px;height:40px;" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>多元警情</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script src="https://webapi.amap.com/maps?v=1.4.15&key=8910226d8d36a41d856262b1a588850c&plugin=AMap.MarkerClusterer"></script>
|
||||
<script src="./jquery-3.4.1.min.js"></script>
|
||||
<script src="./h5player.min.js"></script>
|
||||
<script type="module" src="/src/main.ts">
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> -->
|
||||
<link rel="icon" type="image/svg+xml" href="/gw.png" style="width:40px;height:40px;" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>多元警情</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script
|
||||
src="https://webapi.amap.com/maps?v=1.4.15&key=8910226d8d36a41d856262b1a588850c&plugin=AMap.MarkerClusterer"></script>
|
||||
<script src="./jquery-3.4.1.min.js"></script>
|
||||
<script src="./h5player.min.js"></script>
|
||||
<script type="module" src="/src/main.ts">
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -4,7 +4,7 @@ import { INDEX_ROUTER, LOGIN_ROUTER } from "@/configs";
|
|||
/**
|
||||
* staticRouter (静态路由)
|
||||
*/
|
||||
export const staticRouter : RouteRecordRaw[] = [
|
||||
export const staticRouter: RouteRecordRaw[] = [
|
||||
{
|
||||
path: "/",
|
||||
redirect: INDEX_ROUTER.path,
|
||||
|
|
@ -14,7 +14,7 @@ export const staticRouter : RouteRecordRaw[] = [
|
|||
component: () => import("@/views/login.vue"),
|
||||
},
|
||||
{
|
||||
path:'/index',
|
||||
path: '/index',
|
||||
component: () => import('@/views/index.vue'),
|
||||
redirect: '/index/video',
|
||||
children: [
|
||||
|
|
@ -53,6 +53,7 @@ export const staticRouter : RouteRecordRaw[] = [
|
|||
{
|
||||
path: '/index/hkplay',
|
||||
component: () => import('@/views/page/hkplay.vue'),
|
||||
props: route => ({ pointId: route.query.pointId }) // 确保 pointId 参数被正确传递
|
||||
},
|
||||
{
|
||||
path: '/index/system',
|
||||
|
|
|
|||
|
|
@ -3,17 +3,28 @@
|
|||
</template>
|
||||
<script lang="ts" setup>
|
||||
import api from '@/axios'
|
||||
import { Ref, ref, watch, onMounted, onBeforeMount, reactive, getCurrentInstance } from 'vue'
|
||||
import { Ref, ref, watch, onMounted, onBeforeMount, onBeforeUnmount, reactive, getCurrentInstance } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
const router = useRouter()
|
||||
const infoData = ref()
|
||||
var curIndex = 0 // 当前窗口下标
|
||||
let myPlugin: any
|
||||
onMounted(() => {
|
||||
var data = {
|
||||
cameraIndexCode: router.currentRoute.value.query.pointId,
|
||||
if (typeof window.JSPlugin === 'undefined') {
|
||||
console.error('JSPlugin is not loaded')
|
||||
return
|
||||
} else {
|
||||
console.log('JSPlugin加载成功')
|
||||
}
|
||||
console.log(data)
|
||||
// ws://218.76.54.6:559/openUrl/aUPPuCy
|
||||
api.post('/multialarm/video/preview', { pointId: data.cameraIndexCode }).then((res) => {
|
||||
let date = {
|
||||
pointId: router.currentRoute.value.query.pointId,
|
||||
useTLS: 0,
|
||||
}
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
date.useTLS = 1
|
||||
}
|
||||
|
||||
api.post('/multialarm/video/preview', { ...date }).then((res) => {
|
||||
console.log('router222', res)
|
||||
console.log('播放地址', res.data.videoUrl)
|
||||
var code = res['code']
|
||||
|
|
@ -21,7 +32,7 @@ onMounted(() => {
|
|||
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({
|
||||
myPlugin = new window.JSPlugin({
|
||||
// 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高
|
||||
// iWidth: 600,
|
||||
// iHeight: 400,
|
||||
|
|
@ -35,52 +46,72 @@ onMounted(() => {
|
|||
},
|
||||
bSupporDoubleClickFull: true, //是否支持双击全屏，默认true
|
||||
})
|
||||
myPlugin
|
||||
.JS_SetWindowControlCallback({
|
||||
pluginErrorHandler: function (index: any, iErrorCode: any, oError: any) {
|
||||
console.error('__________pluginErrorHandler错误码________________', index, iErrorCode, oError)
|
||||
|
||||
var index = 2
|
||||
playVideo()
|
||||
//插件错误回调
|
||||
// do you want...
|
||||
// 取流失败，流中断等错误都会触发该回调函数，请自行对照错误码表进行判断。
|
||||
// 业务上层可在此做一些个性化操作，如：个性化错误信息展示，重新取流等。
|
||||
},
|
||||
})
|
||||
.then((res: any) => {
|
||||
console.log('JS_SetWindowControlCallback________________', res)
|
||||
})
|
||||
|
||||
var controlIndex = 2
|
||||
function playVideo() {
|
||||
console.log('____________playURL:', playURL)
|
||||
console.log('____________curIndex:', curIndex)
|
||||
// JS_Play 参数说明
|
||||
// JS_Play(url, config, windowIndex, startTime, endTime)
|
||||
player
|
||||
myPlugin
|
||||
.JS_Play(
|
||||
playURL,
|
||||
{
|
||||
playURL: playURL, // 流媒体播放时必传
|
||||
mode: 1, // 解码类型：0=普通模式; 1=高级模式 默认为0
|
||||
},
|
||||
0 //当前窗口下标
|
||||
curIndex //当前窗口下标
|
||||
)
|
||||
.then(
|
||||
() => {
|
||||
console.info('JS_Play success')
|
||||
// do you want...
|
||||
},
|
||||
(err: any) => {
|
||||
console.info('JS_Play failed:', err)
|
||||
(e: any) => {
|
||||
console.log('网络流中断')
|
||||
controlIndex--
|
||||
if (controlIndex <= 0) {
|
||||
return
|
||||
}
|
||||
console.info('JS_Play failed:', e)
|
||||
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()
|
||||
// }
|
||||
)
|
||||
}
|
||||
playVideo()
|
||||
} else {
|
||||
alert('播放失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// 停止播放断开 ws 连接
|
||||
onBeforeUnmount(() => {
|
||||
myPlugin.JS_Stop(curIndex).then(
|
||||
() => {
|
||||
console.info('JS_Stop success')
|
||||
// do you want...
|
||||
},
|
||||
(err: any) => {
|
||||
console.info('JS_Stop failed:', err)
|
||||
// do you want...
|
||||
}
|
||||
)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue