H5集成Demo

1.Demo介绍

  • 本章节提供移动云手机的演示项目Demo, 旨在帮助开发者快速集成接入H5客户端,体验云手机服务的主要功能:通过AKSK轻松调用OpenAPI实现云手机的原子操作(如开机、关机、重启、初始化等)及场景化流程(如数据备份、应用安装等)。开发者也能参考其中的代码,在实际的客户端应用中实现相似的功能。
  • 移动云手机H5集成Demo代码下载地址

2.常用命令

  • npm install 安装依赖包
  • npm run dev 开发环境运行项目
  • npm run build 项目打包

3.主要目录说明

├── public                      静态资源
|   ├── cloud-sdk.min.js        连接WebRTC的H5-SDK打包文件
├── src                         源码目录
|   ├── assets                  静态资源
|   ├── components              与菜单构建相关的hook和组件
|   ├── router                  路由设置
|   ├── store                   pinia配置文件
|   ├── tools                   工具类变量和函数
|   |   ├── baseURL.ts          本项目用到的所有OpenAPI接口URL常量
|   |   ├── openApi.ts          AKSK加密的主要步骤函数
|   |   ├── tools.ts            封装的工具函数
|   |   ├── url.ts              生成最终AKSK加密地址的函数   
|   ├── type                    ts类型
|   ├── view                    具体展示组件(目前包括:AKSK输入、WebRTC拉流、云机实例开关机等原子操作和数据备份、应用安装等场景化)
├── README.md                   项目相关介绍
​

4.使用介绍

4.1 录入AKSK

  • 购买云手机实例的用户均可在左侧菜单中“AKSK认证加密”页面中,根据提示和所给链接获得AcesssKey和SecretKey
  • 在“AKSK认证加密”页面中,输入并录入AKSK。AKSK是调用后续所有openApi的基础,若要更换AKSK,请在该页面中重新录入
  • 关闭页面后,AKSK会自动清空,请重新录入
  • 注意:只有正确的AKSK才能成功调用后续所有接口,请用户妥善保管个人的AKSK

4.2 原子接口调用

  • 原子接口指的是单一云手机操作的接口,只完成单一的任务,不包含多个操作。
4.2.1 开机接口调用
  • 在左侧菜单中点击“开机接口”,进入“开机接口调用指南”页面,开机接口调用前提条件和注意事项已在页面中详细注明
  • 开机接口调用分为回调模式和轮询模式
  • 回调模式支持用户根据自己的需求进行自定义功能,可通过页面上的帮助中心链接查看具体细节
  • 轮询模式通过开机接口获得任务ID,再根据任务ID轮询任务执行状态接口,直到status字段为2可判断开机接口执行成功
  • 注意:状态为“已关机”的云手机才能调用此接口
4.2.2 WebRTC拉流
  • 在左侧菜单中点击“WebRTC拉流”,进入WebRTC拉流页面,首先调用云机配置查询接口,获得拉流需要的必要信息,该信息会自动填充至“云机拉流”卡片的输入框里,点击下方的云机拉流按钮,等待一会,右侧会出现WebRTC拉流的实时画面

  • 注意1:只有运行中(开机成功非异常)的云机才能调用获取云机配置信息进而成功拉流

  • 注意2:当云机成功拉流后,此时对云机进行关机、重启、初始化等操作让云机变成非运行状态后,右侧拉流云机的画面会卡顿导致无法操作

image20250414154428535.png

4.2.3 重启接口调用
  • 在左侧菜单中点击“重启接口”,进入“重启接口调用指南”页面,重启接口调用前提条件和注意事项已在页面中详细注明
  • 重启接口调用分为回调模式和轮询模式
  • 回调模式支持用户根据自己的需求进行自定义功能,可通过页面上的帮助中心链接查看具体细节
  • 轮询模式通过重启接口获得任务ID,再根据任务ID轮询任务执行状态接口,直到status字段为2可判断重启接口执行成功
  • 注意:状态为“运行中”、“已关机”、“异常”的云手机才能调用此接口

image20250414154320992.png

4.2.4 初始化接口调用
  • 在左侧菜单中点击“初始化接口”,进入“初始化接口调用指南”页面,初始化接口调用前提条件和注意事项已在页面中详细注明
  • 初始化接口调用分为回调模式和轮询模式
  • 回调模式支持用户根据自己的需求进行自定义功能,可通过页面上的帮助中心链接查看具体细节
  • 轮询模式通过初始化接口获得任务ID,再根据任务ID轮询任务执行状态接口,直到status字段为2可判断初始化接口执行成功
  • 注意1:状态为“运行中”、“已关机”的云手机才能调用此接口
  • 注意2:云手机初始化任务的时长只包含重置数据盘,不包含重启云手机
4.2.5 关机接口调用
  • 在左侧菜单中点击“关机接口”,进入“关机接口调用指南”页面,关机接口调用前提条件和注意事项已在页面中详细注明
  • 关机接口调用分为回调模式和轮询模式
  • 回调模式支持用户根据自己的需求进行自定义功能,可通过页面上的帮助中心链接查看具体细节
  • 轮询模式通过关机接口获得任务ID,再根据任务ID轮询任务执行状态接口,直到status字段为2可判断开机接口执行成功
  • 注意:状态为“运行中”的云手机才能调用此接口

4.3 场景化调用

  • 场景化指的是用户为完成某一特定场景,需要按步骤连续调用多个原子接口。
4.3.1 数据备份场景
  • 在左侧菜单中点击“备份恢复场景”,进入“备份恢复场景调用指南”页面,场景中所用到的多个原子接口调用前提条件和注意事项已在页面中详细注明
  • 准备工作:在执行数据备份场景化调用前,需要先导出云手机数据形成备份包;备份接口已经放在页面上方;
  • 演示过程中所有接口的云机Id需保持一致以保证场景正确执行
  • 恢复云手机数据以及重启接口都分为回调模式和轮询模式
  • 回调模式支持用户根据自己的需求进行自定义功能,可通过页面上的帮助中心链接查看具体细节
  • 演示过程中接口采用轮询模式进行场景模拟
  • 场景化会自动调用各个原子接口,对于异步接口根据任务ID轮询任务执行状态接口,直到status字段为2可判断当前异步接口执行成功,开始执行下一个原子接口;对于同步接口,收到响应后,开始执行下一个原子接口;
  • 注意:状态为“运行中”的云手机才能执行此场景
4.3.2 应用安装场景
  • 在左侧菜单中点击“应用安装场景”,进入“应用安装场景调用指南”页面,场景中所用到的多个原子接口调用前提条件和注意事项已在页面中详细注明
  • 演示过程中所有接口的云机Id需保持一致以保证场景正确执行
  • 云机初始化以及安装应用接口都分为回调模式和轮询模式
  • 回调模式支持用户根据自己的需求进行自定义功能,可通过页面上的帮助中心链接查看具体细节
  • 演示过程中接口采用轮询模式进行场景模拟
  • 场景化会自动调用各个原子接口,对于异步接口根据任务ID轮询任务执行状态接口,直到status字段为2可判断当前异步接口执行成功,开始执行下一个原子接口;对于同步接口,收到响应后,开始执行下一个原子接口
  • 注意1:初始化成功会自动重启云机,状态为“运行中”的云手机才能执行安装应用接口,因此初始化成功后轮询查询云机详情接口,云机状态为“运行中”时自动调用下一个原子接口
  • 注意2:状态为“运行中”的云手机才能执行此场景
本文档内容整理自移动云官方帮助中心(查看原文),仅供参考。