admin/zhgdyunapp
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
”Rain“ 2024-05-27 21:45:49 +08:00
parent 1c9371aa76
commit d9ada299de
1 changed files with 202 additions and 224 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

426
pages/videoManage/playVideo.vue
View File

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