构建基于BS架构的远程客户端工具平台
如果无法正常显示,请先停止浏览器的去广告插件。
1.
2.
3.
4. O1
平台简介
O2
O3
技术实现
难点突破
未来展望
5. 平台简介
什么是远程客户端工具测试平台?
通过浏览器进行远程操作手机与 PC 设备的平台
6. 平台需求
为什么要构建远程测试平台?
1. 个人电脑性能有限
2. 充分利用测试设备
3. 远程办公需求-疫情原因
我们需要构建基于浏览器/服务器的远程测试平台!
7. 技术实现
8. 技术实现
Android
系统总体分为前端,后端,节点端
前端: 与用户交互,展示手机界面信息
后端:提供各种接口并作为桥梁转发视频流与
操作流
节点端:执行操作流,收集并上传视频流
视频流:使用开源工具 scrcpy 进行二次开发,
支持多机异地部署
https://github.com/Genymobile/scrcpy
https://github.com/NetrisTV/ws-scrcpy
9. 技术实现
通过websocket 将手机视频流
转发到用户浏览器,并且用户
的操作流也通过websocket转
发到client端
视频流与操作流通过 scrcpy
与手机进行交互
TaskFactory 执行一些手机
相关的处理命令
10. 技术实现
超低延迟,50ms以内
11. 技术实现
难点攻关
视频流与操作流是如果转发的?
使用redis pub/sub 模式进行转发
使用socketIO 长链接进行转发
音频如何播放?
使用开测录音服务
12. 技术实现
client 端发送视频流到 server 端
Server 接收到视频流并通过websocket转发
到浏览器
13. 技术实现
Server 端将浏览器发送过来的操作流转发到
node 端
client 端执行操作流
14. 技术实现
单控与群控
15. 技术实现
PC
通过 guacamole 代理服务通过VNC协议将虚
拟机视频流转发到浏览器,并将用户的操作
再通过VNC协议转发到虚拟机中
硬件层中的服务器配置要很高,这样才能并
发的运行多个虚拟机
http://guacamole.apache.org/
16. 技术实现
PC
浏览器与服务器通过websocket
协议进行视频流与操作流的转发
用户通过浏览器对虚拟机进行创
建删除等操作
虚拟机开放vnc端口
通过虚拟机模板clone 的方式,可以
快速的构建虚拟机
17. 技术实现
可多人共享屏幕,用于演示
bug复现步骤
也可个人独占系统
只要能开启vnc就可以接
入平台
18. 技术实现
Mac 系统
19. 技术实现
难点攻关
与系统快捷键冲突
创建冲突快捷键按钮
创建虚拟键盘
虚拟机动态生成
采用 linked clone 方式,随时
创建,用后即焚
20. 技术实现
Server 端从guacamole 端获取
vnc数据并通过websocket 转
发到浏览器中
Server 端从将浏览器传过来的
数据转到了guacamole 端,
guacamole再将数据通过VNC
发送到对应的虚拟机
21. 未来展望
1. 基于用户权限创建公有私有设备
2. 用户可以使用自己的设备接入平台
3. 减少usb线的使用,构建完全远控平台
22. 360技术
THANKS
360质量效能