Sending live streaming to a separate front end

The propose of my project is to create a image streaming server, which can stream image to network and any client end that subscribe the image streaming update can handle the image stream for whichever propose it seem fit.

I've read the post from Miguel Grinbreg, which use flask to stream image to network 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)

What my issue here, is that it seems the back-end has to have knowledge of which html page (front end) is sending data to ( It's aware of the index.html in the above example)

What I'd like to achieve is the back-end only account for streaming, but remain un-aware of who is receiving the image stream or using it.

I am new to the web-development, so wondering if there's any suggestion on how do I achieve this.

Solution

No, you've got the concept kind of wrong. Looking at the code, I feel it is copied from a tutorial such as this : https://www.hackster.io/ruchir1674/video-streaming-on-flask-server-using-rpi-ef3d75

Now, if you carefully look at the python code, you will observe that the gen(camera) function is capturing and formatting the image in such a way that it can be streamed onto an app route as a mjpeg. So, if you try to visit http://your_server:PORT/video_feed then you will be able to view the stream.

I don't know how your index.html is written, but looking at the python code, I can assume that it looks something like this :

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

The only line of your concern is <img src="{{ url_for('video_feed') }}"> where you embed an image onto the index.html and the source is the video generated by gen(camera) method.

So if you need to stream this to a separate frontend, you can simply use the <img> tag to embed the image in it with the source given above.