73 lines
2.6 KiB
Markdown
73 lines
2.6 KiB
Markdown
# 🚀 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!).
|
||
|
||
|
||
|
||
|