fix: BUG修改
This commit is contained in:
kun
parent
bb1955e42b
commit
828ddce748
@ -4,70 +4,80 @@
|
||||
<i>实时数据</i>
|
||||
</div>
|
||||
<div class="tab-select">
|
||||
<span :class="activeTab == 0?'active-span':''" @click="changeActive(0)">实时监控</span>
|
||||
<span :class="activeTab == 1?'active-span':''" @click="changeActive(1)">3D模型</span>
|
||||
<span :class="activeTab == 0 ? 'active-span' : ''" @click="changeActive(0)">实时监控</span>
|
||||
<span :class="activeTab == 1 ? 'active-span' : ''" @click="changeActive(1)">3D模型</span>
|
||||
</div>
|
||||
<div class="href-content" v-if="activeTab == 0">
|
||||
<el-carousel indicator-position="none" height="450px">
|
||||
<el-carousel-item v-for="(item,index) in videoList" :key="index">
|
||||
<video
|
||||
style="height: 100%; width: 100%"
|
||||
:id="'videoItem' + index"
|
||||
muted
|
||||
autoplay
|
||||
/>
|
||||
<el-carousel-item v-for="(item, index) in videoList" :key="item.id">
|
||||
<div style="width: 100%;height: 100%;">
|
||||
<ckplayerComp
|
||||
:name="index"
|
||||
:poster="''"
|
||||
:deviceIp="`http://${item.account}:${item.password}`"
|
||||
:videoUrls="item.serialNumber"
|
||||
:autoPlay="true"
|
||||
></ckplayerComp>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</el-carousel>
|
||||
</div>
|
||||
<div class="href-content" v-if="activeTab == 1">
|
||||
<iframe :src="iframeUrl" frameborder="0" style="width: 100%;height: 100%;"></iframe>
|
||||
<iframe :src="iframeUrl" frameborder="0" style="width: 100%; height: 100%"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { GlobalStore } from "@/stores";
|
||||
import { ref, watch, onMounted, onBeforeUnmount } from "vue";
|
||||
import Srs from "@/assets/js/srs.sdk";
|
||||
import { ref, watch, onMounted, getCurrentInstance } from "vue";
|
||||
import { selectProjectVideoListApi } from "@/api/modules/video";
|
||||
const emits = defineEmits(["openDialog"])
|
||||
import ckplayerComp from "../videoManagement/ckplayerComp.vue";
|
||||
const emits = defineEmits(["openDialog"]);
|
||||
const store = GlobalStore();
|
||||
const rtcPlayer = ref();
|
||||
const videoList = ref([] as any);
|
||||
const activeTab = ref(0)
|
||||
const iframeUrl = ref('http://jxj.zhgdyun.com:8082/bim/rt-video/srs/srs.html')
|
||||
const activeTab = ref(0);
|
||||
const iframeUrl = ref("http://jxj.zhgdyun.com:8082/bim/rt-video/srs/srs.html");
|
||||
const getVideoList = async () => {
|
||||
let res: any = await selectProjectVideoListApi({
|
||||
projectSn: store.sn,
|
||||
all: 1
|
||||
// all=1查全部
|
||||
});
|
||||
videoList.value = res.result.videoList
|
||||
videoList.value = res.result.videoList;
|
||||
// 为了解决视频播放器渲染，第二个总是会默认显示一半，我动态设置样式让视图刷新，只要设置百分百就有问题，所以只能使用此方法
|
||||
setTimeout(() => {
|
||||
// 获取所有的 video 元素
|
||||
var videos = document.getElementsByTagName('video');
|
||||
|
||||
// 遍历所有的 video 元素
|
||||
for (var i = 0; i < videos.length; i++) {
|
||||
// 修改视频元素的样式
|
||||
videos[i].style.width = '99.9%';
|
||||
videos[i].style.height = '99.9%';
|
||||
}
|
||||
}, 1000);
|
||||
};
|
||||
const changeActive = (activeIndex:any) => {
|
||||
const changeActive = (activeIndex: any) => {
|
||||
activeTab.value = activeIndex;
|
||||
iframeUrl.value = activeIndex == 0?'http://jxj.zhgdyun.com:8082/bim/rt-video/srs/srs.html':'http://jxjzw.zhgdyun.com:8082/rt-3dmx'
|
||||
}
|
||||
watch(() => activeTab.value, (newVal) => {
|
||||
if(newVal == 0){
|
||||
for (let i = 0; i < videoList.value.length; i++) {
|
||||
let player:any = document.getElementById("videoItem" + i);
|
||||
//方法一：使用srs.sdk.js
|
||||
rtcPlayer.value = new Srs.SrsRtcWhipWhepAsync();
|
||||
rtcPlayer.value.play(videoList.value[i].videoUrl);
|
||||
// video标签
|
||||
player.srcObject = rtcPlayer.value.stream;
|
||||
// 方法二：使用jswebrtc.min.js
|
||||
// new JSWebrtc.Player(this.url, { video: player, autoplay: true, });
|
||||
}
|
||||
}
|
||||
})
|
||||
iframeUrl.value =
|
||||
activeIndex == 0 ? "http://jxj.zhgdyun.com:8082/bim/rt-video/srs/srs.html" : "http://jxjzw.zhgdyun.com:8082/rt-3dmx";
|
||||
};
|
||||
// watch(
|
||||
// () => activeTab.value,
|
||||
// newVal => {
|
||||
// if (newVal == 0) {
|
||||
// getVideoList();
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// immediate: true
|
||||
// }
|
||||
// );
|
||||
onMounted(() => {
|
||||
getVideoList()
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
rtcPlayer.value?.close();
|
||||
})
|
||||
getVideoList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -91,25 +101,25 @@ onBeforeUnmount(() => {
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
.tab-select{
|
||||
.tab-select {
|
||||
width: 35%;
|
||||
margin: 0 auto;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
span{
|
||||
span {
|
||||
cursor: pointer;
|
||||
color: #7C859C;
|
||||
color: #7c859c;
|
||||
font-size: 15px;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.active-span{
|
||||
.active-span {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.href-content{
|
||||
.href-content {
|
||||
width: 95%;
|
||||
height: 490px;
|
||||
margin: 0 auto;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!--ckplayer 视频播放-->
|
||||
<template>
|
||||
<div style="height: 100%">
|
||||
<video :id="'videoItem' + name" controls autoplay style="width: 100%; height: 100%; object-fit: fill" />
|
||||
<div style="width: 100%;height: 100%">
|
||||
<video :id="'videoItem' + name" muted controls autoplay style="width: 100%;height: 100%;object-fit: fill;" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user