1
This commit is contained in:
parent
1c9371aa76
commit
d9ada299de
@ -10,10 +10,9 @@
|
||||
<video class="videoBox" id="myVideo" :custom-cache="false" :src="playUrlFilter" controls autoplay></video>
|
||||
<view class="videoName">
|
||||
{{videoInfo.videoName}}
|
||||
<button v-if="videoInfo.videoType==3" type="primary" class="changeBtn btn"
|
||||
@click="changeStreamFn">{{streamType==1?'切换到主码流':'切换到子码流'}}</button>
|
||||
<button v-if="videoInfo.videoType==3" type="primary" class="changeBtn btn" @click="changeStreamFn">{{streamType==1?'切换到主码流':'切换到子码流'}}</button>
|
||||
</view>
|
||||
<view class="videoOperateBox" :class="{'videoOperateBox2':videoFlag}">
|
||||
<view class="videoOperateBox">
|
||||
<view class="box">
|
||||
<image src="../../static/videoControlIcon/bg.png" class="bg"></image>
|
||||
<view class="pic top" @click="controlVideoFn(0,0.2,0,'UP')"></view>
|
||||
@ -36,124 +35,111 @@
|
||||
<script>
|
||||
import headers from '../../components/headers/headers.vue'
|
||||
export default {
|
||||
components: {
|
||||
headers
|
||||
},
|
||||
components:{headers},
|
||||
data() {
|
||||
return {
|
||||
url: '', //rtsp://admin:jxj12345@192.168.0.64:554/h264/ch1/main/av_stream
|
||||
videoInfo: {
|
||||
videoName: '',
|
||||
videoType: null
|
||||
},
|
||||
url:'',//rtsp://admin:jxj12345@192.168.0.64:554/h264/ch1/main/av_stream
|
||||
videoInfo:{videoName:'',videoType:null},
|
||||
streamType: 1, //1是子码流 2是主码流
|
||||
videoResponseInfo: {},
|
||||
videoFlag: false,
|
||||
videoFlag:false,
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
//videoType 1萤石云，2乐橙，3ISC，4大华，5宇视，6国标
|
||||
// this.url = options.url
|
||||
this.videoInfo = uni.getStorageSync('videoInfo')
|
||||
if (this.videoInfo.videoType == 2) {
|
||||
this.url = this.videoInfo.liveRadioUrl
|
||||
} else {
|
||||
this.videoInfo=uni.getStorageSync('videoInfo')
|
||||
if(this.videoInfo.videoType==2){
|
||||
this.url= this.videoInfo.liveRadioUrl
|
||||
}else{
|
||||
this.getPlayUrl()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
playUrlFilter() {
|
||||
return this.url ? 'rtsp://42.180.188.17' + this.url.substring(20) : ""
|
||||
playUrlFilter(){
|
||||
return this.url?'rtsp://42.180.188.17'+this.url.substring(20):""
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
methods:{
|
||||
// 跳转到录像回放列表
|
||||
toBackList() {
|
||||
toBackList(){
|
||||
uni.navigateTo({
|
||||
url: './playBackList?obj=' + JSON.stringify({
|
||||
...this.videoResponseInfo,
|
||||
...this.videoInfo
|
||||
})
|
||||
url: './playBackList?obj=' + JSON.stringify({...this.videoResponseInfo,...this.videoInfo})
|
||||
})
|
||||
},
|
||||
changeStreamFn() {
|
||||
if (this.streamType == 1) {
|
||||
this.streamType = 2
|
||||
} else {
|
||||
this.streamType = 1
|
||||
changeStreamFn(){
|
||||
if(this.streamType==1){
|
||||
this.streamType=2
|
||||
}else{
|
||||
this.streamType=1
|
||||
}
|
||||
this.getPlayUrl()
|
||||
},
|
||||
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
|
||||
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) {
|
||||
success(res){
|
||||
switch (that.videoInfo.videoType){
|
||||
case 1:
|
||||
that.url = res.result.videoInfo.hdFlvAddress
|
||||
that.url=res.result.videoInfo.hdFlvAddress
|
||||
break;
|
||||
default:
|
||||
that.url = res.result.videoInfo.url
|
||||
that.url=res.result.videoInfo.url
|
||||
break;
|
||||
}
|
||||
that.videoResponseInfo = {
|
||||
...res.result.projectVideoConfig,
|
||||
...res.result.videoInfo
|
||||
};
|
||||
for (let i in that.videoResponseInfo) {
|
||||
if (!that.videoResponseInfo[i]) {
|
||||
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) {
|
||||
if (this.videoFlag) {
|
||||
controlVideoFn(pan, tilt, zoom,opType){
|
||||
if(this.videoFlag){
|
||||
uni.showToast({
|
||||
title: '不要重复点击',
|
||||
icon: 'none'
|
||||
title:'不要重复点击',
|
||||
icon:'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (this.videoInfo.deviceType != 2) {
|
||||
if(this.videoInfo.deviceType!=2){
|
||||
uni.showToast({
|
||||
title: '该设备不是球机，不支持此操作',
|
||||
icon: 'none'
|
||||
title:'该设备不是球机，不支持此操作',
|
||||
icon:'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
switch (this.videoInfo.videoType) {
|
||||
switch (this.videoInfo.videoType){
|
||||
case 3:
|
||||
this.videoFlag = true;
|
||||
this.videoFlag = true;
|
||||
this.controlVideoFn_isc(opType)
|
||||
break;
|
||||
case 4:
|
||||
this.videoFlag = true;
|
||||
this.videoFlag = true;
|
||||
this.controlVideoFn_dh(pan, tilt, zoom)
|
||||
break;
|
||||
default:
|
||||
uni.showToast({
|
||||
title: '暂不支持',
|
||||
icon: 'none'
|
||||
title:'暂不支持',
|
||||
icon:'none'
|
||||
})
|
||||
break;
|
||||
}
|
||||
},
|
||||
controlVideoFn_isc(opType) {
|
||||
controlVideoFn_isc(opType){
|
||||
let json = {
|
||||
// cameraId: this.videoInfo.deviceSerial,
|
||||
itemId: this.videoInfo.itemId,
|
||||
itemId:this.videoInfo.itemId,
|
||||
opType: opType,
|
||||
opSize: 20,
|
||||
opCode: 1
|
||||
@ -163,18 +149,18 @@
|
||||
url: "xmgl/videoItem/getHikPtzControl",
|
||||
data: json,
|
||||
method: "post",
|
||||
success(res) {
|
||||
success(res){
|
||||
uni.showToast({
|
||||
title: '控制成功',
|
||||
icon: 'none'
|
||||
title:'控制成功',
|
||||
icon:'none'
|
||||
})
|
||||
},
|
||||
complete() {
|
||||
complete(){
|
||||
that.videoFlag = false;
|
||||
}
|
||||
})
|
||||
},
|
||||
controlVideoFn_dh(pan, tilt, zoom) {
|
||||
controlVideoFn_dh(pan, tilt, zoom){
|
||||
var code = '';
|
||||
var jsonStr = {
|
||||
pan: pan,
|
||||
@ -196,13 +182,13 @@
|
||||
url: "xmgl/video/putPTZ",
|
||||
data: json,
|
||||
method: "get",
|
||||
success(res) {
|
||||
success(res){
|
||||
uni.showToast({
|
||||
title: '控制成功',
|
||||
icon: 'none'
|
||||
title:'控制成功',
|
||||
icon:'none'
|
||||
})
|
||||
},
|
||||
complete() {
|
||||
complete(){
|
||||
that.videoFlag = false;
|
||||
}
|
||||
})
|
||||
@ -212,175 +198,167 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* #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;
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
text-align: center;
|
||||
padding-top: 10px;
|
||||
|
||||
.bg {
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
}
|
||||
}
|
||||
|
||||
.videoOperateBox .box {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: auto;
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.videoOperateBox .pic {
|
||||
/* #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;
|
||||
cursor: pointer;
|
||||
right: 0;
|
||||
top: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.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 {
|
||||
text-align: center;
|
||||
padding-top: 10px;
|
||||
.bg{
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
}
|
||||
}
|
||||
|
||||
.videoOperateBox .zoom {
|
||||
width: 106px;
|
||||
height: 69px;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
.videoOperateBox .box {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: auto;
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.videoOperateBox .zoomin:hover {
|
||||
background: url("../../static/videoControlIcon/4.png");
|
||||
}
|
||||
.videoOperateBox .pic {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.videoOperateBox .zoomout:hover {
|
||||
background: url("../../static/videoControlIcon/2.png");
|
||||
}
|
||||
.videoOperateBox .zoom {
|
||||
width: 106px;
|
||||
height: 69px;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.videoOperateBox .zoomin {
|
||||
background: url("../../static/videoControlIcon/3.png");
|
||||
}
|
||||
.videoOperateBox .zoomin:hover {
|
||||
background: url("../../static/videoControlIcon/4.png");
|
||||
}
|
||||
|
||||
.videoOperateBox .zoomout {
|
||||
background: url("../../static/videoControlIcon/1.png");
|
||||
}
|
||||
.videoOperateBox .zoomout:hover {
|
||||
background: url("../../static/videoControlIcon/2.png");
|
||||
}
|
||||
|
||||
.videoOperateBox .left {
|
||||
width: 28px;
|
||||
height: 33px;
|
||||
background: url("../../static/videoControlIcon/left.png");
|
||||
left: 25px;
|
||||
top: 50%;
|
||||
margin-top: -16px;
|
||||
}
|
||||
.videoOperateBox .zoomin {
|
||||
background: url("../../static/videoControlIcon/3.png");
|
||||
}
|
||||
|
||||
.videoOperateBox2 .left:hover {
|
||||
background: url("../../static/videoControlIcon/left-active.png");
|
||||
}
|
||||
.videoOperateBox .zoomout {
|
||||
background: url("../../static/videoControlIcon/1.png");
|
||||
}
|
||||
|
||||
.videoOperateBox2 .right:hover {
|
||||
background: url("../../static/videoControlIcon/right-active.png");
|
||||
}
|
||||
.videoOperateBox .left {
|
||||
width: 28px;
|
||||
height: 33px;
|
||||
background: url("../../static/videoControlIcon/left.png");
|
||||
left: 25px;
|
||||
top: 50%;
|
||||
margin-top: -16px;
|
||||
}
|
||||
|
||||
.videoOperateBox2 .top:hover {
|
||||
background: url("../../static/videoControlIcon/top-active.png");
|
||||
}
|
||||
.videoOperateBox .left:hover {
|
||||
background: url("../../static/videoControlIcon/left-active.png");
|
||||
}
|
||||
|
||||
.videoOperateBox2 .bottom:hover {
|
||||
background: url("../../static/videoControlIcon/bottom-active.png");
|
||||
}
|
||||
.videoOperateBox .right:hover {
|
||||
background: url("../../static/videoControlIcon/right-active.png");
|
||||
}
|
||||
|
||||
// .videoOperateBox .center:hover {
|
||||
// background: url("../../static/videoControlIcon/center-active.png");
|
||||
// }
|
||||
.videoOperateBox .top:hover {
|
||||
background: url("../../static/videoControlIcon/top-active.png");
|
||||
}
|
||||
|
||||
.videoOperateBox .right {
|
||||
width: 28px;
|
||||
height: 33px;
|
||||
background: url("../../static/videoControlIcon/right.png");
|
||||
right: 25px;
|
||||
top: 50%;
|
||||
margin-top: -16px;
|
||||
}
|
||||
.videoOperateBox .bottom:hover {
|
||||
background: url("../../static/videoControlIcon/bottom-active.png");
|
||||
}
|
||||
|
||||
.videoOperateBox .top {
|
||||
width: 33px;
|
||||
height: 28px;
|
||||
background: url("../../static/videoControlIcon/top.png");
|
||||
top: 25px;
|
||||
left: 50%;
|
||||
margin-left: -16px;
|
||||
}
|
||||
// .videoOperateBox .center:hover {
|
||||
// background: url("../../static/videoControlIcon/center-active.png");
|
||||
// }
|
||||
|
||||
.videoOperateBox .bottom {
|
||||
width: 33px;
|
||||
height: 28px;
|
||||
background: url("../../static/videoControlIcon/bottom.png");
|
||||
bottom: 25px;
|
||||
left: 50%;
|
||||
margin-left: -16px;
|
||||
}
|
||||
.videoOperateBox .right {
|
||||
width: 28px;
|
||||
height: 33px;
|
||||
background: url("../../static/videoControlIcon/right.png");
|
||||
right: 25px;
|
||||
top: 50%;
|
||||
margin-top: -16px;
|
||||
}
|
||||
|
||||
// .videoOperateBox .center {
|
||||
// width: 44px;
|
||||
// height: 40px;
|
||||
// background: url("../../static/videoControlIcon/center.png");
|
||||
// left: 50%;
|
||||
// top: 50%;
|
||||
// margin-top: -20px;
|
||||
// margin-left: -22px;
|
||||
// }
|
||||
</style>
|
||||
.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;
|
||||
// }
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user