|
|
|
@ -1,44 +1,101 @@ |
|
|
|
<template> |
|
|
|
<div |
|
|
|
ref="container" class="container" |
|
|
|
style="width: 100%; height: 100%; background-color: #000000; margin: 0 auto" @dblclick="fullscreenSwich"> |
|
|
|
ref="container" |
|
|
|
class="container" |
|
|
|
style="width: 100%; height: 100%; background-color: #000000; margin: 0 auto" |
|
|
|
@dblclick="fullscreenSwich" |
|
|
|
> |
|
|
|
<div id="buttonsBox" class="buttons-box"> |
|
|
|
<div class="buttons-box-left"> |
|
|
|
<i v-if="!playing" class="iconfont icon-play jessibuca-btn" @click="playBtnClick"></i> |
|
|
|
<i v-if="playing" class="iconfont icon-pause jessibuca-btn" @click="pause"></i> |
|
|
|
<i |
|
|
|
v-if="!playing" |
|
|
|
class="iconfont icon-play jessibuca-btn" |
|
|
|
@click="playBtnClick" |
|
|
|
></i> |
|
|
|
<i |
|
|
|
v-if="playing" |
|
|
|
class="iconfont icon-pause jessibuca-btn" |
|
|
|
@click="pause" |
|
|
|
></i> |
|
|
|
<i class="iconfont icon-stop jessibuca-btn" @click="destroy"></i> |
|
|
|
</div> |
|
|
|
<div class="buttons-box-right"> |
|
|
|
<i class="iconfont icon-shuaxin11 jessibuca-btn" @click="playBtnClick"></i> |
|
|
|
<i v-if="!fullscreen" class="iconfont icon-weibiaoti10 jessibuca-btn" @click="fullscreenSwich"></i> |
|
|
|
<i v-if="fullscreen" class="iconfont icon-weibiaoti11 jessibuca-btn" @click="fullscreenSwich"></i> |
|
|
|
<i |
|
|
|
class="iconfont icon-shuaxin11 jessibuca-btn" |
|
|
|
@click="playBtnClick" |
|
|
|
></i> |
|
|
|
<i |
|
|
|
v-if="!fullscreen" |
|
|
|
class="iconfont icon-weibiaoti10 jessibuca-btn" |
|
|
|
@click="fullscreenSwich" |
|
|
|
></i> |
|
|
|
<i |
|
|
|
v-if="fullscreen" |
|
|
|
class="iconfont icon-weibiaoti11 jessibuca-btn" |
|
|
|
@click="fullscreenSwich" |
|
|
|
></i> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div v-if="ptzControl" class="ptzControl" @dblclick.stop> |
|
|
|
<div class="control-wrapper"> |
|
|
|
<template> |
|
|
|
<div |
|
|
|
ref="tooltipWrap" class="control-btn control-top" @mousedown="ptzCamera('up')" |
|
|
|
@mouseup="ptzCamera('stop')"> |
|
|
|
<el-tooltip class="item" effect="dark" content="向上移动" placement="top-start"> |
|
|
|
ref="tooltipWrap" |
|
|
|
class="control-btn control-top" |
|
|
|
@mousedown="ptzCamera('up')" |
|
|
|
@mouseup="ptzCamera('stop')" |
|
|
|
> |
|
|
|
<el-tooltip |
|
|
|
class="item" |
|
|
|
effect="dark" |
|
|
|
content="向上移动" |
|
|
|
placement="top-start" |
|
|
|
> |
|
|
|
<i class="el-icon-caret-top"></i> |
|
|
|
</el-tooltip> |
|
|
|
<div class="control-inner-btn control-inner"></div> |
|
|
|
</div> |
|
|
|
<div class="control-btn control-left" @mousedown="ptzCamera('left')" @mouseup="ptzCamera('stop')"> |
|
|
|
<el-tooltip class="item" effect="dark" content="向左移动" placement="left-start"> |
|
|
|
<div |
|
|
|
class="control-btn control-left" |
|
|
|
@mousedown="ptzCamera('left')" |
|
|
|
@mouseup="ptzCamera('stop')" |
|
|
|
> |
|
|
|
<el-tooltip |
|
|
|
class="item" |
|
|
|
effect="dark" |
|
|
|
content="向左移动" |
|
|
|
placement="left-start" |
|
|
|
> |
|
|
|
<i class="el-icon-caret-left"></i> |
|
|
|
</el-tooltip> |
|
|
|
<div class="control-inner-btn control-inner"></div> |
|
|
|
</div> |
|
|
|
<div class="control-btn control-bottom" @mousedown="ptzCamera('down')" @mouseup="ptzCamera('stop')"> |
|
|
|
<el-tooltip class="item" effect="dark" content="向下移动" placement="bottom-start"> |
|
|
|
<div |
|
|
|
class="control-btn control-bottom" |
|
|
|
@mousedown="ptzCamera('down')" |
|
|
|
@mouseup="ptzCamera('stop')" |
|
|
|
> |
|
|
|
<el-tooltip |
|
|
|
class="item" |
|
|
|
effect="dark" |
|
|
|
content="向下移动" |
|
|
|
placement="bottom-start" |
|
|
|
> |
|
|
|
<i class="el-icon-caret-bottom"></i> |
|
|
|
</el-tooltip> |
|
|
|
<div class="control-inner-btn control-inner"></div> |
|
|
|
</div> |
|
|
|
<div class="control-btn control-right" @mousedown="ptzCamera('right')" @mouseup="ptzCamera('stop')"> |
|
|
|
<el-tooltip class="item" effect="dark" content="向右移动" placement="right-start"> |
|
|
|
<div |
|
|
|
class="control-btn control-right" |
|
|
|
@mousedown="ptzCamera('right')" |
|
|
|
@mouseup="ptzCamera('stop')" |
|
|
|
> |
|
|
|
<el-tooltip |
|
|
|
class="item" |
|
|
|
effect="dark" |
|
|
|
content="向右移动" |
|
|
|
placement="right-start" |
|
|
|
> |
|
|
|
<i class="el-icon-caret-right"></i> |
|
|
|
</el-tooltip> |
|
|
|
<div class="control-inner-btn control-inner"></div> |
|
|
|
@ -51,22 +108,65 @@ ref="tooltipWrap" class="control-btn control-top" @mousedown="ptzCamera('up')" |
|
|
|
</template> |
|
|
|
|
|
|
|
<div |
|
|
|
style="position: absolute; left: 8.25rem; top: 0rem; color: #78aee4" @mousedown="ptzCamera('zoomin')" |
|
|
|
@mouseup="ptzCamera('stop')"> |
|
|
|
<el-tooltip class="item" effect="dark" content="放大" placement="right"> |
|
|
|
<i class="el-icon-zoom-in control-zoom-btn" style="font-size: 1.875rem"></i> |
|
|
|
style="position: absolute; left: 8.25rem; top: 0rem; color: #78aee4" |
|
|
|
@mousedown="ptzCamera('zoomin')" |
|
|
|
@mouseup="ptzCamera('stop')" |
|
|
|
> |
|
|
|
<el-tooltip |
|
|
|
class="item" |
|
|
|
effect="dark" |
|
|
|
content="放大" |
|
|
|
placement="right" |
|
|
|
> |
|
|
|
<i |
|
|
|
class="el-icon-zoom-in control-zoom-btn" |
|
|
|
style="font-size: 1.875rem" |
|
|
|
></i> |
|
|
|
</el-tooltip> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
style="position: absolute; left: 8.25rem; top: 4rem; font-size: 1.875rem; color: #78aee4" |
|
|
|
@mousedown="ptzCamera('zoomout')" @mouseup="ptzCamera('stop')"> |
|
|
|
<el-tooltip class="item" effect="dark" content="缩小" placement="right"> |
|
|
|
style=" |
|
|
|
position: absolute; |
|
|
|
left: 8.25rem; |
|
|
|
top: 4rem; |
|
|
|
font-size: 1.875rem; |
|
|
|
color: #78aee4; |
|
|
|
" |
|
|
|
@mousedown="ptzCamera('zoomout')" |
|
|
|
@mouseup="ptzCamera('stop')" |
|
|
|
> |
|
|
|
<el-tooltip |
|
|
|
class="item" |
|
|
|
effect="dark" |
|
|
|
content="缩小" |
|
|
|
placement="right" |
|
|
|
> |
|
|
|
<i class="el-icon-zoom-out control-zoom-btn"></i> |
|
|
|
</el-tooltip> |
|
|
|
</div> |
|
|
|
<el-tooltip class="item" effect="dark" content="移动速度控制" placement="top"> |
|
|
|
<div class="contro-speed" style="position: absolute; left: 100px; top: 0rem; width: 1rem; height: 7rem"> |
|
|
|
<el-slider v-model="controSpeed" vertical height="6rem" :max="100" type="vertical"></el-slider> |
|
|
|
<el-tooltip |
|
|
|
class="item" |
|
|
|
effect="dark" |
|
|
|
content="移动速度控制" |
|
|
|
placement="top" |
|
|
|
> |
|
|
|
<div |
|
|
|
class="contro-speed" |
|
|
|
style=" |
|
|
|
position: absolute; |
|
|
|
left: 100px; |
|
|
|
top: 0rem; |
|
|
|
width: 1rem; |
|
|
|
height: 7rem; |
|
|
|
" |
|
|
|
> |
|
|
|
<el-slider |
|
|
|
v-model="controSpeed" |
|
|
|
vertical |
|
|
|
height="6rem" |
|
|
|
:max="100" |
|
|
|
type="vertical" |
|
|
|
></el-slider> |
|
|
|
</div> |
|
|
|
</el-tooltip> |
|
|
|
</div> |
|
|
|
@ -147,7 +247,10 @@ export default { |
|
|
|
let dom = this.$refs.container; |
|
|
|
let width = dom.parentNode.clientWidth; |
|
|
|
let height = (9 / 16) * width; |
|
|
|
const clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight); |
|
|
|
const clientHeight = Math.min( |
|
|
|
document.body.clientHeight, |
|
|
|
document.documentElement.clientHeight |
|
|
|
); |
|
|
|
if (height > clientHeight) { |
|
|
|
height = clientHeight; |
|
|
|
width = (16 / 9) * height; |
|
|
|
@ -208,7 +311,15 @@ export default { |
|
|
|
async play() { |
|
|
|
const ipAndPort = getCurrentIPAndPortOrDomain(); |
|
|
|
// 使用原有系统的播放地址 |
|
|
|
this.videoUrl = "ws://" + ipAndPort + "/play/" + this.video.deviceId + '_' + this.video.channelId + ".live.flv"; |
|
|
|
this.videoUrl = |
|
|
|
"ws://" + |
|
|
|
ipAndPort + |
|
|
|
import.meta.env.VITE_APP_PLAY_API + |
|
|
|
"/" + |
|
|
|
this.video.deviceId + |
|
|
|
"_" + |
|
|
|
this.video.channelId + |
|
|
|
".live.flv"; |
|
|
|
this.create(); |
|
|
|
jessibucaPlayer[this._uid].on("play", () => { |
|
|
|
this.playing = true; |
|
|
|
@ -248,7 +359,7 @@ export default { |
|
|
|
this.fullscreen = !isFull; |
|
|
|
this.ptzControl = false; |
|
|
|
if (isFull) { |
|
|
|
this.$emit('outFullscreen', this.index); |
|
|
|
this.$emit("outFullscreen", this.index); |
|
|
|
} |
|
|
|
}, |
|
|
|
isFullscreen() { |
|
|
|
@ -267,11 +378,11 @@ export default { |
|
|
|
if (this.isEzvizDevice) { |
|
|
|
// 萤石云设备的云台控制 |
|
|
|
setChannelPTZ({ |
|
|
|
deviceType: 'ezviz', |
|
|
|
deviceType: "ezviz", |
|
|
|
accessToken: this.accessToken, |
|
|
|
deviceSerial: this.deviceSerial, |
|
|
|
direction: command, |
|
|
|
speed: this.controSpeed |
|
|
|
speed: this.controSpeed, |
|
|
|
}); |
|
|
|
} else { |
|
|
|
// 原有系统的云台控制 |
|
|
|
@ -809,12 +920,12 @@ export default { |
|
|
|
font-size: 11px; |
|
|
|
|
|
|
|
&.status-pending { |
|
|
|
background-color: #E6A23C; |
|
|
|
background-color: #e6a23c; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
|
|
|
|
&.status-processing { |
|
|
|
background-color: #409EFF; |
|
|
|
background-color: #409eff; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
} |
|
|
|
|
