i am new to python and flask and i want to a facemask detection in webapp. But, i faced some problems which is i cannot change the image to video camera when button clicked. Is there anything wrong with my code. Below is my html and python code.
<html>
<head>
<link rel = "stylesheet" type="text/css" href="/static/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script>
function stop(){
$("#ciao").attr("src", "/static/1.png");
$("#stop").attr("class","btn btn-danger active");
$("#start").attr("class","btn btn-outline-success");
}
function start(){
$("#ciao").attr("src", "{{url_for('video')}}");
$("#start").attr("class","btn btn-success active");
$("#stop").attr("class","btn btn-outline-danger");
}
</script>
</head>
<body>
<div class="">
<button id="start" onclick= "start()" class="btn btn-outline-success"><i class="fa fa-video-camera"></i> start</button>
<button id = "stop" onclick="stop()" class="btn btn-danger active"><i class="fa fa-stop"></i> Stop</button>
</div>
<img id ="ciao" class ="image1" src="/static/1.png">
</body>
<html>
App.py
from flask import Flask, render_template,Response
from cameraDetection import Video
app = Flask(__name__)
output=[]
@app.route('/')
@app.route('/FaceMaskDetection_HomePage')
def homepage():
return render_template("FaceMaskDetection_HomePage.html",result = output)
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('/video')
def video():
return Response(gen(Video()),
mimetype='multipart/x-mixed-replace; boundary=frame')
app.run(debug=True)
cameraDetection.py
import cv2
class Video(object):
def __init__(self):
self.video=cv2.VideoCapture(0)
def __del__(self):
self.video.release()
def get_frame(self):
ret,frame=self.video.read()
ret,jpg=cv2.imencode('.jpg',frame)
return jpg.tobytes()