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

前情提要

---

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

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

---

已完成工作：

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

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

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

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

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

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

---

本小节将实现进阶功能，将检测画面实时推送到流媒体服务器（如 RTMP / RTSP / WebRTC） ，并在前端网页上实时观看效果。
使用 FFmpeg + RTMP 推流

📺 架构简图：

[摄像头] → [检测 + 标注帧] → [FFmpeg 推流] → [ZLMediaKit视频服务器] → [网页播放]

效果图：

开始推流后推流服务器显示数据：

开始推流后FFMPEG显示数据

电脑端访问 FLV 推流地址：

使用DEBUG 模式测试手机端访问 HLV 地址：

---

FFmpeg 子进程推流

📌 步骤：

1. 安装 ffmpeg，并保证在系统路径中可用
2. 启动子进程，把每帧传给 FFmpeg（pipe）
3. FFmpeg 推送到 RTMP 地址（如：rtmp://server/live/stream）

---

代码（Python 推送检测帧）

import subprocess
import cv2

class StreamPusher:
    def __init__(self, width=960, height=720, fps=25, rtmp_url="rtmp://localhost/live/stream"):
        self.process = subprocess.Popen([
            'ffmpeg',
            '-y',
            '-f', 'rawvideo',
            '-pix_fmt', 'bgr24',
            '-s', f'{width}x{height}',
            '-r', str(fps),
            '-i', '-',  # 从 stdin 读取
            '-c:v', 'libx264',
            '-preset', 'ultrafast',
            '-f', 'flv',
            rtmp_url
        ], stdin=subprocess.PIPE)

    def write(self, frame):
        self.process.stdin.write(frame.tobytes())

    def close(self):
        self.process.stdin.close()
        self.process.wait()

✅ 使用方式：

pusher = StreamPusher(rtmp_url="rtmp://your_server/live/catstream")

while True:
    ret, frame = cap.read()
    annotated = detector.process(frame)  # 检测 + 标注
    pusher.write(annotated)

---

✅ Web 页面播放

只需要用 Video.js 或 hls.js 实现网页播放：

<video id="player" autoplay controls width="960" height="720">
  <source src="rtmp://your_server/live/catstream" type="rtmp/flv">
</video>

或使用中转转为 HLS (.m3u8) 或 WebRTC 以兼容所有浏览器。

我使用的是ZLMediaKit服务器，它支持非常丰富的流媒体协议，想在 HTML 网页中播放实时视频，推荐使用 HLS (HTTP Live Streaming) ，它是：
✅ 浏览器原生支持（通过 <video> 标签或 hls.js）
✅ ZLMediaKit 默认就支持 HLS 输出
✅ 相比 RTMP 更适合网页端播放

---

✅ 实现目标：检测结果 ➜ HLS 推送 ➜ HTML 页面播放

---

步骤：

① FFmpeg 推流至 ZLMediaKit（RTMP 输入）
你从 Python 使用 FFmpeg 把检测帧推到：

rtmp://<your_server_ip>/live/your_stream_name

ZLMediaKit 自动会转码成：

http://<your_server_ip>:8080/live/your_stream_name/hls.m3u8

---

② 网页中播放（用 HLS.js）

<video id="video" controls autoplay width="960" height="720"></video>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
  var video = document.getElementById('video');
  var videoSrc = 'http://<your_server_ip>:8080/live/your_stream_name/hls.m3u8';

  if (Hls.isSupported()) {
    var hls = new Hls();
    hls.loadSource(videoSrc);
    hls.attachMedia(video);
  } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = videoSrc;
  }
</script>

替换 <your_server_ip> 和 your_stream_name 即可。

---

③ FFmpeg + Python 推流代码（StreamPusher）

import subprocess
import cv2

class StreamPusher:
    def __init__(self, width=960, height=720, fps=25, rtmp_url="rtmp://127.0.0.1/live/cat"):
        self.width = width
        self.height = height
        self.process = subprocess.Popen([
            "ffmpeg",
            "-y",
            "-f", "rawvideo",
            "-vcodec", "rawvideo",
            "-pix_fmt", "bgr24",
            "-s", f"{width}x{height}",
            "-r", str(fps),
            "-i", "-",
            "-c:v", "libx264",
            "-preset", "ultrafast",
            "-tune", "zerolatency",
            "-f", "flv",
            rtmp_url
        ], stdin=subprocess.PIPE)

    def write(self, frame):
        if frame is not None and frame.shape[0] == self.height and frame.shape[1] == self.width:
            self.process.stdin.write(frame.tobytes())

    def close(self):
        self.process.stdin.close()
        self.process.wait()

---

🧪 示例地址结构（ZLMediaKit 默认）

协议	示例地址
RTMP 推流	rtmp://your_ip/live/cat
HTTP-FLV	http://your_ip:8080/live/cat.live.flv
HLS（推荐）	http://your_ip:8080/live/cat/hls.m3u8
WebRTC（更低延迟）	http://your_ip:8000/index/api/webrtc?app=live&stream=cat

下面是ZLMediaKit启动成功后的界面：

---

以下是一个完整的 基于 HLS（m3u8）格式的 HTML 页面 ，可直接在网页中播放你用 ZLMediaKit 推送的猫咪检测视频流

---

cat_stream.html（完整版 HTML，支持所有主流浏览器）

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>猫咪检测实时流</title>
    <style>
        body {
            background: #f0f0f0;
            font-family: sans-serif;
            text-align: center;
            padding-top: 30px;
        }
        video {
            border: 4px solid #333;
            border-radius: 8px;
        }
        h2 {
            color: #444;
        }
    </style>
</head>
<body>
    <h2>🐱 猫咪实时检测流（HLS）</h2>
    <video id="video" width="960" height="720" controls autoplay muted></video>

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

        if (Hls.isSupported()) {
            const hls = new Hls();
            hls.loadSource(streamUrl);
            hls.attachMedia(video);
            hls.on(Hls.Events.MANIFEST_PARSED, () => {
                video.play();
            });
        } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
            // Safari 支持原生 HLS
            video.src = streamUrl;
            video.addEventListener('loadedmetadata', () => {
                video.play();
            });
        } else {
            alert("当前浏览器不支持 HLS 播放！");
        }
    </script>
</body>
</html>

---

使用说明：

内容	填写
<你的服务器IP>	如：192.168.0.100 或公网 IP
cat	为你的推流名，如 rtmp://ip/live/cat 推的就用 cat

---

示例地址：

假设你推到：

rtmp://192.168.0.88/live/cat

那么播放地址是：

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

---

ZLMediaKit 默认支持 HTTP-FLV（.flv）播放 ，它的优点是：

✅ 延迟比 HLS 更低
✅ 浏览器兼容性好（配合 flv.js 使用）
✅ 使用方式简单（不需要编码器支持 WebRTC）

✅ cat_stream_flv.html（FLV 播放版本）

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>猫咪检测实时流（FLV）</title>
  <style>
    body {
      background: #f5f5f5;
      font-family: sans-serif;
      text-align: center;
      padding-top: 30px;
    }
    video {
      border: 3px solid #222;
      border-radius: 6px;
    }
    h2 {
      color: #444;
    }
  </style>
</head>
<body>
  <h2>🐱 猫咪检测实时流（FLV）</h2>
  <video id="videoElement" controls autoplay muted width="960" height="720"></video>

  <!-- 引入 flv.js -->
  <script src="https://cdn.jsdelivr.net/npm/flv.js@latest/dist/flv.min.js"></script>
  <script>
    const videoElement = document.getElementById('videoElement');
    const flvUrl = 'http://<你的服务器IP>:8080/live/cat.live.flv'; // 替换为你的实际流地址

    if (flvjs.isSupported()) {
      const flvPlayer = flvjs.createPlayer({
        type: 'flv',
        url: flvUrl
      });
      flvPlayer.attachMediaElement(videoElement);
      flvPlayer.load();
      flvPlayer.play();
    } else {
      alert("❌ 当前浏览器不支持 FLV 播放，请使用 Chrome 或新版 Edge");
    }
  </script>
</body>
</html>

---

使用说明

项目	内容
推流地址	rtmp://your_server_ip/live/cat（用 FFmpeg）
FLV 播放地址	http://your_server_ip:8080/live/cat.live.flv
视频标签	原生video标签 + flv.js 注入播放能力

---

示例

如果你推流到：

rtmp://192.168.0.88/live/cat

那么播放地址是：

http://192.168.0.88:8080/live/cat.live.flv

---

下一章节：把这个界面集成到主界面上去，然后给该界面设置一个开起关闭视频展示的功能

融合推流和视频展示的任务管理界面如下：

---