Can't change image to video camera when button clicked-CodePudding

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 >
        <button id="start" onclick= "start()" ><i ></i> start</button>
        <button id = "stop" onclick="stop()" ><i ></i> Stop</button> 
    </div>
        <img id ="ciao" class ="image1" src="/static/1.png">
    </body>

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()

CodePudding user response：

You fogot to load jQuery in HMTL. You can't use $(...) without jQuery.

For example:

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

After adding jQuery code works for me.

I put all in one file so everyone can simply copy and test it.

from flask import Flask, render_template_string, Response
import cv2

class Video:
    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()

app = Flask(__name__)
output = []

def gen(camera):
    while True:
        frame = camera.get_frame()
        yield(b'--frame\r\n'
              b'Content-Type: image/jpeg\r\n'
              b'\r\n'   frame   b'\r\n\r\n')

@app.route('/')
@app.route('/FaceMaskDetection_HomePage')
def homepage():
    return render_template_string("""
<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 src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <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 >
    <button id="start" onclick="start()" ><i ></i> start</button>
    <button id="stop" onclick="stop()" ><i ></i> Stop</button> 
  </div>
  <img id="ciao"  src="/static/1.png">
</body>
    
""")

@app.route('/video')
def video():
     return Response(gen(Video()),
                     mimetype='multipart/x-mixed-replace; boundary=frame')
    
# --- main ---    

app.run(debug=True)

EDIT:

I found two different problems.

If you use Video() in def video() then second user (or second browser on your computer) may have problem to access camera because it will try open the same webcam - and it will generate error that webcam is already used. You may have to create Video() only once at start as global variable and later use this variable inside def video()
All this will work only on local computer because when you will run it on server then cv2 will try to access webcam directly connected to server. It can't access remotly user's webcam. Only web browser on user's computer may have acccess to user's webcam - and this may need JavaScript to get image from user's webcam, send it to server, and get image with changes - like in my example on GitHub furas / python-examples / flask / web camera in browser - canvas - take image and upload to server