393 lines
9.9 KiB
Vue
393 lines
9.9 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> -->
|
|||
|
|
<!-- 外网IP地址访问视频监控 -->
|
|||
|
|
<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>
|
|||
|
|
</view>
|
|||
|
|
<view class="videoOperateBox">
|
|||
|
|
<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_IN' && videoFlag?'url(../../static/videoControlIcon/2.png)':'url(../../static/videoControlIcon/1.png)'}" @click="controlVideoFn(0,0,0.2,'ZOOM_IN')"></view>
|
|||
|
|
<view class="zoom zoomout" :style="{backgroundImage: typeName == 'ZOOM_OUT' && videoFlag?'url(../../static/videoControlIcon/4.png)':'url(../../static/videoControlIcon/3.png)'}" @click="controlVideoFn(0,0,-0.2,'ZOOM_OUT')"></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="video-playback" v-if="videoConfig.videoType != 1" @click="toBackList">
|
|||
|
|
视频回放
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import headers from '../../components/headers/headers.vue'
|
|||
|
|
export default {
|
|||
|
|
components:{headers},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
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,
|
|||
|
|
typeName: "",
|
|||
|
|
videoConfig:{},
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
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.getPlayUrl()
|
|||
|
|
}
|
|||
|
|
this.getUseProjectVideoConfig();
|
|||
|
|
},
|
|||
|
|
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
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods:{
|
|||
|
|
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
|
|||
|
|
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: 20,
|
|||
|
|
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>
|
|||
|
|
/* #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: 30rpx;
|
|||
|
|
color: $uni-text-color;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin: 20rpx 30rpx;
|
|||
|
|
position: relative;
|
|||
|
|
.changeBtn{
|
|||
|
|
position: absolute;
|
|||
|
|
right: 0;
|
|||
|
|
top: 0;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.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: 20rpx;
|
|||
|
|
.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: 50rpx;
|
|||
|
|
top: 50%;
|
|||
|
|
margin-top: -30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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: 50rpx;
|
|||
|
|
top: 50%;
|
|||
|
|
margin-top: -30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.videoOperateBox .top {
|
|||
|
|
width: 33px;
|
|||
|
|
height: 28px;
|
|||
|
|
background: url("../../static/videoControlIcon/top.png");
|
|||
|
|
top: 50rpx;
|
|||
|
|
left: 50%;
|
|||
|
|
margin-left: -30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.videoOperateBox .bottom {
|
|||
|
|
width: 33px;
|
|||
|
|
height: 28px;
|
|||
|
|
background: url("../../static/videoControlIcon/bottom.png");
|
|||
|
|
bottom: 50rpx;
|
|||
|
|
left: 50%;
|
|||
|
|
margin-left: -30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// .videoOperateBox .center {
|
|||
|
|
// width: 44px;
|
|||
|
|
// height: 80rpx;
|
|||
|
|
// background: url("../../static/videoControlIcon/center.png");
|
|||
|
|
// left: 50%;
|
|||
|
|
// top: 50%;
|
|||
|
|
// margin-top: -40rpx;
|
|||
|
|
// margin-left: -24rpx;
|
|||
|
|
// }
|
|||
|
|
</style>
|