huaweicloud-cloudPhoneAccess-web:华为云手机端云协同方案H5-SDK，助力快速构建云游戏与个人云手机业务

华为云手机开源项目仓主入口

H5-SDK

1. 项目简介

华为云手机端云协同方案，致力于高效、便捷的接入并使用华为云手机，涵盖信令交互、接入鉴权、音视频流传输、解码渲染、触控采集等模块，使得客户构建云游戏、个人云手机等业务场景变的简单。客户在云手机内部署 CloudAppEngine，真机侧集成安卓和 H5 的 SDK，RemoteServer 实现相关 RestApi 接口，进一步结合业务场景需要来丰富相关模块，实现完善的接入方案。

2. 组件交互

1. SDK->RemoteServer: 客户端 SDK 向后端 server 请求一个空闲云机实例
2. RemoteServer->SDK: 后端 server 按需求找到一个空闲云机实例信息返回给客户端 SDK
3. SDK->cloudAppEngine: 客户端 SDK 通过云机实例信息向 cloudAppEngine 建链、认证，发心跳、控制信令、触控指令等
4. cloudAppEngine->SDK: cloudAppEngine 向客户端SDK发信令、发送音视频流等
5. cloudAppEngine->RemoteServer: cloudAppEngine 从后端 server 获取解密秘钥、上报事件等
6. RemoteServer->cloudAppEngine: 后端 server 响应 cloudAppEngine 的请求

3. 工程构建

3.1 目录介绍

└── sdk
    ├── src
    │    ├── 3rd  <三方依赖>
    │    ├── common  <公共>
    │    ├── config  <配置>
    │    ├── worker  <音视频解码处理等>
    │    ├── AESGCMCrypto.js  <加解密>
    │    ├── AppController.js  <逻辑控制>
    │    ├── AudioPlayer.js  <音频播放>
    │    ├── AutoRotation.js  <自动旋转>
    │    ├── CanvasPlayer.js  <视频渲染>
    │    ├── CloudApp.js  <接口层>
    │    ├── DelayAnalysis.js  <时延分析>
    │    ├── FrameParser.js  <帧解析>
    │    ├── Fullscreen.js  <全屏>
    │    ├── Logger.js  <日志>
    │    ├── TouchHandler.js  <触控>
    │    └── Util.js  <工具>
    └── index.html  <测试页面>

3.2 工程运行

3.2.1 打包

在sdk目录操作

命令	用途
npm install	安装打包脚本依赖的包
npm run dev	开发模式
npm run build	生产模式
node package.js	将产物输出为 tar.gz 包，放在 dist 目录下

3.2.2 开发测试

（1）修改 index.html 中的接入地址等配置

（2）执行 npm run dev 命令

（3）进入 dist 目录，通过index.html启本地server。

3.3 产物下载

## 可以直接下载本项目构建好的产物进行尝鲜使用，下载解压后，修改 demo.html 中 ip、port 即可连接
https://gitee.com/HuaweiCloudDeveloper/huaweicloud-cloudPhoneAccess-web/releases/tag/v23.3.0

3.4 FAQ

（1）Error in connection establishment: net::ERR_CERT_AUTHORITY_INVALID

wss 协议需要证书认证，可能是证书问题导致，解决办法：改为 https 协议，在浏览器中打开一次，并信任，如 websocker 链接为wss://123.123.123.123:234，则用浏览器打开https://123.123.123.123:234

（2）window.crypto.subtle.importKey

https://javascript.develop-bugs.com/article/21525804/Chrome+packaged+app+UDP+sockets+not+working

I use a local server to obtain the response. Everything works fine when using localhost. The Request and Response are properly sent and obtained from the server. But, when connected over IP, it shows an error “NotSupportedError: Only secure origins are allowed”.
When I used Chrome canary, it said that importKey method is not recognized. So when I 'console'ed it with Chrome, the control did not go beyond the importKey method. What could possibly be the problem?
Chrome restricts the usage of WebCryptographyApi to secure origins. It means 'https'. localhost is a special address enabled for development. Therefore, to use WebCrypto in a real environment you need to setup a SSL/TLS server

4. 功能接口

4.1 是否满足运行

• 接口介绍

  CloudApp.isSupport();

• 功能描述

  获取当前环境是否满足 SDK 运行。

4.2 进入云手机

• 接口介绍

  const cloudApp = new CloudApp(containerId, params);

• 功能描述

  进入云手机。

• 参数介绍

  @param {string} containerId：渲染游戏视图的 DOM 元素 id，必选

  @param {object} params：启动相关配置，必选

  参数	是否必选	参数类型	描述
  ip	是	String	云手机IP地址
  port	是	String	云手机端口信息
  session_id	是	String	会话id
  ticket	是	String	随机数
  aes_key	是	String	对称秘钥
  auth_ts	是	String	验签时间戳
  background_timeout	是	String	home时长
  available_playtime	是	String	试玩时长
  touch_timeout	否	String	无触控时长
  user_id	否	String	用户id
  auto_rotate	否	Boolean	是否根据真机方向和应用方向自适应旋转画面

• 调用示例

  let session_id = "123e7654e89b12d3a412345655440000";
  let params = {
  	ip: "117.3.111.4",
  	port: "12345",
  	session_id: sessionId,
  	background_timeout: "60",
  	available_playtime: "6000",
  	ticket: "xxx",
  	aes_key: "xxx",
  	auth_ts: "123456789"
  };
  let cloudapp = new CloudApp("container", params);
  

4.3 退出云手机

• 接口介绍

  cloudApp.exit();

• 功能描述

  退出云手机。

4.4 重连云手机

• 接口介绍

  cloudApp.reconnect();

• 功能描述

  重新连接云手机。

4.5 获取音量值

• 接口介绍

  cloudApp.getVolume();

• 功能描述

  获取当前音量值。

4.6 设置音量值

• 接口介绍

  cloudApp.setVolume();

• 功能描述

  设置音量值。

4.7 获取是否全屏

• 接口介绍

  cloudApp.isFullscreen();

• 功能描述

  获取是否全屏状态，仅限PC浏览器。

4.8 全屏/非全屏切换

• 接口介绍

  cloudApp.fullscreenToggle(fullscreenElementId);

• 功能描述

  全屏/非全屏切换，仅限PC浏览器。

• 参数介绍

  @param {string} fullscreenElementId，全屏元素ID，必须是 containerId 或其对应节点的父级节点的 ID。选填项，若不提供则默认值为 containerId。

4.9 设置音视频参数

• 接口介绍

  cloudApp.setMediaConfig(config);

• 功能描述

  设置音视频参数。

• 参数介绍

  @param {config} config

  参数	参数类型	描述	约束
  bitrate	String	码率	1Mbit/s到10Mbit/s
  virtual_width	String	虚拟宽	240到4096，且为8的倍数
  virtual_height	String	虚拟高	240到4096，且为8的倍数

4.10 应用状态更新

• 接口介绍

  cloudApp.on("appStateChange", function(event, data){

  // todo

  });

• 功能描述

  业务可以根据接入状态自定义交互行为。

• 参数介绍

  @param {object} event，触发的事件，event 对象包含 name。

  @param {object} data，接入状态数据，data 对象包含 state、message 属性

4.11 网络时延更新

• 接口介绍

  cloudApp.on("netStateChange", function(event, data){

  // todo

  });

• 功能描述

  网络时延实时更新。

• 参数介绍

  @param {object} event，触发的事件，event 对象包含 name。

  @param {object} data，网络信息数据。

  属性	属性类型	描述
  delay	number	网络时延，单位是ms
  bitrate	number	码率，单位是kbps

5. 开发指导

6. license

Apache License 2.0。