Added 2d model real time stream

Author: RobinRosculete

.gitignore

@@ -1,6 +1,10 @@
 **/node_modules
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+# Virtual enviorment for server
+.venv/
+.bin/
+
 # dependencies
 /.pnp
 .pnp.js

model/2dModel.pt

@@ -0,0 +1,15 @@
+from flask import Flask, render_template, Response
+from webcam import gen_frames
+
+
+# Initializing flask app
+app = Flask(__name__)
+
+
+@app.route('/webcam')
+def video_feed():
+    return Response(gen_frames(), mimetype='multipart/x-mixed-replace; boundary=frame')
+
+# Running app
+if __name__ == '__main__':
+    app.run(debug=True)

server/server.py

@@ -0,0 +1,64 @@
+#Thanks to https://dipankarmedh1.medium.com/real-time-object-detection-with-yolo-and-webcam-enhancing-your-computer-vision-skills-861b97c78993
+import cv2
+from ultralytics import YOLO
+import math 
+
+
+camera = cv2.VideoCapture(0)
+
+PATH_TO_MODEL = "/Users/Robin1/Desktop/rttm/model/2dModel.pt"
+#model = YOLO('yolov8s.pt')  # load an official model
+model = YOLO(PATH_TO_MODEL )
+# object classes
+classNames = [
+    'car',
+    'pickup',
+    'SUV',
+    'van',
+    'truck',
+    'bus',
+    'motorcycle',
+    'pedestrian'
+]
+
+def gen_frames():  
+
+    while True:
+        success, frame = camera.read()  # read the camera frame
+        results = model(frame, stream=True)#
+        # coordinates
+        for r in results:
+            boxes = r.boxes
+
+            for box in boxes:
+                # bounding box
+                x1, y1, x2, y2 = box.xyxy[0]
+                x1, y1, x2, y2 = int(x1), int(y1), int(x2), int(y2) # convert to int values
+
+                # put box in cam
+                cv2.rectangle(frame, (x1, y1), (x2, y2), (255, 0, 255), 3)
+
+                # confidence
+                confidence = math.ceil((box.conf[0]*100))/100
+                print("Confidence --->",confidence)
+
+                # class name
+                cls = int(box.cls[0])
+                print("Class name -->", classNames[cls])
+
+                # object details
+                org = [x1, y1]
+                font = cv2.FONT_HERSHEY_SIMPLEX
+                fontScale = 1
+                color = (255, 0, 0)
+                thickness = 2
+                cv2.putText(frame, classNames[cls], org, font, fontScale, color, thickness)
+        
+        if not success:
+            break
+        else:
+            ret, buffer = cv2.imencode('.jpg', frame)
+            
+            frame = buffer.tobytes()
+            yield (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

server/webcam.py

@@ -1,15 +1,36 @@
 //import Chart from "react-apexcharts";
-import React from "react";
-import StackedArea from './subcomponents/sub-graph/StackedArea';
-import Bar from './subcomponents/sub-graph/Bar';
-import PieChart from './subcomponents/sub-graph/PieChart';
-import './subcomponents/sub-graph/charts.css';
-import './subcomponents/sub-s3-components/videoPlayer.css';
+
+import React, { useEffect, useRef } from "react";
+import StackedArea from "./subcomponents/sub-graph/StackedArea";
+import Bar from "./subcomponents/sub-graph/Bar";
+import PieChart from "./subcomponents/sub-graph/PieChart";
+import "./subcomponents/sub-graph/charts.css";
+import "./subcomponents/sub-s3-components/videoPlayer.css";
 import StackedBar from "./subcomponents/sub-graph/StackedBar";
 import Density from "./subcomponents/sub-graph/Density";
-import '../index.css';
+import "../index.css";
 // testhomepage
 const Mainpage = () => {
+  const videoRef = useRef(null);
+  useEffect(() => {
+    const fetchWebcamStream = async () => {
+      try {
+        const videoElement = videoRef.current;
+
+        const stream = await navigator.mediaDevices.getUserMedia({
+          video: true,
+        });
+
+        if (videoElement && stream) {
+          videoElement.srcObject = stream;
+        }
+      } catch (error) {
+        console.error("Error accessing webcam stream:", error);
+      }
+    };
+
+    fetchWebcamStream();
+  }, []);
   // Page Layout
   return (
     <section>
@@ -30,27 +51,19 @@ const Mainpage = () => {
                 poster="YOUR_CAMERA1_POSTER.jpg" // Change to your Camera 1 poster image path
                 data-setup="{}"
               >
-                <source src="../videos/YOLOv7-Tiny Demo.mp4" type="video/mp4" /> {/* Change to your Camera 1 video path */}
+                <source src="../videos/YOLOv7-Tiny Demo.mp4" type="video/mp4" />{" "}
+                {/* Change to your Camera 1 video path */}
               </video>
             </div>
           </div>
           <div className="col">
-            <h4 className="camText gradient-label">Camera 2</h4>
+            <h4 className="camText gradient-label">Camera 2 (2D)</h4>
             <div className="video-box">
-              <video
-                id="camera2-video"
-                className="video-js"
-                autoPlay
-                muted
-                loop
-                preload="auto"
-                width="100%"
-                height="100%"
-                poster="MY_VIDEO_POSTER.jpg"
-                data-setup="{}"
-              >
-                <source src="../videos/YOLOv7-Tiny Demo.mp4" type="video/mp4" />
-              </video>
+              <img
+                src="http://127.0.0.1:5000/webcam"
+                alt="webcam"
+                className="webcam-image"
+              />
             </div>
           </div>
         </div>

website/src/components/Mainpage.js

@@ -1,13 +1,13 @@
 .video-box {
-  position: relative;
-  height: 20em; /* Reduced from 26.2em to make the box smaller in height */
-  text-align: center;
+  border: 2px solid #ccc;
+  border-radius: 8px;
+  overflow: hidden;
   width: 100%;
-  margin-top: 3pt; /* Adjusted from 5pt for tighter spacing */
-  margin-bottom: 3pt; /* Adjusted from 5pt for tighter spacing */
-  background-color: rgb(128, 128, 128);
-  min-height: auto;
-  min-width: none;
-  padding: 1pt; /* Reduced padding */
-  color: rgb(216, 216, 216);
+  height: 400px; /* Adjust height as needed */
+}
+
+.webcam-image {
+  width: 60%;
+  height: 100%;
+  object-fit: cover; /* Maintain aspect ratio and cover entire container */
 }

website/src/components/subcomponents/sub-s3-components/videoPlayer.css

@@ -3,25 +3,25 @@
 body {
   background-color: black;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 /* Header style */
 header {
-  background-color: #43404F;  /* Dark gray color */
+  background-color: #43404f; /* Dark gray color */
   padding: 10px 0;
   text-align: center;
   color: white;
-  font-size: 24px;  /* Large text for the logo */
+  font-size: 24px; /* Large text for the logo */
 }
 
 /* Footer style */
 footer {
-  background-color: rgb(37, 37, 37);  /* Dark gray color */
+  background-color: rgb(37, 37, 37); /* Dark gray color */
   position: absolute;
   left: 0;
   bottom: 0;
@@ -31,19 +31,19 @@ footer {
   color: white;
 }
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
 
-.background{
+.background {
   height: 100%;
   width: 100%;
-  background:linear-gradient(rgba(0, 0, 0, 0.d),transparent);
-  background-color:#565264 /*this your primary color*/
+  background: linear-gradient(rgba(0, 0, 0, 0d), transparent);
+  background-color: #565264; /*this your primary color*/
 }
 
 /* This box below has width that reaches the entire div but its height is based on the content */
-.box{
+.box {
   position: relative;
   width: 100%;
   margin-top: 5pt;
@@ -59,11 +59,10 @@ code {
   /* Box border and background shadow */
   border-radius: 5px;
   box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
-  
 }
 
 /* This below has a defined dimension which is why the text is fully covered with space */
-.text-box{
+.text-box {
   position: relative;
   height: 23.2em;
   text-align: center;
@@ -82,15 +81,14 @@ code {
 }
 
 /*this is for the description section of the web page*/
-.RTTMDescription{
-  font-size:13pt;
-  
+.RTTMDescription {
+  font-size: 13pt;
 }
-.section{
+.section {
   background-color: black;
 }
-.welcome{
-  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+.welcome {
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   padding-top: 10pt;
   padding-bottom: 3pt;
   color: rgb(248, 248, 248);
@@ -105,8 +103,6 @@ code {
   width: 100%;
 }
 
-
-
 .camera-container {
   display: flex;
   justify-content: center; /* Center horizontally */
@@ -115,7 +111,7 @@ code {
 }
 
 .camera-button {
-  background: linear-gradient(to right, #56CCF2, #2F80ED); /* Blue gradient */
+  background: linear-gradient(to right, #56ccf2, #2f80ed); /* Blue gradient */
   color: white; /* Text color */
   padding: 5px 10px; /* Smaller padding */
   border: none; /* No border */
@@ -131,9 +127,12 @@ code {
   transform: scale(0.95); /* Scales down the button a bit when hovered over */
 }
 
-
 .gradient-label {
-  background: linear-gradient(to right, #d22030, #565264); /* Gradient background */
+  background: linear-gradient(
+    to right,
+    #d22030,
+    #565264
+  ); /* Gradient background */
   color: white; /* Text color */
   padding: 1px 10px; /* Vertical padding is 1px, horizontal padding is 10px */
   border-radius: 5px; /* Rounded corners */
@@ -147,6 +146,6 @@ code {
 
 .echarts-container {
   height: 300px; /* Set the height you want for all charts */
-  width: 300px;  /* Set the width you want for all charts */
+  width: 300px; /* Set the width you want for all charts */
   /* Add any other styles you want to apply globally */
 }