# electron-live-camera

**Repository Path**: luckyblank/electron-live-camera

## Basic Information

- **Project Name**: electron-live-camera
- **Description**: 一款面向 Windows 录屏场景的摄像头悬浮窗应用。基于 Electron 构建，把摄像头实时画面以无边框、可拖拽、始终置顶的悬浮窗形式浮在屏幕最上层，并提供形状切换、画质滤镜、隐私遮挡、点击穿透等能力。控制面板独立成窗，悬停时从画面旁滑出，保证画面不被遮挡。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-02
- **Last Updated**: 2026-07-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Live Camera Overlay · 摄像头悬浮窗

一款面向 Windows 录屏场景的摄像头悬浮窗应用。基于 Electron 构建，把摄像头实时画面以无边框、可拖拽、始终置顶的悬浮窗形式浮在屏幕最上层，并提供形状切换、画质滤镜、隐私遮挡、点击穿透等能力。控制面板独立成窗，悬停时从画面旁滑出，保证画面不被遮挡。

---

## 功能特性

- **无边框悬浮窗**：透明背景、始终置顶，画面外区域完全透明。
- **整块可拖拽**：在画面任意位置按住即可移动窗口，拖动稳定不变形。
- **形状切换**：圆形 / 圆角 / 矩形，双击画面可循环切换。
- **画面比例**：1:1 / 16:9 / 9:16（圆形自动锁定 1:1）。
- **缩放方式**：右下角握把拖动、滚轮缩放、快捷键，均按比例并有最小尺寸保护。
- **镜像翻转**：水平镜像画面。
- **画质滤镜**：原图 / 柔和美颜 / 明亮 / 低光增强 / 黑白 / 暖色。
- **透明度调节**：单独作用于画面。
- **窗口定位**：3×3 九宫格快速定位（四角 / 四边 / 居中），支持贴边吸附。
- **隐私遮挡**：一键高斯模糊遮挡画面且不退出程序。
- **点击穿透**：录屏时让鼠标事件穿过悬浮窗。
- **独立控制面板**：悬停画面时从旁侧滑出，不遮挡画面；拖动时自动隐藏。
- **系统托盘**：显示 / 隐藏、切换形状、置顶、点击穿透、退出。
- **全局快捷键**：常用操作一键触发，被占用时自动切换备用键。
- **状态记忆**：形状、比例、透明度、滤镜、位置、遮挡、穿透、摄像头选择等重启后自动还原。
- **首启引导**：首次启动分步介绍所有隐藏操作。

---

## 环境要求

- Windows x64
- Node.js（建议 18+）
- 一个可用的摄像头设备

## 安装

```bash
npm install
```

## 运行（开发）

```bash
npm run start:electron
```

或带热重载的开发模式：

```bash
npm start
```

## 打包（Windows 安装包）

```bash
npm run build
```

产物位于 `dist/` 目录，包含 NSIS 安装包 `Live Camera Overlay Setup <version>.exe` 与免安装的 `dist/win-unpacked/`。

## 应用图标

图标母图位于 `assets/app-icon.png`。如需重新生成多尺寸 `.ico` 与 256×256 PNG：

```bash
npm run make-icon
```

---

## 使用说明

### 基本操作

- **移动窗口**：在画面任意位置按住拖动。
- **调整大小**：拖动右下角握把，或在画面上滚动滚轮。
- **切换形状**：双击画面循环切换圆形 / 圆角 / 矩形。
- **打开控制面板**：把鼠标移到画面上，面板会从画面旁侧滑出；移开鼠标后自动收起。

### 控制面板

悬停画面时出现，包含：

- 顶部操作：置顶、遮挡（隐私）、点击穿透、快捷键说明、退出。
- 形状：圆形 / 圆角 / 矩形。
- 比例：1:1 / 16:9 / 9:16，以及镜像开关。
- 位置：3×3 九宫格快速定位；透明度滑块。
- 画质滤镜、摄像头设备选择。

### 系统托盘

任务栏托盘图标：单击显示 / 隐藏窗口；右键菜单可切换形状、画面位置、窗口置顶、点击穿透，以及退出。

### 隐私遮挡与点击穿透

- **遮挡**：面板中的眼睛按钮（或快捷键）会模糊遮挡画面，程序继续运行，再次点击恢复。
- **点击穿透**：开启后鼠标事件穿过悬浮窗，适合录屏时不误触；通过快捷键或托盘再次关闭。

---

## 默认快捷键

全局快捷键，若被其他软件占用会自动切换到备用键（备用键在快捷键说明面板中以高亮显示）。

| 功能 | 默认快捷键 | 备用键 |
|---|---|---|
| 显示 / 隐藏窗口 | `Ctrl+Alt+C` | `Alt+Shift+C` / `F8` |
| 循环切换形状 | `Ctrl+Alt+S` | `Alt+Shift+S` / `F9` |
| 开关镜像 | `Ctrl+Alt+M` | `Alt+Shift+M` / `F10` |
| 放大窗口 | `Ctrl+Alt+=` | `Alt+Shift+=` / `F11` |
| 缩小窗口 | `Ctrl+Alt+-` | `Alt+Shift+-` / `F12` |
| 循环切换位置 | `Ctrl+Alt+P` | `Alt+Shift+P` / `F7` |
| 遮挡 / 恢复画面 | `Ctrl+Alt+B` | `Alt+Shift+B` / `F6` |
| 开关点击穿透 | `Ctrl+Alt+T` | `Alt+Shift+T` / `F5` |

---

## 目录结构

```
.
├── main.js                     主进程：窗口、面板、托盘、快捷键、设置
├── preload.js                  预加载：contextBridge 暴露的安全 API
├── assets/                     应用图标（png / ico）
├── scripts/
│   └── build-icon.js           从母图生成多尺寸 ico 与 256 png
├── src/
│   ├── main/
│   │   └── icon.js             运行时图标处理（托盘 / 窗口）
│   └── renderer/
│       ├── index.html          摄像头窗口
│       ├── app.js              摄像头窗口逻辑
│       ├── panel.html          控制面板窗口
│       ├── panel.js            控制面板逻辑
│       ├── panel.css           面板样式
│       └── styles.css          共享样式
└── plan/                       迭代计划文档（不打包）
```

设置文件保存在系统用户数据目录下的 `camera-overlay-settings.json`。

---

## 权限说明

首次启动会请求摄像头权限。如果权限被拒绝或没有可用摄像头，画面会显示友好的错误状态，并提供"打开系统设置"入口（`ms-settings:privacy-webcam`）。

## 许可

MIT