使用Flask+OpenCV实现浏览器/微信小程序的视频流传输-Toy模板网

这篇具有很好参考价值的文章主要介绍了使用Flask+OpenCV实现浏览器/微信小程序的视频流传输。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

使用Flask+OpenCV实现浏览器和微信小程序的视频流传输

前言

近期在做的东西涉及到实时视频的处理，碰到一些问题，因此将之记录下来，便于日后翻看，同时也希望能给遇到同样问题的小伙伴提供帮助。

一、Flask+浏览器实现

实现代码如下：

分为 app.py 和index.html。

1. Flask代码示例

# -----------------------------
# app.py
# -----------------------------
from flask import Flask, render_template, Response
import cv2

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)
        return jpeg.tobytes()

app = Flask(__name__)

@app.route('/')  # 主页
def index():
    # jinja2模板，具体格式保存在index.html文件中
    return render_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='0.0.0.0', debug=True， port=5000)

2. 浏览器HTML代码示例

<!-- ———————————————————————— -->
<!-- index.html -->
<!-- ———————————————————————— -->
<html>
  <head>
    <title>Video Streaming Demonstration</title>
  </head>
  <body>
    <!-- 使用Jinja2模板，指向路由video_feed -->
    <img src="{{ url_for('video_feed') }}">
  </body>
</html>

此处需要注意的是，cv2这个库的版本有很多，如果出现一些bug一直解决不了，建议降低版本试试。

pip install opencv-python== 3.4.8.29

二、 Flask+微信小程序实现

微信小程序支持展示以下几种格式的视频流：

FLV格式：FLV（Flash Video）是一种Adobe Flash技术中使用的视频流格式，通常使用在Web播放器和一些视频网站上。微信小程序中可以通过live-player组件来展示FLV格式的视频流。
HLS格式：HLS（HTTP Live Streaming）是一种苹果公司开发的视频流协议，通过分割视频流为短片段，利用HTTP协议传输，实现了较好的稳定性和兼容性。微信小程序中可以通过live-player组件来展示HLS格式的视频流。
RTMP格式：RTMP（Real Time Messaging Protocol）是Adobe公司开发的一种视频流协议，广泛应用于直播领域。微信小程序中可以通过live-player组件来展示RTMP格式的视频流。

需要注意的是，展示视频流需要满足微信小程序的一些要求，例如视频流地址需要使用https协议、服务器需要支持CORS跨域等。如果使用的是自己的服务器来提供视频流，需要确保服务器满足这些要求。

在微信小程序中展示实时视频流，可以使用小程序自带的live-player组件。live-player组件支持播放RTMP、HLS、FLV等格式的实时视频流。需要将实时视频流的地址传递给live-player组件的src属性，并设置一些其他的属性，例如mode、autoplay、muted等，来控制视频的播放行为。

1. 微信小程序前端代码示例

前端中调用视频流服务：在微信小程序的前端中，可以使用live-player组件来播放视频流。在live-player组件的src属性中，设置Flask应用程序的视频流服务地址即可。

<live-player src="https://your_flask_server.com/video_feed" mode="live"></live-player>

2. 后端Flask代码示例：

import cv2
from flask import Flask, Response
from flask_cors import CORS

app = Flask(__name__)
# 进行跨域处理
CORS(app)

# 用于不断地读取摄像头或视频文件中的帧，并将其转换成JPG格式的图片
def generate_frames():
    camera = cv2.VideoCapture(0)  # 打开摄像头
    while True:
        success, frame = camera.read()
        if not success:
            break
        ret, buffer = cv2.imencode('.jpg', frame)
        frame = buffer.tobytes()
        yield (b'--frame\r\n'
               b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')

@app.route('/video_feed')
def video_feed():
    # 这是一种特殊的HTTP响应格式，用于在响应数据中分隔多个数据块。
    # Flask应用程序会将这些数据块发送给客户端，客户端可以将它们转换成视频流进行播放。
    return Response(generate_frames(),
                    mimetype='multipart/x-mixed-replace; boundary=frame')

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

三、Flask+uni-app小程序实现

上面第二部分提到的，是针对Flask和微信小程序的视频流展示方式，如果要在uni-app小程序中展示实时视频流，需要使用uni-app提供的组件来实现。

在uni-app中，可以使用live-pusher和live-player组件来实现视频流的推送和播放。

1. uni-app代码示例

live-pusher组件用于推送实时视频流到服务器（前端视频流—>服务器），需要在小程序中使用微信开发者工具提供的摄像头API获取摄像头的视频流，并将其传递给live-pusher组件。下面是一个简单的示例代码：

<live-pusher url="rtmp://your_server.com/live/stream" mode="RTC"></live-pusher>

在上面的代码中，url属性设置了视频流推送的地址，mode属性设置了推送模式，这里使用的是RTC模式。可以根据自己的实际情况设置这些属性。

live-player组件用于播放服务器端推送过来的视频流（服务器视频流—>前端），在小程序中将服务器端的视频流地址传递给live-player组件即可。下面是一个简单的示例代码：

<live-player src="http://your_server.com/live/stream" mode="live"></live-player>

在上面的代码中，src属性设置了视频流的地址，mode属性设置了播放模式，这里使用的是live模式。可以根据自己的实际情况设置这些属性。

需要注意的是，在实际应用中，可能需要对视频流进行编码、解码、压缩等处理，以便在网络上高效地传输。

2. Flask代码示例

import cv2
from flask import Flask, Response
from flask_cors import CORS

app = Flask(__name__)
# 进行跨域处理
CORS(app)

# 用于不断地读取摄像头或视频文件中的帧，并将其转换成JPG格式的图片
def generate_frames():
    camera = cv2.VideoCapture(0)  # 打开摄像头
    while True:
        success, frame = camera.read()
        if not success:
            break
        ret, buffer = cv2.imencode('.jpg', frame)
        frame = buffer.tobytes()
        yield (b'--frame\r\n'
               b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')

@app.route('/video_feed')
def video_feed():
    # 这是一种特殊的HTTP响应格式，用于在响应数据中分隔多个数据块。
    # Flask应用程序会将这些数据块发送给客户端，客户端可以将它们转换成视频流进行播放。
    return Response(generate_frames(),
                    mimetype='multipart/x-mixed-replace; boundary=frame')

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