opencv及びflaskを用いたwebストリーミングにおいて、ボタンでライブカメラの起動と終了を実現したい。

前提

flaskとopencvを用いてweb上でカメラの動画を視聴することができるプログラムを作成している。

実現したいこと

ボタン操作により、カメラの撮影、及び終了の機能を追加しようとしているがうまくいかない

該当のソースコード

python
1from flask import Flask,render_template,Response
2from camera import Camera
3app = Flask(__name__)
4
5@app.route("/")
6def index():
7    return render_template("index.html")
8
9def gen(camera):
10    while True:
11        frame = camera.get_frame()
12        if frame is not None:
13            yield (b"--frame\r\n"
14                b"Content-Type: image/jpeg\r\n\r\n" + frame.tobytes() + b"\r\n")
15        else:
16            print("frame is none")
17
18@app.route("/video_feed")
19def video_feed():
20    return Response(gen(Camera()),
21            mimetype="multipart/x-mixed-replace; boundary=frame")
22    
23if __name__ == "__main__":
24    app.run(host = "0.0.0.0",debug=True,threaded = True)

python
1import cv2
2class Camera(object):
3    def __init__(self):
4        self.video = cv2.VideoCapture(0)
5
6    def __del__(self):
7        self.video.release()
8
9    def get_frame(self):
10        success, image = self.video.read()
11        ret, frame = cv2.imencode('.jpg', image)
12        return frame

html
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="utf-8">
5        <title>リアルタイム画像</title>
6    </head>
7    <body>
8        <h3>ライブ配信</h3>
9        <img src = "{{url_for('video_feed')}}">
10    </body>
11</html>