diff --git a/README.md b/README.md new file mode 100644 index 0000000..7544b60 --- /dev/null +++ b/README.md @@ -0,0 +1,77 @@ + +# Object Detector DLM Web + +## Overview + +`Object-Detector-DLM-WEB` is a web-based application that utilizes deep learning models for real-time object detection and tracking using your camera feed. The application is built using HTML, CSS, and JavaScript, and leverages TensorFlow.js with the COCO-SSD model to detect and label objects in the video stream. + +## Features + +- Real-time object detection using TensorFlow.js and COCO-SSD model. +- Camera access to stream live video for detection. +- Display of detected object names and confidence scores. +- Responsive design with Google UI/UX styling. + +## Getting Started + +### Prerequisites + +- A modern web browser that supports HTML5, CSS3, and JavaScript. +- Internet connection to load TensorFlow.js and COCO-SSD model from CDNs. + +### Installation + +1. **Clone the Repository:** + + ```bash + git clone https://github.com/harshitj183/Object-Detector-DLM-WEB.git + ``` + +2. **Navigate to the Project Directory:** + + ```bash + cd Object-Detector-DLM-WEB + ``` + +3. **Open `index.html` in Your Browser:** + + You can open the `index.html` file directly in your browser to view and use the application. + +### Usage + +1. **Allow Camera Access:** + + When you first load the application, you'll be prompted to allow access to your camera. Grant permission for the application to use the camera. + +2. **View Object Detection:** + + Once camera access is granted, the application will start streaming video and detecting objects in real-time. The detected objects and their names will be displayed on the video feed. + +## Files + +- `index.html`: The main HTML file that sets up the page structure. +- `style.css`: Contains the styling for the application, including Google UI/UX design. +- `script.js`: Contains the JavaScript code for handling video streaming, object detection, and drawing bounding boxes. + +## Contributing + +If you would like to contribute to this project, please follow these steps: + +1. Fork the repository. +2. Create a new branch for your feature or bug fix. +3. Commit your changes and push to your fork. +4. Open a pull request with a description of your changes. + +## License + +This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. + +## Acknowledgements + +- [TensorFlow.js](https://www.tensorflow.org/js) for providing deep learning capabilities in JavaScript. +- [COCO-SSD Model](https://github.com/tensorflow/tfjs-models/tree/master/coco-ssd) for object detection. +- Google UI/UX for design inspiration. + +## Contact + +For any questions or feedback, please contact [Harshit Jaiswal](mailto:harshitj183@gmail.com). \ No newline at end of file diff --git a/index.html b/index.html index 0b6ee94..492ac54 100644 --- a/index.html +++ b/index.html @@ -1,18 +1,29 @@ - - - - - - Object Detection and Tracking - - - -
- - -
- - - - - + + + + + + Object Detection and Tracking + + + +
+
+
+ Please allow camera access to use this application. +
+ + +
+ + + + + + + + + + + diff --git a/script.js b/script.js index efd1433..3afd655 100644 --- a/script.js +++ b/script.js @@ -1,15 +1,28 @@ const video = document.getElementById('video'); const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); +const instructions = document.getElementById('instructions'); -// Set up video stream -navigator.mediaDevices.getUserMedia({ video: true }) - .then(stream => { +// Function to set up video stream and handle permissions +async function setupCamera() { + try { + // Prompt user for camera access + const stream = await navigator.mediaDevices.getUserMedia({ video: true }); video.srcObject = stream; - }) - .catch(err => { + + // Update canvas size to match video size + video.onloadedmetadata = () => { + canvas.width = video.videoWidth; + canvas.height = video.videoHeight; + // Hide instructions once the camera is active + instructions.classList.add('hidden'); + }; + } catch (err) { + // Handle the error if user denies camera access or other issues occur console.error("Error accessing video stream: ", err); - }); + instructions.textContent = "Camera access is required for this application to function. Please allow camera access."; + } +} // Load COCO-SSD model let model; @@ -62,6 +75,10 @@ async function detectObjects() { } // Initialize -loadModel().then(() => { +async function initialize() { + await loadModel(); + await setupCamera(); detectObjects(); -}); +} + +initialize(); diff --git a/style.css b/style.css index f326f1d..4e5d30d 100644 --- a/style.css +++ b/style.css @@ -1,18 +1,73 @@ +/* Base Styles */ body { + font-family: 'Roboto', sans-serif; + background-color: #f5f5f5; /* Light grey background */ + margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; - margin: 0; - background-color: black; } .container { position: relative; + width: 100%; /* Full width of the viewport */ + height: 100vh; /* Full height of the viewport */ + max-width: 1200px; /* Max width for large screens */ + max-height: 900px; /* Max height for large screens */ + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */ + border-radius: 8px; /* Rounded corners */ + background-color: #ffffff; /* White background */ + overflow: hidden; /* Hide overflow */ + display: flex; + justify-content: center; + align-items: center; } +/* Video and Canvas */ video, canvas { position: absolute; top: 0; left: 0; + width: 100%; + height: 100%; + object-fit: cover; /* Maintain aspect ratio */ +} + +/* Loader */ +.loader { + position: absolute; + border: 8px solid #f3f3f3; /* Light grey */ + border-top: 8px solid #4285f4; /* Google blue */ + border-radius: 50%; + width: 60px; + height: 60px; + animation: spin 1s linear infinite; } + +/* Spin animation */ +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +/* Instructions */ +.instructions { + position: absolute; + color: #1f305e; /* Dark blue for text */ + font-size: 16px; + font-weight: 400; + padding: 10px; + background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white */ + border-radius: 4px; + z-index: 10; /* Ensure it is above other elements */ + display: block; /* Ensure it is visible */ +} + +/* Hide instructions when camera is active */ +.instructions.hidden { + display: none; +} + +/* Fonts */ +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');