538 lines
13 KiB
Vue
538 lines
13 KiB
Vue
<template>
|
||
<view class="fullHeight">
|
||
<headers :showBack="true">
|
||
<view class="headerName">
|
||
视频播放
|
||
</view>
|
||
</headers>
|
||
<!-- <video class="videoBox" id="myVideo" :custom-cache="false" :src="url" controls autoplay></video> -->
|
||
<!-- APP环境使用web-view -->
|
||
<!-- #ifdef APP-PLUS -->
|
||
<video v-if="!isYsy" class="videoBox" id="myVideo" :custom-cache="false"
|
||
:src="playUrlFilter" controls autoplay></video>
|
||
<!-- #endif -->
|
||
<!-- H5环境使用ezuikit -->
|
||
<!-- #ifdef H5 -->
|
||
<my-player-m3u8 v-if="!isYsy && playUrlFilter" :showMask="true" :src="playUrlFilter" :autoplay="true" />
|
||
<!-- #endif -->
|
||
<view v-if="isYsy && playUrlFilter && accessToken" :style="{width: '100%', height: '225px'}">
|
||
<!-- H5环境使用ezuikit -->
|
||
<!-- #ifdef H5 -->
|
||
<iframe :src="ysyPlayUrl" :style="webviewStyles" frameborder="0" :scrolling="'no'"></iframe>
|
||
<!-- #endif -->
|
||
<!-- APP环境使用web-view -->
|
||
<!-- #ifdef APP-PLUS -->
|
||
<web-view :src="ysyPlayUrl" :style="webviewStyles" :webview-styles="webviewConfig"></web-view>
|
||
<!-- #endif -->
|
||
</view>
|
||
<view class="videoName">
|
||
{{videoInfo.videoName}}
|
||
<button v-if="videoInfo.videoType==3" type="primary" class="changeBtn btn"
|
||
@click="changeStreamFn">{{streamType==1?'切换到主码流':'切换到子码流'}}</button>
|
||
</view>
|
||
<view class="videoOperateBox">
|
||
<text class="desc">当前云台速度：{{ this.opSize }}</text>
|
||
<view class="box">
|
||
<image src="../../static/videoControlIcon/bg.png" class="bg"></image>
|
||
<view class="pic top"
|
||
:style="{backgroundImage: typeName == 'UP' && videoFlag?'url(../../static/videoControlIcon/top-active.png)':'url(../../static/videoControlIcon/top.png)'}"
|
||
@click="controlVideoFn(0,0.2,0,'UP')"></view>
|
||
<view class="pic left"
|
||
:style="{backgroundImage: typeName == 'LEFT' && videoFlag?'url(../../static/videoControlIcon/left-active.png)':'url(../../static/videoControlIcon/left.png)'}"
|
||
@click="controlVideoFn(-0.2,0,0,'LEFT')"></view>
|
||
<view class="pic bottom"
|
||
:style="{backgroundImage: typeName == 'DOWN' && videoFlag?'url(../../static/videoControlIcon/bottom-active.png)':'url(../../static/videoControlIcon/bottom.png)'}"
|
||
@click="controlVideoFn(0,-0.2,0,'DOWN')"></view>
|
||
<view class="pic right"
|
||
:style="{backgroundImage: typeName == 'RIGHT' && videoFlag?'url(../../static/videoControlIcon/right-active.png)':'url(../../static/videoControlIcon/right.png)'}"
|
||
@click="controlVideoFn(0.2,0,0,'RIGHT')"></view>
|
||
<!-- <view class="pic center" @click="stop()"></view> -->
|
||
</view>
|
||
<view class="box2">
|
||
<view class="zoom zoomin"
|
||
:style="{backgroundImage: typeName == 'ZOOM_OUT' && videoFlag?'url(../../static/videoControlIcon/2.png)':'url(../../static/videoControlIcon/1.png)'}"
|
||
@click="controlVideoFn(0,0,-0.2,'ZOOM_OUT')"></view>
|
||
<view class="zoom zoomout"
|
||
:style="{backgroundImage: typeName == 'ZOOM_IN' && videoFlag?'url(../../static/videoControlIcon/4.png)':'url(../../static/videoControlIcon/3.png)'}"
|
||
@click="controlVideoFn(0,0,0.2,'ZOOM_IN')"></view>
|
||
</view>
|
||
<view class="video-playback" v-if="videoConfig.videoType != 1" @click="toBackList">
|
||
视频回放
|
||
</view>
|
||
<view class="set-speed">
|
||
<u-button @click="setSpeed" type="primary">设置球机转动速度</u-button>
|
||
</view>
|
||
</view>
|
||
<uni-popup ref="speedPopup" type="center">
|
||
<view class="speed_wrap">
|
||
<text class="s_title">设置球机转动速度</text>
|
||
<UNumberBox :value="opSize" :inputHeight="70" @change="changeSpeed" />
|
||
<u-button class="s_btn" @click="handleSaveSpeed">确认</u-button>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import headers from '../../components/headers/headers.vue'
|
||
import UNumberBox from "../../components/u-number-box/u-number-box.vue"
|
||
import MyPlayerM3u8 from '@/components/my-player-m3u8/my-player-m3u8.vue';
|
||
export default {
|
||
components: {
|
||
headers,
|
||
UNumberBox,
|
||
MyPlayerM3u8
|
||
},
|
||
data() {
|
||
return {
|
||
url: '', //rtsp://admin:jxj12345@192.168.0.64:554/h264/ch1/main/av_stream
|
||
videoInfo: {
|
||
videoName: '',
|
||
videoType: null
|
||
},
|
||
streamType: 1, //1是子码流 2是主码流
|
||
opSize: 20,
|
||
videoResponseInfo: {},
|
||
videoFlag: false,
|
||
typeName: "",
|
||
videoConfig: {},
|
||
projectSn: "",
|
||
tempSpeed: 20,
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
|
||
//videoType 1萤石云，2乐橙，3ISC，4大华，5宇视，6国标
|
||
// this.url = options.url
|
||
this.videoInfo = uni.getStorageSync('videoInfo');
|
||
this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
|
||
this.opSize = Number(uni.getStorageSync('videoOpSize') || 20);
|
||
if (this.videoInfo.videoType == 2) {
|
||
this.url = this.videoInfo.liveRadioUrl
|
||
} else {
|
||
this.getPlayUrl()
|
||
}
|
||
this.getUseProjectVideoConfig();
|
||
},
|
||
onReady() {
|
||
// this.$nextTick(() => {
|
||
// this.setHeight()
|
||
// })
|
||
},
|
||
computed: {
|
||
playUrlFilter() {
|
||
//
|
||
// let url = "";
|
||
// if(this.videoConfig && this.videoConfig.videoType == 1) {
|
||
// url = this.url
|
||
// } else if (this.url) {
|
||
// url = 'rtsp://42.180.188.17' + this.url.substring(20);
|
||
// }
|
||
// console.log(url);
|
||
return this.url
|
||
},
|
||
isYsy() {
|
||
console.info(this.videoInfo?.videoType, '======')
|
||
return this.videoInfo?.videoType == 1
|
||
},
|
||
ysyPlayUrl() {
|
||
// 萤石云播放地址
|
||
return `https://open.ys7.com/ezopen/h5/iframe?url=${this.playUrlFilter}&template=simple&autoplay=1&accessToken=${this.accessToken}`
|
||
}
|
||
},
|
||
methods: {
|
||
handleSaveSpeed() {
|
||
this.opSize = this.tempSpeed
|
||
this.$refs.speedPopup.close()
|
||
uni.setStorageSync('videoOpSize', this.opSize)
|
||
},
|
||
changeSpeed(data) {
|
||
console.info(data, this.opSize)
|
||
this.tempSpeed = data.value
|
||
},
|
||
setSpeed() {
|
||
this.tempSpeed = this.opSize
|
||
this.$refs.speedPopup.open()
|
||
},
|
||
getUseProjectVideoConfig() {
|
||
var that = this
|
||
let requestData = {
|
||
projectSn: this.projectSn
|
||
}
|
||
this.sendRequest({
|
||
url: "xmgl/projectVideoConfig/getUseProjectVideoConfig",
|
||
data: requestData,
|
||
method: "POST",
|
||
success(res) {
|
||
console.log('找封面', res)
|
||
that.videoConfig = res.result;
|
||
}
|
||
})
|
||
},
|
||
// 跳转到录像回放列表
|
||
toBackList() {
|
||
uni.navigateTo({
|
||
url: './playBackList?obj=' + JSON.stringify({
|
||
...this.videoResponseInfo,
|
||
...this.videoInfo
|
||
})
|
||
})
|
||
},
|
||
changeStreamFn() {
|
||
if (this.streamType == 1) {
|
||
this.streamType = 2
|
||
} else {
|
||
this.streamType = 1
|
||
}
|
||
this.getPlayUrl()
|
||
},
|
||
getPlayUrl() {
|
||
var that = this
|
||
var json = {
|
||
itemId: this.videoInfo.itemId
|
||
}
|
||
if (this.videoInfo.videoType == 3) {
|
||
json.streamType = this.streamType
|
||
json.type = 'rtsp' //rtsp或者hls
|
||
}
|
||
this.sendRequest({
|
||
url: "xmgl/videoItem/getVideoItemInfo",
|
||
data: json,
|
||
method: "post",
|
||
success(res) {
|
||
switch (that.videoInfo.videoType) {
|
||
case 1:
|
||
// that.url=res.result.videoInfo.hdFlvAddress
|
||
that.url = res.result.videoInfo
|
||
that.accessToken = res.result.accessToken
|
||
break;
|
||
default:
|
||
that.url = res.result.videoInfo.url
|
||
break;
|
||
}
|
||
// console.log(that.url,res.result.videoInfo.hdFlvAddress,that.videoInfo.videoType,res.result.projectVideoConfig.videoType)
|
||
that.videoResponseInfo = {
|
||
...res.result.projectVideoConfig,
|
||
...res.result.videoInfo
|
||
};
|
||
for (let i in that.videoResponseInfo) {
|
||
if (!that.videoResponseInfo[i]) {
|
||
delete that.videoResponseInfo[i]
|
||
}
|
||
}
|
||
}
|
||
})
|
||
},
|
||
controlVideoFn(pan, tilt, zoom, opType) {
|
||
this.typeName = opType
|
||
if (this.videoFlag) {
|
||
uni.showToast({
|
||
title: '不要重复点击',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
if (this.videoInfo.deviceType != 2) {
|
||
uni.showToast({
|
||
title: '该设备不是球机，不支持此操作',
|
||
icon: 'none'
|
||
})
|
||
return false
|
||
}
|
||
switch (this.videoInfo.videoType) {
|
||
case 3:
|
||
this.videoFlag = true;
|
||
this.controlVideoFn_isc(opType)
|
||
break;
|
||
case 4:
|
||
this.videoFlag = true;
|
||
this.controlVideoFn_dh(pan, tilt, zoom)
|
||
break;
|
||
default:
|
||
uni.showToast({
|
||
title: '暂不支持',
|
||
icon: 'none'
|
||
})
|
||
break;
|
||
}
|
||
},
|
||
controlVideoFn_isc(opType) {
|
||
let json = {
|
||
// cameraId: this.videoInfo.deviceSerial,
|
||
itemId: this.videoInfo.itemId,
|
||
opType: opType,
|
||
opSize: this.opSize,
|
||
opCode: 1
|
||
};
|
||
var that = this
|
||
this.sendRequest({
|
||
url: "xmgl/videoItem/getHikPtzControl",
|
||
data: json,
|
||
method: "post",
|
||
success(res) {
|
||
uni.showToast({
|
||
title: '控制成功',
|
||
icon: 'none'
|
||
})
|
||
},
|
||
complete() {
|
||
that.videoFlag = false;
|
||
}
|
||
})
|
||
},
|
||
controlVideoFn_dh(pan, tilt, zoom) {
|
||
var code = '';
|
||
var jsonStr = {
|
||
pan: pan,
|
||
tilt: tilt,
|
||
zoom: zoom,
|
||
duration: 100
|
||
};
|
||
let json = {
|
||
ip: this.videoInfo.ip,
|
||
port: this.videoInfo.port,
|
||
username: this.videoInfo.username,
|
||
password: this.videoInfo.password,
|
||
chnnelcode: this.videoInfo.chnnelcode,
|
||
jsonStr: JSON.stringify(jsonStr),
|
||
data: new Date()
|
||
};
|
||
var that = this
|
||
this.sendRequest({
|
||
url: "xmgl/video/putPTZ",
|
||
data: json,
|
||
method: "get",
|
||
success(res) {
|
||
uni.showToast({
|
||
title: '控制成功',
|
||
icon: 'none'
|
||
})
|
||
},
|
||
complete() {
|
||
that.videoFlag = false;
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
/deep/ .m3u8-player,
|
||
.player-m3u8{
|
||
width: 100%;
|
||
height: 420rpx;
|
||
}
|
||
|
||
/* #ifdef H5 */
|
||
.fullHeight {
|
||
background-color: #F4F5FD;
|
||
height: 100vh;
|
||
}
|
||
|
||
/* #endif */
|
||
|
||
/* #ifdef MP-WEIXIN */
|
||
.fullHeight {
|
||
background-color: #F4F5FD;
|
||
height: 100vh;
|
||
}
|
||
|
||
/* #endif */
|
||
|
||
/* #ifdef APP-PLUS */
|
||
.fullHeight {
|
||
background-color: #F4F5FD;
|
||
height: auto;
|
||
padding-bottom: 60rpx;
|
||
}
|
||
|
||
/* #endif */
|
||
.videoBox {
|
||
width: 100%;
|
||
}
|
||
|
||
.videoName {
|
||
font-size: 16px;
|
||
color: $uni-text-color;
|
||
font-weight: bold;
|
||
margin: 10px 15px;
|
||
position: relative;
|
||
|
||
.changeBtn {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
.set-speed {
|
||
margin: 48rpx 96rpx;
|
||
height: 108rpx;
|
||
}
|
||
|
||
.video-playback {
|
||
width: 454rpx;
|
||
height: 108rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 31rpx;
|
||
text-align: center;
|
||
line-height: 108rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 40rpx;
|
||
color: #8D8D8D;
|
||
margin: 0 auto;
|
||
margin-top: 80rpx;
|
||
// position: fixed;
|
||
// bottom: 80rpx;
|
||
// left: 145rpx;
|
||
}
|
||
|
||
.videoOperateBox {
|
||
position: relative;
|
||
text-align: center;
|
||
padding-top: 10px;
|
||
|
||
.bg {
|
||
width: 220px;
|
||
height: 220px;
|
||
}
|
||
}
|
||
|
||
.videoOperateBox .box {
|
||
position: relative;
|
||
display: inline-block;
|
||
margin: auto;
|
||
height: 220px;
|
||
}
|
||
|
||
.videoOperateBox .pic {
|
||
position: absolute;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.videoOperateBox .zoom {
|
||
width: 106px;
|
||
height: 69px;
|
||
display: inline-block;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.videoOperateBox .zoomin:hover {
|
||
background: url("../../static/videoControlIcon/4.png");
|
||
}
|
||
|
||
.videoOperateBox .zoomout:hover {
|
||
background: url("../../static/videoControlIcon/2.png");
|
||
}
|
||
|
||
.videoOperateBox .zoomin {
|
||
background: url("../../static/videoControlIcon/3.png");
|
||
}
|
||
|
||
.videoOperateBox .zoomout {
|
||
background: url("../../static/videoControlIcon/1.png");
|
||
}
|
||
|
||
.videoOperateBox .left {
|
||
width: 28px;
|
||
height: 33px;
|
||
background: url("../../static/videoControlIcon/left.png");
|
||
left: 25px;
|
||
top: 50%;
|
||
margin-top: -16px;
|
||
}
|
||
|
||
.videoOperateBox .left:hover {
|
||
background: url("../../static/videoControlIcon/left-active.png");
|
||
}
|
||
|
||
.videoOperateBox .right:hover {
|
||
background: url("../../static/videoControlIcon/right-active.png");
|
||
}
|
||
|
||
.videoOperateBox .top:hover {
|
||
background: url("../../static/videoControlIcon/top-active.png");
|
||
}
|
||
|
||
.videoOperateBox .bottom:hover {
|
||
background: url("../../static/videoControlIcon/bottom-active.png");
|
||
}
|
||
|
||
// .videoOperateBox .center:hover {
|
||
// background: url("../../static/videoControlIcon/center-active.png");
|
||
// }
|
||
|
||
.videoOperateBox .right {
|
||
width: 28px;
|
||
height: 33px;
|
||
background: url("../../static/videoControlIcon/right.png");
|
||
right: 25px;
|
||
top: 50%;
|
||
margin-top: -16px;
|
||
}
|
||
|
||
.videoOperateBox .top {
|
||
width: 33px;
|
||
height: 28px;
|
||
background: url("../../static/videoControlIcon/top.png");
|
||
top: 25px;
|
||
left: 50%;
|
||
margin-left: -16px;
|
||
}
|
||
|
||
.videoOperateBox .bottom {
|
||
width: 33px;
|
||
height: 28px;
|
||
background: url("../../static/videoControlIcon/bottom.png");
|
||
bottom: 25px;
|
||
left: 50%;
|
||
margin-left: -16px;
|
||
}
|
||
|
||
// .videoOperateBox .center {
|
||
// width: 44px;
|
||
// height: 40px;
|
||
// background: url("../../static/videoControlIcon/center.png");
|
||
// left: 50%;
|
||
// top: 50%;
|
||
// margin-top: -20px;
|
||
// margin-left: -22px;
|
||
// }
|
||
.desc {
|
||
text-align: right;
|
||
position: absolute;
|
||
top: -12rpx;
|
||
font-size: 32rpx;
|
||
left: 28rpx;
|
||
}
|
||
|
||
.speed_wrap {
|
||
width: 550rpx;
|
||
height: 300rpx;
|
||
background-color: #FFFFFF;
|
||
border-radius: 16rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.s_title {
|
||
color: #000;
|
||
font-weight: 600;
|
||
line-height: 40rpx;
|
||
font-size: 36rpx;
|
||
margin: 24rpx 0;
|
||
}
|
||
|
||
.s_btn {
|
||
width: 100%;
|
||
|
||
&:after {
|
||
border-radius: 0;
|
||
}
|
||
}
|
||
}
|
||
</style> |