WebCamera(本项目使用智谱GLM系列模型辅助开发)

在局域网内实时查看移动设备摄像头的网络应用。

通过简单的网页界面，将手机、平板等移动设备的摄像头实时传输到电脑浏览器中查看。

特性

• 实时视频流 - 基于 Socket.IO 的低延迟视频传输
• 多设备支持 - 支持同时查看多个摄像头源
• 跨平台兼容 - 支持 iOS、Android 和桌面浏览器
• HTTPS 支持 - 内置自签名证书，满足 iOS 摄像头权限要求
• 零配置 - 自动检测局域网 IP，一键启动
• 前后摄像头切换 - 移动端可自由切换摄像头

快速开始

全局安装

npm install -g @lppx/webcamera
webcamera start

使用 npx

npx @lppx/webcamera start

指定端口

webcamera start --port 8080
# 或
webcamera start -p 8080

使用方法

1. 启动服务器 - 在电脑上运行 webcamera start
2. 访问页面 - 浏览器自动打开，或手动访问显示的地址
3. 提供摄像头 - 在移动设备上访问同一地址，点击「摄像头提供端」
4. 查看画面 - 在电脑上点击「摄像头查看端」即可看到实时画面

iOS 用户注意事项

[!IMPORTANT] iOS Safari 要求 HTTPS 连接才能访问摄像头。

服务器已内置 HTTPS 支持，请按以下步骤操作：

1. 使用 HTTPS 地址访问（如 https://192.168.1.x:3000）
2. 首次访问会显示证书警告，点击「显示详细信息」→「访问此网站」
3. 确认后即可正常使用摄像头

详细说明请参阅 iOS 使用指南。

本地开发

# 克隆仓库
git clone <repo-url>
cd webcamera

# 安装依赖
npm install

# 生成 HTTPS 证书（首次运行需要）
npm run generate-cert

# 开发模式运行
npm run dev

# 构建
npm run build

技术架构

┌─────────────────┐     Socket.IO      ┌─────────────────┐
│  摄像头提供端    │ ──────────────────► │     服务器       │
│  (移动设备)      │                    │   (Node.js)     │
└─────────────────┘                    └────────┬────────┘
                                                │
                                        Socket.IO
                                                │
                                                ▼
                                       ┌─────────────────┐
                                       │   摄像头查看端   │
                                       │   (桌面浏览器)   │
                                       └─────────────────┘

视频传输原理

1. 提供端通过 canvas.toBlob() 将视频帧转为 JPEG 图片
2. 图片通过 Socket.IO 实时传输到服务器
3. 服务器转发给所有查看端
4. 查看端将图片渲染到 <img> 元素，实现实时预览

API

CLI 命令

webcamera start [options]    启动网络摄像头服务器

选项:
  -p, --port <number>        指定服务端口 (默认: 3000)
  -v, --version              显示版本号
  -h, --help                 显示帮助信息

Socket.IO 事件

提供端 → 服务器:

| 事件 | 说明 | |------|------| | camera:provider:register | 注册为摄像头提供端 | | camera:data:push | 发送视频帧数据 |

查看端 → 服务器:

| 事件 | 说明 | |------|------| | camera:viewer:subscribe | 订阅摄像头列表 |

服务器 → 查看端:

| 事件 | 说明 | |------|------| | camera:list:update | 更新在线摄像头列表 | | camera:data:receive | 接收视频帧数据 |

常见问题

Q: 为什么 iOS 上无法访问摄像头？

A: iOS 要求 HTTPS 连接。请确保使用 https:// 地址访问，并接受证书警告。

Q: 画面有延迟怎么办？

A: 网络延迟是正常现象。确保设备和电脑在同一局域网内可获得最佳体验。

Q: 如何重新生成证书？

A: 运行 npm run generate-cert 即可重新生成自签名证书。

系统要求

• Node.js >= 14.0.0
• 支持 WebSocket 的现代浏览器

License

MIT