项目文件路径修改
This commit is contained in:
parent
f6a6f7d3f4
commit
7542bd196b
|
|
@ -6,7 +6,10 @@ ENV = 'production'
|
|||
VUE_APP_ENV = 'production'
|
||||
VUE_APP_ONLYOFFICE_URL = 'http://36.33.26.201:19840'
|
||||
# 图片预览路径
|
||||
VUE_APP_FILE_URL = 'http://192.168.0.108:8099/smartCar/profile'
|
||||
VUE_APP_FILE_URL = 'http://36.33.26.201:18088/profile'
|
||||
|
||||
#视频流路径
|
||||
VUE_APP_VIDEO_URL = 'http://36.33.26.201:18088/processed'
|
||||
|
||||
# 车辆道路监测系统/生产环境
|
||||
VUE_APP_BASE_API = '/smart-car-api'
|
||||
|
|
|
|||
|
|
@ -89,13 +89,13 @@ export const constantRoutes = [
|
|||
]
|
||||
},
|
||||
{
|
||||
path: '/device/image-recognition/export-progress',
|
||||
component: () => import('@/views/device/image-recognition/ExportProgress'),
|
||||
path: '/device/imageRecognition/export-progress',
|
||||
component: () => import('@/views/device/imageRecognition/ExportProgress'),
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/device/data-recognition/export-progress',
|
||||
component: () => import('@/views/device/data-recognition/ExportProgress'),
|
||||
path: '/device/dataRecognition/export-progress',
|
||||
component: () => import('@/views/device/dataRecognition/ExportProgress'),
|
||||
hidden: true
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@
|
|||
<el-card class="video-card" shadow="never" :body-style="{ padding: '0', height: '100%' }">
|
||||
<div class="video-wrapper">
|
||||
<div class="video-container" ref="videoContainer">
|
||||
<video ref="videoPlayer" class="video-player" :src="videoUrl" autoplay muted
|
||||
<video ref="videoPlayer" id="myVideo" class="video-player" :src="videoUrl" autoplay muted
|
||||
@loadedmetadata="handleVideoLoaded" @error="handleVideoError" controlsList="nofullscreen">
|
||||
您的浏览器不支持视频播放
|
||||
</video>
|
||||
|
|
@ -201,6 +201,50 @@ export default {
|
|||
document.removeEventListener('MSFullscreenChange', this.onFullscreenChange)
|
||||
},
|
||||
methods: {
|
||||
async startWhelpPlay() {
|
||||
// 1. 创建 PeerConnection
|
||||
const pc = new RTCPeerConnection({
|
||||
iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] // 公网 STUN 服务器
|
||||
});
|
||||
|
||||
// 2. 拿到流就放到 video 标签里
|
||||
pc.ontrack = (event) => {
|
||||
document.getElementById('myVideo').srcObject = event.streams[0];
|
||||
};
|
||||
|
||||
// 3. 这里的 addTransceiver 是告诉浏览器“我要接收视频和音频”
|
||||
pc.addTransceiver('video', { direction: 'recvonly' });
|
||||
pc.addTransceiver('audio', { direction: 'recvonly' });
|
||||
|
||||
// 4. 创建 Offer
|
||||
const offer = await pc.createOffer();
|
||||
await pc.setLocalDescription(offer);
|
||||
|
||||
// 5. 【关键】向您的那个地址发送请求
|
||||
// 注意：这里是 POST 请求，内容是 SDP
|
||||
|
||||
const response = await fetch(`${process.env.VUE_APP_VIDEO_URL}/whep`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/sdp'
|
||||
},
|
||||
body: offer.sdp
|
||||
});
|
||||
|
||||
if (response.status !== 201) {
|
||||
console.error("连接失败");
|
||||
return;
|
||||
}
|
||||
|
||||
// 6. 拿到 Answer 并设置
|
||||
const answerSdp = await response.text();
|
||||
await pc.setRemoteDescription(new RTCSessionDescription({
|
||||
type: 'answer',
|
||||
sdp: answerSdp
|
||||
}));
|
||||
|
||||
console.log("WHEP 握手成功，等待视频流...");
|
||||
},
|
||||
/** 初始化 ResizeObserver */
|
||||
initResizeObserver() {
|
||||
const container = this.$refs.videoContainer
|
||||
|
|
@ -604,16 +648,19 @@ export default {
|
|||
|
||||
async loadVideoStream() {
|
||||
try {
|
||||
const res = await getVideoStreamAPI()
|
||||
const res = await getVideoStreamAPI()
|
||||
if (res.code === 200 && res.data && res.data.streamUrl) {
|
||||
this.videoErrorShown = false
|
||||
this.videoUrl = res.data.streamUrl
|
||||
}
|
||||
/*this.startWhelpPlay();*/
|
||||
} catch (error) {
|
||||
console.error('获取视频流失败:', error)
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
/** 位置锁定 */
|
||||
async handleLockPosition() {
|
||||
this.$confirm('确定要锁定设备位置吗？', '位置锁定', {
|
||||
|
|
@ -1048,33 +1095,41 @@ video::-internal-media-controls-download-button {
|
|||
.status-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 6px 14px; /* 稍微加宽一点 */
|
||||
padding: 6px 14px;
|
||||
/* 稍微加宽一点 */
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
|
||||
/* 核心修改：圆点变大，不再依赖文字颜色 */
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 10px; /* 增大尺寸 */
|
||||
height: 10px; /* 增大尺寸 */
|
||||
width: 10px;
|
||||
/* 增大尺寸 */
|
||||
height: 10px;
|
||||
/* 增大尺寸 */
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
flex-shrink: 0; /* 防止圆点被挤压 */
|
||||
flex-shrink: 0;
|
||||
/* 防止圆点被挤压 */
|
||||
}
|
||||
|
||||
/* 在线：高亮绿 + 强力扩散动画 */
|
||||
&.online {
|
||||
background-color: #e1f3d8; /* 浅绿背景 */
|
||||
color: #67c23a; /* 绿色文字 */
|
||||
background-color: #e1f3d8;
|
||||
/* 浅绿背景 */
|
||||
color: #67c23a;
|
||||
/* 绿色文字 */
|
||||
border: 1px solid #c2e7b0;
|
||||
|
||||
&::before {
|
||||
background-color: #529b2e; /* 圆点颜色比文字更深，更实 */
|
||||
box-shadow: 0 0 0 0 rgba(82, 155, 46, 0.7); /* 初始阴影 */
|
||||
background-color: #529b2e;
|
||||
/* 圆点颜色比文字更深，更实 */
|
||||
box-shadow: 0 0 0 0 rgba(82, 155, 46, 0.7);
|
||||
/* 初始阴影 */
|
||||
animation: deep-pulse 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
|
|
@ -1095,7 +1150,10 @@ video::-internal-media-controls-download-button {
|
|||
background-color: #fdf6ec;
|
||||
color: #e6a23c;
|
||||
border: 1px solid #f5dab1;
|
||||
&::before { background-color: #e6a23c; }
|
||||
|
||||
&::before {
|
||||
background-color: #e6a23c;
|
||||
}
|
||||
}
|
||||
|
||||
/* 升级中 */
|
||||
|
|
@ -1103,6 +1161,7 @@ video::-internal-media-controls-download-button {
|
|||
background-color: #ecf5ff;
|
||||
color: #409eff;
|
||||
border: 1px solid #d9ecff;
|
||||
|
||||
&::before {
|
||||
background-color: #409eff;
|
||||
animation: blink 1s infinite;
|
||||
|
|
@ -1115,16 +1174,26 @@ video::-internal-media-controls-download-button {
|
|||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(82, 155, 46, 0.7);
|
||||
}
|
||||
|
||||
70% {
|
||||
box-shadow: 0 0 0 8px rgba(82, 155, 46, 0); /* 扩散范围更大 */
|
||||
box-shadow: 0 0 0 8px rgba(82, 155, 46, 0);
|
||||
/* 扩散范围更大 */
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(82, 155, 46, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -11,7 +11,7 @@ const CopyWebpackPlugin = require('copy-webpack-plugin')
|
|||
const name = process.env.VUE_APP_TITLE || '车辆道路监测系统' // 网页标题
|
||||
|
||||
// const baseUrl = 'http://localhost:8080' // 后端接口
|
||||
const baseUrl = 'http://192.168.0.39:8080'
|
||||
const baseUrl = 'http://192.168.0.108:8099'
|
||||
// const baseUrl = 'http://192.168.31.169:8080'
|
||||
|
||||
const port = process.env.port || process.env.npm_config_port || 80 // 端口
|
||||
|
|
|
|||
Loading…
Reference in New Issue