文章目录


参考资料

​ 基于OpenCv+Django的网络实时视频流传输（前后端分离）_django opencv_北溪入江流的博客-CSDN博客

​ 【OpenCV】利用Flask+Python+OpenCV实现摄像头读取图像帧网页视频流_python读取监控网页的视频流_小风_的博客-CSDN博客

1.概述

​ 利用Flask+Python+OpenCV实现摄像头读取图像帧网页视频流

2.基本用例

步骤一：利用Flask框架获取视频流

from flask import Flask, render_template, Response
import cv2
"""
  本工具，是用openCV获取摄像头的实时视频流，实时显示在前端中
  注意：index.html 文件，需要存放在 templates目录中
"""

# 定义 VideoCamera 类表示一个视频摄像头对象
class VideoCamera(object):
    def __init__(self):
        # 通过 OpenCV 获取实时视频流
        self.video = cv2.VideoCapture(0)

    def __del__(self):
        # 在对象销毁时释放视频捕获对象
        self.video.release()

    def get_frame(self):
        # 从视频捕获中读取一帧图像
        success, image = self.video.read()

        # 因为 OpenCV 读取的图像并非 JPEG 格式，所以要用 motion JPEG 模式需要先将图像转码成 jpg 格式图像
        ret, jpeg = cv2.imencode('.jpg', image)

        # 返回转码后的 JPEG 图像数据（以字节形式）
        return jpeg.tobytes()


# 创建 Flask 网络应用对象
app = Flask(__name__, static_folder='./static')


# 定义主页路由
@app.route('/')
def index():
    # 使用 jinja2 模板渲染 index.html 文件并返回给客户端
    return render_template('index.html')


# 定义生成器函数 gen，用于不断输出视频流帧
def gen(camera):
    while True:
        # 从 VideoCamera 对象获取一帧图像
        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():
    # 返回 Response 对象，通过 gen(VideoCamera()) 生成视频流响应
    # 使用 multipart/x-mixed-replace 内容类型，其中 boundary=frame 表示分隔符为 frame 来分隔不同的数据部分
    return Response(gen(VideoCamera()), mimetype='multipart/x-mixed-replace; boundary=frame')


# 当脚本作为主程序运行时，启动 Flask 应用在 0.0.0.0:5000 地址上，并开启调试模式
if __name__ == '__main__':
    app.run(host='0.0.0.0', debug=True, port=5000)

补充：参数解释

  • 函数一开始，执行@app.route('/')下的函数，即index()，对应index.html
  • 在index.html中，图片的链接对应flask中的url_for()，在该函数中的video_feed()中构造了图片的链接
  • 在video_feed中，使用Response()函数返回数据，而由gen()函数流式地yeild出对应的数据
  • VideoCamera()中主要利用到OpenCV中的read函数，读取图像数据

步骤二：编写前端

  • 在templates目录下创建index.html文件
<html>
  <head>
    <title>Video Streaming Demonstration</title>
  </head>
  <body>
    <h1>Video Streaming Demonstration</h1>
    <img src="{{ url_for('video_feed') }}">
  </body>
</html>

说明：

​ 创建index.html文件，便于后端路由

步骤三：演示

1.查看控制台

在这里插入图片描述

2.查看浏览器

在这里插入图片描述

# opencv # 网络 # 人工智能
GitHub 加速计划 / opencv31 / opencv
219
20
下载
OpenCV: 开源计算机视觉库
最近提交(Master分支：1 个月前 )
563ef8ff Fix minEnclosingCircle 14 小时前
8f037381 Refactor minEnclosingCircle tests #27900 ### Pull Request Readiness Checklist Separate input points for tests Before this, next input points depended on previous ones and it was not obvious which input points specific test checked See details at https://github.com/opencv/opencv/wiki/How_to_contribute#making-a-good-pull-request - [x] I agree to contribute to the project under Apache 2 License. - [x] To the best of my knowledge, the proposed patch is not based on a code under GPL or another license that is incompatible with OpenCV - [x] The PR is proposed to the proper branch - [ ] There is a reference to the original bug report and related work - [ ] There is accuracy test, performance test and test data in opencv_extra repository, if applicable Patch to opencv_extra has the same branch name. - [ ] The feature is well documented and sample code can be built with the project CMake 15 小时前
Logo
GitCode 开源社区

新一代开源开发者平台 GitCode，通过集成代码托管服务、代码仓库以及可信赖的开源组件库，让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

cover

仓颉共学创作营正式启动！邀您共探新兴技术，解锁仓颉创作红利

avatar GitCode 开源社区
cover

从编程少年到开源领袖，奇淼如何用 AI 重新定义开发效率？｜CodeMaster#7

avatar GitCode 开源社区

研究生论文写作效率提升秘籍

在研究生论文写作领域，尤其针对CSDN社区内的计算机科学、AI和算法研究方向，提升效率已成为学术产出的关键。传统方法往往受限于时间管理和信息处理，AI工具的整合能注入智能化支持。本文基于公开调研数据和用户案例，剖析写作常见问题，并以沁言学术为例，探讨其机制与实用秘籍。重点在于技术深度与效率insights，旨在为CSDN用户提供可操作的路径，帮助研究生优化论文工作流。

avatar GitCode 开源社区