免费版WordPress无插件嵌入IP摄像头实现2-10fps流畅预览咨询

你原方案出现半加载、裂图的核心原因有两个：一是摄像头写入图片文件和前端拉取文件的操作同时发生，前端读到了还没写完的残缺文件；二是前端用固定定时器强制刷新图片，不管上一帧是否加载完成就替换src，时序完全错位。
以下方案全部不需要安装WordPress插件，免费版权限即可实现，帧率可稳定覆盖2-10fps的需求：

方案1：优化现有JPG轮询逻辑（零额外成本，稳定2-5fps） #

不需要改动摄像头现有上传逻辑的核心框架，只需要补两个关键机制即可解决裂图问题：

• 摄像头侧改原子写入避读写冲突
  不要让摄像头直接覆盖正在对外提供访问的latest.jpg文件，每帧先上传为临时文件（比如cam1_writing.jpg），确认文件完整传输完成后，再通过文件重命名操作替换正式对外的cam1_latest.jpg。文件重命名是系统层面的原子操作，不存在中间状态，前端永远只会读到完整的成品文件。
  如果你的摄像头不支持上传后重命名，就换双缓冲逻辑：让摄像头交替上传cam1_a.jpg、cam1_b.jpg，每上传完一个文件就写一个1字节的标记文件cam1_flag.txt，内容标记当前最新帧是a还是b，前端先读标记再拉取对应图片，完全错开读写时机。
• 前端改加载完成触发的链式刷新，替换固定定时器
  不要用setInterval固定间隔强制替换图片地址，改成「上一帧完整加载完成后，按目标帧率计算等待时间再拉取下一帧」，从根源避免时序错位。以下代码可直接粘贴到免费WordPress自带的「自定义HTML」模块中使用：

<!-- 3台摄像头预览容器 -->
<div style="display:grid;grid-template-columns: repeat(3, 1fr);gap:1rem;">
  <img id="cam1" alt="摄像头1预览" style="width:100%;">
  <img id="cam2" alt="摄像头2预览" style="width:100%;">
  <img id="cam3" alt="摄像头3预览" style="width:100%;">
</div>

<script>
// 按实际情况修改摄像头地址、目标帧率
const camList = [
  { dom: document.getElementById('cam1'), imgPath: '/wp-content/uploads/cams/cam1_latest.jpg', fps: 4 },
  { dom: document.getElementById('cam2'), imgPath: '/wp-content/uploads/cams/cam2_latest.jpg', fps: 4 },
  { dom: document.getElementById('cam3'), imgPath: '/wp-content/uploads/cams/cam3_latest.jpg', fps: 4 }
];

function runCamStream(config) {
  const frameGap = 1000 / config.fps;
  let lastLoadFinish = 0;
  const loadFrame = () => {
    const wait = Math.max(0, frameGap - (Date.now() - lastLoadFinish));
    setTimeout(() => {
      const cacheBuster = Date.now();
      const tempLoader = new Image();
      tempLoader.src = `${config.imgPath}?r=${cacheBuster}`;
      // 新图完整加载后才替换到显示区域
      tempLoader.onload = () => {
        config.dom.src = tempLoader.src;
        lastLoadFinish = Date.now();
        loadFrame();
      };
      // 加载失败直接重试，不卡住流
      tempLoader.onerror = loadFrame;
    }, wait);
  };
  loadFrame();
}

camList.forEach(runCamStream);
</script>

这个方案不需要额外设备、不需要改摄像头配置，只要把摄像头上传路径对应到WordPress媒体库可访问的目录即可，稳定运行在3-5fps无压力。

方案2：调用摄像头原生MJPEG流（稳定5-10fps，带宽占用更低） #

绝大多数消费级、工业级IP摄像头原生支持MJPEG流输出，不需要自行上传截图做轮询，天然不存在半加载问题：

• 先查阅摄像头对应说明书，找到MJPEG流的访问地址，常见格式为http://摄像头内网IP/mjpeg/stream、http://摄像头内网IP/cgi-bin/video.cgi这类。
• 如果摄像头已经做好公网映射、且配置了只读权限的无认证访问，可以直接把流地址填到img标签的src属性里；如果担心直接暴露摄像头公网地址，可以在内网用闲置设备（树莓派、常开的家用电脑）做个简单的同域转发，把流转到WordPress站点的可访问路径下，避免跨域和权限泄露问题。
• 嵌入方式不需要写JS，直接粘贴到自定义HTML模块即可：

<div style="display:grid;grid-template-columns: repeat(3, 1fr);gap:1rem;">
  <img src="/cam-streams/cam1.mjpeg" alt="摄像头1预览" style="width:100%;">
  <img src="/cam-streams/cam2.mjpeg" alt="摄像头2预览" style="width:100%;">
  <img src="/cam-streams/cam3.mjpeg" alt="摄像头3预览" style="width:100%;">
</div>

MJPEG本身就是连续传输的JPEG帧序列，浏览器原生支持边加载边播放，没有文件读写冲突，帧率可稳定在5-10fps，相比单图轮询少了反复建立HTTP连接的开销，同等画质下带宽占用低30%左右。

通用优化提示 #

• 将摄像头输出的JPG画质调整到60-70、分辨率控制在720P以内，单张截图大小控制在50-100KB，3台摄像头跑10fps总带宽仅12-15Mbps，绝大多数免费虚拟主机都能承载。
• 防缓存参数用Date.now()时间戳即可，不要用无意义随机数，减少不必要的缓存穿透。
• 预览图不要套用WordPress自带的图片裁剪、水印等处理逻辑，避免额外的服务端延迟。

免费版WordPress仅限制安装第三方插件，不限制在页面/文章中插入原生HTML、JS代码，上述所有代码不需要升级付费版即可直接使用。

内容的提问来源于stack exchange，提问作者Mikoláš Pešek