Streaming Raspberry Pi camera to HTML webpage using picamera and Flask

Question

I am trying to use the picamera API and Flask to implement a pure Python (live) stream of the continuous JPEG from the Raspberry Pi camera module to display it using a HTML template but I keep getting a "404 not found error"?

I'm a bit inexperienced with this particular subject, apologies in advance.

 app.route('/test/')
    def vid():
            with picamera.PiCamera() as camera:
                    stream = io.BytesIO()
                    for foo in camera.capture_continuous(stream, format='jpeg'):

                            stream.truncate()
                            stream.seek(0)

                            if process(stream):
                                break

Here is the HTML code:

 <img src="{{ url_for('vid') }}"width='950px' height='450px'>

Answer 1

I did some more reading, and don't think your approach will ever function as desired. Miguel Grinberg's article here outlines how to achieve Raspberry Pi camera streaming to Flask, and provides several useful examples. A simple, complete (non-Pi camera) program is provided which shows the use of a generator function and a multi-part response type to achieve animated streaming:

#!/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)

You can see that the /video-feed route returns a multipart response type object which is continually generated by the gen(camera) function. Without this approach I suspect a static image is all you'll ever see. There is a complete example of a picamera-to-Flask streaming application based on the above tutorial here.

Answer 2

Just change import camera to picamera. You have to install ffpmeg ang mpeg-streamer. If these two module not work then install uv4l also. After that restart it and it works