104 lines
2.7 KiB
Vue
104 lines
2.7 KiB
Vue
<template>
|
|
<view class="spjk-box">
|
|
<view class="select-bar">
|
|
<uni-data-select
|
|
v-model="value"
|
|
:localdata="list"
|
|
@change="change"
|
|
:clear="false"
|
|
>
|
|
</uni-data-select>
|
|
</view>
|
|
<view
|
|
class="video-box" v-if="this.list.length">
|
|
<!-- <web-view :src="webURL" style="height: 500px;"></web-view> -->
|
|
<video id="video-element" controls=""></video>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
// import flvjs from "@/node_modules/flv.js/dist/flv.min.js"
|
|
// import 'es6-promise/auto';
|
|
// import flvjs from "flv.js"
|
|
export default{
|
|
props:{
|
|
stcd:String,
|
|
source:String,
|
|
default:''
|
|
},
|
|
data() {
|
|
return {
|
|
value: "",
|
|
list:[],
|
|
webURL:'',
|
|
urls:"",
|
|
flv:null
|
|
}
|
|
},
|
|
methods: {
|
|
async getList(){
|
|
try{
|
|
const {data} = await uni.$http.get(
|
|
`/gunshiApp/xfflood/stbprp/cctv/listByStcd/${this.stcd}`)
|
|
if(data.code == 200){
|
|
let newData;
|
|
console.log("23",data.data);
|
|
if(data.data.length > 0){
|
|
newData = data.data.map(item => ({...item,value:item.camId,text:item.name}))
|
|
this.list = [...newData];
|
|
this.value = newData[0].value
|
|
this.getVideoSrc(newData[0].camId)
|
|
}
|
|
}
|
|
}catch(e){
|
|
uni.$showMsg()
|
|
}
|
|
},
|
|
async getVideoSrc(id){
|
|
console.log(id);
|
|
try{
|
|
const {data} = await uni.$http.get(
|
|
`/gunshiApp/xfflood/xfCctvB/preview/${id}`)
|
|
if(data.code == 200){
|
|
console.log(data.data);
|
|
this.urls = data.data;
|
|
this.webURL="/static/h5Player/webplayer.html?cameraIndexCode="+id+"&cameraUrl="+data.data
|
|
this.flv.updateConfig({ url: data.data })
|
|
this.flv.load()
|
|
}
|
|
}catch(e){
|
|
uni.$showMsg()
|
|
}
|
|
},
|
|
change(e) {
|
|
console.log("e:", e);
|
|
this.getVideoSrc(e)
|
|
},
|
|
creatFlvElement(){
|
|
const videoElement = document.getElementById('video-element'); // 获取视频元素
|
|
const flvPlayer = flvjs.createPlayer({
|
|
type: 'flv',
|
|
url: '' // WebSocket 流地址
|
|
});
|
|
|
|
flvPlayer.attachMediaElement(videoElement); // 将播放器与视频元素绑定
|
|
flvPlayer.load(); // 加载视频流
|
|
flvPlayer.play(); // 播放视频
|
|
this.flv = flvPlayer;
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getList()
|
|
// this.creatFlvElement()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.spjk-box{
|
|
.select-bar{
|
|
margin: 10px 15px;
|
|
}
|
|
}
|
|
</style>
|