<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2023-04-28 10:47:08
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2025-01-21 13:16:01
|
* @FilePath: \srs-police-affairs\src\components\hkVideo\index.vue
|
* @Description:
|
*
|
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
|
-->
|
<template>
|
<div class="h-five-player-video">
|
<video-loading v-show="loading"></video-loading>
|
|
<!-- v-loading="loading" element-loading-background="rgba(0, 0, 0, 0)" -->
|
<div class="video-container" :id="elementId"></div>
|
</div>
|
</template>
|
|
<script>
|
import { getPreviewUrl, getTalkURLs, playbackURLs } from '@/api/sm/hk/hk'
|
export default {
|
name: "hkVideo",
|
props: {
|
//默认分屏，2:2x2布局
|
currentSplit: {
|
type: Number,
|
default: 1
|
},
|
//最大分屏，4:4x4布局
|
maxSplit: {
|
type: Number,
|
default: 1
|
},
|
jsBasePath: {
|
type: String,
|
default: process.env.BASE_URL
|
}
|
},
|
|
inject: {
|
"ContentDetailsEle": {
|
default: () => {
|
return {
|
zoomFlag: undefined
|
}
|
}
|
}
|
},
|
|
|
data () {
|
return {
|
loading: false,
|
curWindIndex: 0,
|
previewWindList: [],
|
publicPath: process.env.BASE_URL,
|
dialogVisible: false,
|
player: null,
|
elementId: '',
|
talkUrl: ''
|
}
|
},
|
|
watch: {
|
'ContentDetailsEle.zoomFlag': {
|
handler (newData) {
|
if (newData != undefined && (typeof newData === 'boolean') && this.player != null) {
|
this.resize()
|
}
|
}
|
}
|
},
|
|
created () {
|
this.elementId = this.uuid()
|
},
|
|
mounted () {
|
const that = this
|
window.addEventListener('resize', this.resize)
|
|
this.$nextTick(() => {
|
this.createPlayer()
|
})
|
|
document.addEventListener('visibilitychange', this.openState)
|
},
|
|
methods: {
|
openState (e) {
|
const that = this
|
|
let state = document.visibilityState
|
if (state == 'hidden') {
|
that.stop()
|
that.stopAll()
|
that.stopTalk()
|
}
|
if (state == 'visible') {
|
console.log(document.visibilityState)
|
}
|
},
|
|
uuid () {
|
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
|
var r = Math.random() * 16 | 0,
|
v = c == 'x' ? r : (r & 0x3 | 0x8)
|
return v.toString(16)
|
})
|
},
|
|
resize () {
|
// 设置播放容器的宽高并监听窗口大小变化
|
this.player && this.player.JS_Resize()
|
},
|
|
// 行点击事件--视频预览
|
initData (data, index = 0) {
|
const that = this
|
this.loading = true
|
this.title = data.video_name
|
this.dialogVisible = true
|
this.talkUrl = ''
|
const param = {
|
cameraIndexCode: data.cameraIndexCode,
|
type: data.sysResource,
|
protocol: 'ws',
|
streamType: data.streamType
|
}
|
|
getPreviewUrl(param).then(previewData => {
|
that.$nextTick(() => {
|
if (previewData.data.data.indexOf('36.134.79.80:6014') != -1) {
|
previewData.data.data = previewData.data.data.replace('36.134.79.80:6014', 'hubeihaikang.cn:6014')
|
}
|
|
if (previewData.data.data.indexOf('223.76.234.232:6014') != -1) {
|
previewData.data.data = previewData.data.data.replace('223.76.234.232:6014', 'v.hubeishuiyi.cn:6014')
|
}
|
|
that.play(previewData.data.data, data, index)
|
})
|
}).catch(e => {
|
that.loading = false
|
})
|
},
|
|
/* 预览&对讲 */
|
play (url, data, windowIndex = '') {
|
const { cameraIndexCode = '', video_name: name = '', sysResource, streamType } = data
|
|
const that = this
|
let {
|
player
|
} = this,
|
index = windowIndex,
|
playURL = url
|
|
player.JS_Play(playURL, {
|
playURL,
|
mode: 0
|
}, index).then(
|
() => {
|
player.JS_CloseSound(index)
|
|
// 播放成功后，加入到已播放的列表
|
// 判断是否多屏
|
if (this.maxSplit == 1) {
|
this.previewWindList = [
|
{
|
index: index,
|
cameraIndexCode: cameraIndexCode,
|
name: name,
|
sysResource,
|
streamType: streamType
|
}
|
]
|
} else {
|
this.previewWindList = this.previewWindList.filter(item => item.cameraIndexCode != cameraIndexCode)
|
this.previewWindList.push({
|
index: index,
|
cameraIndexCode: cameraIndexCode,
|
name: name,
|
sysResource,
|
streamType: streamType
|
})
|
}
|
// 向父组件发送
|
this.$emit('changePreviewWindList', this.previewWindList)
|
// 切换窗口，下一个
|
var next = index + 1
|
this.player.JS_SelectWnd(next).then(
|
() => {
|
this.$emit('windowChange', next)
|
// console.info('JS_SelectWnd success');
|
// do you want...
|
},
|
(err) => {
|
// console.info('JS_SelectWnd failed');
|
// do you want...
|
}
|
)
|
this.loading = false
|
},
|
e => {
|
this.loading = false
|
}
|
)
|
},
|
|
stop () {
|
this.player.JS_Stop()
|
},
|
|
stopAll () {
|
this.player.JS_StopRealPlayAll()
|
},
|
|
startTalk (curPlayData = {}) {
|
const that = this
|
this.player.JS_SetConnectTimeOut(0, 1000)
|
|
if (that.savePlayIndexCode != curPlayData.cameraIndexCode) {
|
that.talkUrl = ''
|
}
|
|
if (that.talkUrl) {
|
this.player.JS_StartTalk(that.talkUrl).then(
|
() => { console.log('talkStart success') },
|
e => {
|
this.$message({
|
type: "error",
|
message: e
|
})
|
}
|
)
|
} else {
|
that.savePlayIndexCode = curPlayData.cameraIndexCode
|
getTalkURLs({
|
cameraIndexCode: curPlayData.cameraIndexCode,
|
type: curPlayData.sysResource,
|
protocol: 'ws',
|
streamType: curPlayData.streamType
|
}).then(talkData => {
|
console.log(talkData)
|
that.$nextTick(() => {
|
let resultUrl = ''
|
|
if (JSON.parse(talkData.data.data) && JSON.parse(talkData.data.data).data && JSON.parse(talkData.data.data).data.url) {
|
resultUrl = JSON.parse(talkData.data.data).data.url
|
|
if (resultUrl.indexOf('36.134.79.80:6014') != -1) {
|
resultUrl = resultUrl.replace('36.134.79.80:6014', 'hubeihaikang.cn:6014')
|
}
|
if (resultUrl.indexOf('223.76.234.232:6014') != -1) {
|
resultUrl = resultUrl.replace('223.76.234.232:6014', 'v.hubeishuiyi.cn:6014')
|
}
|
|
that.talkUrl = resultUrl
|
}
|
|
that.player.JS_StartTalk(that.talkUrl).then(
|
() => {
|
console.log('talkStart success')
|
},
|
e => {
|
if (e == '0x12f900008') {
|
this.$message({
|
type: "error",
|
message: '当前视频站点暂不支持语音对讲！'
|
})
|
} else {
|
this.$message({
|
type: "error",
|
message: e
|
})
|
}
|
}
|
)
|
})
|
})
|
}
|
},
|
|
stopTalk () {
|
this.player.JS_StopTalk().then(
|
() => { console.log('talkStop success') },
|
e => { console.error(e) }
|
)
|
},
|
|
// 视频回放
|
playBack (param, startTime, endTime) {
|
this.loading = true
|
playbackURLs(param).then(res => {
|
this.$nextTick(() => {
|
const data = JSON.parse(res.data.data)
|
var url = data.data.url
|
|
if (url != null && url != '') {
|
if (url.indexOf('36.134.79.80:6014') != -1) {
|
url = url.replace('36.134.79.80:6014', 'hubeihaikang.cn:6014')
|
}
|
if (url.indexOf('223.76.234.232:6014') != -1) {
|
url = url.replace('223.76.234.232:6014', 'v.hubeishuiyi.cn:6014')
|
}
|
|
// 截取后面的时间
|
url = url.split("?")[0]
|
this.startPlayBack(url, startTime, endTime, 0)
|
} else {
|
this.loading = false
|
|
this.$message({
|
message: '当前时间段没有录像',
|
type: 'warning'
|
})
|
}
|
})
|
}).catch(e => {
|
this.loading = false
|
})
|
},
|
|
createPlayer () {
|
const that = this
|
|
this.player = new window.JSPlugin({
|
szId: this.elementId,
|
szBasePath: `${that.publicPath}hk/h5/`,
|
iMaxSplit: this.maxSplit || 4,
|
iCurrentSplit: this.currentSplit || 1,
|
openDebug: false
|
})
|
|
// 事件回调绑定
|
this.player.JS_SetWindowControlCallback({
|
windowEventSelect: iWndIndex => { //插件选中窗口回调
|
this.$emit('windowChange', iWndIndex)
|
},
|
pluginErrorHandler: (iWndIndex, iErrorCode, oError) => { //插件错误回调
|
this.loading = false
|
this.$emit('pluginError', iErrorCode)
|
},
|
windowEventOver: function (iWndIndex) { //鼠标移过回调
|
},
|
windowEventOut: function (iWndIndex) { //鼠标移出回调
|
},
|
windowEventUp: function (iWndIndex) { //鼠标mouseup事件回调
|
},
|
windowFullCcreenChange: function (bFull) { //全屏切换回调
|
},
|
firstFrameDisplay: function (iWndIndex, iWidth, iHeight) { //首帧显示回调
|
},
|
performanceLack: function () { //性能不足回调
|
}
|
})
|
},
|
|
//分屏
|
setLayout (splitNum) {
|
this.isChangeLayout = true
|
this.player.JS_ArrangeWindow(splitNum).then(() => { }).catch(e => {
|
}).finally(() => {
|
setTimeout(() => {
|
this.isChangeLayout = false
|
}, 200)
|
})
|
},
|
/**
|
* 录像回放
|
* @param url:流媒体url
|
* @param windowIndex:窗口号
|
* @param config:播放配置
|
* @param startTime :回放开始时间，格式类型：2021-06-29T00:00:00Z
|
* @param endTime:回放结束时间，格式类型：2021-06-29T00:00:00Z
|
*/
|
startPlayBack (url, startTime, endTime, windowIndex = this.curWindIndex, config = {}) {
|
const that = this
|
this.player.JS_Play(url, {
|
playURL: url,
|
mode: 0 //解码类型：0=普通模式; 1=高级模式 默认为0,h5高级模式才能播放
|
}, windowIndex, startTime, endTime).then(
|
() => {
|
that.player.JS_CloseSound(windowIndex)
|
this.loading = false
|
},
|
e => {
|
this.loading = false
|
}
|
)
|
},
|
// 整体全屏
|
wholeFullScreen () {
|
this.player.JS_FullScreenDisplay(true).then(
|
() => {
|
},
|
e => {
|
}
|
)
|
},
|
//单窗口全屏
|
singleFullScreen (windowIndex = this.curWindIndex) {
|
this.player.JS_FullScreenSingle(windowIndex).then(() => {
|
}).catch(e => {
|
console.log(e)
|
})
|
},
|
},
|
|
destroyed () {
|
window.removeEventListener('resize', this.resize)
|
document.removeEventListener('visibilitychange', this.openState)
|
|
this.stop()
|
this.stopAll()
|
this.stopTalk()
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.h-five-player-video {
|
position: relative;
|
display: flex;
|
width: 100%;
|
height: 100%;
|
|
&>.video-container {
|
width: 0;
|
flex: 1;
|
height: 100%;
|
}
|
}
|
</style>
|
