<template>
|
<div class="centermap">
|
<div class="mapwrap">
|
<ItemWrap title="视频监控">
|
<video id="video_left" autoplay muted controls playsinline width="100%" height="100%"></video>
|
</ItemWrap>
|
</div>
|
<div class="mapwrap">
|
<ItemWrap title="视频监控">
|
<video id="video_right" autoplay muted controls playsinline width="100%" height="100%"></video>
|
</ItemWrap>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, onMounted, onUnmounted, onActivated, onDeactivated } from 'vue'
|
|
// WebRTC 播放器实例
|
const webRtcServer_left = ref(null)
|
const webRtcServer_right = ref(null)
|
|
// RTSP 地址，注意 URL 编码特殊字符
|
const rtspLeft = 'rtsp://admin:Mx202513@172.21.7.244:554/Streaming/Channels/102?rtsp_transport=tcp'
|
const rtspRight = 'rtsp://admin:Mx202513@172.21.7.244:554/Streaming/Channels/202?rtsp_transport=tcp'
|
|
// WebRtcStreamer 服务地址
|
const serverUrl = 'http://172.21.1.139:8000' // ← 改为你运行 webrtcstreamer 的电脑 IP
|
|
// 初始化视频播放
|
const initVideo = () => {
|
try {
|
// 左摄像头
|
webRtcServer_left.value = new WebRtcStreamer('video_left', serverUrl)
|
webRtcServer_left.value.connect(rtspLeft)
|
|
// 右摄像头
|
webRtcServer_right.value = new WebRtcStreamer('video_right', serverUrl)
|
webRtcServer_right.value.connect(rtspRight)
|
|
console.log('视频初始化完成')
|
} catch (err) {
|
console.error('视频初始化失败: ' + err.message)
|
}
|
}
|
|
// 销毁视频播放
|
const destroyVideo = () => {
|
if (webRtcServer_left.value) {
|
webRtcServer_left.value.disconnect()
|
webRtcServer_left.value = null
|
}
|
if (webRtcServer_right.value) {
|
webRtcServer_right.value.disconnect()
|
webRtcServer_right.value = null
|
}
|
}
|
|
// 页面激活时播放
|
onActivated(() => {
|
['video_left', 'video_right'].forEach(id => {
|
const video = document.getElementById(id)
|
if (video && video.paused) video.play()
|
})
|
})
|
|
// 页面停用时暂停
|
onDeactivated(() => {
|
['video_left', 'video_right'].forEach(id => {
|
const video = document.getElementById(id)
|
if (video && !video.paused) video.pause()
|
})
|
})
|
|
// 页面挂载初始化
|
onMounted(() => {
|
initVideo()
|
})
|
|
// 页面卸载销毁
|
onUnmounted(() => {
|
destroyVideo()
|
})
|
</script>
|
|
<style scoped>
|
.centermap {
|
width: 100%;
|
height: 100%;
|
}
|
.mapwrap {
|
height: 470px;
|
width: 100%;
|
box-sizing: border-box;
|
position: relative;
|
margin-top: 10px;
|
}
|
</style>
|
