将直播流发送到单独的前端
Sending live streaming to a separate front end
我的项目的提议是创建一个图像流服务器,它可以将图像流式传输到网络,并且订阅图像流更新的任何客户端都可以处理任何看起来合适的提议的图像流。
我读过 Miguel Grinbreg 的 post,它使用 flask 将图像流式传输到网络
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 在上面的例子)
我想要实现的是后端仅负责流式传输,但不知道谁正在接收或使用图像流。
我是网络开发的新手,所以想知道是否有关于如何实现这一目标的建议。
不,你的概念有点错误。看着代码,我觉得它是从这样的教程中复制的: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>
标签将图像与上面给出的源一起嵌入其中。
我的项目的提议是创建一个图像流服务器,它可以将图像流式传输到网络,并且订阅图像流更新的任何客户端都可以处理任何看起来合适的提议的图像流。
我读过 Miguel Grinbreg 的 post,它使用 flask 将图像流式传输到网络 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 在上面的例子)
我想要实现的是后端仅负责流式传输,但不知道谁正在接收或使用图像流。
我是网络开发的新手,所以想知道是否有关于如何实现这一目标的建议。
不,你的概念有点错误。看着代码,我觉得它是从这样的教程中复制的: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>
标签将图像与上面给出的源一起嵌入其中。