Compare commits

...

2 Commits

4 changed files with 203 additions and 169 deletions

View File

@ -1,15 +1,15 @@
/* /*
* @Author: hisense.wuhongjian * @Author: hisense.wuhongjian
* @Date: 2020-07-07 16:03:23 * @Date: 2020-07-07 16:03:23
* @LastEditors: Light * @LastEditors: hisense.wuhongjian
* @LastEditTime: 2022-11-14 18:00:12 * @LastEditTime: 2022-11-22 14:37:59
* @Description: 系统静态参数配置 * @Description: 系统静态参数配置
*/ */
var _global = {} var _global = {}
var CONFIGITEM = { var CONFIGITEM = {
// version: 'qingdao', // // version: 'qingdao', //
// version: 'xihaian', // 西 version: 'xihaian', // 西
version: 'dev', // // version: 'dev', //
// version: 'zhanTingDev', // dev (2022-09-13:) // version: 'zhanTingDev', // dev (2022-09-13:)
// version: 'qingdao', // // version: 'qingdao', //
//version: 'frp', // 穿 //version: 'frp', // 穿
@ -68,6 +68,8 @@ var CONFIGITEM = {
cameraUrl: '192.168.124.236:9537', // vpn cameraUrl: '192.168.124.236:9537', // vpn
}, },
backUrl: 'http://10.134.135.9:9797', backUrl: 'http://10.134.135.9:9797',
// apiURL: 'http://10.134.135.92:8888/renren-admin',
apiURL: 'http://192.168.124.233:8888/ucs-admin',
previewUrl: 'http://10.134.135.9:9796/', previewUrl: 'http://10.134.135.9:9796/',
// websocketURL: '10.134.135.9:8888/ucs-admin', // // websocketURL: '10.134.135.9:8888/ucs-admin', //
// websocketURL: '10.134.135.92:8888/ucs-admin', // // websocketURL: '10.134.135.92:8888/ucs-admin', //

View File

@ -2,176 +2,205 @@
海康H5Player 海康H5Player
--> -->
<template> <template>
<div id='player' style="width:800px;height:600px;z-index:9999"></div> <div id="player" style="width: 800px; height: 600px; z-index: 9999"></div>
</template> </template>
<script> <script>
const IS_MOVE_DEVICE = document.body.clientWidth < 992 // const IS_MOVE_DEVICE = document.body.clientWidth < 992 //
const MSE_IS_SUPPORT = !!window.MediaSource // mse const MSE_IS_SUPPORT = !!window.MediaSource // mse
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
export default { export default {
name: 'H5Player', name: 'H5Player',
props: { props: {
videoUrl:{ videoUrl: {
type: String, type: String,
default: '', default: '',
}, },
index:{ index: {
type: Number, type: Number,
default: 0, default: 0,
} },
}, },
data() { data() {
return { return {
player: null, player: null,
splitNum: 1, splitNum: 1,
mseSupport: MSE_IS_SUPPORT, mseSupport: MSE_IS_SUPPORT,
// tabActive: MSE_IS_SUPPORT ? 'mse' : 'decoder', // tabActive: MSE_IS_SUPPORT ? 'mse' : 'decoder',
tabActive: 'decoder', tabActive: 'decoder',
urls: { urls: {
realplay: 'ws://10.19.147.22:559/EUrl/q2jQie4', realplay: 'ws://10.19.147.22:559/EUrl/q2jQie4',
talk: 'wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S', talk: 'wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S',
playback: 'wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S' playback:
}, 'wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S',
playback: { },
startTime: '2021-07-26T00:00:00', playback: {
endTime: '2021-07-26T23:59:59', startTime: '2021-07-26T00:00:00',
valueFormat: '', endTime: '2021-07-26T23:59:59',
seekStart: '2021-07-26T12:00:00', valueFormat: '',
rate: '' seekStart: '2021-07-26T12:00:00',
}, rate: '',
muted: true, },
volume: 50, muted: true,
volumeOnSvg: { volume: 50,
template: '<svg t="1624453273744" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1421" width="200" height="200"><path d="M597.994667 138.005333q130.005333 28.010667 213.994667 132.992t84.010667 241.002667-84.010667 241.002667-213.994667 132.992l0-88q93.994667-28.010667 153.002667-106.005333t59.008-180.010667-59.008-180.010667-153.002667-106.005333l0-88zM704 512q0 120-106.005333 172.010667l0-344q106.005333 52.010667 106.005333 172.010667zM128 384l170.005333 0 213.994667-213.994667 0 684.010667-213.994667-213.994667-170.005333 0 0-256z" p-id="1422"></path></svg>' volumeOnSvg: {
}, template:
volumeOffSvg: { '<svg t="1624453273744" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1421" width="200" height="200"><path d="M597.994667 138.005333q130.005333 28.010667 213.994667 132.992t84.010667 241.002667-84.010667 241.002667-213.994667 132.992l0-88q93.994667-28.010667 153.002667-106.005333t59.008-180.010667-59.008-180.010667-153.002667-106.005333l0-88zM704 512q0 120-106.005333 172.010667l0-344q106.005333 52.010667 106.005333 172.010667zM128 384l170.005333 0 213.994667-213.994667 0 684.010667-213.994667-213.994667-170.005333 0 0-256z" p-id="1422"></path></svg>',
template: '<svg t="1624453193279" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9147" width="200" height="200"><path d="M512 170.005333l0 180.010667-90.005333-90.005333zM181.994667 128l714.005333 714.005333-53.994667 53.994667-88-88q-74.005333 58.005333-156.010667 77.994667l0-88q50.005333-13.994667 96-50.005333l-181.994667-181.994667 0 288-213.994667-213.994667-170.005333 0 0-256 202.005333 0-202.005333-202.005333zM810.005333 512q0-101.994667-59.008-180.010667t-153.002667-106.005333l0-88q130.005333 28.010667 213.994667 132.992t84.010667 241.002667q0 96-44.010667 178.005333l-64-66.005333q21.994667-53.994667 21.994667-112zM704 512q0 18.005333-2.005333 26.005333l-104-104 0-93.994667q106.005333 52.010667 106.005333 172.010667z" p-id="9148"></path></svg>' },
}, volumeOffSvg: {
recordStartState: 0, template:
recordStartText: '录像' '<svg t="1624453193279" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9147" width="200" height="200"><path d="M512 170.005333l0 180.010667-90.005333-90.005333zM181.994667 128l714.005333 714.005333-53.994667 53.994667-88-88q-74.005333 58.005333-156.010667 77.994667l0-88q50.005333-13.994667 96-50.005333l-181.994667-181.994667 0 288-213.994667-213.994667-170.005333 0 0-256 202.005333 0-202.005333-202.005333zM810.005333 512q0-101.994667-59.008-180.010667t-153.002667-106.005333l0-88q130.005333 28.010667 213.994667 132.992t84.010667 241.002667q0 96-44.010667 178.005333l-64-66.005333q21.994667-53.994667 21.994667-112zM704 512q0 18.005333-2.005333 26.005333l-104-104 0-93.994667q106.005333 52.010667 106.005333 172.010667z" p-id="9148"></path></svg>',
},
recordStartState: 0,
recordStartText: '录像',
} }
}, },
created(){ created() {},
},
mounted() { mounted() {
this.init() this.init()
this.createPlayer() this.createPlayer()
this.arrangeWindow() this.arrangeWindow()
//videoUrl this.realplay(this.videoUrl,0);//index //videoUrl this.realplay(this.videoUrl,0);//index
this.realplay(this.videoUrl,0); this.realplay(this.videoUrl, 0)
//this.realplay('wss://10.134.135.44:6014/proxy/10.10.20.14:559/openUrl/y3mFfcA',0); //this.realplay('wss://10.134.135.44:6014/proxy/10.10.20.14:559/openUrl/y3mFfcA',0);
}, },
watch: { watch: {
videoUrl: { videoUrl: {
// //
handler(newVal, oldVal) { handler(newVal, oldVal) {
console.log('oldVal:', oldVal) console.log('oldVal:', oldVal)
console.log('newVal:', newVal) console.log('newVal:', newVal)
//this.realplay(newVal,0); if (newVal) {
}, this.realplay(newVal, 0)
// }
immediate: true
}
}, },
methods: { //
// immediate: true,
init () {
//
window.addEventListener('resize', () => {
this.player.JS_Resize()
})
},
createPlayer () {
//console.log('this.index',this.index);
this.player = new window.JSPlugin({
//szId: 'player'+this.index,
szId: 'player',
szBasePath: "/util/", //public/jsjs
iMaxSplit: 4,
iCurrentSplit: 4,
openDebug: true,
oStyle: {
borderSelect: '#FFCC00',
}
})
//
this.player.JS_SetWindowControlCallback({
windowEventSelect: function (iWndIndex) { //
console.log('windowSelect callback: ', iWndIndex);
},
pluginErrorHandler: function (iWndIndex, iErrorCode, oError) { //
console.log('pluginError callback: ', iWndIndex, iErrorCode, oError);
},
windowEventOver: function (iWndIndex) { //
//console.log(iWndIndex);
},
windowEventOut: function (iWndIndex) { //
//console.log(iWndIndex);
},
windowEventUp: function (iWndIndex) { //mouseup
//console.log(iWndIndex);
},
windowFullCcreenChange: function (bFull) { //
console.log('fullScreen callback: ', bFull);
},
firstFrameDisplay: function (iWndIndex, iWidth, iHeight) { //
console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight);
},
performanceLack: function () { //
console.log('performanceLack callback: ');
}
});
},
arrangeWindow () {
const splitNum = this.splitNum
this.player.JS_ArrangeWindow(splitNum).then(
() => { console.log(`arrangeWindow to ${splitNum}x${splitNum} success`) },
e => { console.error(e) }
)
},
//
//
realplay (playURL, index1) {
this.mode = 1 //0 1
const { player, mode, urls } = this,
index = player.currentWindowIndex
// playURL = this.realplay
player.JS_Play(playURL, { playURL, mode }, index1).then(
() => {
console.log('realplay success')
},
e => {
console.error(e);
message.error('请联系视频提供方!')
}
)
},
//
stopAllPlay () {
this.player.JS_StopRealPlayAll().then(
() => {
this.playback.rate = 0
console.log('stopAllPlay success')
this.closeVideoTree()
},
e => { console.error(e) }
)
},
//
stopPlay () {
this.player.JS_Stop().then(
() => {
this.playback.rate = 0
console.log('stop realplay success')
// this.closeVideoTree()
const index = this.player.currentWindowIndex
this.selectAisle(this.videoList[index], index)
},
e => { console.error(e) }
)
}, },
}, },
methods: {
//
init() {
//
window.addEventListener('resize', () => {
this.player.JS_Resize()
})
},
createPlayer() {
//console.log('this.index',this.index);
this.player = new window.JSPlugin({
//szId: 'player'+this.index,
szId: 'player',
szBasePath: '/util/', //public/jsjs
iMaxSplit: 4,
iCurrentSplit: 4,
openDebug: true,
oStyle: {
borderSelect: '#FFCC00',
},
})
//
this.player.JS_SetWindowControlCallback({
windowEventSelect: function (iWndIndex) {
//
console.log('windowSelect callback: ', iWndIndex)
},
pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {
//
console.log('pluginError callback: ', iWndIndex, iErrorCode, oError)
},
windowEventOver: function (iWndIndex) {
//
//console.log(iWndIndex);
},
windowEventOut: function (iWndIndex) {
//
//console.log(iWndIndex);
},
windowEventUp: function (iWndIndex) {
//mouseup
//console.log(iWndIndex);
},
windowFullCcreenChange: function (bFull) {
//
console.log('fullScreen callback: ', bFull)
},
firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {
//
console.log(
'firstFrame loaded callback: ',
iWndIndex,
iWidth,
iHeight
)
},
performanceLack: function () {
//
console.log('performanceLack callback: ')
},
})
},
arrangeWindow() {
const splitNum = this.splitNum
this.player.JS_ArrangeWindow(splitNum).then(
() => {
console.log(`arrangeWindow to ${splitNum}x${splitNum} success`)
},
(e) => {
console.error(e)
}
)
},
//
//
realplay(playURL, index1) {
this.mode = 1 //0 1
const { player, mode, urls } = this,
index = player.currentWindowIndex
// playURL = this.realplay
console.log('视频播放地址', playURL)
player.JS_Play(playURL, { playURL, mode }, index1).then(
() => {
console.log('realplay success')
},
(e) => {
console.error(e)
// message.error('!')
}
)
},
//
stopAllPlay() {
this.player.JS_StopRealPlayAll().then(
() => {
this.playback.rate = 0
console.log('stopAllPlay success')
this.closeVideoTree()
},
(e) => {
console.error(e)
}
)
},
//
stopPlay() {
this.player.JS_Stop().then(
() => {
this.playback.rate = 0
console.log('stop realplay success')
// this.closeVideoTree()
const index = this.player.currentWindowIndex
this.selectAisle(this.videoList[index], index)
},
(e) => {
console.error(e)
}
)
},
},
beforeUnmount() {
console.log('关闭所有视频')
this.stopAllPlay()
},
} }
</script> </script>
<style lang="less"> <style lang="less">

View File

@ -613,16 +613,19 @@
</template> </template>
</div> </div>
</a-modal> </a-modal>
<!-- 地图上点或者聚合图层点击后出现的操作弹窗 --> <!-- 地图上点或者聚合图层点击后出现的操作弹窗 -->
<a-modal <a-modal
wrapClassName="camera-popup" wrapClassName="camera-popup"
v-model:visible="operationPopupFlag" v-model:visible="operationPopupFlag"
:width="1000" :width="1000"
:title="'视频监控点选择'" :title="'视频监控点选择'"
footer={null} destroyOnClose
footer="{null}"
> >
<!--地图上点击之后弹出的操作弹窗--> <!--地图上点击之后弹出的操作弹窗-->
<camera-popup-on-map :camera-Data-List="cameraDataList"></camera-popup-on-map> <camera-popup-on-map
:camera-Data-List="cameraDataList"
></camera-popup-on-map>
</a-modal> </a-modal>
</div> </div>
</div> </div>
@ -960,13 +963,13 @@
let pointData = new Proxy(point.data, point) let pointData = new Proxy(point.data, point)
onSelectChange(pointData, !check, '', '', 'proxy') onSelectChange(pointData, !check, '', '', 'proxy')
}) })
//openOperationPopup //openOperationPopup
mybus.off('openOperationPopup') mybus.off('openOperationPopup')
mybus.on('openOperationPopup', (data) => { mybus.on('openOperationPopup', (data) => {
//console.log('pppppppppppppp',data); //console.log('pppppppppppppp',data);
cameraDataList.value = data; cameraDataList.value = data
operationPopupFlag.value = true; operationPopupFlag.value = true
}) })
}) })
const selectedList = ref([]) const selectedList = ref([])
const selectedRowKeys = ref([]) const selectedRowKeys = ref([])
@ -2243,7 +2246,7 @@
} }
// //
const operationPopupFlag = ref(false)// const operationPopupFlag = ref(false) //
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.infrastructrueBox { .infrastructrueBox {
@ -2390,7 +2393,7 @@
.map-contain { .map-contain {
// width: 9.46rem; // width: 9.46rem;
height: 6.9rem; height: 6.9rem;
margin-left:0; margin-left: 0;
position: relative; position: relative;
} }
} }
@ -2599,14 +2602,14 @@
overflow-y: auto; overflow-y: auto;
} }
} }
.camera-popup{ .camera-popup {
.ant-modal-body { .ant-modal-body {
height: 720px !important; height: 720px !important;
overflow-y: hidden; overflow-y: hidden;
overflow-x: hidden; overflow-x: hidden;
padding:14px; padding: 14px;
} }
.ant-modal-footer{ .ant-modal-footer {
display: none; display: none;
} }
} }

View File

@ -25,7 +25,7 @@
</a-carousel> </a-carousel>
<div class="operation-content" style="position:ab"> <div class="operation-content" style="position:ab">
<div class="video-content"> <div class="video-content">
<h5-player :video-url="videoUrl"></h5-player> <h5-player :video-url="videoUrl" ref="hPlayer"></h5-player>
</div> </div>
<div class="text-label"> <div class="text-label">
<span>{{defaultIndex+1}}</span>/<span>{{cameraDataList.length}}</span> <span>{{defaultIndex+1}}</span>/<span>{{cameraDataList.length}}</span>