概述
孩子使用手机自控能力差，沉迷手机，对孩子的学习影响是其次，但对视力的影响却是终身。借助专业的监控软件，能够远程掌握孩子使用手机的动态。无需频繁因育儿事务请假，也不必在工作时分心牵挂，有效化解上班忧心孩子、下班匆忙补位管教的双重困扰。 Android 开发的远程监控App，命名为嘟宝，它应包含以下主体功能
- 位置查看，包含当前位置与历史位置。了解孩子在哪，去过哪
- 查看摄像头画面，包含前后相机。了解孩子周边环境
- 聆听麦克风声音。听到孩子周边的声音
- 查看Android 桌面。知道孩子在玩什么
- 记录统计孩子使用手机的情况
嘟宝架构规划
嘟宝的架构去中心化，不做任何后台服务器的开发。父母查看端采用vue3开发，供App与小程序使用，称为嘟妈。嘟宝采用原生Android java开发。
嘟宝服务器
服务器作为通信的桥梁，它负责沟通嘟宝与赌妈信令转发。例如嘟妈想查看宝宝在哪，首先向服务区发送信令，服务器收到信令后，将信令转发给嘟宝，嘟宝收到信令，会与嘟妈建立一对一的通信，中间不经过服务器，用于传递信息与数据。所以服务器需搭建两项服务：
- MQTT 充当信令服务器
- Coturn穿越层层NAT建立一对一通信
MQTT
物联网设备通常资源受限（如低功耗、弱网络），而EMQX所基于的 MQTT协议正是为此而生。与常见的HTTP协议相比，MQTT的优势非常明显：
-
实时双向通信：HTTP主要只能由客户端请求，服务器响应；而MQTT是长连接，服务器可以随时主动"推送"控制指令给设备。
-
极省流量和电量：发送同样的数据，MQTT比HTTP能减少近50倍的网络流量，设备的耗电量也远低于HTTP。 多样的网络支持：无论是WiFi、4G/5G，还是窄带物联网NB-IoT，EMQX都能很好地支持设备接入。
Coturn
Coturn是一个开源的、实现了 TURN 和 STUN 协议的服务器软件，是搭建 WebRTC 应用，实现网络穿透的首选方案。可以把 Coturn 理解为一个解决“网络通路问题”的中转站，当两个设备（如手机和电脑）进行视频通话时，它们最理想的方式是直接点对点连接，但这常常因为复杂的网络环境（如防火墙、路由器）而失败。Coturn 服务器就提供了两套解决方案：
- STUN (Session Traversal Utilities for NAT)：这是“打洞”服务器。它帮助位于内网的设备发现自己对外的公网IP地址和端口，尝试在两者之间建立一条直接的“通道”。这种方式效率最高，但有约 20% 的失败概率（例如遇到对称型 NAT）。
- TURN (Traversal Using Relays around NAT)：当“打洞”失败时，Coturn 就切换成 “中继” 服务器模式。此时，所有音视频数据都会通过这台 Coturn 服务器进行转发。虽然这会增加服务器的带宽压力，但能保证连接在任何复杂网络下都能成功建立
嘟宝
嘟宝采用Android java/c++开发，属后台静默程序。现今Android对于功耗设计，在锁屏之后，后台程序占用资源过多，会被暂停，这就要求嘟宝后台程序驻留线程对资源的暂用极低，为保证后台持续激活状态，需部分采用C++编程。 嘟宝核心功能，通过MQTT协议，接收来自嘟妈的信令，建立音视频回话通道。嘟宝采用的流媒体协议是WebRTC。WebRTC (Web Real-Time Communication) 是一项强大的开源技术，它赋予了浏览器和移动应用直接进行实时通信的能力，省去了安装插件或依赖中间服务器的麻烦。WebRTC 让网页能像原生应用一样进行音视频通话。它之所以如此重要，核心在于解决了三个关键问题：
- 低延迟：优先使用UDP协议，即使在复杂网络下也能实现毫秒级的端到端通信，非常适合语音对话和视频会议。
- 跨平台：为开发者提供了统一的Web API，应用在Chrome、Firefox、Safari等主流浏览器以及Android和iOS上都能流畅运行。
- 高安全：强制要求对所有媒体流进行加密（使用DTLS和SRTP协议），确保了通信内容的机密性和完整性
嘟妈
嘟妈使用vue3开发，用 JavaScript 开发 App 和小程序，目前最主流、高效的方式是使用前端框架vue3。编写一套代码，然后编译成适用于 Android、iOS、各大小程序平台以及 H5 的应用。
嘟妈的核心功能，通过MQTT协议发送信令，建立webrtc音视频通信。
Vue3
Vue 3 是 Vue.js 的最新主要版本，通过组合式 API 解决了 Vue 2 中复杂组件逻辑分散难以复用的问题，并基于 Proxy 重写了响应式系统，弥补了原对象增删改查的监听缺陷；同时带来了性能的大幅提升（启动快 2 倍、体积减小 40%）、 TypeScript 集成以及
- 组合式 API (Composition API) —— 逻辑复用的革命
- 性能全面提升
- 基于 Proxy 的全新响应式系统
- 更好的 TypeScript 支持
- 更多开发便利性与新内置组件 Vue 3 是一个从底层重写的现代框架，它通过组合式 API 彻底解决了复杂组件的逻辑复用难题，同时带来了 Proxy 响应式、性能飞跃和一流的 TypeScript 支持，代表了 Vue 的未来方向。 参考链接: Vue基础教程
Bootstrap UI
Bootstrap 是一个开源的前端开发框架UI库，由 Twitter 团队创建并维护。它的核心目标是让开发者无需编写复杂的 CSS 和 JavaScript，就能快速构建美观、响应式的网页。简单来说，你只需要在 HTML 标签上添加特定的类名（class），Bootstrap 就会为你提供专业的样式和交互效果。它的特点如下：
- 响应式布局系统：基于 CSS3 的网格系统是其灵魂。它将一行等分为12列，通过组合 col- 前缀的类名，能轻松创建适应电脑、平板和手机屏幕的自适应布局。
- 丰富的 UI 组件：提供了大量现成的、样式统一的组件，直接复制 HTML 结构即可使用
- 强大的 JavaScript 插件
- 易于定制，源码使用 Sass 编写，提供了大量变量（如主题色、圆角半径、字体大小）。轻松覆盖这些变量，生成符合品牌风格的自定义样式。
Vite构建工具
Vite 是一个基于原生 ES 模块的下一代前端构建工具，其核心价值在于开发体验的极致提速：它利用 esbuild 预构建依赖，并借助浏览器对 ESM 的原生支持实现按需编译，从而带来毫秒级的冷启动和热更新；同时在生产环境底层依托 Rollup 进行打包，保证了产出的高质量优化（如 Tree-shaking、代码分割等）。简单说，Vite 让开发时几乎“无需等待”，构建时又能获得可靠的高性能产物。
