Flaskで録画開始ボタンと停止ボタンを実装したい

Flaskで録画開始ボタンと停止ボタンを実装したいのですが、やり方が分かりません。
ボタンからTrueとFalseを受け取ってif文を使って実装したいと考えています。
どなたかご教授お願いします。

app.py
1#app.py
2
3from flask import Flask, render_template, request, Response, redirect, url_for, Markup
4from flask_bootstrap import Bootstrap
5import torch
6import torch.nn as nn
7
8import os
9import cv2
10import sys
11
12sys.path.append("../")
13from vision.nets.mobilenet_v2_ssd_lite import create_mobilenetv2_ssd_lite, create_mobilenetv2_ssd_lite_predictor
14
15app = Flask(__name__)
16net_type = 'mb2-ssd-lite'
17model_path = '../models/mb2-ssd-lite-Epoch-149-Loss-2.65.pth'
18label_path = '../models/voc-model-labels.txt'
19class_names = [name.strip() for name in open(label_path).readlines()]
20num_classes = len(class_names)
21
22Bootstrap(app)
23
24net = create_mobilenetv2_ssd_lite(len(class_names), is_test=True)
25
26net.load(model_path)
27
28predictor = create_mobilenetv2_ssd_lite_predictor(net, candidate_size=200)
29webcamid = 0
30cap = cv2.VideoCapture(webcamid)
31print('fps: ' + str(cap.get(cv2.CAP_PROP_FPS)))
32
33@app.route('/capture', methods=['POST'])
34def getFrames():
35    
36    
37    img_array = []
38    # with app.test_request_context():
39    #     req = request
40    while True:
41        ret, image = cap.read()
42        # image = cv2.cvtColor(image, cv2.COLOR_BGR2RGB)
43        image = cv2.flip(image, 1)
44        boxes, labels, probs = predictor.predict(image, 10, 0.4)
45        for i in range(boxes.size(0)):
46            box = boxes[i, :]
47            label = f'{class_names[labels[i]]}: {probs[i]:.2f}'
48            cv2.rectangle(image, (box[0], box[1]), (box[2], box[3]), (0, 255, 0), 2)
49            cv2.putText(image, label,
50                    (box[0]+10, box[1]+40),
51                    cv2.FONT_HERSHEY_SIMPLEX,
52                    1,  # font scale
53                    (255, 0, 255),
54                    2)  # line type
55        img_array.append(image)
56        height, width, layers = image.shape
57        size = (width, height)
58        name = output.mp4
59
60        out = cv2.VideoWriter(name, cv2.VideoWriter_fourcc(*'MP4V'), 5.0, size)
61
62        for i in range(len(image_array)):
63            out.write(img_array[i])
64        out.release
65
66       
67        ret, jpg = cv2.imencode('test.jpg', image)
68        yield b'--boundary\r\nContent-Type: image/jpeg\r\n\r\n' + jpg.tostring() + b'\r\n\r\n'
69
70
71@app.route('/', methods=['GET', 'POST'])
72def index():
73    return render_template('index.html')
74
75@app.route('/video_feed')
76def video_feed():
77    return Response(getFrames(), mimetype='multipart/x-mixed-replace;boundary=boundary')
78
79
80
81import webbrowser
82webbrowser.get().open('http://localhost:5000')
83if __name__ == '__main__':
84    app.run(debug=True, host='localhost', port=5000)
85
86
87#index.html
88
89{% extends "bootstrap/base.html" %}
90
91{% block content %}
92
93<div id="container">
94    <img id="videoElement" src="{{ url_for('video_feed') }}"/>
95    <form method="POST" action="/capture">
96        <a id="start_capture"><button class="btn btn-default">start</button></a>
97        <a id="stop_capture"><button class="btn btn-default">stop</button></a>
98        <!-- <input type="submit" name="capture1" value="start">
99        <input type="submit" name="capture2" value="stop"> -->
100    </form>
101
102</div>
103
104{% endblock content %}
105
106{% block scripts %}
107{{ super() }}
108<script>
109$(function (){
110    $("a#start_capture").bind("click", function(){
111        $.getJSON("/start_capture", function (data){
112            
113        });
114    
115    });
116    return false;
117});
118
119$(function (){
120    $("a#stop_capture").bind("click", function(){
121        $.getJSON("/stop_capture", function (data){
122
123        });
124    });
125    return false;
126});
127</script>
128
129
130{% endblock scripts %}

FiroProchainezo

2020/11/20 05:37

この質問は、「 $.getJSON("/start_capture"」や「$.getJSON("/stop_capture"」をFlask側で受け取るためのエンドポイントを作りたいということでしょうか？

Fukada

2020/11/22 10:48

返信遅れてしまい申し訳ございません。 FiroProchaiinezo様の解釈で合っております。

行動規範の内容に同意します

回答1件

jQueryのgetJSONから値を受け取り、Flask側から値を返すプログラムのサンプルを作成しました。

/start_capture, /stop_captureエンドポイントを作りたいという回答でしたが、質問文にボタンからTrueとFalseを受け取ってif文を使ってとありましたので、エンドポイントは1つで受け取った値に従い処理を変えるものを書いています。
エンドポイントを別にしたい場合は、@app.route()を新しく作り、$.getJSON("{{ url_for('post_test') }}"のpost_test部分を新しく作った方に変更してください。

python
1# app.py
2@app.route('/test')
3def test():
4    return render_template('index.html')
5
6
7@app.route('/post_test', methods=['GET'])
8def post_test():
9    ret = request.args.get('data')
10    result = ''
11    if ret == 'true':
12        print(True)
13        result = True
14    else:
15        print(False)
16        result = False
17    return jsonify({'result': result})
18

html
1<!-- index.html -->
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5    <meta charset="UTF-8">
6    <title>getJSON example</title>
7</head>
8<body>
9    <button class="btn btn-default" id="start_capture">start</button>
10    <button class="btn btn-default" id="stop_capture">stop</button>
11    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
12    <script type="text/javascript">
13        $("#start_capture").on("click", function(){
14            $.getJSON("{{ url_for('post_test') }}",{data: true},
15                function (data){
16                    console.log(data);
17            });
18        });
19        $("#stop_capture").on("click", function(){
20            $.getJSON("{{ url_for('post_test') }}",{data: false},
21                function (data){
22                    console.log(data);
23            });
24        });
25
26    </script>
27</body>
28</html>