DEADJOE

kitchen-monitor-webrtc

Secure WebRTC-based kitchen monitoring system for iPhone to iPad real-time video streaming

0
0
0
HTML
public
View on GitHub

🍳 厨房监视器 - iPhone到iPad实时视频传输

基于WebRTC技术的高安全性实时视频监控系统，专为厨房烹饪场景设计。让你的iPad作为监视器，实时显示iPhone的拍摄画面。

✨ 功能特性

🎥 核心功能

  • 📱 iPhone端: 作为摄像头，支持前后摄像头切换
  • 📺 iPad端: 全屏显示实时视频流，自动隐藏控制栏
  • 🔄 低延迟: 基于WebRTC P2P连接，延迟约200-500ms
  • 📶 WiFi传输: 通过本地WiFi网络传输，无需互联网
  • 🎯 专用设计: 针对厨房使用场景优化的简洁界面

🔒 安全特性

  • 🛡️ CORS保护: 严格的跨域访问控制
  • 🔐 输入验证: 完整的数据验证和清理机制
  • 📜 安全证书: 自签名HTTPS证书支持
  • 🚫 速率限制: 防止DDoS攻击
  • 🔒 安全头部: 完整的HTTP安全头部

🚀 智能功能

  • 📊 自适应质量: 根据网络状况自动调整视频质量
  • 🔄 智能重连: 网络断开后的自动重连机制
  • 📈 实时监控: 连接质量和性能实时监控
  • 🛠️ 资源管理: 智能内存泄漏防护和资源清理
  • 📱 多设备: 支持同时连接多个观看者

🎨 用户体验

  • 📸 截图功能: 一键保存当前视频画面
  • 🔍 双击缩放: 双击屏幕进行视频缩放
  • ⌨️ 快捷键: 支持键盘快捷键操作
  • 📊 质量指示: 实时显示连接质量
  • 💡 触摸提示: 友好的操作提示

🔧 技术规格

系统要求

  • Node.js: >= 14.0.0
  • 浏览器: Safari 14+, Chrome 80+, Firefox 75+
  • 网络: 本地WiFi，建议5GHz频段
  • 设备: iPhone 6s+, iPad Air 2+

协议支持

  • WebRTC: 支持1.0标准
  • Socket.IO: 4.x版本
  • 传输: WebSocket优先，HTTP长轮轮询备用
  • 加密: TLS 1.2+ (HTTPS模式)

性能指标

  • 延迟: 200-500ms (局域网)
  • 分辨率: 最高1080p自适应
  • 帧率: 15-30fps自适应
  • 并发: 支持最多10个观看者
  • 内存: < 100MB运行时占用

🚀 快速开始

1. 环境准备

确保你的Mac已安装：

2. 项目设置

# 1. 创建项目目录
mkdir kitchen-monitor
cd kitchen-monitor

# 2. 初始化项目
npm init -y

# 3. 安装依赖
npm install express socket.io
npm install --save-dev nodemon

# 4. 创建文件结构
mkdir public

3. 文件结构

kitchen-monitor/
├── server.js          # 信令服务器
├── package.json       # 项目配置
├── public/
│   ├── broadcaster.html # iPhone端页面
│   └── viewer.html     # iPad端页面
└── README.md          # 使用说明

4. 启动服务器

# 方式1: 直接启动
node server.js

# 方式2: 开发模式(自动重启)
npm run dev

# 方式3: 生产模式
NODE_ENV=production node server.js

服务器启动后会显示：

🔒 HTTPS服务器启动成功!
📱 iPhone访问: https://[你的IP]:3000/broadcaster.html
📺 iPad访问: https://[你的IP]:3000/viewer.html

🌐 HTTP服务器启动成功! (端口: 8080)
📱 iPhone备用访问: http://[你的IP]:8080/broadcaster.html
📺 iPad备用访问: http://[你的IP]:8080/viewer.html

5. 安全配置（可选）

创建环境配置文件：

# 创建.env文件
echo "NODE_ENV=production" > .env
echo "HTTPS_PORT=3000" >> .env
echo "HTTP_PORT=8080" >> .env

6. 验证安装

访问以下URL验证服务是否正常运行：

  • 根目录: http://localhost:3000 或 https://localhost:3000
  • iPhone端: http://localhost:3000/broadcaster.html
  • iPad端: http://localhost:3000/viewer.html

5. 获取本机IP地址

# macOS获取IP地址
ifconfig | grep "inet " | grep -v 127.0.0.1

# 或者在系统偏好设置 > 网络中查看

6. 设备连接

  1. 确保iPhone和iPad连接到同一WiFi网络
  2. iPad端:
    • 打开Safari浏览器
    • 访问: http://[你的IP]:3000/viewer.html
    • 等待连接iPhone
  3. iPhone端:
    • 打开Safari浏览器
    • 访问: http://[你的IP]:3000/broadcaster.html
    • 点击"开始广播"
    • 允许摄像头和麦克风权限

📋 使用步骤详解

iPhone端操作

  1. 📱 打开网页: 在Safari中访问broadcaster.html
  2. 🎥 开始广播: 点击"开始广播"按钮
  3. ✅ 权限确认: 允许访问摄像头和麦克风
  4. 🔄 切换摄像头: 点击"切换摄像头"按钮(前置/后置)
  5. ⏹️ 停止广播: 点击"停止广播"结束传输

iPad端操作

  1. 📺 打开监视器: 在Safari中访问viewer.html
  2. ⏳ 等待连接: 页面会自动连接iPhone
  3. 🖥️ 全屏观看: 点击"全屏"按钮进入全屏模式
  4. 🔄 重新连接: 如果断开，点击"重连"按钮

⚙️ 技术参数

  • 视频分辨率: 1280x720 (可调整)
  • 帧率: 30fps (可调整)
  • 音频: 支持音频传输
  • 延迟: 200-500ms (取决于网络环境)
  • 编码: VP8/VP9 (WebRTC自动选择)
  • 网络: 本地WiFi，无需互联网连接

🔧 自定义配置

调整视频质量

在broadcaster.html中修改视频约束：

const constraints = {
    video: {
        facingMode: currentFacingMode,
        width: { ideal: 1920 },      // 宽度
        height: { ideal: 1080 },     // 高度
        frameRate: { ideal: 30 }     // 帧率
    },
    audio: true
};

修改服务器端口

在server.js中修改：

const PORT = process.env.PORT || 8080; // 改为你想要的端口

🐛 故障排除

连接问题

  1. 确认设备在同一WiFi网络
  2. 检查防火墙设置
  3. 确认IP地址正确
  4. 重启服务器和刷新网页

权限问题

  1. iPhone: 在Safari设置中允许摄像头权限
  2. iPad: 确保允许自动播放视频
  3. HTTPS: 如需HTTPS，需要配置SSL证书

性能优化

  1. 关闭其他应用: 释放内存和CPU资源
  2. 稳定WiFi: 确保WiFi信号强度良好
  3. 降低分辨率: 如果卡顿，可以降低视频分辨率

📱 设备兼容性

支持的设备

  • iPhone: iPhone 6及以上 (iOS 11+)
  • iPad: iPad Air 2及以上 (iPadOS 13+)
  • 浏览器: Safari 11+

iPad Air 2特别说明

  • ✅ 支持iPadOS 15.8.4
  • ✅ 支持WebRTC
  • ✅ 支持H.264视频解码
  • ⚠️ 性能有限，建议使用较低分辨率

🔒 安全说明

  • 🏠 本地网络: 数据仅在本地WiFi网络传输
  • 🔐 无云存储: 不会上传到任何云服务
  • 👥 访问控制: 仅同一网络设备可访问
  • 🛡️ 临时会话: 关闭浏览器即断开连接

🎯 使用场景

  • 👨‍🍳 厨房烹饪: 监控炉灶和烹饪过程
  • 📹 直播辅助: 作为第二视角监视器
  • 👶 婴儿监护: 简单的婴儿监控系统
  • 🏠 家庭监控: 临时监控特定区域

🛠️ 进阶开发

已实现的高级功能

✅ 截图功能: 双指点击或使用快捷键截图
✅ 多设备支持: 支持同时连接多个观看者
✅ 自适应质量: 根据网络状况自动调整视频质量
✅ 智能重连: 网络断开后的自动重连机制
✅ 连接监控: 实时显示连接质量和性能统计
✅ 视频缩放: 双击屏幕进行视频缩放
✅ 键盘快捷键: 支持键盘操作
✅ 安全防护: 完整的安全机制和输入验证

可扩展功能

  • 🎙️ 音频支持: 添加双向音频传输
  • 📹 录制功能: 视频录制和本地保存
  • 🌙 夜视模式: 低光环境优化
  • 📊 数据分析: 连接质量历史记录
  • 🔔 通知系统: 连接状态推送通知
  • 🎨 主题定制: 界面主题和颜色定制

架构优化

  • 🏗️ 模块化重构: 进一步代码模块化
  • 🧪 测试覆盖: 添加单元测试和集成测试
  • 📦 容器化: Docker容器化部署
  • 📈 监控集成: Prometheus监控指标
  • 🔄 负载均衡: 支持多服务器部署

性能优化方向

  • 🚀 硬件编解码: 启用WebRTC硬件加速
  • 📊 智能调度: 基于设备性能的编码参数调整
  • 💾 内存优化: 进一步减少内存占用
  • ⚡ 缓存策略: 静态资源缓存优化
  • 🌐 CDN支持: 公网部署CDN加速

📄 许可证

MIT License - 可自由使用、修改和分发

🤝 贡献

欢迎提交Issue和Pull Request！

享受你的厨房监视器！ 🍳✨

v0.3.3[beta]