質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

OpenCV

OpenCV(オープンソースコンピュータービジョン)は、1999年にインテルが開発・公開したオープンソースのコンピュータビジョン向けのクロスプラットフォームライブラリです。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

1回答

2650閲覧

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

Fukada

総合スコア13

Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

OpenCV

OpenCV(オープンソースコンピュータービジョン)は、1999年にインテルが開発・公開したオープンソースのコンピュータビジョン向けのクロスプラットフォームライブラリです。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2020/11/17 01:45

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 %}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

FiroProchainezo

2020/11/20 05:37

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

2020/11/22 10:48

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

回答1

0

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>

投稿2020/11/24 02:25

FiroProchainezo

総合スコア2392

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Fukada

2020/12/03 10:08

忙しくてなかなか手がつけられずベストアンサーの選択ができておりませんでした申し訳ございません。 無事成功いたしました。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問