#9 Implemeted face detection, added CSS

Face detection is now a thing. I've added some CSS too.
kcuric · Jan 3, 2020 · a9817bd · a9817bd
1 parent 6c42b1d
commit a9817bd
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 25 deletions.
diff --git a/client.py → client/app.py b/client.py → client/app.py
@@ -1,7 +1,7 @@
 from modules.Streamer import Streamer
 
 def main():
-    stream = Streamer('35.204.145.0', 5005, 0)
+    stream = Streamer('127.0.0.1', 5005, 0) #35.204.145.0
     stream.send_to_server()
 
 if __name__ == "__main__":

diff --git a/modules/Recorder.py → client/modules/Recorder.py b/modules/Recorder.py → client/modules/Recorder.py
@@ -28,6 +28,5 @@ def get_frame(self) -> str:
         '''
         success, image = self.video.read()
         ret, jpeg = cv2.imencode('.jpg', image)
-        jpeg_encoded_image = jpeg.tostring()
-        return jpeg_encoded_image
+        return jpeg
 
diff --git a/modules/Streamer.py → client/modules/Streamer.py b/modules/Streamer.py → client/modules/Streamer.py
diff --git a/server/app.py b/server/app.py
@@ -1,17 +1,28 @@
 from flask import Flask, render_template, Response
+from modules.Detector import Detector
 import socket
 
+# FLASK CONFIG
 app = Flask(__name__)
+app.static_folder = 'static'
+app.config['TEMPLATES_AUTO_RELOAD'] = True
 
+# SOCKET CONFIG
 ip = "0.0.0.0"
 port = 5005
+server_adress = (ip, port)
 
 sock = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
-sock.bind((ip, port))
+sock.bind(server_adress)
+
+# DETECTOR CONFIG
+detector = Detector()
 
 def rec():
     while True:
         data, addr = sock.recvfrom(65535)
+        if(detector.find_faces(data)):
+            print("INTRUDER!")
         yield (b'--frame\r\n'
                 b'Content-Type: image/jpeg\r\n\r\n' + data + b'\r\n')
 
@@ -24,4 +35,4 @@ def video_feed():
     return Response(rec(), mimetype='multipart/x-mixed-replace; boundary=frame')
 
 if __name__ == '__main__':
-    app.run(ssl_context='adhoc')
+    app.run(debug=True) #ssl_context='adhoc'
diff --git a/modules/Detector.py → server/modules/Detector.py b/modules/Detector.py → server/modules/Detector.py
@@ -1,8 +1,9 @@
 import cv2
+import numpy as np
 
 class Detector(): 
 
-	def _find_faces(self, image: object) -> int:
+	def find_faces(self, image_bytes: object) -> int:
 		"""
 		Uses OpenCV to recognize faces in the taken picture.
 		Arguments:
@@ -13,8 +14,9 @@ def _find_faces(self, image: object) -> int:
 		casc_path = 'haarcascade_frontalface_default.xml'
 		face_cascade = cv2.CascadeClassifier(casc_path)
 		"""
+		image = cv2.imdecode(np.frombuffer(image_bytes, np.uint8), -1)
 		face_cascade = cv2.CascadeClassifier(cv2.data.haarcascades + 'haarcascade_frontalface_default.xml')
-		gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
+		gray = cv2.cvtColor(image , cv2.COLOR_BGR2GRAY)
 		faces = face_cascade.detectMultiScale(
 			gray,
 			scaleFactor=1.1,

diff --git a/modules/haarcascade_frontalface_default.xml → ...dules/haarcascade_frontalface_default.xml b/modules/haarcascade_frontalface_default.xml → ...dules/haarcascade_frontalface_default.xml
diff --git a/server/static/css/style.css b/server/static/css/style.css
@@ -0,0 +1,34 @@
+*{
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+body{
+    background: #0F2027;  /* fallback for old browsers */
+    background: -webkit-linear-gradient(to right, #2C5364, #203A43, #0F2027);  /* Chrome 10-25, Safari 5.1-6 */
+    background: linear-gradient(to right, #2C5364, #203A43, #0F2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+}
+
+h1{
+    padding: 0px 10px;
+}
+
+p{
+    padding: 0px 10px;
+}
+
+.container{
+    width: calc(480px * 2 + 40px);
+    margin: 45px auto;
+    padding: 45px;
+    height: 720px;
+    background-color: whitesmoke;
+    border-radius: 3%;
+    text-align: center;
+}
+
+img{
+    width: 480px;
+    height: 360px;
+    padding: 10px;
+    float: left;
+}
diff --git a/server/templates/index.html b/server/templates/index.html
@@ -5,10 +5,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>DIY Survailence System</title>
+    <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static', filename='css/style.css') }}">
 </head>
 <body>
-    <h1>DIY Survailence System</h1>
-    <p>Running the app.py</p>
-    <img src="{{ url_for('video_feed') }}">
+    <div class="container">
+        <h1>DIY Survailence System</h1>
+        <p>Running the app.py</p>
+        <img src="{{ url_for('video_feed') }}">
+        <img src="{{ url_for('video_feed') }}">
+    </div>
 </body>
-</html>
+</html>
diff --git a/templates/index.html b/templates/index.html