将实时流发送到单独的前端

时间:2018-07-20 19:35:01

标签: python flask live-streaming

我的项目建议是创建一个图像流服务器,该服务器可以将图像流传输到网络,并且订阅该图像流更新的任何客户端都可以处理它认为合适的任何图像流。

我已阅读了Miguel Grinbreg的文章,该文章使用烧瓶将图像流式传输到网络 https://blog.miguelgrinberg.com/post/video-streaming-with-flask/page/0#

#!/usr/bin/env python
from flask import Flask, render_template, Response
from camera import Camera

app = Flask(__name__)

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

def gen(camera):
    while True:
        frame = camera.get_frame()
        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():
    return Response(gen(Camera()),
                    mimetype='multipart/x-mixed-replace; boundary=frame')

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

我在这里的问题是,后端似乎必须知道向哪个html页面(前端)发送数据(在上面的示例中知道index.html)

我想实现的是仅用于后端的流传输,但是对谁接收图像流或正在使用图像流一无所知。

我是Web开发的新手,所以想知道是否有关于如何实现此目标的建议。

1 个答案:

答案 0 :(得分:1)

不,您的概念有点错误。看一下代码,我觉得它是从这样的教程中复制而来的:https://www.hackster.io/ruchir1674/video-streaming-on-flask-server-using-rpi-ef3d75

现在,如果您仔细查看python代码,您会发现gen(camera)函数正在捕获图像并对其进行格式化,从而可以将其作为mjpeg流式传输到应用程序路由中。因此,如果您尝试访问http://your_server:PORT/video_feed,则可以查看该流。

我不知道您的index.html是如何编写的,但是查看python代码,我可以假定它看起来像这样:

 <html> 
 <head> 
   <title>Video Streaming </title> 
 </head> 
 <body> 
   <h1> Live Video Streaming </h1> 
   <img src="{{ url_for('video_feed') }}"> 
 </body> 
</html> 

您需要关注的唯一一行是<img src="{{ url_for('video_feed') }}">,在其中您将图像嵌入到index.html上,而来源是通过gen(camera)方法生成的视频。

因此,如果需要将其流式传输到单独的前端,则可以简单地使用<img>标签将图像嵌入到上面给出的源中。