从零搭建基于Flask与YOLOv8的智能摄像头监控系统
最近在帮实验室搭建一个简单的安防监控原型时，我发现很多同学对如何将计算机视觉模型快速部署为Web服务感到困惑。本文将手把手教你用不到100行代码，把普通笔记本电脑摄像头变成能识别80种物体的智能监控系统，并通过网页实时查看检测结果。这个方案特别适合需要快速验证模型效果或进行小组演示的场景。
1. 环境准备与工具选型
在开始编码前，我们需要配置好开发环境。这个项目主要依赖Python生态中的几个核心库：
pip install flask opencv-python ultralytics- Flask：轻量级Web框架，相比Django更适合快速原型开发
- OpenCV：计算机视觉基础库，负责摄像头画面采集和图像处理
- Ultralytics：YOLOv8的官方实现，提供了预训练模型和简洁API
选择YOLOv8n（nano版本）是因为它在精度和速度间取得了良好平衡，在消费级硬件上也能流畅运行。下表对比了不同版本的特点：
| 模型版本 | 参数量 | 推理速度(FPS) | 适用场景 |
|---|---|---|---|
| YOLOv8n | 3.2M | 120+ | 嵌入式设备/实时检测 |
| YOLOv8s | 11.4M | 80 | 平衡型应用 |
| YOLOv8m | 26.3M | 45 | 高精度需求 |
提示：建议使用Python 3.8+环境，避免依赖冲突。如果安装过程中出现SSL错误，可以尝试添加
--trusted-host pypi.org --trusted-host files.pythonhosted.org参数。
2. 项目结构与核心代码解析
创建项目目录如下：
yolo-webcam/ ├── app.py # Flask主程序 ├── templates/ │ └── index.html # 前端页面 └── yolov8n.pt # 模型文件2.1 Flask应用骨架
app.py是项目的核心，我们采用模块化方式逐步构建：
from flask import Flask, render_template, Response import cv2 from ultralytics import YOLO app = Flask(__name__) model = YOLO("yolov8n.pt") # 加载预训练模型 @app.route('/') def index(): return render_template('index.html') if __name__ == '__main__': app.run(host='0.0.0.0', debug=True)这段代码初始化了Flask应用并加载了YOLO模型。host='0.0.0.0'参数允许同一局域网内的其他设备访问服务。
2.2 视频流处理逻辑
关键的技术点在于实现视频流的实时处理和推送：
def process_frame(frame): results = model(frame, verbose=False) # 禁用详细日志 return results[0].plot() # 返回带检测框的图像 def generate_frames(): cap = cv2.VideoCapture(0) # 0表示默认摄像头 while True: success, frame = cap.read() if not success: break processed = process_frame(frame) _, buffer = cv2.imencode('.jpg', processed) yield (b'--frame\r\n' b'Content-Type: image/jpeg\r\n\r\n' + buffer.tobytes() + b'\r\n') @app.route('/video_feed') def video_feed(): return Response(generate_frames(), mimetype='multipart/x-mixed-replace; boundary=frame')这里使用了Flask的流响应(Streaming Response)技术，通过生成器函数generate_frames()持续推送视频帧。multipart/x-mixed-replace是浏览器支持的多部分响应类型，允许不断更新图像内容。
3. 前端界面优化
基础的HTML页面只需要一个img标签接收视频流：
<!DOCTYPE html> <html> <head> <title>实时物体检测</title> <style> body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; } h1 { color: #2c3e50; text-align: center; } #video-feed { width: 100%; border: 2px solid #3498db; } .stats { background: #f8f9fa; padding: 10px; margin-top: 10px; } </style> </head> <body> <h1>实时物体检测监控</h1> <img id="video-feed" src="{{ url_for('video_feed') }}"> <div class="stats"> <p>检测模型: YOLOv8n | 支持80类物体识别</p> </div> </body> </html>4. 常见问题与性能优化
4.1 摄像头无法打开的解决方案
如果遇到cv2.VideoCapture(0)返回False的情况，可以尝试以下排查步骤：
- 检查摄像头权限（特别是Linux/Mac系统）
- 尝试不同的设备索引号（0,1,2等）
- 重启电脑释放可能被占用的设备
- 使用
ls /dev/video*命令（Linux）确认设备节点
4.2 提高帧率的技巧
当发现视频卡顿时，可以考虑这些优化手段：
# 在generate_frames()中添加以下设置 cap.set(cv2.CAP_PROP_FRAME_WIDTH, 640) # 降低分辨率 cap.set(cv2.CAP_PROP_FRAME_HEIGHT, 480) cap.set(cv2.CAP_PROP_FPS, 15) # 限制帧率 # 在模型推理时调整参数 results = model(frame, imgsz=320, conf=0.5) # 减小输入尺寸和提高置信度阈值4.3 局域网访问配置
要让其他设备访问服务，需要：
- 确保设备在同一网络
- 关闭防火墙或添加端口例外（默认5000）
- 使用
ipconfig/ifconfig查看本机IP - 通过
http://<你的IP>:5000访问
5. 功能扩展思路
基础版本运行稳定后，可以考虑添加这些实用功能：
- 检测日志记录：将识别到的物体及时间戳保存到数据库
def process_frame(frame): results = model(frame) for box in results[0].boxes: class_id = int(box.cls) label = model.names[class_id] print(f"{datetime.now()}: 检测到 {label}") return results[0].plot()- 报警机制：当出现特定物体时触发通知
TARGET_CLASSES = ['person', 'cell phone'] def process_frame(frame): results = model(frame) for box in results[0].boxes: if model.names[int(box.cls)] in TARGET_CLASSES: play_alert_sound() break return results[0].plot()- 多摄像头支持：通过路由参数切换视频源
@app.route('/video_feed/<int:camera_id>') def video_feed(camera_id): def generate(): cap = cv2.VideoCapture(camera_id) ... return Response(generate(), mimetype='...')这个项目最让我惊喜的是YOLOv8的易用性——只需几行代码就能获得不错的检测效果。在实际测试中，我发现调整输入分辨率对性能影响最大，在保持合理精度的前提下，将画面缩小到640x480能使树莓派这类低功耗设备也能流畅运行。
