干货满满_携程订房后,因酒店出现问题如何取消订单_携程酒店统一云手机平台探索与实践

前言介绍了携程酒店通过云手机平台实现了全场景设备管理和远程操作的探索与实践通过集中管理验收人员的设备和远程操作入口，实现了不同地域请求的中心化分发和本地设备的实时同步使用 iOS 的 WebDriverAgent 来实现远程设备操控，通过画面抓取和转码实现了远程画面同步。

今日前端早读课文章由 @酒店效能团队分享，公众号：携程技术授权@酒店无线效能研发组，负责酒店无线团队的基础能力平台研发，例如 Cloud Touch 平台（云端手机）、内容运营平台、自动化测试流程等通过日常规律性事务的抽象总结，提供解决方案，提高平台承载业务的整体效能。

正文从这开始～～【第3166期】本地工具：代码的远程之旅一、背景携程内部有多个部门或团队需要在 App 新版本、新站点完成研发阶段的所有功能测试后，在上架前 (Post Release) 进行无拘束的从客人视角验收。

例如，客服人员在客人协助、新员工培训等场景中也需要使用生产资源来获得与客人相同的视角，这对测试环境的适用性提出了巨大挑战无论是操作体验还是资源对齐等方面，测试环境都难以满足需求例如，为了满足 Trip.com 新站点上线前的海外驻地验收需求，需要支持新站点的新功能提前向特定人群释放。

例如，为了满足客服人员在与客户沟通时能够从客户的视角进行操作的需求，需要支持员工和客户的视角一致的 App 操作平台二、全场景建设我们综合评估了相似需求以及平台能力的辐射面后，下图展示了我们对系统（下文统一命名为 Cloud Touch）的预期适用人群：。

以驻地验收场景为例：基于 Cloud Touch 平台，可以统一管理验收人员的设备，通过云平台提供统一的远程操作入口这样，无论员工身处世界的任何地方，都可以方便地使用集中维护的设备，同时新站点的 RC 包将在 Cloud Touch 上提前上架，完成待验收版本的部署。

以客服协助场景为例：基于客服工作台给员工提供统一的进入 Cloud Touch 的入口，员工可以在与客户的对话中了解客户的 App 版本，并快速在设备池中选择相关的预置实机进行场景鉴定。

三、基于 Cloud Touch 的技术解决方案3.1 核心平台设计基于以上分析，平台需要解决的是覆盖不同应用场景的设备资源分配管理问题，实现不同地域请求的中心化分发问题，提供本地设备的远程操控以及画面的实时同步问题，以达到类似远程桌面的交互体验。

并通过平台化的收口能力为不同业务场景提供统一的预置参数和环境配置，使各项工作的标准化进一步提升

3.2 设备分池设计我们有大量的客服员工座席，同时也有研发线的测试验收人员设备池足够大是硬件条件，但如何有效利用这些设备，并协调好不同应用场景的人和设备关系，还需要一套满足核心场景的分配策略设计主要的核心流程如下：。

3.3 远程设备操控设计与实现实现了平台化和设备的统一分发工作后，技术的核心在于如何选型并实现一套端到端的远程控制方案因为不同系统的对接技术不同，此处我们以 iOS 的实现为例WebDriverAgent 是 Facebook 在 17 年的 SeleniumConf 大会上推出的一个新的 iOS 移动测试框架（WDA）。

WebDriverAgent 在 iOS 端实现了一个 WebDriver Server，可以实现与浏览器的交互它的实现使用了经典的 Server-Client 架构（C/S），客户端发送一个 Request，服务器端返回一个 Response，借助这个 Server 可以远程控制 iOS 设备。

WDAClient：基于 WebDriverAgent 实现的 WDA 客户端facebook-wda 就是 WDA 的 Python 客户端库，通过直接构造 HTTP 请求直接与 WebDriverAgent 通信。

WDAServer：运行 WDA App 的机器，实现了 WebDriver 的通讯协议Session：服务器端需要维护客户端的 Session，客户端首次发送请求的字符串是 /session/sessionId/url′。

服务器端根据 url 打开对应的 url 地址，同时将 sessionId 解析成真实的值，然后返回给客户端以后客户端再向浏览器发送请求时，会携带 session 值一起发送WebElement：WebDriverAPI 中的对象，代表页面上的一个 DOM 元素。

JsonWireProtocol：是通过使用 webdriver 与 remote server 进行通信的 web service 协议通过 http 请求，完成和 remote server 的交互。

Mobile JSON Wire Protocol Specification：移动端自动化协议。

此处引用了 WDA 官方的部分基础技术说明，如您感兴趣可以再进一步参考 github 上的 facebook archive 项目3.3.1 指令集适配Client 端可以接收多种不同类型的指令以完成不同的动作，主要包括以下几种：

（1）基本指令通信格式（iOS/Android 格式公用，处理略有不同，以下用 iOS 举例）：{"serial":"00008030-000D48A40291802E",// IOS设备udid"type"

:"M_TOUCH",// 命令类型枚举值"message":{"action":0,// 鼠标或键盘 0按下 1松开"keycodeType":"ascii",// 代表键盘事件输入的是ascii码"keyCode"

:60,// 键盘按下了哪个键 非ascii时响应对应系统键"position":{"x":687,// 鼠标点击事件x像素坐标"y":1116,// 鼠标点击事件y像素坐标}}}（2）基本指令：鼠标事件 (点击 / 滑动操作)

前端页面根据设备上报的分辨率和用户在画面上操作的位置，计算鼠标的像素位置 x,y 并组装鼠标事件命令Client 收到 action=0 命令时（即按下鼠标时），记录鼠标按下的坐标和命令的时间Client 收到 action=1 命令时（即松开鼠标时），记录鼠标松开的坐标和命令的时间。

Client 根据设备的 scale (IOS 设备像素和 uiKit 的缩放比) 将命令下发的像素坐标转换为 ui 操作坐标，获得命令的起点和终点将按下和松手的时间差值作为命令的执行时间，组装 WDA 命令。

请求 WDA 的 url 为：/wda/swipe，根据起点、终点、命令执行时间、命令触发频率的不同可产生点击、长按、双击、滑动的效果（3）基本指令：按键事件前端记录用户按下的按键并转换为 ascii 码，组装键盘输入事件，长时间按压会连续产生的命令；用户在页面上点击的系统按键 (电源、主页、菜单键) 也会被转换为键盘输入事件。

星界云手机，打破手机的局限，体验全新的云端世界！专业级GPU硬件加速，全面兼容Android原生APP，为你带来前所未有的便捷、流畅和强大的移动体验。

Client 收到 action=0 时，若收到 ascii 码的字符，则触发字符输入事件；若收到系统按键，则组装对应的命令完成操作字符输入事件: /wda/keys 接口默认有同步快照机制，会消耗大量时间确保输入按照顺序进行，平均响应时间 1 字符 / 秒。

云手机对时效的要求更高，所以将 WDA 快照机制删除，并在 Client 中使用队列，将短时间内的多个字符合并成 1 个字符串，调用 1 次 /wda/keys 即可完成多个字符的输入，做到输入实时响应。

电源键：请求 /wda/locked 获取当前锁屏状态后，调用 /wda/lock 或者 /wda/unlock 进行锁屏与解锁主页键：请求 /wda/home 回到主页菜单键（APP 选择页）：WDA 未提供对应接口，通过组装上划命令请求 /wda/dragfromtoforduration，模拟上划进入菜单页。

注：这里不能使用 /wda/swipe，没有效果Client 收到 action=1 时，代表用户已经松手，不做响应（4）复杂脚本指令在上述基本操作之外，Client 还可以接受更多命令入参并支持唤起 UI 自动化脚本，自动化脚本将会完成更加复杂的指令，从而实现智能化控制与使用。

接收启动 app 类型、用户账号密码，页面 deeplink 等，唤起 app 完成用户登录后直接跳转进入对应页面接收 app 下载地址、版本号等，实现 app 的卸载与安装并处理弹窗等信息3.4 远程画面同步的设计与实现。

关于画面的同步，先抛一下大家熟知的 ffmpeg，这是一个开源的跨平台音视频处理工具，它可以用于录制、转换和流媒体处理等多种音视频操作我们通过抓帧操作，数据通过 ffmpeg 进行处理后依次进行 h.264 转码，并将编码信息推给到 web 端直播服务，当前 30s 的视频约 30M，h.264 转码后只有 3MB，画面流目前设置为 1 秒 20 帧。

3.4.1 画面抓取iOS 设备画面抓取流程：

（1）WDA mjpegServerWDA 自带 mjpegServer，mjpegServer 会不断地调用截屏 API，并将截屏数据压缩后组装成 mjpeg 的数据流格式发送到画面流的端口（2）截屏速度 / 压缩质量参数。

WDA mjpegServer 可以通过参数对截图的速度，截图后的压缩质量进行设置根据服务器性能和使用场景对 FBMjpegServerScreenshotQuality 和 FBMjpegServerFramerate 进行调整以得到最好的效果。

人眼对帧数的感知在 24 帧左右，所以我们将 FBMjpegServerFramerate 设置为 24，用户在使用时就不会感受到卡顿（帧率的选择在 3.4.2 第四小节讲述）static NSUInteger FBMjpegScalingFactor

=100;// 截图缩放比，默认100，一般不做修改static NSUInteger FBMjpegServerScreenshotQuality =25;// 截图压缩质量，范围1-100，默认25。

值越大图片质量越好static NSUInteger FBMjpegServerFramerate =24;// 截图输出速度，即帧率，默认10（3）Client 画面获取用户开始使用时，会产生画面初始化命令发送给 Client。

Client 通过 GET 请求画面流的端口，便可以得到连续的 mjpeg 画面流得到的画面流数据格式是以 --BoundaryString 分隔开的一张张 mjpeg 图片，每一张图片都可以单独作为 jpeg 图片保存下来。

3.4.2 流媒体处理iOS 画面流转视频流流程：

上文提到的 Client 端可以通过 GET 请求画面流端口得到一张张的 jpeg 图片，mjpeg 是帧内编码，数据非常大如果直接将该画面流数据推送给服务器，对使用方的带宽要求会非常高，所以要转成 h.264 的帧间编码方式。

（1）Client 请求画面流端口并逐帧抓取图片通过 ffmpeg 请求画面流端口，通过解码器抓取每一张 jpeg 图片（2）h.264 编码将抓取到的每一张 jpeg 图片都交给 ffmpeg 的编码器，设置参数并进行 h.264 编码并输出到标准输出。

补充：解码器和编码器的帧率设置需要略大于 WDA 设置的截屏速度，这样才能保证画面的响应一直是实时的（3）推流至流服务器我们使用了平台研发中心框架架构研发部多媒体组提供的流服务器通过引入框架团队提供的 JAR 包，便可方便将数据推流至服务器上。

ffmpeg 编码器标准输出的每一帧，都会用设备在平台上的主键作为唯一标识标记发送给流服务器公司的流服务器在接收到数据后，会根据唯一标识生成类似于直播间的播放地址前端访问该地址便可以看到手机的画面（4）推流码率

我们需要选取合适的帧率和码率，以达到视频流畅度和清晰度上的平衡：以码率上限设定为 4.5mbps 为例，用户端所需要的网络速度峰值 550KB/s 左右所需带宽 (KB/s) ≈ 推流码率最大值 (bps)/8/1024。

因为实际上用户的操作速度，并不会非常快，对于带宽的占用会更少，一般操作引起的画面变动所需带宽在 150-200KB/s 左右，而静止状态下所需带宽仅在 5-40KB/s综合各方面因素，我们是以 WDA 截屏速度为 24 的基础上适当加入了关键帧，将 Client 推流帧率定在 30 帧 /s，码率上限设定为 4.5mbps，实测占用带宽 350KB/s 左右，画面显示流畅、清晰、无花屏。

而我们使用的 WIFI 下载速度最高值在 7.5MB/s 左右，因此推流码率和带宽不是瓶颈瓶颈主要在于 ffmpeg 将图片流转换为视频流的效率通过计算，Client 端 java 单线程 ffmpeg 的转码效率在每秒 40 帧左右，这可以通过技术优化得到提高。

四、数据采集作为一套相关工种的员工将赖以推进日常工作的基础平台来讲，其稳定性必须是全维度可检测的，不仅需要支持对系统日常运行的健康进行监控，同时也要支持采集足够的运行数据，提供给平台研发人员分析并推进后续的迭代工作。

平台稳定性：通过各种监测维度数据及日志，提升用户感知稳定性使用检测量：用于评估用户依赖平台工作的量，后期平台迭代对用户的影响五、实践总结在面向自动化测试领域，包括携程在内，其实有很多的 UI 自动化测试方案所采用的技术与此相似，甚至使用的技术底座都是相同的，比如 WDA 框架就是 Facebook 推出的一项新的 iOS 移动测试框架。

无独有偶，我们团队在最初实现一些技术功能后，也是首先重点推广于测试场景但是携程的业务面非常宽广，我们不仅有开发测试场景，还有内容核验场景，尤其是我们的国际化走在前列，有大量的海外员工也要一起参与到非常多的验收环节。

那么像应用版本、参数配置、环境初始化、资源准备这些环节在不同国家的同事间同步或培训，是相当耗费人力和成本的，且效果并不佳基于我们对技术和平台的深度分析和演进后才发现，其实技术的应用空间很广，使一项基础的技术平台化起来后，很容易将场景、人员、设备、配置都统合在一起，很多交流成本可以直接降低，验收设备的不充分利用问题也得到了很好的解决，尤其是共性问题的发现和解决变得高效。

在我们后续的工作中，还将基于当前的一些体验进行以下几个方面的持续优化：模拟器场景支持并发安装包单设备的多场景复用最终使平台的体验完全可替代实机操作，让我们的潜在用户切身感受到上平台比自己在手机上做各项工作更加便利与高效。

关于本文作者：@酒店效能原文：https://mp.weixin.qq.com/s/1Pd12UebGREBaN8nt4USeQ

这期前端早读课对你有帮助，帮“ 赞 ”一下，期待下一期，帮“ 在看” 一下 。

释放你的想象力，尽在星界云手机！群控改机、定制镜像、界面预览、应用安装、云机授权、灵活组网，丰富功能满足个性化需求，打造属于你自己的私人云移动终端。