diff --git a/README.md b/README.md index c99779959bba79263fd98e017f42b911412c0864..e1c3a9ccbf93d4a14ba852bd6e6dbaf051535c76 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 7baf4badbd8c0870485b2e8e34a80d0936c6a5ca..b48675cbfac5391c05c0baed807b4d6d115a7b17 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 6e126632ae99bd4836cdffd30bcc536cd189dd85..bc960f6faffe1b8de7abeaaf52a48d2858a8ac86 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 }); @@ -1067,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 { @@ -1075,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停止播放，时延增加的问题。 diff --git a/sdk/src/CPHCloudApp.js b/sdk/src/CPHCloudApp.js index 1d1b1dd307292f08cfe697200a502bbc16d8c487..fbf3214dc1f7cffe696a41fc4e2a5918d75cd0d3 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 8013aa966f5e313d7a16ea15e9281f1768bdad54..25fd1d15eef8a6538c723a4370c192da7af323f9 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 06dd887947c49fc6a79d5a7dc88d912ed51bac0a..e3b485cb5f3fa20ee557a28e40aea54c508fad4b 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() {