#12 Added Video Feed Frontend Component & few UI tweaks

Author: mohamedmujtabaraza

backend/src/app.py

@@ -8,7 +8,9 @@
 from src.resources.teacher import Teacher, TeacherRegister, TeacherLogin
 from src.resources.student import StudentList, StudentAdd, StudentDelete
 from src.resources.attendance import AttendanceList
-from src.resources.video_feed import VideoFeed
+from src.resources.video_feed import (
+    VideoFeedList, VideoFeedAdd, VideoFeed, VideoFeedPreview, VideoFeedStop, VideoFeedStart, VideoFeedDelete
+)
 
 
 app = Flask(__name__)
@@ -23,12 +25,27 @@ def handle_marshmallow_validation(err):
     return jsonify(err.messages), 400
 
 
+# /teacher
 api.add_resource(Teacher, "/teacher/<int:teacher_id>")
 api.add_resource(TeacherRegister, "/register")
 api.add_resource(TeacherLogin, "/login")
+
+# /dashboard
 api.add_resource(Dashboard, "/dashboard")
-api.add_resource(VideoFeed, "/video_feed")
+
+# /video_feed
+api.add_resource(VideoFeedList, "/video_feeds")
+api.add_resource(VideoFeedAdd, "/video_feeds/add")
+api.add_resource(VideoFeed, "/video_feeds/<string:feed_id>")
+api.add_resource(VideoFeedPreview, "/video_feeds/preview/<string:feed_id>")
+api.add_resource(VideoFeedStop, "/video_feeds/stop/<string:feed_id>")
+api.add_resource(VideoFeedStart, "/video_feeds/start/<string:feed_id>")
+api.add_resource(VideoFeedDelete, "/video_feeds/delete/<string:feed_id>")
+
+# /students
 api.add_resource(StudentList, "/students")
 api.add_resource(StudentAdd, "/students/add")
 api.add_resource(StudentDelete, "/students/delete/<int:student_id>")
+
+# /attendance
 api.add_resource(AttendanceList, "/attendance")

backend/src/libs/base_camera.py

@@ -55,10 +55,12 @@ class BaseCamera(object):
     thread = None  # background thread that reads frames from camera
     frame = None  # current frame is stored here by background thread
     last_access = 0  # time of last client access to the camera
+    stopped = False
     event = CameraEvent()
 
     def __init__(self):
         """Start the background camera thread if it isn't running yet."""
+        self.stopped = False
         if BaseCamera.thread is None:
             BaseCamera.last_access = time.time()
 
@@ -89,16 +91,25 @@ def frames():
     def _thread(cls):
         """Camera background thread."""
         print('Starting camera thread.')
+        # get new frames
         frames_iterator = cls.frames()
         for frame in frames_iterator:
             BaseCamera.frame = frame
             BaseCamera.event.set()  # send signal to clients
             time.sleep(0)
-
             # if there hasn't been any clients asking for frames in
             # the last 10 seconds then stop the thread
             if time.time() - BaseCamera.last_access > 10:
                 frames_iterator.close()
                 print('Stopping camera thread due to inactivity.')
                 break
+            # stop the video feed by changing VIDEO_FEED global variable to false
+            if cls.stopped:
+                frames_iterator.close()
+                print('Camera manually stopped.')
+                break
         BaseCamera.thread = None
+
+    @classmethod
+    def stop_feed(cls):
+        cls.stopped = True

backend/src/libs/web_utils.py

@@ -14,7 +14,7 @@
     ENCODINGS_FILE
 )
 from src.libs.base_camera import BaseCamera
-from src.models import StudentModel, AttendanceModel
+from src.models import StudentModel, AttendanceModel, VideoFeedModel
 
 
 class DetectionCamera(BaseCamera):
@@ -47,11 +47,15 @@ def frames(cls):
 
 class RecognitionCamera(BaseCamera):
     video_source = 0
+    # this class variable will help to process every other frame of video to save time
     process_this_frame = True
 
-    def __init__(self):
+    def __init__(self, video_feed: VideoFeedModel):
         if VIDEO_SOURCE:
+            self.video_feed = video_feed
+            print(video_feed.id)
             RecognitionCamera.set_video_source(VIDEO_SOURCE)
+            # RecognitionCamera.set_video_source(video_feed.url)
         super(RecognitionCamera, self).__init__()
 
     @classmethod
@@ -61,8 +65,8 @@ def set_video_source(cls, source):
     @classmethod
     def frames(cls):
         print("[INFO] starting video stream...")
-        # store input video stream in camera variable
         camera = cv2.VideoCapture(cls.video_source)
+        # store input video stream in camera variable
         if not camera.isOpened():
             raise RuntimeError('Could not start camera.')
 
@@ -82,12 +86,12 @@ def frames(cls):
         while True:
             # read current frame
             _, img = camera.read()
-
             yield cls.recognize_n_attendance(img, attendance, data, known_students)
 
     @classmethod
     def recognize_n_attendance(cls, frame: np.ndarray, attendance: AttendanceModel,
                                data: Dict, known_students: Dict) -> bytes:
+        print("playing...")
         # convert the input frame from BGR to RGB then resize it to have
         # a width of 750px (to speedup processing)
         rgb_frame = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)

backend/src/models.py

@@ -1,7 +1,8 @@
 from typing import List
+from uuid import uuid4
 from datetime import date as dt, datetime as dtime
 
-from sqlalchemy import Column, Integer, String, Date, TIMESTAMP, ForeignKey
+from sqlalchemy import Column, Integer, String, Boolean, Date, TIMESTAMP, ForeignKey
 from sqlalchemy.ext.declarative import declarative_base
 from sqlalchemy.orm import relationship, backref
 
@@ -118,3 +119,31 @@ def save_to_db(self) -> None:
     def delete_from_db(self) -> None:
         Session.delete(self)
         Session.commit()
+
+
+class VideoFeedModel(Base):
+    __tablename__ = "video_feeds"
+
+    id = Column(String(30), nullable=False, primary_key=True)
+    is_active = Column(Boolean, default=False)
+    url = Column(String, nullable=False)
+
+    @classmethod
+    def find_by_id(cls, _id: str) -> "VideoFeedModel":
+        return Session.query(cls).filter_by(id=_id).first()
+
+    @classmethod
+    def find_by_url(cls, url: str) -> "VideoFeedModel":
+        return Session.query(cls).filter_by(url=url).first()
+
+    @classmethod
+    def find_all(cls) -> List["VideoFeedModel"]:
+        return Session.query(cls).all()
+
+    def save_to_db(self) -> None:
+        Session.add(self)
+        Session.commit()
+
+    def delete_from_db(self) -> None:
+        Session.delete(self)
+        Session.commit()

backend/src/resources/video_feed.py

@@ -1,17 +1,52 @@
-from flask import Response
+from flask import Response, request
 from flask_restful import Resource
+from flask_jwt_extended import jwt_required
 
+from src.db import Session
+from src.libs.strings import gettext
+from src.models import VideoFeedModel
+from src.schemas import VideoFeedSchema
 from src.libs.web_utils import RecognitionCamera
 
 
-class VideoFeed(Resource):
+video_feed_schema = VideoFeedSchema()
+video_feed_list_schema = VideoFeedSchema(many=True)
+
+
+# TODO: change this to support multiple feeds
+class VideoFeedList(Resource):
     @classmethod
+    @jwt_required
     def get(cls):
+        return video_feed_list_schema.dump(VideoFeedModel.find_all()), 200
+
+
+class VideoFeed(Resource):
+    @classmethod
+    def get(cls, feed_id: str):
         """Video streaming route "/video_feed". Put this in the src attribute of an img tag."""
-        return Response(
-            VideoFeed.gen_frame(RecognitionCamera()),
-            mimetype='multipart/x-mixed-replace; boundary=frame'
-        )
+        video_feed = VideoFeedModel.find_by_id(feed_id)
+
+        if video_feed:
+            return video_feed_schema.dump(video_feed), 200
+
+        return {"message": gettext('video_feed_not_found')}, 404
+
+
+# TODO: make this get() to work with @jwt_required
+class VideoFeedPreview(Resource):
+    @classmethod
+    def get(cls, feed_id: str):
+        """Video streaming route. Put this route in the src attribute of an img tag."""
+        video_feed = VideoFeedModel.find_by_id(feed_id)
+
+        if video_feed:
+            return Response(
+                cls.gen_frame(RecognitionCamera(video_feed)),
+                mimetype='multipart/x-mixed-replace; boundary=frame'
+            )
+
+        return {"message": gettext('video_feed_not_found')}, 404
 
     @classmethod
     def gen_frame(cls, camera):
@@ -22,3 +57,68 @@ def gen_frame(cls, camera):
                     b'--frame\r\n'
                     b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n'
             )  # concat frame one by one and show result
+
+
+# TODO: VideoFeedAdd Resource
+class VideoFeedAdd(Resource):
+    """Adds a video feed to `feeds` table in the database"""
+    @classmethod
+    @jwt_required
+    def post(cls):
+        video_feed_json = request.get_json()
+
+        video_feed = video_feed_schema.load(video_feed_json, session=Session)
+
+        try:
+            video_feed.save_to_db()
+        except:
+            return {"message": gettext('error_inserting')}, 500
+
+        return video_feed_schema.dump(video_feed), 201
+
+
+class VideoFeedStop(Resource):
+    @classmethod
+    @jwt_required
+    def get(cls, feed_id: str):
+        video_feed = VideoFeedModel.find_by_id(feed_id)
+        if video_feed:
+            RecognitionCamera.stop_feed()
+            try:
+                video_feed.is_active = False
+                video_feed.save_to_db()
+            except:
+                return {"message": gettext('internal_server_error')}, 500
+            return {"message": gettext('video_feed_stopped')}, 200
+
+        return {"message": gettext('video_feed_not_found')}, 404
+
+
+class VideoFeedStart(Resource):
+    """Restart video feed for specific feed given by its feed_id"""
+    @classmethod
+    @jwt_required
+    def get(cls, feed_id: str):
+        video_feed = VideoFeedModel.find_by_id(feed_id)
+        if video_feed:
+            # RecognitionCamera.start_feed()
+            try:
+                video_feed.is_active = True
+                video_feed.save_to_db()
+            except:
+                return {"message": gettext('internal_server_error')}, 500
+            return {"message": gettext('video_feed_stopped')}, 200
+
+        return {"message": gettext('video_feed_not_found')}, 404
+
+
+class VideoFeedDelete(Resource):
+    @classmethod
+    @jwt_required
+    def delete(cls, feed_id: str):
+        video_feed = VideoFeedModel.find_by_id(feed_id)
+        if video_feed:
+            video_feed.delete_from_db()
+            return {"message": gettext('video_feed_deleted').format(video_feed.id)}, 200
+
+        return {"message": gettext('video_feed_not_found')}, 404

backend/src/schemas.py

@@ -1,7 +1,7 @@
 from marshmallow_sqlalchemy import SQLAlchemyAutoSchema, auto_field
 from marshmallow_sqlalchemy.fields import Nested
 
-from src.models import TeacherModel, StudentModel, AttendanceModel
+from src.models import TeacherModel, StudentModel, AttendanceModel, VideoFeedModel
 
 
 class TeacherSchema(SQLAlchemyAutoSchema):
@@ -31,3 +31,11 @@ class Meta:
         StudentSchema,
         many=True
     )
+
+
+class VideoFeedSchema(SQLAlchemyAutoSchema):
+    class Meta:
+        model = VideoFeedModel
+        # load_only = ()  # during deserialization dictionary -> object
+        dump_only = ("is_active",)  # during serialization object -> dictionary
+        load_instance = True  # Optional: deserialize to object/model instances

backend/strings/en-us.json

@@ -9,6 +9,13 @@
   "login_to_continue": "Failure! More data available if you log in",
 
   "error_inserting": "An error occurred while inserting the item",
+
   "student_deleted": "'{}' with id={} was removed",
-  "student_not_found": "Student not found"
+  "student_not_found": "Student not found",
+
+  "video_feed_deleted": "Video Feed for Classroom {} was removed",
+  "video_feed_not_found": "Video Feed not found.",
+  "video_feed_stopped": "Video Feed has been stopped",
+
+  "internal_server_error": "Internal Server Error"
 }

frontend/src/app/app-routing.module.ts

@@ -7,8 +7,9 @@ import { AuthGuard } from './guards/auth.guard';
 import { DashboardComponent } from './components/dashboard/dashboard.component';
 import { RegisterComponent } from './components/register/register.component';
 import { LoginComponent } from './components/login/login.component';
-import { VideoFeedComponent } from './components/video-feed/video-feed.component';
-import { StudentComponent } from './components/student/student.component';
+import { VideoFeedPreviewComponent } from './components/video-feed-preview/video-feed-preview.component';
+import { VideoFeedListComponent } from './components/video-feed-list/video-feed-list.component';
+import { StudentListComponent } from './components/student-list/student-list.component';
 import { AttendanceComponent } from './components/attendance/attendance.component';
 import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';
 
@@ -18,8 +19,9 @@ const routes: Routes = [
   { path: 'dashboard', component: DashboardComponent },
   { path: 'register', component: RegisterComponent },
   { path: 'login', component: LoginComponent },
-  { path: 'video_feed', component: VideoFeedComponent, canActivate:[AuthGuard] },
-  { path: 'students', component: StudentComponent, canActivate:[AuthGuard] },
+  { path: 'video_feeds', component: VideoFeedListComponent, canActivate:[AuthGuard] },
+  { path: 'video_feeds/preview/:feed_id', component: VideoFeedPreviewComponent, canActivate:[AuthGuard] },
+  { path: 'students', component: StudentListComponent, canActivate:[AuthGuard] },
   { path: 'attendance', component: AttendanceComponent, canActivate:[AuthGuard] },
   { path: '**', component: PageNotFoundComponent }
 ];
@@ -32,6 +34,8 @@ export class AppRoutingModule { }
 export const routingComponents = [
   DashboardComponent, 
   RegisterComponent, LoginComponent, 
-  VideoFeedComponent, StudentComponent, AttendanceComponent, 
+  VideoFeedListComponent, VideoFeedPreviewComponent, 
+  StudentListComponent, 
+  AttendanceComponent, 
   PageNotFoundComponent
 ]

frontend/src/app/app.component.html

@@ -6,7 +6,7 @@
   <div class="collapse navbar-collapse" id="navbarSupportedContent">
     <ul class="navbar-nav mr-auto">
       <li class="nav-item" *ngIf="loggedIn()">
-        <a class="nav-link" routerLink="/video_feed" routerLinkActive="active">Video Feed</a>
+        <a class="nav-link" routerLink="/video_feeds" routerLinkActive="active">Video Feeds</a>
       </li>
       <li class="nav-item" *ngIf="loggedIn()">
         <a class="nav-link" routerLink="/students" routerLinkActive="active">Students</a>