# 🚀 Bubblecam - Your Sreen Recording System, Your Way!

## 🎥 What's Bubblecam?
Bubblecam lets you control your screen recoding like a boss. Use your **real camera** or switch to a **custom avatar**, drag it anywhere on your screen, and even **record your screen**! Works like magic in Microsoft Edge. 😎

---

## 🔥 Key Features
✅ **Toggle Between Camera & Avatar** - Be on cam or flex your avatar, your choice!  
✅ **Custom Avatar Upload** - Upload your own avatar to replace your webcam feed.  
✅ **Draggable Camera Bubble** - Move it **anywhere** on the screen, no restrictions!  
✅ **Screen Recording** - Capture your screen directly from the pop-up.  
✅ **Easy to Use** - No complicated setup, just load & go!  

---

## 🛠️ Tech Stack
- **HTML** (for the UI)  
- **JavaScript** (for all the cool interactivity)  

---

## 📂 Project Structure
```
bubblecam/
│
├── icons/                 # All the cool icons
│
├── camera.html            # Main camera interface
├── camera.js              # Handles camera logic
├── content.js             # Manages draggable camera bubble
├── desktopRecord.html     # UI for screen recording
├── desktopRecord.js       # Logic for screen recording
├── offscreen.html         # Off-screen camera handling
├── offscreen.js           # Off-screen magic happens here
├── popup.html             # Pop-up UI
├── popup.js               # Controls pop-up window
├── service-worker.js      # Injects & removes camera based on activity
```

---

## 🏗️ How to Install & Use in Microsoft Edge (100% Free!)
### **1️⃣ Download & Extract the ZIP**
- Hit **Download ZIP** (if it's from GitHub, click the green `<> Code` button > `Download ZIP`).
- Extract the folder to your PC.

### **2️⃣ Load It as an Unpacked Extension in Edge**
1. Open **Microsoft Edge** (yep, only Edge, sorry Chrome gang 🫠).
2. Go to `edge://extensions/`.
3. Toggle **Developer Mode** (top-right corner).
4. Click **"Load unpacked"**.
5. Select the **bubblecam** folder (the one you extracted).
6. Boom! Bubblecam is installed. 🎉

### **3️⃣ How to Use Bubblecam**
1. Click on the **Bubblecam icon** in Edge’s toolbar.
2. Choose **Camera Mode** or **Avatar Mode**.
3. **Upload Your Avatar** (if using avatar mode).
4. Drag your camera bubble anywhere you want! 🏀
5. Click **Record** to start screen recording.
6. Have fun being the director of your own screen. 🎬

---

## ⚡ Prerequisites
- A PC with **Microsoft Edge** installed.
- Camera & microphone permissions enabled (duh, you need a cam!).