<template>
|
<view class="video">
|
<view>
|
<!-- #ifdef APP-PLUS -->
|
<web-view v-if="webUrl" :src="webUrl" @message="getMessage"></web-view>
|
<!-- #endif -->
|
<!-- #ifdef MP-WEIXIN -->
|
<live-player :style="{'height':livePlayHeight}" :src="livePlayerUrl" style="width: 100vw;"
|
autoplay id="livePlayer" mode="RTC" />
|
<view v-if="array.length>0" @click="stationVisible = true">
|
<view class="flex content">
|
<view class="flex" style="padding:20rpx;">
|
<view class="uni-input">{{array[index].video_name}}</view>
|
<view class="uni-input" style="margin-left: 20rpx;"
|
:class="[array[index].online=='1'?'active':'disabled']">
|
{{array[index].online=='1'?'在线':'不在线'}}
|
</view>
|
</view>
|
<view style="padding: 0 20rpx;">
|
<u-icon name="arrow-down" size="20"></u-icon>
|
</view>
|
</view>
|
</view>
|
<view class="preset">
|
<view class="flex content preContent" @click="preVisible = true" v-if="presetPointOptions.length>0">
|
<view class="flex" style="padding:20rpx;">
|
<view class="uni-input">{{presetPointOptions[preIndex].name}}</view>
|
</view>
|
|
<view style="padding: 0 20rpx;">
|
<u-icon name="arrow-down" size="20"></u-icon>
|
</view>
|
</view>
|
<div class="right-icon">
|
<u-icon name="plus-circle-fill" size="16" @click="add"></u-icon>
|
<u-icon name="play-right-fill" :color='preValue?"":"#e6e6e6"' size="16" @click="playPre"></u-icon>
|
<u-icon name="trash-fill" :color='preValue?"":"#e6e6e6"' size="16" @click="delSubmit"></u-icon>
|
</div>
|
</view>
|
|
<view class="speed">
|
<view style="padding-bottom: 40rpx;">码流</view>
|
<u-radio-group v-model="streamType" placement="row" @change="changeBitstream">
|
<u-radio label="主码流" name='0' size="20"></u-radio>
|
<u-radio label="子码流" name='1' size="20"></u-radio>
|
</u-radio-group>
|
</view>
|
|
<view class="speed" v-if="array.length>0">
|
<view style="padding-bottom: 40rpx;">云台速度</view>
|
<u-radio-group v-model="speed" placement="row">
|
<u-radio label="慢速" name='30' size="20"></u-radio>
|
<u-radio label="正常" name='50' size="20"></u-radio>
|
<u-radio label="快速" name='100' size="20"></u-radio>
|
</u-radio-group>
|
</view>
|
|
|
<view class="control-box" v-if="array.length>0">
|
<image src="../static/img/reservoirImg/control.png" style="width: 328rpx;height: 328rpx;"></image>
|
<view class="btns-box" @touchstart="startVideoControls" @touchend="endVideoControls">
|
<view class="top" data-speed="20" data-control="UP"></view>
|
<view class="left" data-speed="20" data-control="LEFT"></view>
|
<view class="right" data-speed="20" data-control="RIGHT"></view>
|
<view class="bottom" data-speed="20" data-control="DOWN"></view>
|
</view>
|
</view>
|
<view class="option_btn_right" v-if="array.length>0" @touchstart="startVideoControls"
|
@touchend="endVideoControls">
|
<image src="../static/img/reservoirImg/zoom-in.png" data-control="ZOOM_IN" data-speed="80"></image>
|
<image src="../static/img/reservoirImg/zoom-out.png" data-control="ZOOM_OUT" data-speed="80">
|
</image>
|
</view>
|
|
<my-select height='50vh' v-if="stationVisible" :show="stationVisible" v-model="selectStationValue"
|
type="radio" popupTitle="请选择视频站" :dataLists="array" @submit="stationSelect"
|
@cancel="stationVisible=false">
|
</my-select>
|
<my-select height='50vh' v-if="preVisible && presetPointOptions.length>0 && preValue"
|
:show="preVisible && presetPointOptions.length>0 && preValue" v-model="preValue" type="radio"
|
popupTitle="请选择预置点" :dataLists="presetPointOptions" @submit="preSelect" @cancel="preVisible=false">
|
</my-select>
|
<!-- #endif -->
|
</view>
|
</view>
|
</template>
|
<script>
|
import permision from "@/js_sdk/wa-permission/permission.js"
|
import {
|
queryHkPreviewUrlCommon,
|
handleCameraPosition,
|
getPresetsSearchesUrls,
|
getTalkURLs,
|
setPresetsAddition,
|
deletePresetsDeletion
|
} from "@/api/hk/hk.js"
|
import {
|
getAttWmstBase
|
} from "@/api/dataCenter/responsiblePerson/responsiblePerson.js"
|
import mySelect from "@/components/my-components/my-select.vue"
|
export default {
|
name: "hkVideo",
|
props: ['reservoirId'],
|
components: {
|
mySelect
|
},
|
data() {
|
return {
|
player: "",
|
dialogVisible: false,
|
webUrl: "",
|
type: "",
|
videoInfo: {},
|
videoUrl: '',
|
showWXLivePlayer: false,
|
showAPPLivePlayer: false,
|
//预制点
|
preVisible: false,
|
//删除预置点
|
isDel: false,
|
delValue: "",
|
preValue: "",
|
preIndex: 0,
|
livePlayerUrl: '',
|
array: [],
|
stationVisible: false,
|
selectStationValue: "",
|
index: 0,
|
talkUrl: "",
|
presetPointOptions: [],
|
speed: '50',
|
streamType: "1",
|
}
|
},
|
mounted() {
|
const that = this
|
// #ifdef APP-PLUS
|
// this.initVideo()
|
// #endif
|
this.videoStation()
|
},
|
computed: {
|
livePlayHeight() {
|
const info = uni.getWindowInfo()
|
//设备宽度
|
const width = info.screenWidth
|
//按照16：9设置高度
|
const height = ((width / 16) * 9).toFixed(1)
|
return `${height}px`
|
},
|
},
|
methods: {
|
async getMessage(data) {
|
const platform = uni.getSystemInfoSync().platform
|
if (platform == 'ios') {
|
if (!permision.judgeIosPermission("record")) {
|
uni.showModal({
|
content: "目前未获取麦克风权限，是否授权允许使用麦克风",
|
title: "提示",
|
success(res) {
|
if (res.confirm) {
|
permision.gotoAppPermissionSetting()
|
}
|
}
|
});
|
}
|
} else if (platform == 'android') {
|
const record = await permision.requestAndroidPermission("android.permission.RECORD_AUDIO")
|
if (record == 1) {} else {
|
uni.showModal({
|
content: "目前未获取麦克风权限，是否授权允许使用麦克风",
|
title: "提示",
|
success(res) {
|
if (res.confirm) {
|
permision.gotoAppPermissionSetting()
|
}
|
}
|
});
|
}
|
}
|
},
|
//添加预置点
|
add() {
|
const that = this
|
let curVideo = this.array.find(item => item.video_guid == this.selectStationValue)
|
const index = this.presetPointOptions.length > 0 ? this.presetPointOptions.length + 1 : 1
|
const param = {
|
cameraIndexCode: this.selectStationValue,
|
protocol: 'wss',
|
type: this.type
|
}
|
uni.showModal({
|
title: "添加预置点",
|
editable: true,
|
placeholderText: "请输入预置点名称",
|
success: async res => {
|
if (res.confirm) {
|
const setRes = await setPresetsAddition({
|
cameraIndexCode: that.selectStationValue,
|
presetName: res.content,
|
presetIndex: index,
|
type: that.type
|
})
|
that.getPresetsSearchesUrl(param)
|
}
|
}
|
})
|
},
|
//删除预置点
|
async delSubmit() {
|
if (!this.preValue) return
|
const that = this
|
const params = {
|
cameraIndexCode: that.selectStationValue,
|
presetIndex: that.preValue,
|
type: that.type
|
}
|
uni.showModal({
|
title: "提示",
|
content: "确认删除该预置点吗?",
|
async success(res) {
|
if (res.confirm) {
|
const res = await deletePresetsDeletion(params)
|
const presetParam = {
|
cameraIndexCode: that.selectStationValue,
|
protocol: 'wss',
|
type: that.type
|
}
|
uni.showToast({
|
title: "删除成功",
|
icon: "none"
|
})
|
that.getPresetsSearchesUrl(presetParam)
|
}
|
},
|
})
|
},
|
//视频站切换
|
stationSelect(data) {
|
this.selectStationValue = data.value
|
this.stationVisible = false
|
this.index = data.index
|
this.type = data.sys_resource
|
this.queryHkPreviewUrlCommon()
|
const param = {
|
cameraIndexCode: data.cameraIndexCode,
|
protocol: 'wss',
|
type: this.type
|
}
|
getTalkURLs(param).then(res => {
|
let resultUrl = JSON.parse(res.data.data).data.url
|
if (resultUrl.indexOf('36.134.79.80:6014') != -1) {
|
resultUrl = resultUrl.replace('36.134.79.80:6014', 'hubeihaikang.cn:6014')
|
}
|
if (resultUrl.indexOf('223.76.234.232:6014') != -1) {
|
resultUrl = resultUrl.replace('223.76.234.232:6014', 'v.hubeishuiyi.cn:6014')
|
}
|
this.talkUrl = resultUrl.replace('36.134.79.80:6014', 'hubeihaikang.cn:6014')
|
})
|
this.getPresetsSearchesUrl({
|
cameraIndexCode: this.selectStationValue,
|
type: this.type,
|
protocol: 'wss',
|
})
|
},
|
//码流切换
|
changeBitstream() {
|
this.queryHkPreviewUrlCommon()
|
},
|
//预制点切换
|
preSelect(data) {
|
this.preVisible = false
|
this.preValue = data.value
|
this.preIndex = data.index
|
},
|
//预置点播放
|
playPre() {
|
if (!this.preValue) return
|
handleCameraPosition({
|
cameraIndexCode: this.selectStationValue,
|
action: 0,
|
command: 'GOTO_PRESET',
|
presetIndex: this.preValue,
|
type: this.type
|
})
|
},
|
wxPlay() {
|
const livePlayer = uni.createLivePlayerContext("livePlayer", this)
|
livePlayer.play({
|
success(res) {
|
console.log("success:", res)
|
},
|
fail(err) {
|
console.log("err:", err)
|
}
|
})
|
},
|
startVideoControls(e) {
|
handleCameraPosition({
|
cameraIndexCode: this.selectStationValue,
|
action: 0,
|
command: e.target.dataset.control,
|
speed: this.speed,
|
type: this.type
|
})
|
},
|
//获取预置点列表
|
getPresetsSearchesUrl(params) {
|
this.presetPointOptions = []
|
getPresetsSearchesUrls(params).then(res => {
|
console.log(res, "pressssss")
|
let data = JSON.parse(res.data)
|
if (data.msg !== 'success') {
|
return
|
}
|
let result = data.data.list
|
if (result.length > 0) {
|
result.forEach((item, index) => {
|
this.presetPointOptions.push({
|
name: item.presetPointName,
|
value: item.presetPointIndex,
|
index: index
|
})
|
})
|
this.preValue = this.presetPointOptions[0].value || ""
|
} else {
|
this.preValue = ""
|
}
|
})
|
},
|
|
endVideoControls(e) {
|
// 调视频控制的接口
|
handleCameraPosition({
|
cameraIndexCode: this.selectStationValue,
|
action: 1,
|
command: e.target.dataset.control,
|
speed: this.speed,
|
type: this.type
|
})
|
},
|
//获取视频站
|
async videoStation() {
|
const obj = {
|
res_cd: this.reservoirId
|
}
|
const res = await getAttWmstBase(obj)
|
console.log(res, "res")
|
if (res.resultList.length > 0) {
|
let data = res.resultList
|
data.forEach((e, index) => {
|
const isOnline = e.online ? '在线' : '离线'
|
e.value = e.video_guid
|
e.name = `${e.video_name}--${isOnline}`
|
e.index = index
|
})
|
this.array = data
|
this.type = this.array[0].sys_resource
|
const param = {
|
cameraIndexCode: data[0].value,
|
protocol: 'wss',
|
type: this.type
|
}
|
this.selectStationValue = this.array[0].value
|
// #ifdef MP-WEIXIN
|
this.getPresetsSearchesUrl(param)
|
this.queryHkPreviewUrlCommon()
|
// #endif
|
|
// #ifdef APP-PLUS
|
getTalkURLs(param).then(res => {
|
this.getPresetsSearchesUrl(param)
|
let resultUrl = JSON.parse(res.data).data.url
|
if (resultUrl.indexOf('36.134.79.80:6014') != -1) {
|
resultUrl = resultUrl.replace('36.134.79.80:6014', 'hubeihaikang.cn:6014')
|
}
|
if (resultUrl.indexOf('223.76.234.232:6014') != -1) {
|
resultUrl = resultUrl.replace('223.76.234.232:6014', 'v.hubeishuiyi.cn:6014')
|
}
|
this.talkUrl = resultUrl
|
this.appHKPreviewVideo()
|
})
|
// #endif
|
}
|
},
|
//微信小程序 视频播放
|
queryHkPreviewUrlCommon() {
|
queryHkPreviewUrlCommon({
|
cameraIndexCode: this.selectStationValue,
|
protocol: 'httpsflv',
|
type: this.type,
|
expand: 'transcode=1&videotype=h264',
|
streamType: this.streamType
|
}).then(result => {
|
if (result.data.indexOf('36.134.79.80:6014') != -1) {
|
result.data = result.data.replace('36.134.79.80:6014', 'hubeihaikang.cn:6014')
|
}
|
if (result.data.indexOf('223.76.234.232:6014') != -1) {
|
result.data = result.data.replace('223.76.234.232:6014', 'v.hubeishuiyi.cn:6014')
|
}
|
this.livePlayerUrl = result.data
|
console.log("播放地址", this.livePlayerUrl)
|
this.wxPlay()
|
})
|
},
|
//app视频播放
|
appHKPreviewVideo() {
|
queryHkPreviewUrlCommon({
|
cameraIndexCode: this.selectStationValue,
|
protocol: 'wss',
|
type: this.type
|
}).then(result => {
|
const station = JSON.stringify(this.array)
|
if (result.data.indexOf('36.134.79.80:6014') != -1) {
|
result.data = result.data.replace('36.134.79.80:6014', 'hubeihaikang.cn:6014')
|
}
|
if (result.data.indexOf('223.76.234.232:6014') != -1) {
|
result.data = result.data.replace('223.76.234.232:6014', 'v.hubeishuiyi.cn:6014')
|
}
|
result.data = result.data
|
this.webUrl = 'https://sk.hubeishuiyi.cn/business/hk/h5/demo.html?station=' +
|
encodeURIComponent(station) + '&url=' + result.data + "&talkUrl=" + this
|
.talkUrl
|
// this.livePlayerUrl = result.data
|
})
|
}
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.content {
|
margin: 40rpx;
|
border: 2rpx solid;
|
|
.active {
|
color: #1180ff;
|
}
|
|
}
|
|
.disabled {
|
color: orangered;
|
}
|
|
.preContent {
|
margin: 0;
|
flex: 1;
|
// width: 540rpx;
|
}
|
|
.right-icon {
|
width: 180rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
}
|
|
.preset {
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
padding: 40rpx;
|
}
|
|
.text-label {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
.speed {
|
padding: 20rpx 40rpx;
|
}
|
|
.control-box {
|
position: relative;
|
width: 328rpx;
|
height: 100%;
|
|
.btns-box {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 328rpx;
|
height: 328rpx;
|
|
&>view {
|
position: absolute;
|
width: 82rpx;
|
height: 80rpx;
|
border-radius: 50%;
|
cursor: pointer;
|
|
&:hover {
|
background: rgba(255, 255, 255, 0.5);
|
}
|
}
|
|
.top {
|
top: 24rpx;
|
left: 50%;
|
transform: translate(-50%, 0);
|
}
|
|
.left {
|
top: 50%;
|
left: 24rpx;
|
transform: translate(0, -50%);
|
}
|
|
.right {
|
top: 50%;
|
right: 24rpx;
|
transform: translate(0, -50%);
|
}
|
|
.bottom {
|
left: 50%;
|
bottom: 24rpx;
|
transform: translate(-50%, 0);
|
}
|
}
|
}
|
|
.option_btn_right {
|
position: absolute;
|
/* width: 100%; */
|
font-size: 0;
|
top: 1250rpx;
|
right: 30px;
|
font-size: 0;
|
|
image {
|
height: 48rpx;
|
width: 148rpx;
|
margin: 10rpx;
|
flex: 1;
|
cursor: pointer;
|
}
|
}
|
|
.speak_btn {
|
width: 326rpx;
|
top: 1240rpx;
|
|
button {
|
font-size: 28rpx;
|
padding: 0 20rpx;
|
}
|
}
|
|
.flex {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
.video {
|
width: 100%;
|
height: 100%;
|
|
.video-controls {
|
width: 100%;
|
height: 50vh;
|
}
|
}
|
</style>
|
