rtsp streaming implemented

components/MainForm.tsx

@@ -3,10 +3,10 @@ import React, { useState } from "react";
 import Register from "./register/Register";
 import Search from "./search/Search";
 import "./MainForm.css";
-import RealtimeFaceDetection from "./realtimeFaceDetection/RealtimeFaceDetection";
 import FaceLiveness from "./faceLivelinessCheck/FaceLivelinessCheck";
 import FaceMovementDetection from "./faceMovementDetection/FaceMovementDetection";
 import RealtimeCount from "./realtimeCount/RealtimeCount";
+import RealtimeDetection from "./realtimeDetection/RealtimeDetection";
 
 const MainForm: React.FC = () => {
   const [activeTab, setActiveTab] = useState<
@@ -65,7 +65,7 @@ const MainForm: React.FC = () => {
       <div className="tab-content">
         {activeTab === "register" && <Register />}
         {activeTab === "search" && <Search />}
-        {activeTab === "realtime" && <RealtimeFaceDetection />}
+        {activeTab === "realtime" && <RealtimeDetection />}
         {activeTab === "liveliness" && <FaceLiveness />}
         {activeTab === "realtime-count" && <RealtimeCount />}
         {activeTab === "facemovement" && <FaceMovementDetection />}

components/realtimeDetection/RealtimeDetection.tsx

@@ -0,0 +1,33 @@
+"use client";
+import React, { useState } from "react";
+import WebcamDetection from "./webcam/Webcam";
+import RtspStream from "./rtspStream/RtspStream";
+
+const RealtimeDetection: React.FC = () => {
+  const [activeTab, setActiveTab] = useState<"webcam" | "rtsp">("webcam");
+
+  return (
+    <div className="main-container">
+      <div className="tabs">
+        <button
+          className={`tab-button ${activeTab === "webcam" ? "active" : ""}`}
+          onClick={() => setActiveTab("webcam")}
+        >
+          Webcam
+        </button>
+        <button
+          className={`tab-button ${activeTab === "rtsp" ? "active" : ""}`}
+          onClick={() => setActiveTab("rtsp")}
+        >
+          RTSP
+        </button>
+      </div>
+      <div className="tab-content">
+        {activeTab === "webcam" && <WebcamDetection />}
+        {activeTab === "rtsp" && <RtspStream />}
+      </div>
+    </div>
+  );
+};
+
+export default RealtimeDetection;

components/realtimeDetection/rtspStream/RtspStream.tsx

@@ -0,0 +1,109 @@
+import React, { useState, useEffect, useRef } from "react";
+import Hls from "hls.js";
+
+const API_URL = "http://localhost:8081/start"; // Replace with your actual API endpoint
+
+const RtspStream: React.FC = () => {
+  const [rtspUrl, setRtspUrl] = useState<string>("");
+  const [cameraName, setCameraName] = useState<string>("");
+  const [m3u8Url, setM3u8Url] = useState<string | null>(null);
+  const [loading, setLoading] = useState<boolean>(false); // Loading state
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+
+  useEffect(() => {
+    if (m3u8Url && videoRef.current) {
+      if (Hls.isSupported()) {
+        const hls = new Hls();
+        hls.loadSource(m3u8Url);
+        hls.attachMedia(videoRef.current);
+      } else if (
+        videoRef.current.canPlayType("application/vnd.apple.mpegurl")
+      ) {
+        videoRef.current.src = m3u8Url;
+      }
+    }
+  }, [m3u8Url]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true); // Set loading to true when submitting
+
+    try {
+      const response = await fetch(API_URL, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          uri: rtspUrl,
+          alias: cameraName,
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to fetch stream URL");
+      }
+
+      const data = await response.json();
+      console.log("Stream data:", data);
+      setM3u8Url(`http://localhost:8081${data?.uri}`);
+    } catch (error) {
+      console.error("Error fetching stream:", error);
+      alert("Failed to load stream.");
+    } finally {
+      setLoading(false); // Reset loading state after API response
+    }
+  };
+
+  return (
+    <div style={{ maxWidth: "600px", margin: "auto", textAlign: "center" }}>
+      <h2>RTSP Stream</h2>
+      <form onSubmit={handleSubmit}>
+        <input
+          type="text"
+          value={rtspUrl}
+          onChange={(e) => setRtspUrl(e.target.value)}
+          placeholder="Enter RTSP URL"
+          style={{ width: "80%", padding: "8px", marginBottom: "10px" }}
+          required
+        />
+        <br />
+        <input
+          type="text"
+          value={cameraName}
+          onChange={(e) => setCameraName(e.target.value)}
+          placeholder="Enter Camera Name"
+          style={{ width: "80%", padding: "8px", marginBottom: "10px" }}
+          required
+        />
+        <br />
+        <button
+          type="submit"
+          style={{
+            padding: "8px 12px",
+            cursor: loading ? "not-allowed" : "pointer",
+            opacity: loading ? 0.6 : 1,
+          }}
+          disabled={loading}
+        >
+          {loading ? "Starting stream..." : "Start Stream"}
+        </button>
+      </form>
+
+      {loading && (
+        <p style={{ marginTop: "15px", fontWeight: "bold" }}>
+          Stream is starting...
+        </p>
+      )}
+
+      {m3u8Url && !loading && (
+        <video
+          ref={videoRef}
+          controls
+          autoPlay
+          style={{ width: "100%", marginTop: "20px" }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default RtspStream;

components/realtimeDetection/webcam/Webcam.tsx

@@ -0,0 +1,167 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import Webcam from "react-webcam";
+import * as faceapi from "face-api.js";
+import { Button } from "@/components/ui/button";
+import { Camera } from "lucide-react";
+import { useToast } from "@/hooks/use-toast";
+
+const MODEL_URL = "https://cdn.jsdelivr.net/npm/@vladmandic/face-api/model";
+const PADDING = 60;
+
+const WebcamDetection = () => {
+  const webcamRef = useRef<Webcam>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [isModelLoaded, setIsModelLoaded] = useState(false);
+  const [isDetecting, setIsDetecting] = useState(false);
+  const { toast } = useToast();
+
+  useEffect(() => {
+    const loadModels = async () => {
+      try {
+        await faceapi.nets.tinyFaceDetector.loadFromUri(MODEL_URL);
+        await faceapi.nets.faceLandmark68Net.loadFromUri(MODEL_URL);
+        await faceapi.nets.faceRecognitionNet.loadFromUri(MODEL_URL);
+        setIsModelLoaded(true);
+      } catch (error) {
+        console.error("Error loading models:", error);
+        toast({
+          title: "Error",
+          description: "Failed to load face detection models.",
+          variant: "destructive",
+        });
+      }
+    };
+    loadModels();
+  }, [toast]);
+
+  const extractFaceWithPadding = (
+    video: HTMLVideoElement,
+    box: faceapi.Box
+  ): HTMLCanvasElement => {
+    const canvas = document.createElement("canvas");
+    const context = canvas.getContext("2d");
+
+    // Calculate padded dimensions
+    const x = Math.max(0, box.x - PADDING);
+    const y = Math.max(0, box.y - PADDING);
+    const width = Math.min(video.videoWidth - x, box.width + 2 * PADDING);
+    const height = Math.min(video.videoHeight - y, box.height + 2 * PADDING);
+
+    canvas.width = width;
+    canvas.height = height;
+
+    if (context) {
+      context.drawImage(video, x, y, width, height, 0, 0, width, height);
+    }
+
+    return canvas;
+  };
+
+  const detectFace = async () => {
+    if (!webcamRef.current?.video || !canvasRef.current) return;
+
+    const video = webcamRef.current.video;
+    const canvas = canvasRef.current;
+    const context = canvas.getContext("2d");
+
+    if (!context) return;
+
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    context.clearRect(0, 0, canvas.width, canvas.height);
+    context.translate(canvas.width, 0);
+    context.scale(-1, 1);
+
+    const detections = await faceapi
+      .detectAllFaces(video, new faceapi.TinyFaceDetectorOptions())
+      .withFaceLandmarks()
+      .withFaceDescriptors();
+
+    if (detections.length > 0) {
+      const highConfidenceDetections = detections.filter(
+        (detection) => detection.detection.score > 0.5
+      );
+
+      for (const detection of highConfidenceDetections) {
+        const { box } = detection.detection;
+        context.strokeStyle = "#00FF00";
+        context.lineWidth = 2;
+        context.strokeRect(box.x, box.y, box.width, box.height);
+        context.save();
+        context.scale(-1, 1);
+        context.fillStyle = "#00FF00";
+        context.font = "16px Arial";
+        context.fillText(
+          `Confidence: ${Math.round(detection.detection.score * 100)}%`,
+          -box.x - box.width,
+          box.y - 5
+        );
+        context.restore();
+
+        const faceCanvas = extractFaceWithPadding(video, box);
+        faceCanvas.toBlob(
+          (blob) => {
+            if (blob) sendFaceDataToAPI(blob);
+          },
+          "image/jpeg",
+          0.95
+        );
+      }
+    }
+  };
+
+  const sendFaceDataToAPI = async (imageBlob: Blob) => {
+    try {
+      const formData = new FormData();
+      formData.append("image", imageBlob, "face.jpg");
+
+      const response = await fetch(
+        `${process.env.NEXT_PUBLIC_BASE_URL}/search`,
+        {
+          method: "POST",
+          body: formData,
+        }
+      );
+
+      const data = await response.json();
+      toast({ title: data?.name, description: data.message });
+    } catch (error) {
+      console.error("Error sending face data:", error);
+      toast({
+        title: "Error",
+        description: "Failed to send face data.",
+        variant: "destructive",
+      });
+    }
+  };
+
+  const startDetection = () => {
+    if (!isModelLoaded) return;
+    setIsDetecting(true);
+    setInterval(detectFace, 1000);
+  };
+  return (
+    <div className="max-w-3xl mx-auto">
+      <div className="relative">
+        <Webcam ref={webcamRef} mirrored className="w-full rounded-lg" />
+        <canvas
+          ref={canvasRef}
+          className="absolute top-0 left-0 w-full h-full"
+        />
+      </div>
+      <div className="mt-6 flex justify-center">
+        <Button
+          onClick={startDetection}
+          disabled={!isModelLoaded || isDetecting}
+        >
+          <Camera className="mr-2 h-4 w-4" />
+          {isDetecting ? "Detecting..." : "Start Realtime Detection"}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default WebcamDetection;

package-lock.json

@@ -14,6 +14,7 @@
         "clsx": "^2.1.1",
         "encoding": "^0.1.13",
         "face-api.js": "^0.22.2",
+        "hls.js": "^1.0.3-0.canary.7275",
         "lucide-react": "^0.474.0",
         "next": "15.1.6",
         "react": "^18.3.1",
@@ -3883,6 +3884,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hls.js": {
+      "version": "1.0.3-0.canary.7275",
+      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.0.3-0.canary.7275.tgz",
+      "integrity": "sha512-l8y7S4Hq042OpcH91BX2DgGzIslSv8dYF+BQd7Ood+wdJo6qvo0+6bHRc/c+wubSXBbd8KdJDJ0k428zmDOTIQ==",
+      "license": "Apache-2.0"
+    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",

package.json

@@ -15,6 +15,7 @@
     "clsx": "^2.1.1",
     "encoding": "^0.1.13",
     "face-api.js": "^0.22.2",
+    "hls.js": "^1.0.3-0.canary.7275",
     "lucide-react": "^0.474.0",
     "next": "15.1.6",
     "react": "^18.3.1",