From f90793347d3dcbf06b7ee17f5c1a9957d280977f Mon Sep 17 00:00:00 2001 From: Yuan <294065614@qq.com> Date: Wed, 25 Sep 2024 16:53:09 +0800 Subject: [PATCH 1/3] 1 --- sdk/src/AppController.js | 1 + sdk/src/CPHCloudApp.js | 3 +- sdk/src/DirectionHandler.js | 75 ++++++++++++++++++++++--------------- sdk/src/Fullscreen.js | 4 +- 4 files changed, 49 insertions(+), 34 deletions(-) diff --git a/sdk/src/AppController.js b/sdk/src/AppController.js index 6e12663..6f22c5e 100644 --- a/sdk/src/AppController.js +++ b/sdk/src/AppController.js @@ -389,6 +389,7 @@ class AppController { this.directionHandler = new DirectionHandler({ containerId: this.options.containerId, isMobile: this.options.isMobile, + keepRatio: this.options.keepRatio, playerContainerId: this.playerContainerId, touchHandler: this.touchHandler }); diff --git a/sdk/src/CPHCloudApp.js b/sdk/src/CPHCloudApp.js index 1d1b1dd..fbf3214 100644 --- a/sdk/src/CPHCloudApp.js +++ b/sdk/src/CPHCloudApp.js @@ -85,7 +85,8 @@ class CPHCloudApp { reconnectTimes: userOptions.reconnect_times === undefined ? DEFAULT_RECONNECT_TIMES : userOptions.reconnect_times, libPath: userOptions.libPath, microPhoneOutputType: userOptions.microPhoneOutputType, - keycodeInput: userOptions.keycode_input === undefined ? true : userOptions.keycode_input + keycodeInput: userOptions.keycode_input === undefined ? true : userOptions.keycode_input, + keepRatio: userOptions.keepRatio // 是否保持宽高比 }; options.autoRotate = userOptions.auto_rotate && options.isMobile; if (userOptions.media_config) { diff --git a/sdk/src/DirectionHandler.js b/sdk/src/DirectionHandler.js index 8013aa9..25fd1d1 100644 --- a/sdk/src/DirectionHandler.js +++ b/sdk/src/DirectionHandler.js @@ -62,20 +62,19 @@ class DirectionHandler { clientHeight: 0, clientWidth: 0 }; - if (this.options.isMobile) { - this.keyboardInputContent = { - width: '0px', - height: '0px' - } - } else { - this.keyboardInputContent = document.getElementById('keyboardInputContent'); - } } else { this.netWorkInfo = document.getElementById('network-info'); this.messageModal = document.getElementById('messageModal'); this.exitModal = document.getElementById('exitModal'); this.buttonModal = document.getElementById('buttonModal'); this.ctrlEle = document.getElementById('controlBtn'); + } + if (this.options.isMobile) { + this.keyboardInputContent = { + width: '0px', + height: '0px' + } + } else { this.keyboardInputContent = document.getElementById('keyboardInputContent'); } } @@ -524,15 +523,16 @@ class DirectionHandler { border-radius: 5px; transform: translate(-50%, -50%); `; - this.keyboardInputContent.style.cssText = ` - display: ${this.currentDisplay ? this.currentDisplay : 'none'}; - position: absolute; - top: 0px; - left: ${-(clientWidth - this.containerEle.clientWidth)/2}px; - height: 40px; - width: ${clientWidth}px; - `; - + if (this.keyboardInputContent && !this.options.isMobile) { + this.keyboardInputContent.style.cssText = ` + display: ${this.currentDisplay ? this.currentDisplay : 'none'}; + position: absolute; + top: 0px; + left: ${-(clientWidth - this.containerEle.clientWidth)/2}px; + height: 40px; + width: ${clientWidth}px; + `; + } const left = this.ctrlEle.clientWidth/2; const top = this.netWorkInfo.clientHeight * 2.5; this.ctrlEle.style.top = `${top}px`; @@ -562,8 +562,8 @@ class DirectionHandler { commonTop = (this.containerEle.clientHeight - Number(window.getComputedStyle(this.messageModal).width.split('px')[0]))/2; buttonModalTop = (this.containerEle.clientHeight - Number(window.getComputedStyle(this.buttonModal).width.split('px')[0]))/2; buttonModalLeft = (this.containerEle.clientWidth - Number(window.getComputedStyle(this.buttonModal).height.split('px')[0]))/2 + Number(window.getComputedStyle(this.buttonModal).height.split('px')[0]); - keyboardInputLeft = (windowHeight - this.containerEle.clientWidth)/2 + this.containerEle.clientWidth - Number(window.getComputedStyle(this.keyboardInputContent).height.split('px')[0]/2); - keyboardInputTop = -Number(window.getComputedStyle(this.keyboardInputContent).height.split('px')[0])/2; + keyboardInputLeft = (windowHeight - this.containerEle.clientWidth)/2 + this.containerEle.clientWidth - Number(this.keyboardInputContent.height.split('px')[0]/2); + keyboardInputTop = -Number(this.keyboardInputContent.height.split('px')[0])/2; } const netWorkInfoWidth = this.containerEle.clientHeight; @@ -610,9 +610,9 @@ class DirectionHandler { commonTop = (this.containerEle.clientHeight - Number(window.getComputedStyle(this.messageModal).width.split('px')[0]))/2 + Number(window.getComputedStyle(this.messageModal).width.split('px')[0]); buttonModalTop = (this.containerEle.clientHeight - Number(window.getComputedStyle(this.buttonModal).width.split('px')[0]))/2 + Number(window.getComputedStyle(this.buttonModal).width.split('px')[0]); buttonModalLeft = (this.containerEle.clientWidth - Number(window.getComputedStyle(this.buttonModal).height.split('px')[0]))/2; - keyboardInputLeft = Number(window.getComputedStyle(this.keyboardInputContent).height.split('px')[0])/2; - keyboardInputTop = windowWidth - Number(window.getComputedStyle(this.keyboardInputContent).height.split('px')[0])/2; - } + keyboardInputLeft = Number(this.keyboardInputContent.height.split('px')[0])/2; + keyboardInputTop = windowWidth - Number(this.keyboardInputContent.height.split('px')[0])/2; + } const netWorkInfoWidth = this.containerEle.clientHeight; const keyboardInputWidth = windowWidth; @@ -781,21 +781,34 @@ class DirectionHandler { const deviceOrientation = window?.screen?.orientation?.angle || window.orientation; if ([DEVICE_ORIENTATION_ANGLES.PORTRAIT,DEVICE_ORIENTATION_ANGLES.REVERSE_PORTRAIT].includes(deviceOrientation)) { if ([PROTOCOL_CONFIG.ORIENTATION[0], PROTOCOL_CONFIG.ORIENTATION[16]].includes(this.orientation)) { - playerWidth = width; - playerHeight = height; + if (this.options.keepRatio) { + playerWidth = width; + playerHeight = width / CLOUD_PHONE_RATIO; + if(playerHeight > height) { + playerWidth = height * CLOUD_PHONE_RATIO; + playerHeight = height; + } + } else { + playerWidth = width; + playerHeight = height; + } } else if ([PROTOCOL_CONFIG.ORIENTATION[8], PROTOCOL_CONFIG.ORIENTATION[24]].includes(this.orientation)) { - const newWidth = width; - const newHeight = newWidth * CLOUD_PHONE_RATIO; - playerWidth = newHeight; - playerHeight = newWidth; + playerWidth = width * CLOUD_PHONE_RATIO; + playerHeight = width; } } else if([DEVICE_ORIENTATION_ANGLES.LANDSCAPE, DEVICE_ORIENTATION_ANGLES.REVERSE_LANDSCAPE].includes(deviceOrientation)) { if ([PROTOCOL_CONFIG.ORIENTATION[0], PROTOCOL_CONFIG.ORIENTATION[16]].includes(this.orientation)) { - playerWidth = height * CLOUD_PHONE_RATIO; playerHeight = height; + playerWidth = height * CLOUD_PHONE_RATIO; } else if ([PROTOCOL_CONFIG.ORIENTATION[8], PROTOCOL_CONFIG.ORIENTATION[24]].includes(this.orientation)) { - playerWidth = height; - playerHeight = width; + console.log(4) + if (this.options.keepRatio) { + playerHeight = width; + playerWidth = width * CLOUD_PHONE_RATIO; + } else { + playerHeight = width; + playerWidth = height; + } } } canvasElement.style.width = playerWidth + 'px'; diff --git a/sdk/src/Fullscreen.js b/sdk/src/Fullscreen.js index 06dd887..e3b485c 100644 --- a/sdk/src/Fullscreen.js +++ b/sdk/src/Fullscreen.js @@ -122,8 +122,8 @@ export default class FullScreen { playerHeight = clientHeight; } - canvasElement.width = playerWidth; - canvasElement.height = playerHeight; + canvasElement.style.width = playerWidth + 'px'; + canvasElement.style.height = playerHeight + 'px'; } updateContainerSize() { -- Gitee From 9a0c9b843024dcd143ebb14c7120e120d61316af Mon Sep 17 00:00:00 2001 From: Yuan <294065614@qq.com> Date: Wed, 25 Sep 2024 17:05:11 +0800 Subject: [PATCH 2/3] 1 --- README.md | 22 ++++++++++++---------- sdk/demo/demo.html | 3 ++- sdk/src/AppController.js | 6 ++++-- 3 files changed, 18 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index c997799..f2a208d 100644 --- a/README.md +++ b/README.md @@ -112,19 +112,20 @@ Chrome restricts the usage of WebCryptographyApi to secure origins. It means 'ht @param {object} params：启动相关配置，必选 - | 参数 | 是否必选 | 参数类型 | 描述 | - | ------------------ | -------- | -------- | ---------------------------------------- | - | ip | 是 | String | 云手机IP地址 | - | port | 是 | String | 云手机端口信息 | - | session_id | 是 | String | 会话id | - | ticket | 是 | String | 随机数 | - | aes_key | 是 | String | 对称秘钥 | - | auth_ts | 是 | String | 验签时间戳 | + | 参数 | 是否必选 | 参数类型 | 描述 | + | ------------------ | -------- | -------- | ---------------------------------------- | + | ip | 是 | String | 云手机IP地址 | + | port | 是 | String | 云手机端口信息 | + | session_id | 是 | String | 会话id | + | ticket | 是 | String | 随机数 | + | aes_key | 是 | String | 对称秘钥 | + | auth_ts | 是 | String | 验签时间戳 | | background_timeout | 是 | String | 页面非活跃状态超时时长 (取值范围\[16,3600\]，单位是s) | | available_playtime | 是 | String | 单次连接可用时长 (值为0时，无超时判断) | | touch_timeout | 否 | String | 无触控时长 (值为0时，无超时判断) | - | user_id | 否 | String | 用户id | - | auto_rotate | 否 | Boolean | 是否根据真机方向和应用方向自适应旋转画面 | + | user_id | 否 | String | 用户id | + | auto_rotate | 否 | Boolean | 是否根据真机方向和应用方向自适应旋转画面 | + | keepRatio | 否 | Boolean | 是否始终保持CLOUD_PHONE_RATIO中设置的横纵比 | | media_config | 否 | Object | 可配置虚拟分辨率宽高（stream_width、stream_height）和 真机物理宽高(physical_width、physical_height) | - 调用示例 @@ -399,6 +400,7 @@ Chrome restricts the usage of WebCryptographyApi to secure origins. It means 'ht auto_rotate: true, libPath: window.location.origin + '/lib/', // 配置库文件地址 microPhoneOutputType: 'OPUS', // PCM或OPUS + keepRatio: false, // 保持横纵比 fullscreenId: this.fullscreenContainer, // 全屏DOM ID media_config: { stream_width: '320', diff --git a/sdk/demo/demo.html b/sdk/demo/demo.html index 7baf4ba..a53730a 100644 --- a/sdk/demo/demo.html +++ b/sdk/demo/demo.html @@ -578,7 +578,8 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd. _debug: true, auto_rotate: true, libPath: commonLibPath, // 配置库文件地址 - microPhoneOutputType: 'OPUS' // PCM或OPUS + microPhoneOutputType: 'OPUS', // PCM或OPUS + keepRatio: false // 保持横纵比 }; try { if (CloudApp.isSupport()) { diff --git a/sdk/src/AppController.js b/sdk/src/AppController.js index 6f22c5e..bc960f6 100644 --- a/sdk/src/AppController.js +++ b/sdk/src/AppController.js @@ -1068,7 +1068,9 @@ class AppController { if (this.isMSE) { this.player.style.setProperty('width', '100%', 'important'); - this.player.style.setProperty('height', '100%', 'important'); + if (!this.options.keepRatio) { + this.player.style.setProperty('height', '100%', 'important'); + } // 硬解时video标签会按比例填充视频，避免视频被裁减设置contain显示完整画面 this.player.style.setProperty('object-fit', 'contain', 'important'); } else { @@ -1076,7 +1078,7 @@ class AppController { this.player.style.setProperty('margin', '0 auto', 'important'); } // 有些手机是硬解场景，将画面覆盖整个video容器，避免出现黑边 - if (this.isMSE && this.options.isMobile) { + if (this.isMSE && this.options.isMobile && !this.options.keepRatio) { this.player.style.setProperty('object-fit', 'fill', 'important'); } // 解决真机键盘弹起后，浏览器可视窗变小，video高度很小而导致video停止播放，时延增加的问题。 -- Gitee From 86a9685868601a6d2d689595e1ae1060fa3de371 Mon Sep 17 00:00:00 2001 From: Yuan <294065614@qq.com> Date: Fri, 27 Sep 2024 15:16:13 +0800 Subject: [PATCH 3/3] 1 --- README.md | 4 ++-- sdk/demo/demo.html | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index f2a208d..e1c3a9c 100644 --- a/README.md +++ b/README.md @@ -125,7 +125,7 @@ Chrome restricts the usage of WebCryptographyApi to secure origins. It means 'ht | touch_timeout | 否 | String | 无触控时长 (值为0时，无超时判断) | | user_id | 否 | String | 用户id | | auto_rotate | 否 | Boolean | 是否根据真机方向和应用方向自适应旋转画面 | - | keepRatio | 否 | Boolean | 是否始终保持CLOUD_PHONE_RATIO中设置的横纵比 | + | keepRatio | 否 | Boolean | 是否始终保持CLOUD_PHONE_RATIO中设置的宽高比 | | media_config | 否 | Object | 可配置虚拟分辨率宽高（stream_width、stream_height）和 真机物理宽高(physical_width、physical_height) | - 调用示例 @@ -400,7 +400,7 @@ Chrome restricts the usage of WebCryptographyApi to secure origins. It means 'ht auto_rotate: true, libPath: window.location.origin + '/lib/', // 配置库文件地址 microPhoneOutputType: 'OPUS', // PCM或OPUS - keepRatio: false, // 保持横纵比 + keepRatio: false, // 保持宽高比 fullscreenId: this.fullscreenContainer, // 全屏DOM ID media_config: { stream_width: '320', diff --git a/sdk/demo/demo.html b/sdk/demo/demo.html index a53730a..b48675c 100644 --- a/sdk/demo/demo.html +++ b/sdk/demo/demo.html @@ -579,7 +579,7 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd. auto_rotate: true, libPath: commonLibPath, // 配置库文件地址 microPhoneOutputType: 'OPUS', // PCM或OPUS - keepRatio: false // 保持横纵比 + keepRatio: false // 保持宽高比 }; try { if (CloudApp.isSupport()) { -- Gitee