# huaweicloud-cloudphone-web-vue **Repository Path**: Y294065614/huaweicloud-cloudphone-web-vue ## Basic Information - **Project Name**: huaweicloud-cloudphone-web-vue - **Description**: 暂无........................ - **Primary Language**: Unknown - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2024-06-14 - **Last Updated**: 2024-08-30 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ## H5-SDK-VUE ### 1. 项目简介 华为云手机端云协同方案，致力于高效、便捷的接入并使用华为云手机，涵盖信令交互、接入鉴权、音视频流传输、解码渲染、触控采集等模块，使得客户构建云游戏、个人云手机等业务场景变的简单。客户在云手机内部署 CloudAppEngine，真机侧集成安卓和 H5 的 SDK，RemoteServer 实现相关 RestApi 接口，进一步结合业务场景需要来丰富相关模块，实现完善的接入方案。 ### 2. 组件交互 三大模块：SDK、RemoteServer、cloudAppEngine 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 目录介绍 ``` └── src    ├── static     │ ├── 3rd <三方依赖>     │ ├── common <公共>    │ ├── config <配置>    │ ├── worker <音视频解码处理等>    │ ├── AESGCMCrypto.js <加解密>    │ ├── AppController.js <出流逻辑控制> │ ├── AppScreenPrtint.js <预览逻辑控制>    │ ├── AudioPlayer.js <音频播放>    │ ├── AutoRotation.js <自动旋转>    │ ├── CanvasPlayer.js <视频渲染>    │ ├── DeviceHardwareHandler.js <传感器>    │ ├── CPHCloudApp.js <出流接口层>    │ ├── StartScreenPrint.js <预览接口层>    │ ├── DelayAnalysis.js <时延分析>    │ ├── FrameParser.js <帧解析>    │ ├── Fullscreen.js <全屏>    │ ├── KeyboardInput.js <监听输入>    │ ├── KeyboardListener.js <映射输入>    │ ├── Logger.js <日志>    │ ├── TouchHandler.js <触控>    │ ├── Util.js <工具>    │ └── WebglRenderer.js <画布工具>    │    │── assets 基础资源及样式    │    │── router 路由导航    │    │── request 接口请求    │    │── request 公共配置    │    │── components │ └──phoneViewComp.vue 预览云机组件    └── views ├──LoginView.vue 登录页 ├──SinglePhoneView.vue 单云机连接页 └──PhoneList.vue 多云机预览页 ``` #### 3.2 工程运行 ##### 3.2.1 打包 在sdk目录操作 命令 | 用途 -- | -- npm install | 安装打包脚本依赖的包 npm run dev | 开发模式 npm run build | 生产模式 ##### 3.2.2 开发测试 （1）单云手机开发测试：使用websocket登录，修改 SinglePhoneView 中的接入地址等配置 （2）多云手机开发测试：使用IAM直连登录 （3）执行 npm run dev 命令 #### 3.3 产物下载 ```shell 待补充 ``` #### 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 是否满足运行 - 接口介绍 CPHCloudApp.isSupport(); - 功能描述 获取当前环境是否满足 SDK 运行。 #### 4.2 进入云手机 - 接口介绍 const cloudapp = new CPHCloudApp(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 | 页面非活跃状态超时时长 (取值范围15~3600，单位是s) | | available_playtime | 是 | String | 单次连接可用时长 (值为0时，无超时判断) | | touch_timeout | 否 | String | 无触控时长 (值为0时，无超时判断) | | user_id | 否 | String | 用户id | | auto_rotate | 否 | Boolean | 是否根据真机方向和应用方向自适应旋转画面 | | media_config | 否 | Object | 可配置虚拟分辨率宽高（stream_width、stream_height）和 真机物理宽高(physical_width、physical_height) | #### 4.3 退出云手机 - 接口介绍 cloudapp.exit(); - 功能描述 退出云手机。 #### 4.15 云手机多任务功能 - 接口介绍 cloudapp.menu(); - 功能描述 进入云手机多任务页面。 #### 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 | | stream_width | String | 虚拟宽 | 240到4096，且为8的倍数，与stream_height乘积不能大于云手机规格宽高乘积 | | stream_height | String | 虚拟高 | 240到4096，且为8的倍数，与stream_width乘积不能大于云手机规格宽高乘积 | #### 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 | #### 4.12 云机剪切板回调回调 - 接口介绍 cloudapp.on("clipboardDataChange", function(event, data){ // todo }); - 功能描述 获取云手机剪切板数据。 - 参数介绍 @param {object} event，触发的事件，event 对象包含 name。 @param {string} data，云手机剪切板数据。 #### 4.13 发送剪切板数据回调 - 接口介绍 cloudapp.sendClipboardData(data); - 功能描述 将端侧剪切板数据发送到云手机。 - 参数介绍 @param {string} data，端侧剪切板数据。 #### 4.13 云手机桌面功能 - 接口介绍 cloudapp.home(); - 功能描述 进入云手机桌面。 #### 4.14 云手机回退功能 - 接口介绍 cloudapp.back(); - 功能描述 应用退出、返回上一步。 ### 5. 开发及指导（重要） - Vue3项目集成 可自行修改router及LoginView.vue无缝集成到项目中。根据项目需求调整vue等文件的样式及逻辑 - 非Vue3项目集成 可自行修改router及LoginView.vue无缝集成到项目中 ### 6. FAQ - 出现AESGCMCrypto undefined的相关错误，是由于浏览器安全策略限制。需要使用HTTPS协议访问项目, 或使用localhost:XXXX、127.0.0.1:XXXX访问项目。 - 使用iframe嵌入项目，报SecurityError:The operation is insecure.相关错误。需要设置iframe标签的属性sandbox为allow-scripts。 - 使用iframe嵌入项目，报错Failed to read the 'localStorage' property from 'Window'.相关错误。需要给iframe标签添加allow-same-origin属性。 - 项目报错：Failed to execute 'importScripts' on 'WorkerGlobalScope': The URL '/xxx/xxx/lib/libffmpeg_264_265.js' is invalid。请检查 vue 中libPath(编解码库文件的地址)参数的值是否正确。libPath可以不用修改。如果用户需要修改，要写完整的目录路径，如：'https://110.123.23.34:1001/lib/'。验证目录地址配置是否正确，可在浏览器中输入'https://110.123.23.34:1001/lib/libffmpeg_264_265.js'访问，可成功访问文件内容，则配置正确。 ### 7. license Apache License 2.0。 ### 8. 附录 # CAE状态码 | 十进制消息码 | 消息内容 | 说明 | | ------------ | --------------------------- | ----------------------------- | | 256 | Connecting | Socket连接中 | | 512 | Connect success | Socket连接成功 | | 769 | Server unreachable | 服务器不可达 | | 770 | Resource in using | 资源正在使用中 | | 1024 | Verifying | 接入信息认证中 | | 1280 | Verify success | 接入信息认证通过 | | 1537 | Verify parameter missing | 缺少认证参数 | | 1538 | Verify parameter invalid | 认证参数非法 | | 1540 | Server inner error | 系统内部错误 | | 1541 | Server inner error | 系统内部错误 | | 1542 | Server inner error | 接入信息认证失败 | | 1543 | / | SESSION_ID校验失败 | | 2048 | Start success | Start指令执行成功 | | 2308 | Start parameter missing | Start指令缺少参数 | | 2560 | Connect lost | 连接丢失 | | 2816 | Reconnecting | 重新连接中 | | 3072 | Reconnect success | 重连成功 | | 3329 | Reconnect parameter invalid | 重连参数非法 | | 3331 | Server inner error | 系统内部错误 | | 3584 | Available time usedup | 可用时间已用完 | | 3840 | Notouch timeout | 未触屏时间超时 | | 4096 | Switch background timeout | 播流软件切换到后台超时 | | 4353 | Engine Start failed | 接入引擎开启失败 | | 4354 | / | 云手机不支持H265编码 | | 4608 | Switch backgroud | 播流软件切换到后台 | | 4865 | Server inner error | 播流软件切换后台失败 | | 5120 | Switch foregroud | 播流软件切换到前台 | | 5377 | / | 播流软件切换前台失败 | | 6400 | Back home | 退出播流软件 | | 8448 | Set media config success | 媒体配置设置成功 | | 8705 | Set media config error | 媒体配置设置失败 | | 8960 | / | CAE被抢占，当前客户端被迫下线 | | 65535 | Invalid Operation | 非法操作 |