vue+flask实现视频目标检测yolov5

开始做这个之前，了解一些vue的基础，然后对flask完全不知道。所以特别感谢很多博主的文章。
主要参考的是这篇文章：在WEB端部署YOLOv5目标检测（Flask+VUE），博主在GitHub上详细的代码给我一个很好的参考，他采用的是前后端分离开发的方式。
一.前端搭建
参考视频：vue+elementUI管理平台系列
参考博客：Flask + Vue 搭建简易系统步骤总结

vue-cli2.9.6+ElementUI搭建。（首先要安装node)
1.搭建脚手架：npm install -g vue-cli@2.9.6
2.创建一个基于webpack模板的项目vue init webpack 自定义项目名
3.运行项目npm run dev
二.后端搭建
主要是yolov5环境的一个搭建。

参考博客：（1）使用conda创建python的虚拟环境，介绍了如何安装与删除虚拟环境
（2）【小白CV】手把手教你用YOLOv5训练自己的数据集（从Windows环境配置到模型部署），我的配置就是根据这个来的。

1.首先是虚拟环境的配置（最好是在虚拟环境中搭建，血与泪的教训），conda create -n torch107 python=3.7
2.激活虚拟环境activate torch107
3.安装pytorch,首先已经安装anaconda3,yolov5需要pytorch1.6以上，pip3 install torch==1.8.1+cu102 torchvision==0.9.1+cu102 torchaudio===0.8.1 -f https://download.pytorch.org/whl/torch_stable.html
4.下载源码和安装环境依赖
源码指路：https://github.com/Sharpiless/Yolov5-Flask-VUE
安装依赖库：pip install -r requirements.txt，txt文件内容如下：

# pip install -r requirements.txt

# base ----------------------------------------
matplotlib>=3.2.2
numpy>=1.18.5
opencv-python>=4.1.2
Pillow
PyYAML>=5.3.1
scipy>=1.4.1
torch>=1.7.0
torchvision>=0.8.1
tqdm>=4.41.0

# logging -------------------------------------
tensorboard>=2.4.1
# wandb

# plotting ------------------------------------
seaborn>=0.11.0
pandas

# export --------------------------------------
# coremltools>=4.1
# onnx>=1.9.0
# scikit-learn==0.19.2  # for coreml quantization

# extras --------------------------------------
# Cython  # for pycocotools https://github.com/cocodataset/cocoapi/issues/172
pycocotools>=2.0  # COCO mAP
thop  # FLOPS computation

三.yolov5检测视频
参考视频：https://www.bilibili.com/video/BV1FK411K78w?t=1536，时间25：36以后
我的代码：
检测代码Detect.py：

import torch
import numpy as np
from models.experimental import attempt_load
from utils.general import non_max_suppression, scale_coords, letterbox
from utils.torch_utils import select_device
import cv2
from random import randint


class VideoCamera(object):
    def __init__(self):
        # 通过opencv获取实时视频流
        self.img_size = 640
        self.threshold = 0.4
        self.max_frame = 160
        self.video = cv2.VideoCapture("E:/videodata/1.mp4")  #换成自己的视频文件
        self.weights = 'weights/final.pt'   #yolov5权重文件
        self.device = '0' if torch.cuda.is_available() else 'cpu'
        self.device = select_device(self.device)
        model = attempt_load(self.weights, map_location=self.device)
        model.to(self.device).eval()
        model.half()
        # torch.save(model, 'test.pt')
        self.m = model
        self.names = model.module.names if hasattr(
            model, 'module') else model.names
        self.colors = [
            (randint(0, 255), randint(0, 255), randint(0, 255)) for _ in self.names
        ]


    def __del__(self):
        self.video.release()

    def get_frame(self):
        ret, frame = self.video.read()   #读视频
        im0, img = self.preprocess(frame)  #转到处理函数

        pred = self.m(img, augment=False)[0]  #输入到模型
        pred = pred.float()
        pred = non_max_suppression(pred, self.threshold, 0.3)

        pred_boxes = []
        image_info = {}
        count = 0
        for det in pred:
            if det is not None and len(det):
                det[:, :4] = scale_coords(
                    img.shape[2:], det[:, :4], im0.shape).round()

                for *x, conf, cls_id in det:
                    lbl = self.names[int(cls_id)]
                    x1, y1 = int(x[0]), int(x[1])
                    x2, y2 = int(x[2]), int(x[3])
                    pred_boxes.append(
                        (x1, y1, x2, y2, lbl, conf))
                    count += 1
                    key = '{}-{:02}'.format(lbl, count)
                    image_info[key] = ['{}×{}'.format(
                        x2 - x1, y2 - y1), np.round(float(conf), 3)]

        frame = self.plot_bboxes(frame, pred_boxes)


        # 因为opencv读取的图片并非jpeg格式，因此要用motion JPEG模式需要先将图片转码成jpg格式图片
        ret, jpeg = cv2.imencode('.jpg', frame)
        return jpeg.tobytes()

    def preprocess(self, img):

        img0 = img.copy()
        img = letterbox(img, new_shape=self.img_size)[0]
        img = img[:, :, ::-1].transpose(2, 0, 1)
        img = np.ascontiguousarray(img)
        img = torch.from_numpy(img).to(self.device)
        img = img.half()  # 半精度
        img /= 255.0  # 图像归一化
        if img.ndimension() == 3:
            img = img.unsqueeze(0)

        return img0, img

    def plot_bboxes(self, image, bboxes, line_thickness=None):
        tl = line_thickness or round(
            0.002 * (image.shape[0] + image.shape[1]) / 2) + 1  # line/font thickness
        for (x1, y1, x2, y2, cls_id, conf) in bboxes:
            color = self.colors[self.names.index(cls_id)]
            c1, c2 = (x1, y1), (x2, y2)
            cv2.rectangle(image, c1, c2, color,
                          thickness=tl, lineType=cv2.LINE_AA)
            tf = max(tl - 1, 1)  # font thickness
            t_size = cv2.getTextSize(
                cls_id, 0, fontScale=tl / 3, thickness=tf)[0]
            c2 = c1[0] + t_size[0], c1[1] - t_size[1] - 3
            cv2.rectangle(image, c1, c2, color, -1, cv2.LINE_AA)  # filled
            cv2.putText(image, '{}-{:.2f} '.format(cls_id, conf), (c1[0], c1[1] - 2), 0, tl / 3,
                        [225, 255, 255], thickness=tf, lineType=cv2.LINE_AA)
        return image

app.py代码：

from flask import *
import cv2
import logging as rel_log
from datetime import timedelta
from flask_cors import CORS
from Detect import VideoCamera

app = Flask(__name__)
cors = CORS(app, resources={r"/getMsg": {"origins": "*"}})  #解决跨域问题,vue请求数据时能用上

@app.route('/')
def index():
    return render_template('index.html')  #template文件夹下的index.html
def gen(camera):
    while True:
        frame = camera.get_frame()
        # 使用generator函数输出视频流， 每次请求输出的content类型是image/jpeg
        yield (b'--frame\r\n'
               b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n\r\n')

@app.route('/video_feed')  # 这个地址返回视频流响应
def video_feed():
    return Response(gen(VideoCamera()),
                    mimetype='multipart/x-mixed-replace; boundary=frame')

if __name__ == "__main__":
    app.run(host='127.0.0.1', port=5000, debug=True)

index.html:

<html>
  <head>
    <title>视频检测</title>
    <style>
      div{
        margin: 0 auto;
        text-align: center;
        width: 1200px;
        height: 800px;
      }
      img{
        width: 100%;
        height: 100%;
        
      }
    </style>
  </head>
  <body>
    <div>
      <h1>linjie</h1>
    <img src="{{ url_for('video_feed') }}">
    </div>
    
  </body>
</html>

运行后端python app.py
输入http://localhost:5000/，得到一个用flask实现的网页端目标检测。至于如何将这个视频与vue写的前端结合起来，还请大家给点意见，我是直接通过：response = { 'image_url': 'http://127.0.0.1:5000/video_feed' }，但总觉得哪里不妥。。。