OpenCV实现摄像头网络实时视频流传输

文章目录


参考资料

基于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.查看浏览器

在这里插入图片描述

  • 1
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值