保姆级教程：用Flask + YOLOv8n.pt 把电脑摄像头变成实时物体检测网页（附完整代码）

从零搭建基于Flask与YOLOv8的智能摄像头监控系统最近在帮实验室搭建一个简单的安防监控原型时我发现很多同学对如何将计算机视觉模型快速部署为Web服务感到困惑。本文将手把手教你用不到100行代码把普通笔记本电脑摄像头变成能识别80种物体的智能监控系统并通过网页实时查看检测结果。这个方案特别适合需要快速验证模型效果或进行小组演示的场景。1. 环境准备与工具选型在开始编码前我们需要配置好开发环境。这个项目主要依赖Python生态中的几个核心库pip install flask opencv-python ultralyticsFlask轻量级Web框架相比Django更适合快速原型开发OpenCV计算机视觉基础库负责摄像头画面采集和图像处理UltralyticsYOLOv8的官方实现提供了预训练模型和简洁API选择YOLOv8nnano版本是因为它在精度和速度间取得了良好平衡在消费级硬件上也能流畅运行。下表对比了不同版本的特点模型版本参数量推理速度(FPS)适用场景YOLOv8n3.2M120嵌入式设备/实时检测YOLOv8s11.4M80平衡型应用YOLOv8m26.3M45高精度需求提示建议使用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(host0.0.0.0, debugTrue)这段代码初始化了Flask应用并加载了YOLO模型。host0.0.0.0参数允许同一局域网内的其他设备访问服务。2.2 视频流处理逻辑关键的技术点在于实现视频流的实时处理和推送def process_frame(frame): results model(frame, verboseFalse) # 禁用详细日志 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 bContent-Type: image/jpeg\r\n\r\n buffer.tobytes() b\r\n) app.route(/video_feed) def video_feed(): return Response(generate_frames(), mimetypemultipart/x-mixed-replace; boundaryframe)这里使用了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 idvideo-feed src{{ url_for(video_feed) }} div classstats p检测模型: YOLOv8n | 支持80类物体识别/p /div /body /html4. 常见问题与性能优化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, imgsz320, conf0.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能使树莓派这类低功耗设备也能流畅运行。