猫咪如厕检测与分类识别系统系列～进阶【二】推流视频嵌入主界面实时播放控制

前情提要

---

家里养了三只猫咪，其中一只布偶猫经常出入厕所。但因为平时忙于学业，没法时刻关注牠的行为。我知道猫咪的如厕频率和时长与健康状况密切相关，频繁如厕可能是泌尿问题，停留过久也可能是便秘或不适。为了更科学地了解牠的如厕习惯，我计划搭建一个基于视频监控和AI识别的系统，自动识别猫咪进出厕所的行为，记录如厕时间和停留时长，并区分不同猫咪。这样即使我不在家，也能掌握猫咪的健康状态，更安心地照顾它们。

各位的关注与点赞是我持续分享的最大动力，衷心感谢大家的支持！
欢迎正在攻读硕博学位的同学，或是对人工智能充满热情的朋友们，关注我的个人公众号。在这里，我将持续更新博士期间阅读的前沿论文解读、项目实战经验分享，以及我对AI技术趋势的思考与探讨。
✨ 无论你是科研工作者、工程开发者，还是AI初学者，都能在这里找到干货与灵感。让我们一起交流、成长、探索人工智能的无限可能！

---

已完成工作：

✅猫咪如厕检测与分类识别系统系列【一】 功能需求分析及猫咪分类特征提取
✅猫咪如厕检测与分类识别系统系列【二】多图上传及猫咪分类特征提取更新
✅猫咪如厕检测与分类识别系统系列【三】 融合yolov11目标检测
✅猫咪如厕检测与分类识别系统系列【四】融合检测日志输出及前端展示界面制作
✅猫咪如厕检测与分类识别系统系列【五】信息存储数据库改进+添加猫咪页面制作+猫咪躯体匹配算法架构更新
✅猫咪如厕检测与分类识别系统系列【六】分类模型训练+混合检测分类+未知目标自动更新

✅猫咪如厕检测与分类识别系统系列【七】 当前阶段总结报告

✅猫咪如厕检测与分类识别系统系列【八】 检测推理事件整合+视频推流架构分析

✅猫咪如厕检测与分类识别系统系列【九】 视频检测区域在线绘制+支持摄像头+网络摄像头+整体构建【上】

✅猫咪如厕检测与分类识别系统系列【九】 视频检测区域在线绘制+支持摄像头+网络摄像头+整体构建【下】

✅猫咪如厕检测与分类识别系统系列【十】 视频检测区域动态监测及实时更新
✅猫咪如厕检测与分类识别系统系列【十一】区域进入事件相应逻辑鲁棒性更新
✅猫咪如厕检测与分类识别系统系列【十二】猫咪进出事件逻辑及日志优化【上】
✅猫咪如厕检测与分类识别系统系列【十三】猫咪进出事件逻辑及日志优化【下】

✅猫咪如厕检测与分类识别系统系列～进阶【一】视频流推流及网页实时展示

---

本小节目标：

• 将 FLV 视频流播放器嵌入主页面 （index.html 或主页模板）
• 增加一个按钮：点击后可「开启/关闭视频流区域」

效果结构简述

 猫咪如厕记录页面
[ 显示/隐藏视频流按钮]

┌────────────────────────────┐
│      

---

修改方式（直接贴入你的主模板 index.html 中）

1. 在 中合适位置加入这段：

<button id="toggleStreamBtn"> 显示/隐藏视频流button>

<div id="videoContainer" style="margin-top: 20px; display: none;">
  <video id="videoElement" controls autoplay muted width="960" height="720">video>
div>

---

2. 在页面底部加入 flv.js 和切换控制逻辑：

<script src="https://cdn.jsdelivr.net/npm/flv.js@latest/dist/flv.min.js">script>
<script>
  const flvUrl = 'http://<你的服务器IP>:8080/live/cat.live.flv'; // ✅ 替换你的服务器 IP
  const videoElement = document.getElementById('videoElement');
  const toggleBtn = document.getElementById('toggleStreamBtn');
  const container = document.getElementById('videoContainer');

  let flvPlayer = null;
  let isShown = false;

  toggleBtn.addEventListener('click', () => {
    isShown = !isShown;
    container.style.display = isShown ? 'block' : 'none';

    if (isShown && flvjs.isSupported() && !flvPlayer) {
      flvPlayer = flvjs.createPlayer({
        type: 'flv',
        url: flvUrl
      });
      flvPlayer.attachMediaElement(videoElement);
      flvPlayer.load();
      flvPlayer.play();
    }
  });
script>

---

提示补充

• display: none 实现隐藏播放器区域

• 首次点击才初始化 flv.js 播放器，节省资源

• 可扩展为：断流重连、切换流名、画质控制等

---

1. 在主页面合适位置插入以下 HTML：

<button id="toggleStreamBtn">显示/隐藏视频流button>

<div id="videoContainer" style="margin-top: 20px; display: none;">
  <video id="videoElement" width="960" height="720" controls autoplay muted>video>
div>

---

2. 在页面底部加入 HLS 播放逻辑：

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest">script>
<script>
  const streamUrl = 'http://<你的服务器IP>:8080/live/cat/hls.m3u8';  // 替换为你的流地址
  const videoElement = document.getElementById('videoElement');
  const toggleBtn = document.getElementById('toggleStreamBtn');
  const container = document.getElementById('videoContainer');

  let hlsPlayer = null;
  let isShown = false;

  toggleBtn.addEventListener('click', () => {
    isShown = !isShown;
    container.style.display = isShown ? 'block' : 'none';

    if (isShown && !hlsPlayer) {
      if (Hls.isSupported()) {
        hlsPlayer = new Hls();
        hlsPlayer.loadSource(streamUrl);
        hlsPlayer.attachMedia(videoElement);
      } else if (videoElement.canPlayType('application/vnd.apple.mpegurl')) {
        videoElement.src = streamUrl;
      } else {
        alert('❌ 当前浏览器不支持 HLS 播放，请使用 Chrome/Edge/Safari');
      }
    }
  });
script>

---

效果

点击按钮即可控制视频区域的显示与隐藏，并在首次点击时启动 HLS 播放器。

---

示例流地址说明

假设推的是：

rtmp://192.168.0.100/live/cat

ZLMediaKit 会自动提供：

http://192.168.0.100:8080/live/cat/hls.m3u8

把这个地址填到 streamUrl 即可。

---