前端页面的修改

yanjinhui

2025-08-28 554ea194fa4332e97c3def7e010acecde26b48d5

 ÏîÄ¿´úÂë/Ç°¶Ë/µ¥»ú°æ/src/views/tts/PickAndDrop/Manualcontrol.vue

@@ -565,6 +565,7 @@
  AutoPickAndDrop,
  Pouse,
  GetParameter,
  GetStandid,
} from "@/api/newapi/Parameters.js";
// import EZUIKit from "ezuikit-js";

@@ -778,26 +779,63 @@
const webRtcServer_left = ref(null)
const webRtcServer_right = ref(null)

// æ‘„像头 RTSP åœ°å€ï¼Œæ³¨æ„ %23 æ›¿ä»£ #，这是 URL ç¼–码 è§†é¢‘编码格式 ä»Ž H.265 ä¿®æ”¹ä¸º H.264，265不支持
const rtspLeft = 'rtsp://admin:MXmx2380%23@192.168.1.168:554/Streaming/Channels/101'
const rtspRight = 'rtsp://admin:MXmx2380%23@192.168.1.168:554/Streaming/Channels/201'
// æ‘„像头 RTSP åœ°å€ï¼Œæ³¨æ„ %23 æ›¿ä»£ #，这是 URL ç¼–码 ;视频编码格式 ä»Ž H.265 ä¿®æ”¹ä¸º H.264，265不支持
const videoStreamList = [
  // index = StationID - 1，对应 StationID = 1 æ—¶å–第 0 é¡¹
  {
    left: "rtsp://admin:MXmx2380%23@192.168.1.168:554/Streaming/Channels/101",
    right: "rtsp://admin:MXmx2380%23@192.168.1.168:554/Streaming/Channels/201"
  },
  {
    left: "rtsp://admin:MXmx2380%23@192.168.1.169:554/Streaming/Channels/101",
    right: "rtsp://admin:MXmx2380%23@192.168.1.169:554/Streaming/Channels/201"
  },
  {
    left: "rtsp://admin:MXmx2380%23@192.168.1.170:554/Streaming/Channels/101",
    right: "rtsp://admin:MXmx2380%23@192.168.1.170:554/Streaming/Channels/201"
  }
  // å¯ä»¥ç»§ç»­æ·»åŠ æ›´å¤šç«™ç‚¹æµåœ°å€
];
const getStationId = async () => {
  try {
    const res = await GetStandid()
     console.log("手动视频监控站点",res)
    if (res.status) {
      const stationId = parseInt(res.data);
      initVideoByStationId(stationId);
    } else {
      ElMessage.error("获取站点编号失败：" + res.message);
    }
  } catch (err) {
    ElMessage.error("请求失败：" + err.message);
  }
};

// WebRtcStreamer æœåŠ¡åœ°å€
const serverUrl = 'http://192.168.1.103:8000' // â† æ”¹ä¸ºä½ è¿è¡Œçš„那台电脑的 IP

const initVideo = () => {
const initVideoByStationId = (stationId) => {
  const index = stationId - 1;

  if (index < 0 || index >= videoStreamList.length) {
    ElMessage.error("无效的站点编号：" + stationId);
    return;
  }

  const rtspUrls = videoStreamList[index];

  try {
    webRtcServer_left.value = new WebRtcStreamer('video_left', serverUrl)
    webRtcServer_left.value.connect(rtspLeft)
    webRtcServer_left.value = new WebRtcStreamer("video_left", serverUrl);
    webRtcServer_left.value.connect(rtspUrls.left);

    webRtcServer_right.value = new WebRtcStreamer('video_right', serverUrl)
    webRtcServer_right.value.connect(rtspRight)
    webRtcServer_right.value = new WebRtcStreamer("video_right", serverUrl);
    webRtcServer_right.value.connect(rtspUrls.right);

    console.log('视频初始化完成')
    console.log("视频初始化完成：", rtspUrls);
  } catch (err) {
    ElMessage.error('视频初始化失败: ' + err.message)
    ElMessage.error("视频初始化失败: " + err.message);
  }
}
};

//销毁视频函数
const destroyVideo = () => {
@@ -835,7 +873,8 @@


onMounted(() => {
  initVideo(),
   getStationId(); // é¡µé¢åŠ è½½æ—¶è‡ªåŠ¨èŽ·å–并播放视频
  // initVideo(),
  isStart.value = true; // è®¾ç½®ä¸ºå¼€å§‹çŠ¶æ€
  createSocket();
  getParameter();