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

前情提要


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

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


已完成工作:

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

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

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

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

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

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


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

📺 架构简图:

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

效果图:

开始推流后推流服务器显示数据:
在这里插入图片描述

开始推流后FFMPEG显示数据
开始推流后FFMPEG显示数据:
[外链图片转存中...(img-CxlFshFU-1746599381281)]

电脑端访问 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.jshls.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-FLVhttp://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

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

融合推流和视频展示的任务管理界面如下:
在这里插入图片描述


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

DragonnAi

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值