伸缩自如的Flask [day 25] Flask with web cam

github:
https://github.com/wilsonsujames/webcam/tree/master/stream-video-browser

参考攻略:
https://blog.miguelgrinberg.com/post/video-streaming-with-flask

在介绍网路摄影机之前，可以先看一下python的生成器:

def yield_fun():
    a = 1
    b = 2
    yield a
    yield b

print(yield_fun())

generator = yield_fun()
print(next(generator))
print(next(generator))

可以发现yield_fun()为一个生成器物件，在每一个next(generator)中，产生该生成器中下一步的值。

可以在参考更详尽的说明:

https://blog.csdn.net/mieleizhi0522/article/details/82142856

再来可以看程序的部分:

<html>
  <head>
    <title>Pi Video Surveillance</title>
  </head>
  <body>
    <h1>Pi Video Surveillance</h1>
    <img style="width: 800px;height: 800px;" src="{{ url_for('video_feed') }}">
  </body>
</html>

可以发现图片img，由flask中video_feed function来提供。

在camera.py 的部分:

from cv2 import cv2 as cv2 

class VideoCamera(object):
    def __init__(self):
        #由opencv来获取预设为0 装置影像
        self.video = cv2.VideoCapture(0)

    def __del__(self):
        self.video.release()        

    def get_frame(self):
        ret, frame = self.video.read()

        ret, jpeg = cv2.imencode('.jpg', frame)

        return jpeg.tobytes()

由get_frame来获取每一帪的影像。

主程序webcam.py:

from flask import Flask, render_template, Response, jsonify
from camera import VideoCamera
from cv2 import cv2 as cv2 

app = Flask(__name__)

video_stream = VideoCamera()


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\r\n')
        

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


@app.route('/video_feed')
def video_feed():
    print(type(gen(video_stream)))
    print(gen(video_stream))
    

    return Response(gen(video_stream),
                mimetype='multipart/x-mixed-replace; boundary=frame')

if __name__ == '__main__':
    app.run(host='127.0.0.1', debug=True,port="5000")

利用gen这个生成器来将每一帪的图片产出，并且设定好header为串流的资讯。

影片版本: