yolo摄像头检测结果web界面视频实时播放展示(使用flask实现）_web 端如何展示 yolov5 实时检测的视频

作者：笔触狂放9 | 2024-03-06 01:34:27

踩

web 端如何展示 yolov5 实时检测的视频

文章目录

- - 前端界面代码
  - 检测代码

话不多说，先上效果。摄像头为博主手持的…
请添加图片描述

实现方案如下，欢迎评论区交流，希望有更好的方案。

前端界面代码

<!DOCTYPE html>
<html>
  <head>
    <title>视频</title>
  </head>
  <body>
    <h1>视频</h1>
    <img src="{{ url_for('video_feed') }}">
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11

检测代码

生成视频帧的函数generate_frames()不断地迭代产生视频帧数据。

具体来说，generate_frames()函数使用cv2.VideoCapture打开本地摄像头，然后进入一个无限循环。在每次循环中，它调用cap.read()读取摄像头的视频帧，然后调用process_frame()方法对该帧进行yolo的目标检测。

关键在于使用yield语句将每个处理后的帧数据输出为一个视频帧。这意味着在每次迭代时，生成器都会生成一个视频帧，并通过HTTP响应流发送给客户端。生成器会继续循环，读取下一帧并进行处理，然后再次通过yield语句生成下一个视频帧。

这样，当客户端请求视频流时，Response对象会使用generate_frames()生成器返回的视频帧数据作为响应内容，并设置相应的HTTP头部以指定数据类型和边界。

import cv2
from flask import Flask, render_template, Response
from ultralytics import YOLO
app = Flask(__name__)
model = YOLO("yolov8n.pt")
def process_frame(frame):
    # 在这里对视频帧进行处理
    # 这里只是一个示例，你可以根据需要自定义处理逻辑
    # 例如这里就返回yolo检测的结果
    # gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
    res = model(frame)  # predict on an image
    res_plotted = res[0].plot()
    return res_plotted

def generate_frames():
    cap = cv2.VideoCapture(0)

    while True:
        ret, frame = cap.read()

        if not ret:
            break

        processed_frame = process_frame(frame)

        # 将处理后的帧转换为JPEG格式
        ret, buffer = cv2.imencode('.jpg', processed_frame)
        frame_data = buffer.tobytes()

        # 使用生成器生成视频帧
        yield (b'--frame\r\n'
               b'Content-Type: image/jpeg\r\n\r\n' + frame_data + b'\r\n')

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/video_feed')
def video_feed():
    return Response(generate_frames(),
                    mimetype='multipart/x-mixed-replace; boundary=frame')

if __name__ == '__main__':
    app.run(debug=True)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/195268