HTML 按钮通过 Python、Flask 和 ZB385E1A4D74C2AFA71FZ9FE39FE3 开启网络摄像头

Question

I have been working on a project for quite a while. Scenario, I want to start my webcam service from the backend so that I can perform some AI tasks, like object identification and face recognition. I am using flask in my back end, but having a serious challenge using a toggle button attached to my index page to start the process.

When I run the process without any button command using an infinite while loop, the camera starts smoothly, but I want to start the camera only when there is a button command with a start command.

Find below my code:

Index.html


<form action="javascript:0" id="show-cam" class="col s12">
     <label class="form-switch">
           <span id="webcam-caption">Click to Start Camera</span>
           <input type="checkbox" name="checkbox" id="webcam-switch">          
      </label>  
      <div id="attend-image" class="row">
          <div class="container">
              <div class="row">
                 <div>
                   <h3>Live Streaming</h3>
                   <img src="{{ url_for('video_feed') }}" >
                 </div>
              </div>
          </div>                        
      </div>          
   </form>

My Javascript file is as below:

app.js

$('input[name=checkbox]').change(function () {
      if($(this).is(':checked')){
        console.log("Checkbox is checked..") 
        let command = 'start';

        $.ajax({
          url: '/camera_cmd',
          type: 'POST',
          dataType: 'json',
          data: JSON.stringify({
            'command': command,
          }),
          contentType: 'application/json, charset=UTF-8',
          success: function(data) {
            // location.reload();
            console.log(command);
          },
          error: function(err){
            console.log(err);
          }
        });
      }
      else {        
        $('#attend-image').removeClass('hide'); 
        console.log("Checkbox is not checked..");
        let command = 'stop';

        $.ajax({
          url: '/camera_cmd',
          type: 'POST',
          dataType: 'json',
          data: JSON.stringify({
            'command': command,
          }),
          contentType: 'application/json, charset=UTF-8',
          success: function(data) {
            // location.reload();
            console.log(command);
          },
          error: function(err){
            console.log(err);
          }
        });
      }        
   });

From the Javascript, you would notice that I am using Ajax to send the command to the server. On the server, there is a route that handles the request, and calls the function to do the job as below:

app.py

import JSON
import os
import cv2
import threading
from camera import VideoCamera

command = False

video_stream = VideoCamera()

app = Flask(__name__)

@app.route('/camera_cmd', methods=['POST'])
def camera_cmd():
    global command
    
    req = request.get_json()
    
    take_it  = req['command']
     
    state = print(take_it)
    if take_it:
        if take_it == 'start':
            command = True   
            print('command is True')              
        elif take_it == 'stop':
            command = False 
            print('command is False')     
               
    flash("Camera had a smooth operation!", "flash_success") 
        
    t1 = threading.Thread(target=thread_delay, args=('t1', 5))
    t1.start()
    t1.join()   
        
    return json.dumps(state)

def gen(camera):
    global command
    print('Arrived camera Loop')

    while command: 
        print('In the Loop Now!')
        frame = camera.get_frame()
        yield (b'--frame\r\n'
               b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n\r\n')
    
    video_stream.release()


def thread_delay(thread_name, delay):
    global command
    while command:
        time.sleep(delay)
        print(thread_name, '---------->', time.time())
        t2 = threading.Thread(target=gen, args=(video_stream, ))
        t2.start()
        t2.join()

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

I get receive the command sent from the frontend, well printed out and it successfully updates my command global variable to the respective True or False to run the while loop. Notice I kept the camera control function defined as gen(camera) and the thread_delay(thread_name, delay) function in threads, yet the gen(camera) has refused to be called so that it can start my camera.

I am sure there is a better way to achieve this, but dont just know how, can someone please help me out? All I want to achieve is, when I click the toggle switch, I want to start my webcam process some AI function and when I am done, I returned the toggle switch, and the camera should go off.

Answer 1

In your gen() function in your FLASK backend. Rather than checking Command at while loop, Check it inside while loop.

def gen(camera):
    global command
    print('Arrived camera Loop')
    while (True):
        if(command):# Check Command Here
            frame = camera.get_frame()
            yield (b'--frame\r\n'
               b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n\r\n')   
        else:
            pass  

As a Part of Front end when you stop the camera feed just replace the camera div with image or the hide the element