通过Canvas在网页中将后端发来的一帧帧图片渲染成“视频”的实现过程

1.背景

最近有这样的场景，网页端需要显示现场无人系统（机器人）的摄像头数据（图片）。值得注意的是，一个无人系统（机器人）它身上可能挂载若干个摄像头，这若干个摄像头都需要在前端的若干个小区域内显示；另外不同的用户访问前端网页，每个用户都访问他自己想关注的无人系统（机器人）摄像头数据。而前端直接和现场的无人系统对接是不合适的：因为对于同一个无人系统，可能不同的用户同一时间或相近时间都访问它，导致该无人系统要处理反馈多份资源请求，并且很容易导致超过机器人的处理负荷；另外对于前端来讲，他并不知知道应该和现场的哪一个无人系统进行对接（因为前端并没有现场的无人系统相关身份数据，无法做识别）。

为此，设计了如下方案，现场的无人系统统一和数据中转服务器对接，每个机器人都只给一份实时摄像头数据给数据中转服务器。数据中转服务器建立websocket服务端程序，并处理网页端的请求（请求获取特定机器人的所有摄像头信息），数据中转服务器根据网页端的请求，对请求信息进行解析，并创建特定的websocket服务实例。具体通信示意图如下：

 这里所提到的前端网页，实际是业务中的可视化大屏，他对之前项目的已有功能有些注意点：

• 总控大屏现有对接无人系统的视频使用的是后端发给前端的rtsp流地址，默认使用的是该方式。但后续无人系统（机器人）传输的数据也有可能是一帧帧二进制图片数据
• 原有前端使用的组件适用接收rtsp流方式，不适用新的接收图片帧的方式，前端需要做两套模式区分（区别开发：一套<video>,一套<canvas>）
• 在无人系统（机器人）传输的数据是一帧帧二进制图片数据的情况下，有可能该无人系统有多个摄像头，它会传输多组独立的图片帧数据（前端最多支持4个摄像头数据）

2.约定接口

针对以上内容进行分析，并为了兼容已有实现的功能，约定如下大屏与数据中转器的接口方式：

网页端通过GET请求，调用数据中转服务器接口，请求接口地址为：

http://ip:port/api/usdisplay?usid=2 。其中请求参数usid代表前端给数据中转服务器(后端)传递的无人系统id.

数据中转服务器需要根据无人系统id，判断该无人系统摄像头数据传递是使用的哪种方式？并根据特定的方式返回前端结果，前端根据不同的模式，执行不同的渲染方式。

数据中转服务器（后端）返回前端的结果格式为：

 

• 以rtsp模式，如果一个无人系统有3个摄像头举例

 

{
    "code": 200,
    "success": true,
    "data": {
        "mode": "rtspurl",
        "url": [
            "rtsp: //127.0.0.1:8081",
            "rtsp: //127.0.0.1:8082",
            "rtsp: //127.0.0.1:8083"
        ]
    }
}

• 以websocket模式，如果一个无人系统有3个摄像头举例

{
    "code": 200,
    "success": true,
    "data": {
        "mode": "websocketurl",
        "url": [
            "ws://127.0.0.1:8080/api/websocket?usid=2&cam=0",
            "ws://127.0.0.1:8080/api/websocket?usid=2&cam=1",
            "ws://127.0.0.1:8080/api/websocket?usid=2&cam=2",
        ]
    }
}

 3.前端开发过程

3.1 div结构设计

    <div class="chartarea">
            <div class="charttitle"><span>态势总览</span></div>
            <div class="chartdata" id="videoGrid">
              <!-- 四个视频区域 -->
              <div class="video-container" data-camera="1">
                <video class="video-stream" autoplay muted></video>
                <div class="camera-label"></div>
              </div>
              <div class="video-container" data-camera="2">
                <video class="video-stream" autoplay muted></video>
                <div class="camera-label"></div>
              </div>
              <div class="video-container" data-camera="3">
                <video class="video-stream" autoplay muted></video>
                <div class="camera-label"></div>
              </div>
              <div class="video-container" data-camera="4">
                <video class="video-stream" autoplay muted></video>
                <div class="camera-label"></div>
              </div>
            </div>
          </div>

主要是在一个区域内预先占用4个小区域，每个小区域用于显示同一个无人系统的一个摄像头信息，最多支持显示同一个无人系统的4个摄像头信息（实际显示其中的1-4个小区域是以实际同一个无人系统的摄像头个数而定的）。

以上的html结构最先是为了支持rtsp视频流而设计的，对于当前的图片帧显示使用的Canvas技术不适用，所以如果是在图片帧显示的模式下，后续需要通过js动态的修改html结果，切换为<canvas>相关标签结构。

以上现有的html结构对应的CSS样式如下：

.chartarea {
  width: 95%;
  height: 31%;
  margin-top: 3.5%;
}
.innerright .chartarea {
  margin-left: 3%;
  margin-right: 2%;
}
.charttitle {
  width: 100%;
  height: 15%;
  background-image: url("/img/visualImages/20_chart_title.png");
  background-size: 100% 100%;
}
.charttitle>span {
  height: 100%;
  margin-left: 5%;
  display: flex;
  align-items: center;
  font-size: 0.8vw;
  color: #fff;
  font-weight: 700;
}
.chartdata {
  width: 100%;
  height: 85%;
  /* background-image: url("/img/visualImages/21_chart_background.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position:top left; */

  /* 当背景图片无法完整铺满整个div,但自己又想即时图片变形不合比例拉伸，也要铺满，这是种好方式！ */
  /* 这种方法会将背景图片拉伸以完全覆盖div的宽度和高度，可能会导致图片变形，特别是如果图片的原始宽高比与div的宽高比不匹配时。 */
  background-image: url("/img/visualImages/21_chart_background.png");
  background-size: 100% 100%;
}
#videoGrid {
  flex: 1;
  display: grid;
  grid-template-columns: 0.48fr 0.48fr;
  grid-template-rows: 0.49fr 0.49fr;
  /* gap: 5px; */
  gap: 2%;
  padding: 1.5%;
}

.video-container {
  position: relative;
  background-color: #000;
  border-radius: 4px;
  overflow: hidden;
}
.video-stream
 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camera-label {
  position: absolute;
  bottom: 5px;
  left: 5px;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 12px;
}

在上面的4个小视频区域，当用户点击其中任意一个有视频的小区域时，会弹出一个视频放大显示的弹出框，其对应的html结构和css如下：

<!-- 视频放大弹出框构建 -->
          <div id="videoModal" class="modal">
            <div class="modal-content">
              <span class="close-btn">&times;</span>
              <video id="modalVideo" autoplay controls></video>
              <div class="modal-camera-label"></div>
            </div>
          </div>

 

/* 弹窗样式 */
.modal {
  display: none;
  position: fixed;
  z-index: 1100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
}
.modal-content {
  position: relative;
  width: 70vw;
  height: 75vh;
  background-color: #000;
  border-radius: 5px;
  overflow: hidden;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  z-index: 1001;
}
.close-btn:hover {
  color: #ccc;
}
.close-btn {
  font-size: 24px;
  font-weight: bold;
  color: #999;
  cursor: pointer;
}
#modalVideo{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.modal-camera-label {
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 14px;
}

3.2 js函数设计

3.2.1 设计统一的入口函数

　　设计统一的入口函数USDisplay()，当用户访问特定的tab页时触发该函数。USDisplay()通过Get请求、以无人系统id作为请求参数，访问数据中转服务器程序，数据中转服务器程序根据请求的无人系统id，分析判断该无人系统视频传输的模式，并执行模式信息反馈。

代码设计如下：

export function USDisplay() {
  //1 根据无人系统id,发送请求后端，并解析后端返回的是哪种模式
  //Get请求
  var result = null;
  $.ajax({
    type: 'GET',
    //url: ipport + '/api/usdisplay',  //！！！！后续由后端确定ip
    url: 'http://127.0.0.1:8080' + '/api/usdisplay',  //20250815临时测试用
    data: {
      //usid: clickedUnmanedDVId  //无人系统id
      usid: 3  //无人系统id //20250815临时测试用
    },
    dataType: 'json', // 期望的后端返回数据格式
    async: false,
    success: function (res) {
      result = res;
      console.log('成功拿到数据了----',result);
    },
    error: function (xhr, status, error) {
      console.log("error result",result);
      console.error('USDisplay API请求失败:', status, error);

      showConnectionStatus('API连接失败', 'error');
    }
  });

  var urlarray = [];//用于存储rtspurl/websocketurl地址数组
  //解析模式
  if (result.code === 200 && result.success === true && !!result.data && isNotEmptyObject(result.data)) {
    //模式一：直接rtsp流（也有弊端，前端直连机器人视频，如果网页访问的用户过多，会导致机器人负荷过大，后期也需要数据中台中转）
    if (result.data.mode === "rtspurl") {
      urlarray = result.data.url;
      if (urlarray.length >= 1) {
        //-1----清理之前的连接资源
        cleanupPreviousConnections();
        //-2----rtsp构建显示逻辑
        usrtspmode(urlarray);
      }
    }
    //模式二：数据中台作为websocket服务端，网页端作为websocket客户端
    else if (result.data.mode === "websocketurl") {
      urlarray = result.data.url;
      if (urlarray.length >= 1) {
        //-1----清理之前的连接资源
        cleanupPreviousConnections();
        //-2----websocket构建显示逻辑
        uswebsocketmode(urlarray);
      }
    }
    //说明后端没有返回任何模式，不做任何处理
    else{
      console.warn('机器人rtsp/图片帧：后端未返回有效的显示模式');
      showConnectionStatus('未知显示模式', 'warning');
    }
  }else{
    console.error('USDisplay API返回数据无效,result:',result);
    showConnectionStatus('数据获取失败', 'error');
  }
}

3.2.2 模式一：rtspurl模式的处理

function usrtspmode(url) {
  // 获取元素
  const videoContainers = document.querySelectorAll('.video-container');//4个视频div容器（各自平等独立）
  const modal = document.getElementById('videoModal');//视频弹出框
  const modalVideo = document.getElementById('modalVideo');//弹出框显示视频区域
  const closeBtn = document.querySelector('.close-btn');//弹出框关闭按钮区域
  const modalCameraLabel = document.querySelector('.modal-camera-label');//弹出框底部显示视频名称标识

  var cameraConfigs = [];//重新构建rtsp地址，友好前端显示
  url.forEach((item, index) => {
    cameraConfigs.push(
      {
        id: index,
        name: "camera" + (index + 1),
        rtsp: item
      }
    );
  });

  // 用于存储webrtc实例 （几个视频就需要几个实例）
  const webrtcInstances = [];

 // 初始化视频流函数--核心方法
  function setupVideoStreams() {

    //遍历4个视频div元素操作
    //每个视频div结构如下：
    // <div class="video-container" data-camera="1">
    //   <video class="video-stream" autoplay muted></video>
    //   <div class="camera-label"></div>
    // </div>

    videoContainers.forEach((container, index) => {
      const videoElement = container.querySelector('.video-stream');//小区域视频本身
      const cameraLabel = container.querySelector('.camera-label');//小区域视频标识

      // （1）摄像头名称显示（从配置读取）
      if (cameraLabel && cameraConfigs[index]) {
        cameraLabel.textContent = cameraConfigs[index].name;//根据后台的摄像头名称（位置标识）进行标识显示
      }

      // （2）初始化webrtc-streamer
      if (videoElement && cameraConfigs[index]) {
        //----2.1 实例化WebRtcStreamer ---固定写法
        const webrtc = new WebRtcStreamer(videoElement, WEBRTC_SERVER);

        //----2.2 执行webrtc实例连接rtsp流（地址）    ---固定写法
        //webrtc.connect(cameraConfigs[index].rtsp);//优化
        //webrtc.connect(cameraConfigs[index].rtsp,null,"rtptransport=tcp&timeout=60&width=320&height=240",null);
        webrtc.connect(cameraConfigs[index].rtsp, null, "rtptransport=tcp&timeout=60", null);

        //----2.3 存储实例以便管理
        // webrtcInstances.push({
        //   id: cameraConfigs[index].id,
        //   instance: webrtc,
        //   element: videoElement
        // });

        //存储到全局数组用于资源管理
        globalWebrtcInstances.push({
          id: cameraConfigs[index].id,
          instance: webrtc,
          element: videoElement
        });

        // 错误处理
        videoElement.onerror = function () {
          handleStreamError(container);
        };

        //补充：连接成功反馈
        videoElement.onloadstart = function(){
          console.log(`<video>视频方式${cameraConfigs[index].name}连接成功`);
          showConnectionStatus(`<video>视频方式${cameraConfigs[index].name}连接成功`, 'success');
        };
      }
    });
  }

  // 处理流错误
  function handleStreamError(container) {
    const videoElement = container.querySelector('.video-stream');
    const label = container.querySelector('.camera-label');

    if (videoElement) {
      videoElement.style.display = 'none';
    }

    if (label) {
      label.style.color = '#ff4d4f';
      label.textContent = label.textContent + ' (离线)';
    }

    container.style.backgroundColor = '#333';
    container.innerHTML += `
    <div style="color:white;display:flex;justify-content:center;align-items:center;height:100%;position:absolute;top:0;left:0;right:0;bottom:0;">
      视频流无法加载
    </div>
  `;
    //showConnectionStatus('视频流连接失败', 'error');

  }

  // 监听每个视频区域div的用户点击事件
  //每个视频div结构如下：
  // <div class="video-container" data-camera="1">
  //   <video class="video-stream" autoplay muted></video>
  //   <div class="camera-label"></div>
  // </div>
  videoContainers.forEach(container => {
    container.addEventListener('click', function () {
      const videoElement = this.querySelector('.video-stream');
      const cameraId = this.getAttribute('data-camera');
      //从配置变量中获取到对应视频的完整配置信息
      const cameraConfig = cameraConfigs.find(c => c.id === Number(cameraId));

      if (videoElement && videoElement.srcObject && cameraConfig) {
        modalVideo.srcObject = videoElement.srcObject;
        modalCameraLabel.textContent = cameraConfig.name;
        modal.style.display = 'flex';

        modalVideo.play().catch(e => console.error('弹窗视频播放失败:', e));
      }
    });
  });


  // 关闭弹窗
  if (closeBtn) {
    closeBtn.addEventListener('click', function () {
      modal.style.display = 'none';
      modalVideo.pause();
      modalVideo.srcObject = null;
    });
  }


  // 通过webrtc-streamer工具显示视频
  setupVideoStreams();

  // 页面卸载时清理资源----通过页面事件监听
  window.addEventListener('beforeunload', function () {
    // webrtcInstances.forEach(instance => {
    //   instance.instance.disconnect();//实例断开连接
    // });
    //------修订完善
    globalWebrtcInstances.forEach(instance => {
      if (instance && instance.instance) {
        instance.instance.disconnect();
      }
    });

  });



}

 

3.2.3 模式二：websocketurl模式的处理

//websocket模式显示逻辑
function uswebsocketmode(url){
  //websocket canvas div 待切换新结构梳理
  // <div class="chartdata" id="videoGrid">//下面包含4个视频区域
    // <div class="video-container" data-camera="1">
    //   <canvas class="videoCanvas"></canvas>
    //   <div class="camera-label"></div>
    // </div>
    // <div class="video-container" data-camera="2">
    //   <canvas class="videoCanvas"></canvas>
    //   <div class="camera-label"></div>
    // </div>
    // <div class="video-container" data-camera="3">
    //   <canvas class="videoCanvas"></canvas>
    //   <div class="camera-label"></div>
    // </div>
    // <div class="video-container" data-camera="4">
    //   <canvas class="videoCanvas"></canvas>
    //   <div class="camera-label"></div>
    // </div>
  // </div>

  //原有老结构
  // <div class="chartdata" id="videoGrid">
  //   <!-- 四个视频区域 -->
  //   <div class="video-container" data-camera="1">
  //     <video class="video-stream" autoplay muted></video>
  //     <div class="camera-label"></div>
  //   </div>
  //   <div class="video-container" data-camera="2">
  //     <video class="video-stream" autoplay muted></video>
  //     <div class="camera-label"></div>
  //   </div>
  //   <div class="video-container" data-camera="3">
  //     <video class="video-stream" autoplay muted></video>
  //     <div class="camera-label"></div>
  //   </div>
  //   <div class="video-container" data-camera="4">
  //     <video class="video-stream" autoplay muted></video>
  //     <div class="camera-label"></div>
  //   </div>
  // </div>


  const modal = document.getElementById('videoModal');//视频弹出框  //--------公共操作变量
  const modalCameraLabel = document.querySelector('.modal-camera-label');//弹出框底部显示视频名称标识
  var modalcanvas = null;
  var modalctx = null;
  //var cameraId = null;
  var currentModalCameraId = null; // 当前弹出框显示的摄像头ID


  const videoContainers = document.querySelectorAll(".video-container");//获取4个.video-container视频区域元素
  //1- 先清掉原有默认页面的div结构内的元素，构建新的canvas元素 
  //依次进行替换
  videoContainers.forEach(
    container => {
      //查找原有的<video>元素
      const videoElement = container.querySelector(".video-stream");
      if (videoElement) {

        //创建<canvas>元素
        const canvas = document.createElement("canvas");
        canvas.className = 'videoCanvas';
        // canvas.width = 320; //设置默认尺寸，即图片的分辨率、画布分辨率（和容器大小没有关系，最终都会在指定容器100%显示）
        // canvas.height = 240;
        //以上配置不能自动充满div区域


        // // 根据容器大小动态设置，但保持最小分辨率
        // const containerRect = container.getBoundingClientRect();
        // canvas.width = Math.max(containerRect.width || 320, 160);
        // canvas.height = Math.max(containerRect.height || 240, 120);

        // 自适应容器尺寸：填满容器

        const rect = container.getBoundingClientRect();
        canvas.width = Math.max(1, Math.floor(rect.width));
        canvas.height = Math.max(1, Math.floor(rect.height));


        //用<canvas>元素替换<video>元素  --- 通过获取<video>元素的父节点，来将<video>替换为<canvas>
        videoElement.parentNode.replaceChild(canvas, videoElement);
      }
    }
  );

  //2- 初始化canvas基础信息
  var canvasElementArr = [];
  var ctx = [];
  var canvasElements = document.querySelectorAll(".videoCanvas");//获取到所有<canvas>  //注意元素是4个，但是后台返回的不一定是4个
  canvasElements.forEach((canvas, index) => {
    //注意元素是4个，但是后台返回的不一定是4个。只需要根据后端返回的图片流地址个数，按需及可 (后台若超过4个，则只操作前4个)
    if ( index < url.length) {
      canvasElementArr[index] = canvas;

      ctx[index] = canvas.getContext('2d');
      //绘制初始状态 ---似乎没什么用
       ctx[index].fillStyle = '#333';
      ctx[index].fillRect(0, 0, canvas.width, canvas.height);
      ctx[index].fillStyle = 'white';
      ctx[index].font = '24px Arial'
      ctx[index].textAlign = 'center';
      ctx[index].fillText('正在连接...', canvas.width / 2, canvas.height / 2);

      console.log("ctx["+index+"]",ctx[index]);
    }
  })

  //3- 构建帧展示逻辑 ---- 若干个区域同时接收图片帧，要考虑异步和实时性
  function displayFrame(blob,ctx,canvas){

    //追加：--检查参数有效性
    if (!blob || !ctx || !canvas) {
      console.warn('displayFrame: 无效参数');
      return;
    }

    const img = new Image();

    //追加：--设置超时机制，防止图片加载卡死
    const loadTimeout = setTimeout(() => {
      console.warn('图片加载超时');
      if (img.src) {
        URL.revokeObjectURL(img.src);
      }
      img.onload = null;
      img.onerror = null;
    }, 2000); // 2秒超时

    // 将超时定时器添加到全局管理数组
    globalTimeouts.push(loadTimeout);


    // img.onload = function(){//回调函数
    //   //1.先清除画布信息
    //   ctx.clearRect(0,0,canvas.width,canvas.height);

    //   //2.计算缩放比
    //   const scale = Math.min(canvas.width/img.width,canvas.height/img.height);
    //   const x = (canvas.width - img.width * scale)/2;
    //   const y = (canvas.height - img.height * scale)/2;

    //   //3.绘制图片在画布
    //   ctx.drawImage(img,x,y,img.width*scale,img.height*scale);

    //   //4.将图像引用取消
    //   URL.revokeObjectURL(img.src);
    // };

    // //补充图片的加载失败异常事件逻辑
    // img.onerror = function () {
    //   console.error('图片帧函数----图片加载失败');
    //   ctx.fillStyle = '#ff4d4f';
    //   ctx.fillRect(0, 0, canvas.width, canvas.height);
    //   ctx.fillStyle = 'white';
    //   ctx.font = '14px Arial';
    //   ctx.textAlign = 'center';
    //   ctx.fillText('图片加载失败', canvas.width / 2, canvas.height / 2);
    // };

    //修复：内存管理
    //--------------重新定义onload事件和onerror事件
    const onLoadHandler = function(){

      //追加： --0. 清理超时定时器
      clearTimeout(loadTimeout);
      try {
        //1.先清除画布信息
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        //2.计算缩放比
        const scale = Math.min(canvas.width / img.width, canvas.height / img.height);
        const x = (canvas.width - img.width * scale) / 2;
        const y = (canvas.height - img.height * scale) / 2;

        //3.绘制图片在画布
        ctx.drawImage(img, x, y, img.width * scale, img.height * scale);

      } catch (error) {
        console.error('绘制图片时出错:', error);
      } finally {
        //4.清理资源
        URL.revokeObjectURL(img.src);
        img.onload = null;
        img.onerror = null;
        img.src = ''; // 清空src引用
      }

    };

    const onErrorHandler = function(){

      // 清理超时定时器
      clearTimeout(loadTimeout);

      console.error('图片帧函数----图片加载失败');

      try {
        ctx.fillStyle = '#ff4d4f';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = 'white';
        ctx.font = '14px Arial';
        ctx.textAlign = 'center';
        ctx.fillText('图片加载失败', canvas.width / 2, canvas.height / 2);
      } catch (error) {
        console.error('绘制错误状态时出错:', error);
      } finally {
        //清理资源
        URL.revokeObjectURL(img.src);
        img.onload = null;
        img.onerror = null;
        img.src = ''; // 清空src引用
      }

    };

    img.onload = onLoadHandler;//配合内部的资源管理
    img.onerror = onErrorHandler;//配合内部的资源管理
    img.src = URL.createObjectURL(blob);

  }


//4- 构建网页客户端连接WebSocket服务端
//注意会有多个websocket(每个独立的socket连接一个摄像头数据（一个机器人有1-多个摄像头）)

var ws=[];//用于存储websocket连接实例（网页客户端连接服务端）
function connectWebSocket(){
  // 实例化websocket,并配置特有的官方监听事件
  url.forEach((urlitem,index)=>{

    // //0 检查是否已连接
    // if(ws[index] && ws[index].readyState === WebSocket.OPEN){
    //   console.log(`WebSocket[${index}]已经连接，跳过重复连接`);
    //   return;
    // }

    //0 严格检查并清理已存在的连接
    if (ws[index]) {
      if (ws[index].readyState === WebSocket.OPEN || ws[index].readyState === WebSocket.CONNECTING) {
        console.log(`WebSocket[${index}]已经连接或正在连接，跳过重复连接`);
        return;
      } else {
        // 清理无效连接
        try {
          ws[index].close();
          ws[index] = null;
        } catch (e) {
          console.log(`清理无效连接时出错: ${e.message}`);
        }
      }
    }

    try {
      // 1 实例化
      ws[index] = new WebSocket(urlitem);
      globalWebSocketInstances[index] = ws[index];

      // 2 配置监听事件
      //-------- 2.1 onopen事件
      ws[index].onopen = function () {
        console.log("ws[" + index + "]:" + urlitem + "连接已建立,开始监听服务端WebSocket数据");
        //showConnectionStatus(`摄像头${index + 1}连接成功`, 'success');//后面换vue框架自带的信息提醒框！
        reconnectAttempts[index] = 0; //重置重连计数
      }

      //-------- 2.2 onmessage事件---核心事件
      ws[index].onmessage = function (event) {
        if (event.data instanceof Blob) {
          //displayFrame(event.data,ctx[index]);//调用帧显示函数----[将帧显示在对应的canvas区域] function displayFrame(blob,ctx) canvasElementArr
          displayFrame(event.data, ctx[index], canvasElementArr[index]);//始终小窗口需要渲染

          // 如果当前索引与弹出框显示的摄像头索引匹配，且弹出框正在显示，则同时渲染弹出框
          if (currentModalCameraId && (index === currentModalCameraId - 1) && modal && modal.style.display === 'flex' && modalctx && modalcanvas) {
            displayFrame(event.data, modalctx, modalcanvas);
          }
        }
      }

      //-------- 2.3 onclose事件
      ws[index].onclose = function (event) {
        console.log("ws[" + index + "]:" + urlitem + "连接已关闭", event.code, event.reason);

        //------------补充：自动重连逻辑
        if (!reconnectAttempts[index]) reconnectAttempts[index] = 0;

        if (reconnectAttempts[index] < MAX_RECONNECT_ATTEMPTS) {
          reconnectAttempts[index]++;
          showConnectionStatus(`摄像头${index + 1}重连中(${reconnectAttempts[index]}/${MAX_RECONNECT_ATTEMPTS})`, 'warning');////后续调用vue自身方法

          //补充
          // 清理该连接的旧定时器
          if (reconnectTimeouts[index]) {
            clearTimeout(reconnectTimeouts[index]);
          }

          const timeoutid = setTimeout(() => {
            console.log(`尝试重连ws[${index}], 第${reconnectAttempts[index]}次`);

            //补充
            // 清理连接状态
            if (ws[index]) {
              try {
                ws[index].close();
              } catch (e) { }
              ws[index] = null;
            }
            connectSingleWebSocket(urlitem, index);
            //补充
            reconnectTimeouts[index] = null;
          }, RECONNECT_DELAY);

          //追加内存管理
          globalTimeouts.push(timeoutid);
          reconnectTimeouts[index] = timeoutid;

        } else {
          showConnectionStatus(`摄像头${index + 1}连接失败`, 'error');////后续调用vue自身方法
          //显示连接失败状态
          if (ctx[index] && canvasElementArr[index]) {
            ctx[index].fillStyle = '#ff4d4f';
            ctx[index].fillRect(0, 0, canvasElementArr[index].width, canvasElementArr[index].height);
            ctx[index].fillStyle = 'white';
            ctx[index].font = '14px Arial';
            ctx[index].textAlign = 'center';
            ctx[index].fillText('ws[index].onclose事件连接失败', canvasElementArr[index].width / 2, canvasElementArr[index].height / 2);
          }
        }
      };//onclose事件

      //-------- 2.4 onerror事件
      ws[index].onerror = function (error) {
        console.log("ws[" + index + "]:" + urlitem + "连接出现错误：" + error);
        showConnectionStatus(`摄像头${index + 1}连接错误`, 'error');//后续调用vue自身方法
      };//onerror事件
    } catch (error) {
      console.error(`创建WebSocket[${index}]失败：`, error);
      showConnectionStatus(`摄像头${index + 1}创建失败`, 'error');
    }
  });
}

//5- 构建网页客户端断开连接WebSocket服务端
function disconnectWebSocket(){
  if(ws){
    ws.forEach((wsitem,index)=>{
      if(wsitem){
        wsitem.close();
        ws[index] = null;//恢复初始状态
      }
    });
    ws = [];//恢复暂存数组初始状态
  }
}

  //6- 执行连接函数调用 （最多内部连4个websocket）
  connectWebSocket();

  //7- 执行调用关闭
  // 页面卸载时清理资源----通过页面事件监听
  window.addEventListener('beforeunload', function () {
    disconnectWebSocket();
  });

  //8- 视频区域div点击事件 弹出弹出框放大视频显示   ---- 弹出框<video>也需要替换为<canvas>!
  videoContainers.forEach(container => {
    container.addEventListener('click',function(){
      //1 先把原有弹出框<video>修改为<canvas>
      //原有结构参考
      // <div id="videoModal" class="modal">
      //   <div class="modal-content">
      //     <span class="close-btn">&times;</span>
      //     <video id="modalVideo" autoplay controls></video>
      //     <div class="modal-camera-label"></div>
      //   </div>
      // </div>

      // ---1.1 先查找到要被替换元素本身
      const videoelement = document.querySelector('#modalVideo');
      if(videoelement){
        // ---1.2 再创建一个新的替换元素
        const popcanvas = document.createElement("canvas");
        // ---1.3 新元素沿用原来的id--换个新的吧
        //popcanvas.id = 'modalVideo';
        popcanvas.id = 'modalCanvas';

        // //补充：设置canvas内图片的分辨率
        // popcanvas.width = 800;
        // popcanvas.height = 600;
        //以上匹配会导致画布不能充满div区域；

        // 让弹出框canvas自适应弹窗区域
        const modalContent = modal.querySelector('.modal-content') || modal;
        const mrect = modalContent.getBoundingClientRect();
        popcanvas.width = Math.max(1, Math.floor(mrect.width));
        popcanvas.height = Math.max(1, Math.floor(mrect.height));
        // ---1.4 通过被替换元素的直接父元素，将被替换元素替换为新元素
        videoelement.parentNode.replaceChild(popcanvas,videoelement);

      }

      // //2 给弹出框内的新元素<canvas>设置基础配置:canvas、ctx
      // var modalcanvas = document.getElementById('modalCanvas');
      // var modalctx = modalcanvas.getContext('2d');
      // modalctx.fillRect(0,0,modalcanvas.width,modalcanvas.height);
      // modalctx.fillStyle = 'red';
      // modalctx.font = '24px Arial';
      // modalctx.textAlign = 'center';
      // modalctx.fillText('等待连接...',modalcanvas.width/2,modalcanvas.height/2);
      //--------------------------------------------------
      //注意：--------以上这些代码可能后续调试需要放在下方if内部代码：modal.style.display = 'flex'; //视频弹出框整体div显示下方。因为没显示前操作canvas的width和height可能不起作用

      //3 构建视频配置信息对象
      const canvasElement = this.querySelector('.videoCanvas'); //被点击的canvas元素
      //cameraId = this.getAttribute('data-camera');//获取被点击的视频div区域编号（注意，从1开始）
      const clickedCameraId = this.getAttribute('data-camera');//获取被点击的视频div区域编号（注意，从1开始）
      currentModalCameraId = clickedCameraId; // 更新当前弹出框显示的摄像头ID

      // const modal = document.getElementById('videoModal');//视频弹出框
      // const modalCameraLabel = document.querySelector('.modal-camera-label');//弹出框底部显示视频名称标识

      //根据点击的下标，获取对应的已有的ws实例，执行图像渲染
      //if (canvasElement && cameraId && ws[cameraId - 1] != null) {
      if (canvasElement && clickedCameraId && ws[clickedCameraId - 1] != null) {

        //modalCameraLabel.textContent = 'camera'+ cameraId; //显示视频编号名称
        modalCameraLabel.textContent = 'camera'+ clickedCameraId; //显示视频编号名称
        modal.style.display = 'flex'; //视频弹出框整体div显示

        //上方外层移到此处
        //给弹出框内的新元素<canvas>设置基础配置:canvas、ctx
        modalcanvas = document.getElementById('modalCanvas');
        modalctx = modalcanvas.getContext('2d');

        //补充：画布自适应显示 监听窗口尺寸变化，保持弹窗canvas自适应
        const resizeModalCanvas = () => {
          const modalContent = modal.querySelector('.modal-content') || modal;
          const mrect = modalContent.getBoundingClientRect();
          const w = Math.max(1, Math.floor(mrect.width));
          const h = Math.max(1, Math.floor(mrect.height));
          if (modalcanvas.width !== w || modalcanvas.height !== h) {
            modalcanvas.width = w;
            modalcanvas.height = h;
          }
        };

        //window.addEventListener('resize', resizeModalCanvas);
        // 移除之前的resize监听器，避免重复添加
        if (resizeHandler) {
          window.removeEventListener('resize', resizeHandler);
        }
        resizeHandler = resizeModalCanvas;
        window.addEventListener('resize', resizeHandler);
        globalEventListeners.push({element: window, event: 'resize', handler: resizeHandler});

        resizeModalCanvas();
        modalctx.fillStyle = '#333';
        modalctx.fillRect(0, 0, modalcanvas.width, modalcanvas.height);
        modalctx.fillStyle = 'white';
        modalctx.font = '20px Arial';
        modalctx.textAlign = 'center';
        modalctx.fillText('等待图像...', modalcanvas.width / 2, modalcanvas.height / 2);

        //canvas 图片帧显示
        //ws[cameraId - 1].onmessage = function (event) {
        //修改为同时渲染小窗口和弹出框
        ws[clickedCameraId - 1].onmessage = function (event) {
          if (event.data instanceof Blob) {
            //displayFrame(event.data, modalctx, modalcanvas);//帧显示
            // 始终渲染小窗口
            displayFrame(event.data, ctx[clickedCameraId - 1], canvasElementArr[clickedCameraId - 1]);
            // 如果弹出框显示且是当前摄像头，也渲染弹出框
            if (modal.style.display === 'flex' && modalctx && modalcanvas && currentModalCameraId == clickedCameraId) {
              displayFrame(event.data, modalctx, modalcanvas);
            }
          }
        };

        //console.log("ws["+(cameraId-1)+"]"+"弹出框放大显示已执行！");
        console.log("ws["+(clickedCameraId-1)+"]"+"弹出框放大显示已执行！");
      }
    });
  }
  );

  //9- 弹出框关闭按钮监听事件
  const closeBtn = document.querySelector('.close-btn');//弹出框关闭按钮区域
  if (closeBtn) {
    // closeBtn.addEventListener('click', function () {
    //   modal.style.display = 'none';
    //   //-------- 9.1 恢复对应视频区域小窗口的图片帧显示
    //   if (cameraId != null && ws[cameraId-1]) {
    //     ws[cameraId - 1].onmessage = function (event) {//重新覆盖onmessage事件，在小窗口上渲染图片帧
    //       if (event.data instanceof Blob) {
    //         displayFrame(event.data, ctx[cameraId - 1], canvasElementArr[cameraId - 1]);
    //       }
    //     };
    //   }
    //优化以上内容
    // 移除之前的click事件监听器，避免重复添加
    const existingListeners = globalEventListeners.filter(item =>
      item.element === closeBtn && item.event === 'click'
    );
    existingListeners.forEach(item => {
      item.element.removeEventListener(item.event, item.handler);
    });

    // 定义新的事件处理函数
    const closeBtnHandler = function () {
      modal.style.display = 'none';
      // //-------- 9.1 恢复对应视频区域小窗口的图片帧显示
      // if (cameraId != null && ws[cameraId - 1]) {
      //   ws[cameraId - 1].onmessage = function (event) {//重新覆盖onmessage事件，在小窗口上渲染图片帧
      //     if (event.data instanceof Blob) {
      //       displayFrame(event.data, ctx[cameraId - 1], canvasElementArr[cameraId - 1]);
      //     }
      //   };
      // }
      //以上内容不需要特殊恢复了，因为迭代代码后，再弹出弹出框的时候，也是一直保证小窗口也在显示的

      //-------- 9.2 清除弹出框canvas的图片帧显示
      if (modalctx != null && modalcanvas != null) {
        modalctx.clearRect(0, 0, modalcanvas.width, modalcanvas.height);
      }

      // 重置弹出框相关变量
      modalcanvas = null;
      modalctx = null;
      currentModalCameraId = null; // 清除当前弹出框摄像头ID

      //});

      // 移除resize事件监听器
      if (resizeHandler) {
        window.removeEventListener('resize', resizeHandler);
        // 从全局列表中移除
        const index = globalEventListeners.findIndex(item =>
          item.element === window && item.event === 'resize' && item.handler === resizeHandler
        );
        if (index !== -1) {
          globalEventListeners.splice(index, 1);
        }
        resizeHandler = null;
      }
    };

    // 添加新的事件监听器并记录
    closeBtn.addEventListener('click', closeBtnHandler);
    globalEventListeners.push({ element: closeBtn, event: 'click', handler: closeBtnHandler });
  }

  //}

  //追加： 10- 内存优化管理 
  // ------------10.1  页面可见性变化时的资源管理
  document.addEventListener('visibilitychange', function () {
    if (document.hidden) {
      // 页面切换到后台时，清理资源但不断开连接
      console.log('页面切换到后台，清理部分资源');

      // 清理定时器
      globalTimeouts.forEach(timeoutId => {
        clearTimeout(timeoutId);
      });
      globalTimeouts = [];

      // 清理状态提示元素
      const statusElement = document.getElementById('connection-status');
      if (statusElement) {
        statusElement.remove();
      }
    } else {
      // 页面重新可见时
      console.log('页面重新可见');
    }
  });

  // ------------10.2  页面失去焦点时的额外清理
  window.addEventListener('blur', function () {
    // 清理可能残留的定时器
    globalTimeouts.forEach(timeoutId => {
      clearTimeout(timeoutId);
    });
    globalTimeouts = [];
  });

}

3.2.4 其他辅助变量及函数

//图片帧兼容方案
//全局变量用于资源管理
let globalWebrtcInstances = [];
let globalWebSocketInstances = [];
let reconnectAttempts = {};
const MAX_RECONNECT_ATTEMPTS = 3;
const RECONNECT_DELAY = 2000;

//新增修复：修复图片帧方式显示浏览器内存持续增长问题 -----全局定时器和事件监听器管理
var globalTimeouts = [];
var globalEventListeners = [];
var resizeHandler = null;
var reconnectTimeouts = []; // 管理重连定时器

//清理之前的连接资源
function cleanupPreviousConnections() {
  //清理WebRTC连接
  globalWebrtcInstances.forEach(instance => {
    if (instance && instance.instance) {
      instance.instance.disconnect();
    }
  });
  globalWebrtcInstances = [];

  //清理WebSocket连接
  globalWebSocketInstances.forEach((ws, index) => {
    if (ws && ws.readyState === WebSocket.OPEN) {
      ws.close();
    }
  });
  globalWebSocketInstances = [];

  //-------------------------------------------追加补充部分---开始------------------------------------------------
  //清理定时器
  globalTimeouts.forEach(timeoutId => {
    clearTimeout(timeoutId);
  });
  globalTimeouts = [];

  //清理事件监听器
  globalEventListeners.forEach(({ element, event, handler }) => {
    element.removeEventListener(event, handler);
  });
  globalEventListeners = [];

  //清理resize监听器
  if (resizeHandler) {
    window.removeEventListener('resize', resizeHandler);
    resizeHandler = null;
  }

  //清理状态提示元素
  const statusElement = document.getElementById('connection-status');
  if (statusElement) {
    statusElement.remove();
  }
  //-------------------------------------------追加补充部分---结束------------------------------------------------
  
  //重置重连计数
  reconnectAttempts = {};
  
  //console.log('已清理所有之前的连接资源');
  console.log('已清理所有之前的连接资源、定时器和事件监听器');
}

//单个WebSocket重连函数
function connectSingleWebSocket(urlitem, index) {
  try {
    ws[index] = new WebSocket(urlitem);
    globalWebSocketInstances[index] = ws[index];

    //重新绑定事件（复用上面的逻辑）
    ws[index].onopen = function () {
      console.log(`ws[${index}]:${urlitem} 重连成功`);
      //showConnectionStatus(`摄像头${index + 1}重连成功`, 'success');
      reconnectAttempts[index] = 0;
    };

    ws[index].onmessage = function (event) {
      if (event.data instanceof Blob) {
        // 始终渲染小窗口
        displayFrame(event.data, ctx[index], canvasElementArr[index]);

        // 如果当前索引与弹出框显示的摄像头索引匹配，且弹出框正在显示，则同时渲染弹出框
        if (currentModalCameraId && (index === currentModalCameraId - 1) && modal && modal.style.display === 'flex' && modalctx && modalcanvas) {
          displayFrame(event.data, modalctx, modalcanvas);
        }

      }
    };

    //重连的onclose和onerror事件处理与初始连接相同
    ws[index].onclose = function (event) {
      console.log(`ws[${index}] 重连后又关闭了`);
      if (reconnectAttempts[index] < MAX_RECONNECT_ATTEMPTS) {
        reconnectAttempts[index]++;
        setTimeout(() => connectSingleWebSocket(urlitem, index), RECONNECT_DELAY);
      }
    };

    ws[index].onerror = function (error) {
      console.error(`ws[${index}] 重连错误:`, error);
    };

  } catch (error) {
    console.error(`重连WebSocket[${index}]失败:`, error);
  }
}

 

4 模拟数据集构建（视频切割成图片帧 25fps）

此环节是通过ffmpeg命令，将一个视频按照指定的帧率切割成一张张帧图片，以作为本地模拟服务端程序的模拟图片帧数据源。具体操作步骤命令可参考之前博文：https://www.cnblogs.com/Jesuslovesme/p/18818356

5 模拟websocket服务端程序编写

 这个可根据个人擅长的开发语言编写，因为我主要是为了验证前端显示方案是否可以落地，所以后端程序只要能按一定频率取本地的帧图片并实时通过websocket发送给前端显示即可。我通过ai生成了一个验证测试的C#后端程序。

基于.NET 6.0的控制台应用程序代码如下：

using Fleck;
using System.Text.Json;
using System.Collections.Concurrent;
using System.Net;
using System.Net.Http;
using System.Text;

namespace WebSocketServerApp
{
    public class Program
    {
        private static readonly ConcurrentDictionary<string, List<IWebSocketConnection>> _connections = new();
        private static readonly ConcurrentDictionary<string, CancellationTokenSource> _cancellationTokens = new();
        private static string _imagePath = @"D:\XX中心\总控系统项目\测试demo\图片帧demo\dash-video-to-img";//图片帧文件夹存放位置
        
        public static async Task Main(string[] args)
        {
            // 启动HTTP服务器------路线1 
            var httpTask = StartHttpServer();//用于处理前端的模式请求确认 
            
            // 启动WebSocket服务器  ----路线2
            var wsTask = StartWebSocketServer(); //对接网页websocket，传输图片帧
            
            Console.WriteLine("=== WebSocket服务器启动完成 ===");
            Console.WriteLine("HTTP API服务: http://localhost:8080");
            Console.WriteLine("WebSocket服务: ws://localhost:8081");
            Console.WriteLine("");
            Console.WriteLine("测试URL:");
            Console.WriteLine("- RTSP模式: http://localhost:8080/api/usdisplay?usid=2");
            Console.WriteLine("- WebSocket模式: http://localhost:8080/api/usdisplay?usid=3");
            Console.WriteLine("- WebSocket连接: ws://localhost:8081/api/websocket?usid=3&cam=0");
            Console.WriteLine("");
            Console.WriteLine("按 Ctrl+C 停止服务器");
            
            // 等待两个服务器
            await Task.WhenAll(httpTask, wsTask);
        }



        //异步函数  启动HTTP服务器
        private static async Task StartHttpServer()
        {
            //1.
            var listener = new HttpListener();
            // 绑定到localhost与127.0.0.1，避免因Host不匹配导致返回系统400且无CORS头

            //2.
            listener.Prefixes.Add("http://localhost:8080/");
            listener.Prefixes.Add("http://127.0.0.1:8080/");
            // 如需对外访问，可尝试开启以下通配符（需要管理员权限并配置urlacl）
            // listener.Prefixes.Add("http://+:8080/");

            //3.
            listener.Start();
            
            Console.WriteLine("HTTP服务器已启动: http://localhost:8080 与 http://127.0.0.1:8080");
            
            //4.持续监控
            while (true)
            {
                try
                {
                    //5.获取访问请求上下文
                    var context = await listener.GetContextAsync(); //等待一个即将到来的请求操作
                    _ = Task.Run(() => HandleHttpRequest(context));//开启一个线程，处理http请求
                }
                catch (Exception ex)
                {
                    Console.WriteLine($"HTTP服务器错误: {ex.Message}");
                }
            }
        }
        
        //处理http请求
        private static async Task HandleHttpRequest(HttpListenerContext context)
        {
            try
            {
                var request = context.Request;//请求上下文的客户端request
                var response = context.Response;//请求上下文的服务端response

                // 设置反馈的CORS头
                response.Headers.Add("Access-Control-Allow-Origin", "*");
                response.Headers.Add("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, DELETE");
                response.Headers.Add("Access-Control-Allow-Headers", "Content-Type, Authorization, X-Requested-With, Accept, Origin");
                response.Headers.Add("Access-Control-Allow-Credentials", "true");
                response.Headers.Add("Access-Control-Max-Age", "86400");
                
                if (request.HttpMethod == "OPTIONS")
                {
                    response.StatusCode = 200;
                    response.Close();
                    return;
                }

                //如果请求url不为空，且绝对地址为"/api/usdisplay"
                if (request.Url?.AbsolutePath == "/api/usdisplay")
                {
                    var usid = request.QueryString["usid"];//获取到查询参数usid的值
                    if (string.IsNullOrEmpty(usid))
                    {
                        response.StatusCode = 400;
                        var errorBytes = Encoding.UTF8.GetBytes("Missing usid parameter");
                        await response.OutputStream.WriteAsync(errorBytes, 0, errorBytes.Length);
                    }
                    else
                    {
                        //构建模式反馈json （两种模式，反馈的json模板不一样）
                        var configResponse = GetDisplayConfig(usid);
                        var jsonResponse = JsonSerializer.Serialize(configResponse);
                        var responseBytes = Encoding.UTF8.GetBytes(jsonResponse);
                        
                        response.ContentType = "application/json";//设置返回数据类型
                        response.StatusCode = 200;//设置返回状态码
                        await response.OutputStream.WriteAsync(responseBytes, 0, responseBytes.Length);
                    }
                }
                else
                {
                    response.StatusCode = 404;
                    var notFoundBytes = Encoding.UTF8.GetBytes("Not Found");
                    await response.OutputStream.WriteAsync(notFoundBytes, 0, notFoundBytes.Length);
                }
                
                response.Close();
            }
            catch (Exception ex)
            {
                Console.WriteLine($"处理HTTP请求错误: {ex.Message}");
            }
        }
        
        private static async Task StartWebSocketServer()
        {
            //创建websocket服务端
            var server = new Fleck.WebSocketServer("ws://0.0.0.0:8081");
            
            //服务端socket执行事件监听
            server.Start(socket =>
            {
                //网页端触发socket请求后
                socket.OnOpen = () =>
                {
                    var query = ParseQuery(socket.ConnectionInfo.Path);//获取前端连接服务端的websocket地址（网页端websocket请求连接地址）
                    var usid = query.GetValueOrDefault("usid", "");//获取websocket请求连接地址的usid参数值
                    var cam = query.GetValueOrDefault("cam", "");//获取websocket请求连接地址的cam参数值
                    var connectionKey = $"{usid}-{cam}";//自定义变量，存储连接信息{usid}-{cam}

                    Console.WriteLine($"WebSocket连接建立: usid={usid}, cam={cam}, IP={socket.ConnectionInfo.ClientIpAddress}");
                    //socket.ConnectionInfo.ClientIpAddress 请求连接的客户端ip

                    // 添加连接到管理字典
                    _connections.AddOrUpdate(connectionKey, 
                        new List<IWebSocketConnection> { socket },
                        (key, list) => { list.Add(socket); return list; });
                    
                    // 开始发送图片帧
                    StartSendingFrames(socket, usid, cam, connectionKey);
                };
                
                socket.OnClose = () =>
                {
                    var query = ParseQuery(socket.ConnectionInfo.Path);
                    var usid = query.GetValueOrDefault("usid", "");
                    var cam = query.GetValueOrDefault("cam", "");
                    var connectionKey = $"{usid}-{cam}";
                    
                    Console.WriteLine($"WebSocket连接关闭: usid={usid}, cam={cam}");
                    
                    try
                    {
                        // 从管理字典中移除连接
                        if (_connections.TryGetValue(connectionKey, out var connections))
                        {
                            connections.Remove(socket);
                            if (connections.Count == 0)
                            {
                                _connections.TryRemove(connectionKey, out _);
                                
                                // 停止发送任务并释放资源
                                if (_cancellationTokens.TryRemove(connectionKey, out var cts))
                                {
                                    cts.Cancel();
                                    cts.Dispose();
                                    Console.WriteLine($"已清理连接资源: {connectionKey}");
                                }
                            }
                        }
                        
                        // 强制垃圾回收释放内存
                        GC.Collect();
                        GC.WaitForPendingFinalizers();
                    }
                    catch (Exception ex)
                    {
                        Console.WriteLine($"连接关闭时清理资源出错: {ex.Message}");
                    }
                };
                
                socket.OnError = exception =>
                {
                    Console.WriteLine($"WebSocket错误: {exception.Message}");
                };
            });
            
            // 保持服务器运行
            await Task.Delay(Timeout.Infinite);
            //await Task.Delay(Timeout.Infinite); 的意思是在一个异步方法里“无限等待”，也就是说这个任务永远不会完成（除非有外部中断或取消）。
            //这通常用于让一个后台任务保持运行状态、占位、或者在某些调试场景下阻止应用退出。
        }

        private static Dictionary<string, string> ParseQuery(string path)
        {
            var result = new Dictionary<string, string>();
            
            if (string.IsNullOrEmpty(path) || !path.Contains('?'))
                return result;
            
            var queryString = path.Split('?')[1];
            var pairs = queryString.Split('&');
            
            foreach (var pair in pairs)
            {
                var keyValue = pair.Split('=');
                if (keyValue.Length == 2)
                {
                    result[keyValue[0]] = Uri.UnescapeDataString(keyValue[1]);
                }
            }
            
            return result;
        }
        
        private static void StartSendingFrames(IWebSocketConnection socket, string usid, string cam, string connectionKey)
        {
            // 检查是否已有任务在运行，如果有则先取消
            if (_cancellationTokens.TryGetValue(connectionKey, out var existingCts))
            {
                try
                {
                    existingCts.Cancel();
                    existingCts.Dispose();
                    Console.WriteLine($"取消已存在的发送任务: usid={usid}, cam={cam}");
                }
                catch (Exception ex)
                {
                    Console.WriteLine($"取消已存在任务时出错: {ex.Message}");
                }
            }
            
            var cts = new CancellationTokenSource();
            _cancellationTokens[connectionKey] = cts;
            
            // 使用ConfigureAwait(false)避免上下文切换开销
            Task.Run(async () =>
            {
                try
                {
                    if (!Directory.Exists(_imagePath))
                    {
                        Console.WriteLine($"图片目录不存在: {_imagePath}");
                        socket.Close();
                        return;
                    }
                    
                    // 优化：只获取文件路径，不读入内存
                    var imageFiles = Directory.GetFiles(_imagePath, "*.jpg")
                                   .Concat(Directory.GetFiles(_imagePath, "*.jpeg"))
                                   .Concat(Directory.GetFiles(_imagePath, "*.png"))
                                   .OrderBy(f => f)
                                   .ToArray();
                    
                    if (imageFiles.Length == 0)
                    {
                        Console.WriteLine($"图片目录中没有找到图片文件: {_imagePath}");
                        socket.Close();
                        return;
                    }
                    
                    Console.WriteLine($"摄像头{cam}开始发送图片帧，共{imageFiles.Length}个文件");
                    
                    var frameIndex = 0;
                    
                    while (!cts.Token.IsCancellationRequested && socket.IsAvailable)
                    {
                        var currentImageFile = imageFiles[frameIndex % imageFiles.Length];
                        
                        try
                        {
                            // 内存优化：使用using确保资源及时释放
                            using (var fileStream = new FileStream(currentImageFile, FileMode.Open, FileAccess.Read))
                            {
                                var imageBytes = new byte[fileStream.Length];
                                await fileStream.ReadAsync(imageBytes, 0, imageBytes.Length, cts.Token);
                                
                                // 立即发送后释放引用
                                socket.Send(imageBytes);
                                imageBytes = null; // 显式释放引用
                            }
                            
                            Console.WriteLine($"发送图片帧: usid={usid}, cam={cam}, frame={frameIndex}, file={Path.GetFileName(currentImageFile)}");
                            
                            frameIndex++;
                            
                            // 降低帧率减少内存压力：改为10fps，即每100ms发送一帧
                            await Task.Delay(40, cts.Token);
                            
                            // 每100帧强制垃圾回收一次
                            if (frameIndex % 100 == 0)
                            {
                                GC.Collect();
                                GC.WaitForPendingFinalizers();
                                Console.WriteLine($"执行垃圾回收: frame={frameIndex}");
                            }
                        }
                        catch (OperationCanceledException)
                        {
                            break;
                        }
                        catch (Exception ex)
                        {
                            Console.WriteLine($"发送图片帧时出错: {ex.Message}");
                            break;
                        }
                    }
                }
                catch (Exception ex)
                {
                    Console.WriteLine($"图片发送任务异常: {ex.Message}");
                }
                finally
                {
                    Console.WriteLine($"停止发送图片帧: usid={usid}, cam={cam}");
                }
            }, cts.Token);
        }
        
        //获取模式配置的反馈json
        private static object GetDisplayConfig(string usid)
        {
            //模拟数据，模拟两个无人系统，每个1个模式
            switch (usid)
            {
                case "2":
                    // RTSP模式
                    return new
                    {
                        code = 200,
                        success = true,
                        data = new
                        {
                            mode = "rtspurl",
                            url = new string[]
                            {
                                "rtsp://127.0.0.1:8081",
                                "rtsp://127.0.0.1:8082",
                                "rtsp://127.0.0.1:8083"
                            }
                        }
                    };
                    
                case "3":
                    // WebSocket模式
                    return new
                    {
                        code = 200,
                        success = true,
                        data = new
                        {
                            mode = "websocketurl",
                            url = new string[]
                            {
                                "ws://127.0.0.1:8081/api/websocket?usid=3&cam=0",
                                "ws://127.0.0.1:8081/api/websocket?usid=3&cam=1",
                                "ws://127.0.0.1:8081/api/websocket?usid=3&cam=2"
                            }
                        }
                    };
                    
                default:
                    return new
                    {
                        code = 404,
                        success = false,
                        message = "未找到指定的机器人配置"
                    };
            }
        }
    }
}

6 效果展示

 3个小区域的图片帧显示：

点击任意一个小区域，弹出图片帧放大显示弹出框：