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

本文链接：https://blog.csdn.net/qq_43207259/article/details/147891459

前情提要

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

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

已完成工作：

本小节目标：

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

效果结构简述

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

┌────────────────────────────┐
│      <video 播放器区域>     │
└────────────────────────────┘

[记录表格]

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

在 <body> 中合适位置加入这段：

<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>

在页面底部加入 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 播放逻辑：

<!-- 引入 hls.js -->
<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 即可。