added video streaming detection by flask

Author: YunchengLiang

app.py

@@ -1,4 +1,4 @@
-from flask import Flask, request, render_template, flash, redirect, url_for, send_file
+from flask import Flask, request, render_template, flash, redirect, url_for, send_file, Response
 from werkzeug.utils import secure_filename
 from datetime import datetime
 from tensorflow.keras.applications.mobilenet_v2 import preprocess_input
@@ -16,6 +16,37 @@
 net= cv2.dnn.readNet(prototxtPath, weightsPath)
 model= load_model('mask_detector.model')
 
+def detect_and_predict_mask(frame,faceNet,maskModel):
+    (h,w)= frame.shape[:2]
+    blob= cv2.dnn.blobFromImage(frame,1.0,(300,300),(104.0,177.0,123.0))#normalization
+    faceNet.setInput(blob)
+    detections= faceNet.forward()
+
+    faces= []
+    locs= []
+    preds= []
+
+    for i in range(0,detections.shape[2]):
+        confidence= detections[0,0,i,2]
+        if confidence>0.5:
+            box= detections[0,0,i,3:7]*np.array([w,h,w,h])
+            (start_X,start_Y, end_X, end_Y)= box.astype('int')
+            (start_X,start_Y)= (max(0,start_X),max(0,start_Y))
+            (end_X,end_Y)= (min(w-1,end_X),min(h-1,end_Y))
+            face= frame[start_Y:end_Y, start_X:end_X]
+            face= cv2.cvtColor(face,cv2.COLOR_BGR2RGB)
+            face= cv2.resize(face, (224,224))
+            face= img_to_array(face)
+            face= preprocess_input(face)
+            faces.append(face)
+            locs.append((start_X,start_Y,end_X,end_Y))
+    
+    if len(faces)>0:
+        faces = np.array(faces, dtype="float32")
+        preds= maskModel.predict(faces)
+    
+    return (locs,preds)
+
 def allowed_file(filename):
     return '.' in filename and \
            filename.rsplit('.', 1)[1].lower() in ['png', 'jpg', 'jpeg']
@@ -80,5 +111,51 @@ def download(filename):
     # Returning file from appended path
     return send_file( os.path.join('static/online_detector_results',filename), as_attachment=True)
 
+@app.route('/streaming')
+def streaming():
+    return render_template('streaming.html')
+
+
+#video streaming
+
+video = cv2.VideoCapture(0)
+
+def gen_frames():
+    while True:
+        success, image = video.read()
+        if not success:
+            break
+        else:
+            (oheight, owidth) = image.shape[:2]
+            adjusted_width = 400
+            adjusted_height = int(adjusted_width * oheight / owidth)
+            cv2.imshow("image", image)
+            image = cv2.resize(image, (adjusted_width, adjusted_height), interpolation = cv2.INTER_AREA)
+            (locs,preds)=detect_and_predict_mask(image,net,model)
+
+            for (loc,pred) in zip(locs,preds):
+                    (start_X,start_Y,end_X,end_Y)= loc
+                    (with_mask,without_mask)= pred
+                    if with_mask>without_mask:
+                        label="Mask"
+                        color= (0,255,0) 
+                    else:
+                        label="No Mask"
+                        color= (0,0,255)
+
+                    label="{}:{:.2f}%".format(label, max(with_mask,without_mask)*100) 
+                    cv2.putText(image,label,(start_X,start_Y-10),cv2.FONT_HERSHEY_SIMPLEX,0.45,color,2)
+                    cv2.rectangle(image, (start_X,start_Y),(end_X,end_Y),color,2)
+
+            ret, jpeg = cv2.imencode('.jpg', image)
+            frame = jpeg.tobytes()
+            
+            yield (b'--frame\r\n'
+                b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n\r\n')
+
+@app.route('/video_feed')
+def video_feed():
+    return Response(gen_frames(), mimetype='multipart/x-mixed-replace; boundary=frame')
+
 if __name__ == '__main__':
     app.run(debug = True)

templates/homepage.html

@@ -25,5 +25,8 @@ <h1 class="text-center bolded">Online Mask Detector</h1>
         <button onclick="location.href='{{ url_for('download', filename= outputImage) }}'" type="button"> Download </button>
     </div>
     {% endif %}
+    <div style="text-align: center;">
+        <button onclick="location.href='{{ url_for('streaming') }}'" type="button"> video streaming detection mode </button>
+    </div>
 </body>
 </html>

templates/streaming.html

@@ -0,0 +1,23 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Mask Detection Online</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <link rel='stylesheet' href="{{ url_for('static',filename='css/style.css') }}">
+</head>
+<body>
+    <h1 class="text-center bolded">Online Mask Detector</h1>
+    <div class="container">
+        <div class="row">
+            <div class="col-lg-8  offset-lg-2">
+                <h3 class="mt-5">Live Streaming</h3>
+                <img src="{{ url_for('video_feed') }}" width="100%">
+            </div>
+        </div>
+    </div>
+    <div style="text-align: center;">
+        <button onclick="location.href='{{ url_for('main_page') }}'" type="button"> image detection mode </button>
+    </div>
+</body>
+</html>
+