134 lines
2.9 KiB
Vue
134 lines
2.9 KiB
Vue
<template>
|
|
<div>
|
|
<div v-if="gangkou != '00005'" class="level-title">
|
|
<h1>摄像头名称：{{ info.NAME }}</h1>
|
|
</div>
|
|
<table v-if="gangkou != '00005'" class="table-ui">
|
|
<tr>
|
|
<td class="bbg-transparent">编码</td>
|
|
<td >{{ info.INDEXCODE }}</td>
|
|
</tr>
|
|
</table>
|
|
<div id="aLiVideoPlayer" ref="aLiVideoPlayer" style="" class="prism-player"/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { requestFN } from '@/utils/request'
|
|
|
|
const imosPlayer = window.imosPlayer
|
|
|
|
let iframeObj = null
|
|
export default {
|
|
props: {
|
|
id: {
|
|
type: String,
|
|
default() {
|
|
return ''
|
|
}
|
|
},
|
|
type: {
|
|
type: String,
|
|
default() {
|
|
return ''
|
|
}
|
|
},
|
|
gangkou: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
corpInfoId: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
requestUrl: {
|
|
type: String,
|
|
default: '/platformvideomanagement/getHlsPathById'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
info: {},
|
|
player: null,
|
|
url: ''
|
|
}
|
|
},
|
|
beforeDestroy() {
|
|
this.player && this.player.dispose()
|
|
},
|
|
mounted() {
|
|
if (this.gangkou === '00005') {
|
|
this.showYsVideo()
|
|
} else {
|
|
this.showVideo()
|
|
}
|
|
},
|
|
created() {
|
|
// this.showVideo()
|
|
|
|
},
|
|
methods: {
|
|
showYsVideo() {
|
|
iframeObj = imosPlayer.createPanelWindow()
|
|
var dom = document.getElementById('aLiVideoPlayer')
|
|
iframeObj.style.margin = 'auto'
|
|
dom.appendChild(iframeObj)
|
|
imosPlayer
|
|
.playLive(iframeObj.id, {
|
|
camera: this.id,
|
|
title: this.id,
|
|
stream: 1
|
|
})
|
|
.then((e) => {
|
|
console.log(e)
|
|
})
|
|
},
|
|
showVideo() {
|
|
let url = this.requestUrl
|
|
console.log(this.corpInfoId)
|
|
console.log(this.corpInfoId == 'f8da1790b1034058ae2efefd69af3284')
|
|
if (this.corpInfoId == 'f8da1790b1034058ae2efefd69af3284') {
|
|
url = '/czks/map/getCameraHlsPath'
|
|
}
|
|
requestFN(
|
|
url,
|
|
{
|
|
PLATFORMVIDEOMANAGEMENT_ID: this.id,
|
|
CORPINFO_ID: this.corpInfoId
|
|
}
|
|
).then((res) => {
|
|
this.info = res.pd
|
|
let hlsPath = ''
|
|
if (this.corpInfoId == 'f8da1790b1034058ae2efefd69af3284') {
|
|
hlsPath = res.hlsPath
|
|
} else {
|
|
hlsPath = res.data.url
|
|
}
|
|
this.$nextTick(() => {
|
|
// eslint-disable-next-line no-undef
|
|
this.player = new Aliplayer({
|
|
'id': 'aLiVideoPlayer',
|
|
'source': hlsPath,
|
|
'width': '100%',
|
|
'height': '380px',
|
|
'autoplay': true,
|
|
'isLive': true,
|
|
'rePlay': false,
|
|
'playsinline': true,
|
|
'preload': true,
|
|
'controlBarVisibility': 'hover',
|
|
'useH5Prism': true
|
|
}, function(player) {
|
|
console.log('The player is created')
|
|
})
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
</style>
|