欢迎访问我的网站,希望内容对您有用,感兴趣的可以加入免费知识星球。

Flask教程(二十二)在浏览器中播放rtsp实时流

Flask Web 迷途小书童 3年前 (2020-11-12) 9861次浏览 2个评论

软硬件环境

  • windows 10 64bit
  • anaconda3 with python 3.7
  • pycharm 2020.1.2
  • flask 1.1.2
  • opencv 4.4.0

视频看这里

此处是 youtube 的播放链接,需要科学上网。喜欢我的视频,请记得订阅我的频道,打开旁边的小铃铛,点赞并分享,感谢您的支持。

前言

当下,网络摄像机(IP Camera)的使用已经越来越广泛,大部分的网络摄像机都是基于 RTSP(Real Time Streaming Protocol )传输协议,可是很不幸的是,这种协议,原生浏览器都不支持。

本文介绍一种结合 flaskopencv 的方法来实现在浏览器中查看实时的视频流。

安装软件包

新建 python 虚拟环境,然后安装 flaskopencv

conda create -n flask python=3.7
conda activate flask
pip install flask opencv-python

编码

接下来就可以进行编码了,首先是 flask 后台服务,注释已经嵌入到了代码当中

from flask import Flask, render_template, Response
import cv2

app = Flask(__name__)

# VideoCapture可以读取从url、本地视频文件以及本地摄像头的数据
# camera = cv2.VideoCapture('rtsp://admin:admin@172.21.182.12:554/cam/realmonitor?channel=1&subtype=1')
# camera = cv2.VideoCapture('test.mp4')
# 0代表的是第一个本地摄像头,如果有多个的话,依次类推
camera = cv2.VideoCapture(0)

def gen_frames():
    while True:
        # 一帧帧循环读取摄像头的数据
        success, frame = camera.read()
        if not success:
            break
        else:
            # 将每一帧的数据进行编码压缩,存放在memory中
            ret, buffer = cv2.imencode('.jpg', frame)
            frame = buffer.tobytes()
            # 使用yield语句,将帧数据作为响应体返回,content-type为image/jpeg
            yield (b'--frame\r\n'
                   b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')

@app.route('/video_start')
def video_start():
    # 通过将一帧帧的图像返回,就达到了看视频的目的。multipart/x-mixed-replace是单次的http请求-响应模式,如果网络中断,会导致视频流异常终止,必须重新连接才能恢复
    return Response(gen_frames(), mimetype='multipart/x-mixed-replace; boundary=frame')

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

if __name__ == '__main__':
    app.run(host='0.0.0.0', debug=True)

其余部分的代码应该都很熟悉了,这里就不再解释了。接下来就是模板文件 index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
          integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Live Streaming</title>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-lg-8  offset-lg-2">
            <h3 class="mt-5">Live Streaming</h3>
            <img src="{{ url_for('video_start') }}" width="100%">
        </div>
    </div>
</div>
</body>
</html>

使用 img 标签就可以看到摄像头的图像。

最后我们启动 flask 服务,在浏览器中访问链接 http://127.0.0.1:5000,就可以看到摄像头的实时视频数据了

flask-opencv-streaming

源码下载

https://github.com/xugaoxiang/FlaskTutorial

Flask教程专题

更多 Flask 教程,请移步

https://xugaoxiang.com/category/python/flask/

喜欢 (0)

您必须 登录 才能发表评论!

(2)个小伙伴在吐槽
  1. 外网访问就很慢了,本地测试还不错
    匿名2021-04-26 13:42