猫咪如厕检测与分类识别系统系列～进阶【三】网页端算法启动架构及数据库实现
前情提要
家里养了三只猫咪，其中一只布偶猫经常出入厕所。但因为平时忙于学业，没法时刻关注牠的行为。我知道猫咪的如厕频率和时长与健康状况密切相关，频繁如厕可能是泌尿问题，停留过久也可能是便秘或不适。为了更科学地了解牠的如厕习惯，我计划搭建一个基于视频监控和AI识别的系统，自动识别猫咪进出厕所的行为，记录如厕时间和停留时长，并区分不同猫咪。这样即使我不在家，也能掌握猫咪的健康状态，更安心地照顾它们。
各位的关注与点赞是我持续分享的最大动力，衷心感谢大家的支持！
欢迎正在攻读硕博学位的同学，或是对人工智能充满热情的朋友们，关注我的个人公众号。在这里，我将持续更新博士期间阅读的前沿论文解读、项目实战经验分享，以及我对AI技术趋势的思考与探讨。
✨ 无论你是科研工作者、工程开发者，还是AI初学者，都能在这里找到干货与灵感。让我们一起交流、成长、探索人工智能的无限可能！
已完成工作：
✅猫咪如厕检测与分类识别系统系列【一】 功能需求分析及猫咪分类特征提取
✅猫咪如厕检测与分类识别系统系列【二】多图上传及猫咪分类特征提取更新
✅猫咪如厕检测与分类识别系统系列【三】 融合yolov11目标检测
✅猫咪如厕检测与分类识别系统系列【四】融合检测日志输出及前端展示界面制作
✅猫咪如厕检测与分类识别系统系列【五】信息存储数据库改进+添加猫咪页面制作+猫咪躯体匹配算法架构更新
✅猫咪如厕检测与分类识别系统系列【六】分类模型训练+混合检测分类+未知目标自动更新
✅猫咪如厕检测与分类识别系统系列【七】 当前阶段总结报告
✅猫咪如厕检测与分类识别系统系列【八】 检测推理事件整合+视频推流架构分析
✅猫咪如厕检测与分类识别系统系列【九】 视频检测区域在线绘制+支持摄像头+网络摄像头+整体构建【上】
✅猫咪如厕检测与分类识别系统系列【九】 视频检测区域在线绘制+支持摄像头+网络摄像头+整体构建【下】
✅猫咪如厕检测与分类识别系统系列【十】 视频检测区域动态监测及实时更新
✅猫咪如厕检测与分类识别系统系列【十一】区域进入事件相应逻辑鲁棒性更新
✅猫咪如厕检测与分类识别系统系列【十二】猫咪进出事件逻辑及日志优化【上】
✅猫咪如厕检测与分类识别系统系列【十三】猫咪进出事件逻辑及日志优化【下】
✅猫咪如厕检测与分类识别系统系列～进阶【一】视频流推流及网页实时展示
✅猫咪如厕检测与分类识别系统系列～进阶【二】推流视频嵌入主界面实时播放控制
本小节目标：构建网页端实时算法启动架构及数据库实现
进阶部分最终目标：把算法启动，摄像头管理都做在系统上。然后使得整个系统从“脚本运行”变为“系统级服务/平台管理”，适合长期运行与远程管理。
目标描述
| 功能 | 实现方式 |
|---|---|
| 自动启动算法 | 开机后自动运行（如 systemd、Windows 服务） |
| 摄像头管理 | 网页界面添加/禁用摄像头、切换源 |
| 状态监控 | 是否运行、摄像头是否连接、最近日志等 |
| 重启控制 | Web 远程控制算法进程重启或更新 |
架构
[摄像头] ─► [算法模块：检测+分类+追踪]
│
├─► 记录系统（SQLite）
├─► 推流模块（FFmpeg ➜ ZLMediaKit）
└─► Web 控制界面（Flask + JS）
【系统控制】
│
├─ 后台启动脚本（Linux: systemd / Windows: 注册服务）
├─ 配置文件读取摄像头/IP/模型路径等
└─ 日志 & 异常提醒模块
把算法启动关闭，摄像头管理，推流等操作都做在网站上进行操作。可以通过 Web 管理界面（基于 Flask + HTML/JS） 实现以下功能的可视化控制：
✅ 功能目标
| 功能模块 | 可操作内容 |
|---|---|
| 摄像头管理 | 添加 / 删除 / 启动 / 停止摄像头 |
| 算法启动 / 停止 | 控制目标检测分类等主流程运行状态 |
| 推流管理 | 启用/关闭 HLS 或 FLV 推流 |
| 实时状态 | 显示运行中、异常、摄像头离线等状态 |
| 设置中心 | 修改参数、模型路径、区域配置等 |
✅ 实现思路
- Flask 提供控制接口
@app.route("/control/start", methods=["POST"])
def start_algorithm():
# 启动算法主线程或子进程
return jsonify(success=True)
@app.route("/control/stop", methods=["POST"])
def stop_algorithm():
# 停止线程 / 杀掉子进程
return jsonify(success=True)
- 摄像头状态管理接口
@app.route("/camera/list")
def list_cameras():
# 从配置或数据库读取摄像头列表
return jsonify(cameras=[...])
@app.route("/camera/toggle", methods=["POST"])
def toggle_camera():
# 启用/禁用某个 RTSP 摄像头源
...
- 前端界面控制示意（HTML）
<h3> 算法状态h3>
<button onclick="startAlgo()">启动button>
<button onclick="stopAlgo()">停止button>
<h3> 摄像头h3>
<div id="cameraList">div>
<script>
function startAlgo() {
fetch("/control/start", {method: "POST"});
}
function stopAlgo() {
fetch("/control/stop", {method: "POST"});
}
function loadCameras() {
fetch("/camera/list")
.then(res => res.json())
.then(data => {
document.getElementById("cameraList").innerHTML =
data.cameras.map(c => `${c.name} - ${c.url}`).join('');
});
}
loadCameras();
script>
接下来就构建一整套猫咪如厕检测系统的 Web 管理平台 ，具备以下完整功能模块 ✅
✅ 平台功能总览
算法控制模块
-
✅ 启动 / 停止算法检测主程序
-
✅ 查看当前运行状态 / 日志信息
摄像头管理模块
-
✅ 添加 / 编辑 / 删除摄像头（RTSP/USB）
-
✅ 开启/关闭单个摄像头检测流程
-
✅ 实时状态展示（在线 / 离线 / 异常）
推流控制模块
-
✅ 启用 / 停止推流到 ZLMediaKit（FLV/HLS）
-
✅ 显示当前推流地址 & 播放状态
设置中心
-
✅ 修改模型路径、识别阈值、如厕区域等参数
-
✅ 动态配置保存至数据库或 JSON
仪表盘整合
-
✅ 图表数据整合
-
✅ 可跳转查看每个摄像头的实时预览 / 状态页
技术结构规划
| 层级 | 技术 |
|---|---|
| 前端 | Flask + Bootstrap + JS (fetch) |
| 后端 | Flask + SQLite + 多线程控制 |
| 子模块 | 线程管理器（摄像头进程）、推流控制器、算法封装 |
| 配置 | 使用 JSON / 数据库存储摄像头列表与参数配置 |
项目目录建议
project/
├── main.py # 启动入口（Flask + 控制线程）
├── camera_manager.py # 摄像头管理逻辑
├── algorithm_runner.py # 单摄像头算法运行线程
├── stream_pusher.py # 推流器
├── templates/
│ ├── index.html # 如厕记录页
│ ├── dashboard.html # 图表仪表盘
│ └── platform.html # 控制平台页 ✅
├── static/
│ └── js/ platform.js # 控制中心JS（启动、控制）
├── config/
│ └── cameras.json # 摄像头配置
└── data/
└── toilet_logs.db # 数据库
✅ 接下来我可以做什么：
-
创建
/platform页面并美化界面 -
后端实现算法线程启动/终止
-
摄像头配置管理
-
推流启用关闭控制
-
实时状态可视化
非常棒，咱们接下来就构建一整套猫咪如厕检测系统的 Web 管理平台** ，具备以下完整功能模块 ✅
✅ 平台功能总览（你将拥有的）
算法控制模块
-
✅ 启动 / 停止算法检测主程序
-
✅ 查看当前运行状态 / 日志信息
摄像头管理模块
-
✅ 添加 / 编辑 / 删除摄像头（RTSP/USB）
-
✅ 开启/关闭单个摄像头检测流程
-
✅ 实时状态展示（在线 / 离线 / 异常）
推流控制模块
-
✅ 启用 / 停止推流到 ZLMediaKit（FLV/HLS）
-
✅ 显示当前推流地址 & 播放状态
设置中心
-
✅ 修改模型路径、识别阈值、如厕区域等参数
-
✅ 动态配置保存至数据库或 JSON
仪表盘整合
-
✅ 图表数据整合
-
✅ 可跳转查看每个摄像头的实时预览 / 状态页
技术结构规划
| 层级 | 技术 |
|---|---|
| 前端 | Flask + Bootstrap + JS (fetch) |
| 后端 | Flask + SQLite + 多线程控制 |
| 子模块 | 线程管理器（摄像头进程）、推流控制器、算法封装 |
| 配置 | 使用 JSON / 数据库存储摄像头列表与参数配置 |
项目目录
project/
├── main.py # 启动入口（Flask + 控制线程）
├── camera_manager.py # 摄像头管理逻辑
├── algorithm_runner.py # 单摄像头算法运行线程
├── stream_pusher.py # 推流器
├── templates/
│ ├── index.html # 如厕记录页
│ ├── dashboard.html # 图表仪表盘
│ └── platform.html # 控制平台页
├── static/
│ └── js/ platform.js # 控制中心JS（启动、控制）
├── config/
│ └── cameras.json # 摄像头配置
└── data/
└── toilet_logs.db # 数据库
✅ 检测任务配置功能（你想要实现的）
| 参数项 | 描述 |
|---|---|
| 摄像头选择 | 从已有摄像头中选一个（RTSP/USB） |
| 模型选择 | 可选择不同 YOLO 模型（检测/分割/分类） |
| ⚙️ 功能配置 | 是否启用检测 / 分类 / 推流 / 识别等 |
| ️ 区域配置 | 指定如厕区域坐标（或使用已有区域） |
| 任务名称 / 备注 | 自定义识别任务的命名与说明 |
✅ 页面
<h3>➕ 添加检测任务h3>
<form method="POST" action="/task/create">
摄像头：
<select name="camera_id">
<option value="1">厕所1号（RTSP）option>
...
select>
模型类型：
<select name="model">
<option value="yolov11.pt">YOLOv11option>
<option value="segment.pt">分割模型option>
select>
✅ 功能启用：
<label><input type="checkbox" name="enable_detection" checked> 检测label>
<label><input type="checkbox" name="enable_classify" checked> 分类label>
<label><input type="checkbox" name="enable_stream"> 推流label>
️ 区域坐标：
<input name="region_x1" placeholder="x1">
<input name="region_y1" placeholder="y1">
<input name="region_x2" placeholder="x2">
<input name="region_y2" placeholder="y2">
任务名称：
<input name="task_name" placeholder="任务说明">
<button type="submit">添加任务button>
form>
后端处理逻辑
-
提交表单 →
/task/createPOST 请求 -
解析参数 → 启动一个新检测线程（摄像头+模型+配置）
-
保存任务信息到数据库 / 配置文件（支持持久化）
暂时使用一个摄像头，后续设计好摄像头管理后可以选择，我们先围绕单摄像头任务管理 设计“添加检测任务”功能
✅ 当前阶段：任务创建核心功能
| 功能模块 | 支持内容 |
|---|---|
| ✅ 固定摄像头源 | 先用默认 RTSP 或 USB 摄像头 |
| ✅ 可选模型路径 | 手动选择使用的模型文件（如 YOLOv11.pt） |
| ✅ 启用功能模块 | 检测 / 分类 / 推流开关 |
| ✅ 自定义如厕区域 | 提供坐标 x1 y1 x2 y2 |
| ✅ 自定义任务名 | 用于后台标识、日志保存等 |
网页界面示意（/task/new）
| 字段 | 示例输入 |
|---|---|
| 模型路径 | models/yolov11.pt |
| 功能 | ✅ 检测 ✅ 分类 ✅ 推流 |
| 区域坐标 | x1=100 y1=200 x2=500 y2=600 |
| 任务名 | 厕所检测任务1 |
接下来：
- 创建
/task/new页面（任务创建表单） - 后端
/task/create路由：接收并保存配置 - 启动任务线程（封装算法推理逻辑+摄像头接入）
- （后续）任务管理界面
/platform/tasks
from flask import Flask, render_template, request, redirect, url_for, jsonify
import os
import json
# 创建 Flask 应用
app = Flask(__name__)
# 任务配置文件路径
TASK_CONFIG_PATH = "/mnt/data/detection_tasks.json"
# 初始化任务配置文件（如果不存在）
if not os.path.exists(TASK_CONFIG_PATH):
with open(TASK_CONFIG_PATH, "w") as f:
json.dump([], f)
@app.route("/task/new")
def new_task():
return """
添加检测任务
➕ 添加检测任务
"""
@app.route("/task/create", methods=["POST"])
def create_task():
task = {
"name": request.form.get("task_name"),
"model_path": request.form.get("model_path"),
"enable_detection": "enable_detection" in request.form,
"enable_classify": "enable_classify" in request.form,
"enable_stream": "enable_stream" in request.form,
"region": {
"x1": int(request.form.get("region_x1", 0)),
"y1": int(request.form.get("region_y1", 0)),
"x2": int(request.form.get("region_x2", 0)),
"y2": int(request.form.get("region_y2", 0)),
}
}
with open(TASK_CONFIG_PATH, "r+") as f:
data = json.load(f)
data.append(task)
f.seek(0)
json.dump(data, f, indent=2)
f.truncate()
return redirect(url_for("new_task"))
app.run(host="0.0.0.0", port=5001)
STDOUT/STDERR
* Serving Flask app '__main__'
* Debug mode: off
[31m[1mWARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.[0m
* Running on all addresses (0.0.0.0)
* Running on http://127.0.0.1:5001
* Running on http://10.129.66.192:5001
[33mPress CTRL+C to quit[0m