用scrcpy+快马平台1小时打造手机遥控演示系统

快速体验

1. 打开 InsCode(快马)平台 https://www.inscode.net
2. 输入框内输入如下内容：

   构建基于scrcpy的网页端实时标注系统原型，功能要求：1) 浏览器实时显示手机屏幕 2) 支持多人协同标注 3) 标注内容持久化 4) 点击热区设置。使用FastAPI构建后端，Vue3开发前端，通过WebSocket传输scrcpy视频流，集成Whiteboard SDK实现标注功能。提供Docker-compose一键部署方案。

3. 点击'项目生成'按钮，等待项目生成完整后预览效果

最近需要给团队做产品演示，发现直接用手机屏幕太小，观众看不清楚细节。于是研究了下如何把手机画面投影到网页端，还能让多人同时标注重点。意外发现用scrcpy配合InsCode平台，居然1小时就能搭出完整原型系统！

核心思路拆解

1. 手机画面采集：用scrcpy命令行工具捕获安卓设备屏幕，通过ADB转发视频流。这个开源工具稳定且延迟低，实测720p画面传输只有200ms左右的延迟。

2. 视频流中转：用FastAPI搭建WebSocket服务，将scrcpy的原始帧数据转为MJPEG格式。这里注意要处理帧率控制，避免浏览器卡顿。

3. 前端展示层：Vue3+Whiteboard SDK组合实现：

4. 左侧区域显示实时手机画面
5. 右侧集成白板工具（箭头/矩形/文字标注）

6. 底部添加热区设置面板

7. 数据同步：当任一用户添加标注时，通过WebSocket广播给所有连接客户端，标注数据用IndexedDB在本地暂存，定期同步到后端MongoDB。

踩坑记录

• scrcpy参数优化：最初直接传输1080p导致卡顿，后来发现设置--max-size 1280和--bit-rate 2M后流畅度提升明显

• 白板坐标映射：需要根据手机屏幕分辨率动态计算画布比例，否则标注位置会偏移。我的解决方案是让前端先获取视频元素的实际渲染尺寸

• 热区穿透问题：点击热区时会误触底层视频，用CSS的pointer-events: none完美解决

快速部署方案

所有组件用Docker-compose编排： 1. scrcpy容器处理设备连接 2. FastAPI服务单独容器 3. 前端静态资源用Nginx托管 4. MongoDB做持久化存储

在InsCode(快马)平台实测部署特别顺畅：

1. 直接把docker-compose.yml拖进项目
2. 平台自动识别容器配置
3. 点击部署按钮等待2分钟完成
4. 生成的外链地址直接分享给同事测试

实际体验比预想的简单太多，从代码编写到上线演示只用了咖啡凉掉的时间。这种需要多组件配合的项目，传统部署要折腾环境变量和端口映射，在快马平台上居然全是自动处理的。现在团队评审产品时，大家直接在网页上圈重点提意见，连QA同学都能精准标注Bug出现的位置，效率提升肉眼可见。

快速体验

1. 打开 InsCode(快马)平台 https://www.inscode.net
2. 输入框内输入如下内容：

   构建基于scrcpy的网页端实时标注系统原型，功能要求：1) 浏览器实时显示手机屏幕 2) 支持多人协同标注 3) 标注内容持久化 4) 点击热区设置。使用FastAPI构建后端，Vue3开发前端，通过WebSocket传输scrcpy视频流，集成Whiteboard SDK实现标注功能。提供Docker-compose一键部署方案。

3. 点击'项目生成'按钮，等待项目生成完整后预览效果