@@ -107,12 +107,12 @@ | |||||
<div> | <div> | ||||
<div class="dialogHeader"> | <div class="dialogHeader"> | ||||
<div></div> | <div></div> | ||||
<!-- <div class="dialogBtn" @click="refreshUrl"> | |||||
<div class="dialogBtn" @click="refreshUrl"> | |||||
<el-icon color="#409efc" :size="20"> | <el-icon color="#409efc" :size="20"> | ||||
<Refresh /> | <Refresh /> | ||||
</el-icon> | </el-icon> | ||||
<div>刷新视频</div> | <div>刷新视频</div> | ||||
</div> --> | |||||
</div> | |||||
</div> | </div> | ||||
<div v-if="visible || showVideo" class="prism-player" id="player-con"></div> | <div v-if="visible || showVideo" class="prism-player" id="player-con"></div> | ||||
<!-- <VideoPlay :videoUrl="detailData.videoUrl" :videoType="detailData.videoType" /> --> | <!-- <VideoPlay :videoUrl="detailData.videoUrl" :videoType="detailData.videoType" /> --> | ||||
@@ -436,7 +436,7 @@ function onDetail(row: any) { | |||||
visible.value = true; | visible.value = true; | ||||
detailData.sensorId = row.sensorId; | detailData.sensorId = row.sensorId; | ||||
detailData.title = row.sensorName + "(" + row.sensorId + ")"; | detailData.title = row.sensorName + "(" + row.sensorId + ")"; | ||||
getUrl(row.sensorId); | |||||
getUrl(); | |||||
} | } | ||||
// 刷新 | // 刷新 | ||||
const showVideo = ref(false); | const showVideo = ref(false); | ||||
@@ -449,8 +449,7 @@ function refreshUrl() { | |||||
}, 1000); | }, 1000); | ||||
} | } | ||||
let num = 1; | let num = 1; | ||||
function getUrl(sensorId:any) { | |||||
function getUrl() { | |||||
detailData.videoType = "m3u8"; | detailData.videoType = "m3u8"; | ||||
setTimeout(async () => { | setTimeout(async () => { | ||||
await monitorLIVEApi.detail({ sensorId: detailData.sensorId }).then((res:any) => { | await monitorLIVEApi.detail({ sensorId: detailData.sensorId }).then((res:any) => { | ||||
@@ -464,18 +463,7 @@ function getUrl(sensorId:any) { | |||||
detailData.streamId = data.streamId; | detailData.streamId = data.streamId; | ||||
detailData.videoToken = data.videoToken; | detailData.videoToken = data.videoToken; | ||||
// getvideo1() | // getvideo1() | ||||
let localurl = '' | |||||
if(sensorId == 'SXT001') { | |||||
localurl = 'http://123.57.209.16:8004/video/1.mp4' | |||||
getvideo2(localurl); | |||||
} else if(sensorId == 'SXT002'){ | |||||
localurl = 'http://123.57.209.16:8004/video/5.mp4' | |||||
getvideo2(localurl); | |||||
} else if(sensorId == 'SXT003') { | |||||
localurl = 'http://123.57.209.16:8004/video/2.mp4' | |||||
getvideo2(localurl); | |||||
} | |||||
getvideo2(); | |||||
} | } | ||||
}); | }); | ||||
}); | }); | ||||
@@ -512,10 +500,10 @@ function getvideo1() { | |||||
// aliRts.startLiveStream(pullStreamUrl, mediaEle); | // aliRts.startLiveStream(pullStreamUrl, mediaEle); | ||||
} | } | ||||
let player = ref<any>(null); | let player = ref<any>(null); | ||||
function getvideo2(url:any) { | |||||
function getvideo2() { | |||||
var options = { | var options = { | ||||
id: "player-con", | id: "player-con", | ||||
source: url, | |||||
source: detailData.videoUrl + "&subaudio=no&jitterbuffer=6000", | |||||
// "rtsFallbackSource": "降级地址,如HLS", | // "rtsFallbackSource": "降级地址,如HLS", | ||||
width: "100%", | width: "100%", | ||||
height: "500px", | height: "500px", | ||||
@@ -561,7 +549,7 @@ const handleClose = () => { | |||||
visible.value = false; | visible.value = false; | ||||
detailData.videoUrl = ""; | detailData.videoUrl = ""; | ||||
detailData.videoType = ""; | detailData.videoType = ""; | ||||
// stopUrl(); | |||||
stopUrl(); | |||||
if (player.value) { | if (player.value) { | ||||
player.value.dispose(); | player.value.dispose(); | ||||
} | } | ||||
@@ -107,12 +107,12 @@ | |||||
<div> | <div> | ||||
<div class="dialogHeader"> | <div class="dialogHeader"> | ||||
<div></div> | <div></div> | ||||
<div class="dialogBtn" @click="refreshUrl"> | |||||
<!-- <div class="dialogBtn" @click="refreshUrl"> | |||||
<el-icon color="#409efc" :size="20"> | <el-icon color="#409efc" :size="20"> | ||||
<Refresh /> | <Refresh /> | ||||
</el-icon> | </el-icon> | ||||
<div>刷新视频</div> | <div>刷新视频</div> | ||||
</div> | |||||
</div> --> | |||||
</div> | </div> | ||||
<div v-if="visible || showVideo" class="prism-player" id="player-con"></div> | <div v-if="visible || showVideo" class="prism-player" id="player-con"></div> | ||||
<!-- <VideoPlay :videoUrl="detailData.videoUrl" :videoType="detailData.videoType" /> --> | <!-- <VideoPlay :videoUrl="detailData.videoUrl" :videoType="detailData.videoType" /> --> | ||||
@@ -436,7 +436,7 @@ function onDetail(row: any) { | |||||
visible.value = true; | visible.value = true; | ||||
detailData.sensorId = row.sensorId; | detailData.sensorId = row.sensorId; | ||||
detailData.title = row.sensorName + "(" + row.sensorId + ")"; | detailData.title = row.sensorName + "(" + row.sensorId + ")"; | ||||
getUrl(); | |||||
getUrl(row.sensorId); | |||||
} | } | ||||
// 刷新 | // 刷新 | ||||
const showVideo = ref(false); | const showVideo = ref(false); | ||||
@@ -449,7 +449,8 @@ function refreshUrl() { | |||||
}, 1000); | }, 1000); | ||||
} | } | ||||
let num = 1; | let num = 1; | ||||
function getUrl() { | |||||
function getUrl(sensorId:any) { | |||||
detailData.videoType = "m3u8"; | detailData.videoType = "m3u8"; | ||||
setTimeout(async () => { | setTimeout(async () => { | ||||
await monitorLIVEApi.detail({ sensorId: detailData.sensorId }).then((res:any) => { | await monitorLIVEApi.detail({ sensorId: detailData.sensorId }).then((res:any) => { | ||||
@@ -463,7 +464,18 @@ function getUrl() { | |||||
detailData.streamId = data.streamId; | detailData.streamId = data.streamId; | ||||
detailData.videoToken = data.videoToken; | detailData.videoToken = data.videoToken; | ||||
// getvideo1() | // getvideo1() | ||||
getvideo2(); | |||||
let localurl = '' | |||||
if(sensorId == 'SXT001') { | |||||
localurl = 'http://123.57.209.16:8004/video/1.mp4' | |||||
getvideo2(localurl); | |||||
} else if(sensorId == 'SXT002'){ | |||||
localurl = 'http://123.57.209.16:8004/video/5.mp4' | |||||
getvideo2(localurl); | |||||
} else if(sensorId == 'SXT003') { | |||||
localurl = 'http://123.57.209.16:8004/video/2.mp4' | |||||
getvideo2(localurl); | |||||
} | |||||
} | } | ||||
}); | }); | ||||
}); | }); | ||||
@@ -500,10 +512,10 @@ function getvideo1() { | |||||
// aliRts.startLiveStream(pullStreamUrl, mediaEle); | // aliRts.startLiveStream(pullStreamUrl, mediaEle); | ||||
} | } | ||||
let player = ref<any>(null); | let player = ref<any>(null); | ||||
function getvideo2() { | |||||
function getvideo2(url:any) { | |||||
var options = { | var options = { | ||||
id: "player-con", | id: "player-con", | ||||
source: detailData.videoUrl + "&subaudio=no&jitterbuffer=6000", | |||||
source: url, | |||||
// "rtsFallbackSource": "降级地址,如HLS", | // "rtsFallbackSource": "降级地址,如HLS", | ||||
width: "100%", | width: "100%", | ||||
height: "500px", | height: "500px", | ||||
@@ -549,7 +561,7 @@ const handleClose = () => { | |||||
visible.value = false; | visible.value = false; | ||||
detailData.videoUrl = ""; | detailData.videoUrl = ""; | ||||
detailData.videoType = ""; | detailData.videoType = ""; | ||||
stopUrl(); | |||||
// stopUrl(); | |||||
if (player.value) { | if (player.value) { | ||||
player.value.dispose(); | player.value.dispose(); | ||||
} | } |
@@ -16,7 +16,7 @@ | |||||
<view class="botbox"> | <view class="botbox"> | ||||
<view id="url-player-test"></view> | <view id="url-player-test"></view> | ||||
</view> | </view> | ||||
</view> | </view> | ||||
<view class="bottom-content"> | <view class="bottom-content"> | ||||
@@ -78,8 +78,7 @@ | |||||
</view> | </view> | ||||
</view> | </view> | ||||
<view class="tableBox"> | <view class="tableBox"> | ||||
<u-empty marginTop="100rpx" :show="monitorList.length == 0&&status == 'nomore'" mode="list" | |||||
text="暂无数据"></u-empty> | |||||
<u-empty marginTop="100rpx" :show="monitorList.length == 0&&status == 'nomore'" mode="list" text="暂无数据"></u-empty> | |||||
<u-list @scrolltolower="scrolltolower" style="height: calc(100% - 0rpx);"> | <u-list @scrolltolower="scrolltolower" style="height: calc(100% - 0rpx);"> | ||||
<u-list-item v-for="(item, index) in monitorList" :key="index"> | <u-list-item v-for="(item, index) in monitorList" :key="index"> | ||||
<view class="liBox"> | <view class="liBox"> | ||||
@@ -202,10 +201,10 @@ | |||||
this.loadmore() | this.loadmore() | ||||
}, | }, | ||||
onUnload() { | onUnload() { | ||||
if (this.showVideo) { | |||||
if(this.showVideo) { | |||||
this.closeDialog() | this.closeDialog() | ||||
} | } | ||||
}, | }, | ||||
onPullDownRefresh() { | onPullDownRefresh() { | ||||
uni.stopPullDownRefresh() | uni.stopPullDownRefresh() | ||||
@@ -223,7 +222,7 @@ | |||||
// this.loadComponent().then(() => { | // this.loadComponent().then(() => { | ||||
this.player = new Aliplayer({ | this.player = new Aliplayer({ | ||||
id: "url-player-test", | id: "url-player-test", | ||||
source: this.videoUrl, | |||||
source: this.videoUrl + "&subaudio=no&jitterbuffer=6000", | |||||
width: "100%", | width: "100%", | ||||
height: "100%", | height: "100%", | ||||
isLive: true, | isLive: true, | ||||
@@ -251,14 +250,14 @@ | |||||
} | } | ||||
this.showVideo = false; | this.showVideo = false; | ||||
// let params = { | |||||
// sensorId: this.sensorId, | |||||
// streamId: this.streamId, | |||||
// videoToken: this.videoToken | |||||
// }; | |||||
// stopUrl(params).then(res => { | |||||
// }) | |||||
let params = { | |||||
sensorId: this.sensorId, | |||||
streamId: this.streamId, | |||||
videoToken: this.videoToken | |||||
}; | |||||
stopUrl(params).then(res => { | |||||
}) | |||||
}, | }, | ||||
loadWebPlayerSDK() { | loadWebPlayerSDK() { | ||||
return new Promise((resolve, reject) => { | return new Promise((resolve, reject) => { | ||||
@@ -337,49 +336,27 @@ | |||||
}); | }); | ||||
}, | }, | ||||
// 获取视频地址 | // 获取视频地址 | ||||
startClick(id, name) { | |||||
startClick(id,name) { | |||||
this.sensorId = id; | this.sensorId = id; | ||||
this.sensorName = name; | this.sensorName = name; | ||||
this.showVideo = true; | this.showVideo = true; | ||||
// startUrl({ | |||||
// sensorId: id | |||||
// }).then(res => { | |||||
// let { | |||||
// code, | |||||
// data | |||||
// } = res; | |||||
// if (code == 200) { | |||||
// if (this.sensorId == 'SXT001') { | |||||
// this.videoUrl = 'http://123.57.209.16:8004/video/1.mp4' | |||||
// } else if (this.sensorId == 'SXT002') { | |||||
// this.videoUrl = 'http://123.57.209.16:8004/video/5.mp4' | |||||
// } else if (this.sensorId == 'SXT003') { | |||||
// this.videoUrl = 'http://123.57.209.16:8004/video/2.mp4' | |||||
// } | |||||
// // this.videoUrl = data.rtsPullStreamUrls[0].url; | |||||
// this.streamId = data.streamId; | |||||
// this.videoToken = data.videoToken; | |||||
// this.setVideo() | |||||
// } | |||||
// }) | |||||
if (this.sensorId == 'SXT001') { | |||||
this.videoUrl = 'http://123.57.209.16:8004/video/1.mp4' | |||||
} else if (this.sensorId == 'SXT002') { | |||||
this.videoUrl = 'http://123.57.209.16:8004/video/5.mp4' | |||||
} else if (this.sensorId == 'SXT003') { | |||||
this.videoUrl = 'http://123.57.209.16:8004/video/2.mp4' | |||||
} | |||||
// this.videoUrl = data.rtsPullStreamUrls[0].url; | |||||
startUrl({ | |||||
sensorId: id | |||||
}).then(res => { | |||||
let { | |||||
code, | |||||
data | |||||
} = res; | |||||
if (code == 200) { | |||||
this.videoUrl = data.rtsPullStreamUrls[0].url; | |||||
this.streamId = data.streamId; | |||||
this.videoToken = data.videoToken; | |||||
this.setVideo() | |||||
} | |||||
}) | |||||
this.setVideo() | |||||
}, | }, | ||||
confirmVideo() { | confirmVideo() { | ||||
this.showVideo = false; | this.showVideo = false; | ||||
@@ -466,20 +443,17 @@ | |||||
align-items: center; | align-items: center; | ||||
padding: 0 25rpx; | padding: 0 25rpx; | ||||
background: #fff; | background: #fff; | ||||
.title { | .title { | ||||
font-weight: 700; | font-weight: 700; | ||||
font-size: 28rpx; | font-size: 28rpx; | ||||
} | } | ||||
.closes { | .closes { | ||||
// background: #ccc; | // background: #ccc; | ||||
} | } | ||||
} | } | ||||
.botbox { | .botbox { | ||||
height: calc(100% - 80rpx); | |||||
height:calc(100% - 80rpx); | |||||
} | } | ||||
} | } | ||||
@@ -16,7 +16,7 @@ | |||||
<view class="botbox"> | <view class="botbox"> | ||||
<view id="url-player-test"></view> | <view id="url-player-test"></view> | ||||
</view> | </view> | ||||
</view> | </view> | ||||
<view class="bottom-content"> | <view class="bottom-content"> | ||||
@@ -78,7 +78,8 @@ | |||||
</view> | </view> | ||||
</view> | </view> | ||||
<view class="tableBox"> | <view class="tableBox"> | ||||
<u-empty marginTop="100rpx" :show="monitorList.length == 0&&status == 'nomore'" mode="list" text="暂无数据"></u-empty> | |||||
<u-empty marginTop="100rpx" :show="monitorList.length == 0&&status == 'nomore'" mode="list" | |||||
text="暂无数据"></u-empty> | |||||
<u-list @scrolltolower="scrolltolower" style="height: calc(100% - 0rpx);"> | <u-list @scrolltolower="scrolltolower" style="height: calc(100% - 0rpx);"> | ||||
<u-list-item v-for="(item, index) in monitorList" :key="index"> | <u-list-item v-for="(item, index) in monitorList" :key="index"> | ||||
<view class="liBox"> | <view class="liBox"> | ||||
@@ -201,10 +202,10 @@ | |||||
this.loadmore() | this.loadmore() | ||||
}, | }, | ||||
onUnload() { | onUnload() { | ||||
if(this.showVideo) { | |||||
if (this.showVideo) { | |||||
this.closeDialog() | this.closeDialog() | ||||
} | } | ||||
}, | }, | ||||
onPullDownRefresh() { | onPullDownRefresh() { | ||||
uni.stopPullDownRefresh() | uni.stopPullDownRefresh() | ||||
@@ -222,7 +223,7 @@ | |||||
// this.loadComponent().then(() => { | // this.loadComponent().then(() => { | ||||
this.player = new Aliplayer({ | this.player = new Aliplayer({ | ||||
id: "url-player-test", | id: "url-player-test", | ||||
source: this.videoUrl + "&subaudio=no&jitterbuffer=6000", | |||||
source: this.videoUrl, | |||||
width: "100%", | width: "100%", | ||||
height: "100%", | height: "100%", | ||||
isLive: true, | isLive: true, | ||||
@@ -250,14 +251,14 @@ | |||||
} | } | ||||
this.showVideo = false; | this.showVideo = false; | ||||
let params = { | |||||
sensorId: this.sensorId, | |||||
streamId: this.streamId, | |||||
videoToken: this.videoToken | |||||
}; | |||||
stopUrl(params).then(res => { | |||||
}) | |||||
// let params = { | |||||
// sensorId: this.sensorId, | |||||
// streamId: this.streamId, | |||||
// videoToken: this.videoToken | |||||
// }; | |||||
// stopUrl(params).then(res => { | |||||
// }) | |||||
}, | }, | ||||
loadWebPlayerSDK() { | loadWebPlayerSDK() { | ||||
return new Promise((resolve, reject) => { | return new Promise((resolve, reject) => { | ||||
@@ -336,27 +337,49 @@ | |||||
}); | }); | ||||
}, | }, | ||||
// 获取视频地址 | // 获取视频地址 | ||||
startClick(id,name) { | |||||
startClick(id, name) { | |||||
this.sensorId = id; | this.sensorId = id; | ||||
this.sensorName = name; | this.sensorName = name; | ||||
this.showVideo = true; | this.showVideo = true; | ||||
startUrl({ | |||||
sensorId: id | |||||
}).then(res => { | |||||
let { | |||||
code, | |||||
data | |||||
} = res; | |||||
if (code == 200) { | |||||
this.videoUrl = data.rtsPullStreamUrls[0].url; | |||||
this.streamId = data.streamId; | |||||
this.videoToken = data.videoToken; | |||||
this.setVideo() | |||||
} | |||||
}) | |||||
// startUrl({ | |||||
// sensorId: id | |||||
// }).then(res => { | |||||
// let { | |||||
// code, | |||||
// data | |||||
// } = res; | |||||
// if (code == 200) { | |||||
// if (this.sensorId == 'SXT001') { | |||||
// this.videoUrl = 'http://123.57.209.16:8004/video/1.mp4' | |||||
// } else if (this.sensorId == 'SXT002') { | |||||
// this.videoUrl = 'http://123.57.209.16:8004/video/5.mp4' | |||||
// } else if (this.sensorId == 'SXT003') { | |||||
// this.videoUrl = 'http://123.57.209.16:8004/video/2.mp4' | |||||
// } | |||||
// // this.videoUrl = data.rtsPullStreamUrls[0].url; | |||||
// this.streamId = data.streamId; | |||||
// this.videoToken = data.videoToken; | |||||
// this.setVideo() | |||||
// } | |||||
// }) | |||||
if (this.sensorId == 'SXT001') { | |||||
this.videoUrl = 'http://123.57.209.16:8004/video/1.mp4' | |||||
} else if (this.sensorId == 'SXT002') { | |||||
this.videoUrl = 'http://123.57.209.16:8004/video/5.mp4' | |||||
} else if (this.sensorId == 'SXT003') { | |||||
this.videoUrl = 'http://123.57.209.16:8004/video/2.mp4' | |||||
} | |||||
// this.videoUrl = data.rtsPullStreamUrls[0].url; | |||||
this.setVideo() | |||||
}, | }, | ||||
confirmVideo() { | confirmVideo() { | ||||
this.showVideo = false; | this.showVideo = false; | ||||
@@ -443,17 +466,20 @@ | |||||
align-items: center; | align-items: center; | ||||
padding: 0 25rpx; | padding: 0 25rpx; | ||||
background: #fff; | background: #fff; | ||||
.title { | .title { | ||||
font-weight: 700; | font-weight: 700; | ||||
font-size: 28rpx; | font-size: 28rpx; | ||||
} | } | ||||
.closes { | .closes { | ||||
// background: #ccc; | // background: #ccc; | ||||
} | } | ||||
} | } | ||||
.botbox { | .botbox { | ||||
height:calc(100% - 80rpx); | |||||
height: calc(100% - 80rpx); | |||||
} | } | ||||
} | } | ||||