feat: 实时视频播放实现
parent
a58eba6644
commit
8018774a29
@ -1,47 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="video-player">
|
<div class="historyVideoModal-wrap">
|
||||||
<video ref="refPlayer" autoplay controls muted width="100%" height="100%" style="object-fit: fill;"></video>
|
|
||||||
<!-- <iframe src="http://192.168.10.113:8889/cam/" frameborder="0"></iframe> -->
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- http://192.168.10.113:8889/cam/ -->
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { nextTick } from 'vue';
|
|
||||||
|
|
||||||
const webRtcServer = ref(null);
|
|
||||||
const refPlayer = ref(null);
|
|
||||||
const videoSrc = 'rtsp://192.168.10.63:8554/mystream';
|
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
function initData() {
|
|
||||||
webRtcServer.value.connect(videoSrc || '', '', "rtptransport=tcp&timeout=60&width=320&height=0");
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
// 分别对应开发环境、生产环境视频流转码服务的地址
|
|
||||||
// let srvUrl = 'http://127.0.0.1:8000';
|
|
||||||
nextTick(() => {
|
|
||||||
console.log(location.protocol, "refPlayer");
|
|
||||||
// TODO 根据环境切换地址
|
|
||||||
webRtcServer.value = new WebRtcStreamer(refPlayer.value, `http://192.168.10.26:9988`);
|
|
||||||
nextTick(() => {
|
|
||||||
videoSrc && initData();
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
})
|
|
||||||
onUnmounted(() => {
|
|
||||||
webRtcServer.disconnect();
|
|
||||||
webRtcServer.value = null;
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.video-player {
|
|
||||||
position: fixed;
|
|
||||||
width: 50%;
|
|
||||||
z-index: 999999999;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
@ -0,0 +1,127 @@
|
|||||||
|
<template>
|
||||||
|
<el-dialog v-model="show" @close="handleClose">
|
||||||
|
<!-- 自定义标题栏 -->
|
||||||
|
<template #header="{ close, titleId, titleClass }">
|
||||||
|
<div class="flex items-center justify-between video-dialog-header">
|
||||||
|
<div class="flex items-center justify-center header-left">
|
||||||
|
<div class="header-icon mr-[12px]"></div>
|
||||||
|
<span>{{ info.name }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<!-- 视频播放区域 -->
|
||||||
|
<div class="video-container">
|
||||||
|
<RealPlayer />
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import RealPlayer from '@/components/videoPlayer/RealPlayer.vue'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
/** 弹窗显隐 */
|
||||||
|
value: boolean;
|
||||||
|
info: Record<string, any>;
|
||||||
|
}
|
||||||
|
interface Emits {
|
||||||
|
(e: "update:value", val: boolean): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
// const props = withDefaults(defineProps<{
|
||||||
|
// isOpen: boolean;
|
||||||
|
// info: Record<string, any>;
|
||||||
|
// }>(), {
|
||||||
|
// isOpen: false,
|
||||||
|
// info: {}
|
||||||
|
// });
|
||||||
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
value: false,
|
||||||
|
info: {}
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits<Emits>();
|
||||||
|
|
||||||
|
|
||||||
|
const isPlaying = ref(false);
|
||||||
|
|
||||||
|
const togglePlay = () => {
|
||||||
|
isPlaying.value = !isPlaying.value;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 处理对话框关闭事件
|
||||||
|
const handleClose = () => {
|
||||||
|
emits('close');
|
||||||
|
};
|
||||||
|
|
||||||
|
const show = computed({
|
||||||
|
get() {
|
||||||
|
return props.value;
|
||||||
|
},
|
||||||
|
set(val: boolean) {
|
||||||
|
emit("update:value", val);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.el-dialog {
|
||||||
|
border: none;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: none;
|
||||||
|
background-color: transparent;
|
||||||
|
background-image: url("@/assets/common/bg_real_dialog.png");
|
||||||
|
background-size: contain;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
width: 805px;
|
||||||
|
height: 612px;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
.el-dialog__header.show-close {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-dialog__close {
|
||||||
|
width: 56px;
|
||||||
|
height: 56px;
|
||||||
|
color: white;
|
||||||
|
font-size: 18px;
|
||||||
|
padding-top: 4px;
|
||||||
|
padding-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-dialog-header {
|
||||||
|
color: white;
|
||||||
|
padding: 0;
|
||||||
|
padding-top: 4px;
|
||||||
|
|
||||||
|
.header-left {
|
||||||
|
padding: 0 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 18px;
|
||||||
|
|
||||||
|
.header-icon {
|
||||||
|
margin-top: 8px;
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
background-image: url("@/assets/common/dialog_title_icon.png");
|
||||||
|
background-size: contain;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-container {
|
||||||
|
padding: 24px;
|
||||||
|
|
||||||
|
// background: red;
|
||||||
|
.real-video-player {
|
||||||
|
border-radius: 0px 0px 4px 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue