diff --git a/README.md b/README.md index 5f4d77ac9ff2197a0ce280503e512eb1c7ceec6c..6a8453c67ec40ca33271d0116465ee2116eac277 100644 --- a/README.md +++ b/README.md @@ -39,7 +39,9 @@    │ ├── Logger.js <日志>    │ ├── TouchHandler.js <触控>    │ └── Util.js <工具> -   └── index.html <测试页面> +   └── demo + ├──demo.html 测试页面 + └──demo_multiple.html 单页面多云机连接测试页面 ``` #### 3.2 工程运行 @@ -54,11 +56,9 @@ npm run dev | 开发模式 npm run build | 生产模式 node package.js | 将产物输出为 tar.gz 包，放在 dist 目录下 ##### 3.2.2 开发测试 -（1）修改 index.html 中的接入地址等配置 +（1）修改 demo.html 中的接入地址等配置 （2）执行 npm run dev 命令 - -（3）进入 dist 目录，通过index.html启本地server。 #### 3.3 产物下载 ```shell ## 可以直接下载本项目构建好的产物进行尝鲜使用，下载解压后，修改 demo.html 中 ip、port 即可连接 @@ -223,8 +223,8 @@ Chrome restricts the usage of WebCryptographyApi to secure origins. It means 'ht | 参数 | 参数类型 | 描述 | 约束 | | -------------- | -------- | ------ | ---------------------- | | bitrate | String | 码率 | 1Mbit/s到10Mbit/s | - | virtual_width | String | 虚拟宽 | 240到4096，且为8的倍数 | - | virtual_height | String | 虚拟高 | 240到4096，且为8的倍数 | + | stream_width | String | 虚拟宽 | 240到4096，且为8的倍数 | + | stream_height | String | 虚拟高 | 240到4096，且为8的倍数 | #### 4.10 应用状态更新 diff --git a/sdk/demo/demo.html b/sdk/demo/demo.html index ece90424964614a70af9ffd26cd74287c7c9c64e..925923efe38f8ea7291b1166ecc9c2b17c8b7172 100644 --- a/sdk/demo/demo.html +++ b/sdk/demo/demo.html @@ -450,7 +450,6 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd. - + + diff --git a/sdk/index.html b/sdk/index.html deleted file mode 100644 index ece90424964614a70af9ffd26cd74287c7c9c64e..0000000000000000000000000000000000000000 --- a/sdk/index.html +++ /dev/null @@ -1,999 +0,0 @@ - - - - - - h5 demo - - - - - - -
-
-
- - - - - - - - - - -
-
-
- 时延 ms -
-
-
-
-

温馨提示

-
-
-

-
-
- -
-
-
-
-

温馨提示

-
-
-

确定退出吗？

-
-
- - -
-
-
- -
-
-
-
- - -
-
- - -
-
- - -
-
-
-
-
时延
-
-
-
-
-
-
全屏
-
-
-
-
-
退出云手机
-
-
- - - -
-
-
- -
-
-

信任目标机器

-
-
-

首次接入需点击下方信任按钮进行信任。

-

待信任页面停止刷新后，返回上一个页面。

-

在新页签中依次点击高级、继续前往，待页面停止刷新后，关闭信任页面。

-
-
- -
-
-
-
-
-
-
- - -
-
- - -
-
- - -
-
-
-
-
-
时延
-
-
-
-
- - - - -
-
- - - - - - diff --git a/sdk/package.json b/sdk/package.json index ac5963d5ea4222a6f4dce8ea3c443d557c18124e..d3968af0fc471caf75733e190a48855afa43d794 100644 --- a/sdk/package.json +++ b/sdk/package.json @@ -5,7 +5,7 @@ "main": ".eslintrc.js", "scripts": { "build": "webpack --config webpack.config.js", - "dev": "webpack --config webpack.dev.js --mode development --progress --colors --watch", + "dev": "webpack-dev-server --config webpack.dev.js --progress", "server": "webpack-dev-server", "eslint": "eslint src/** *.js -f html -o eslint-report.html", "esfix": "eslint src/** *.js --fix", @@ -44,6 +44,7 @@ "typescript": "^3.8.3", "webpack": "^4.41.5", "webpack-cli": "^3.3.11", + "webpack-dev-server": "^3.11.0", "webpack-merge": "^4.2.1" }, "author": "" diff --git a/sdk/src/AppController.js b/sdk/src/AppController.js index 5c5031c03dc92f607a858ce41d5f303b8d37099b..a2d0cc99055819bfd4dafbeec74ad447bba11e5e 100644 --- a/sdk/src/AppController.js +++ b/sdk/src/AppController.js @@ -105,6 +105,7 @@ const WORKER_STATE = { class AppController { constructor(options) { + this.firstIFrame = true; this.options = {volume: DEFAULT_VALUME_VALUE, ...options}; this.util = new Util(); this.render = true; @@ -1141,6 +1142,12 @@ class AppController { window.delayAnalysis.record(['play', 'buffered', 'message', traceId], buffered); } + if(this.firstIFrame) { + this.requestIFrame() + this.firstIFrame = false; + return + } + let bufTail = new Uint8Array([0x00, 0x00, 0x01, 0x1D, 0x00, 0x00, 0x01, 0x1E, 0x48, 0x53, 0x50, 0x49, 0x43, 0x45, 0x4E, 0x44]); let allDataBuf = new Uint8Array(frame.byteLength + bufTail.byteLength); allDataBuf.set(frame); @@ -1224,6 +1231,12 @@ class AppController { arrayBuf && this.send(arrayBuf); } + // 发送关键帧数 + requestIFrame() { + const arrayBuf = this.makeActionMsg('CMD_CONTROL', 'REQUEST_I_FRAME'); + arrayBuf && this.send(arrayBuf); + } + // 恢复样例 // 切换至home，暂停；60s内切回则发送恢复指令恢复，60s后切回，CAE清理资源，需要重新申请云手机 resumeCloudPhone() { diff --git a/sdk/src/CPHCloudApp.js b/sdk/src/CPHCloudApp.js index 51d79c7aa5001a0767a6341c75a155780d4ad61c..707c6fbca3a9007774be02288db0dc9ac332ce53 100644 --- a/sdk/src/CPHCloudApp.js +++ b/sdk/src/CPHCloudApp.js @@ -119,6 +119,10 @@ class CPHCloudApp { }); } + fullscreenToggle(fullscreenElementId) { + this.appController.fullscreenToggle(fullscreenElementId); + } + __defaultValidator (name, val, rule) { if (rule.startsWith('len')) { let subs = rule.split(':'); diff --git a/sdk/src/DirectionHandler.js b/sdk/src/DirectionHandler.js index 752132157e6b7a9bba653ffe88cb4e8c943a8bf3..f17f0f27dcf5c011b237a66745d2399fa71a8054 100644 --- a/sdk/src/DirectionHandler.js +++ b/sdk/src/DirectionHandler.js @@ -179,20 +179,22 @@ class DirectionHandler { background-color: rgba(0, 0, 0, 0.4); border-radius: 5px; `; - this.keyboardInputContent.style.cssText = ` - display: ${this.currentDisplay ? this.currentDisplay : 'none'}; - -webkit-transform: rotate(${positionParams.transformAngle}deg); - -moz-transform: rotate(${positionParams.transformAngle}deg); - -ms-transform: rotate(${positionParams.transformAngle}deg); - -o-transform: rotate(${positionParams.transformAngle}deg); - transform-origin: left; - transform: rotate(${positionParams.transformAngle}deg); - position: absolute; - top: ${positionParams.keyboardInputTop}px; - left: ${positionParams.keyboardInputLeft}px; - height: 0px; - width: 10px; - `; + if (this.keyboardInputContent) { + this.keyboardInputContent.style.cssText = ` + display: ${this.currentDisplay ? this.currentDisplay : 'none'}; + -webkit-transform: rotate(${positionParams.transformAngle}deg); + -moz-transform: rotate(${positionParams.transformAngle}deg); + -ms-transform: rotate(${positionParams.transformAngle}deg); + -o-transform: rotate(${positionParams.transformAngle}deg); + transform-origin: left; + transform: rotate(${positionParams.transformAngle}deg); + position: absolute; + top: ${positionParams.keyboardInputTop}px; + left: ${positionParams.keyboardInputLeft}px; + height: 0px; + width: 10px; + `; + } this.ctrlEle.style.top = `${positionParams.ctrlEleTop}px`; this.ctrlEle.style.left = `${positionParams.ctrlEleLeft}px`; @@ -277,8 +279,15 @@ class DirectionHandler { const ctrlEleTop = (this.containerEle.clientHeight - this.displayBox.width)/2 + this.netWorkInfo.clientHeight; const ctrlEleLeft = this.containerEle.clientWidth - this.ctrlEle.clientHeight * 2.5; const netWorkInfoWidth = this.containerEle.clientHeight; - const keyboardInputLeft = Number(window.getComputedStyle(this.keyboardInputContent).height.split('px')[0])/2; - const keyboardInputTop = -Number(window.getComputedStyle(this.keyboardInputContent).height.split('px')[0])/2; + let keyboardInputLeft; + let keyboardInputTop; + if(this.keyboardInputContent) { + keyboardInputLeft = Number(window.getComputedStyle(this.keyboardInputContent).height.split('px')[0])/2; + keyboardInputTop = -Number(window.getComputedStyle(this.keyboardInputContent).height.split('px')[0])/2; + } else { + keyboardInputLeft = 0; + keyboardInputTop = 0; + } const keyboardInputWidth = this.containerEle.clientHeight; const positionParams = { transformAngle, @@ -312,8 +321,15 @@ class DirectionHandler { const ctrlEleTop = this.ctrlEle.clientHeight; const ctrlEleLeft = (windowHeight - this.containerEle.clientWidth)/2 + this.containerEle.clientWidth - this.netWorkInfo.clientHeight * 3.5; const netWorkInfoWidth = this.containerEle.clientHeight; - const keyboardInputLeft = this.containerEle.clientWidth/2 - this.keyboardInputContent.clientHeight; - const keyboardInputTop = -Number(window.getComputedStyle(this.keyboardInputContent).height.split('px')[0])/2; + let keyboardInputLeft; + let keyboardInputTop; + if(this.keyboardInputContent) { + keyboardInputLeft = this.containerEle.clientWidth/2 - this.keyboardInputContent.clientHeight; + keyboardInputTop = -Number(window.getComputedStyle(this.keyboardInputContent).height.split('px')[0])/2; + } else { + keyboardInputLeft = 0; + keyboardInputTop = 0; + } const keyboardInputWidth = this.containerEle.clientHeight; const positionParams = { transformAngle, diff --git a/sdk/src/config/protocolConfig.js b/sdk/src/config/protocolConfig.js index 8c7a2c897724a71cec6b4f4bb9ad8f83b6476afe..5a5d8e0486ec3286d4ec49ee13addb1ae888286d 100644 --- a/sdk/src/config/protocolConfig.js +++ b/sdk/src/config/protocolConfig.js @@ -79,6 +79,7 @@ const PROTOCOL_CONFIG = { RECONNECT: '3', PAUSE: '4', RESUME: '5', + REQUEST_I_FRAME: '6', SET_MEDIA_CONFIG: '7', }, CMD_RESULT: { diff --git a/sdk/webpack.config.js b/sdk/webpack.config.js index e46dd27e4ce47ffcf3a8b327de6d7ebc1e0ade65..89744ec8353f4f0ea688667ad723f42f8d86666a 100644 --- a/sdk/webpack.config.js +++ b/sdk/webpack.config.js @@ -105,7 +105,7 @@ module.exports = { new HtmlWebpackPlugin({ template: 'demo/demo.html', filename: path.join(__dirname, '/dist/demo.html'), - inject: false + inject: 'head' }), new HtmlWebpackPlugin({ template: 'phone.html', @@ -151,6 +151,10 @@ module.exports = { from: 'common.json', to: path.join(__dirname, '/dist/common.json'), force: true + }, { + from: 'demo/demo_multiple.html', + to: path.join(__dirname, '/dist/demo_multiple.html'), + force: true }]) ], entry: { diff --git a/sdk/webpack.dev.js b/sdk/webpack.dev.js index f211b7dd0bd59f18a2549e610688f936b89db769..0da6c0df170227b4cd2aeafd7f9cbe8df47e3c6a 100644 --- a/sdk/webpack.dev.js +++ b/sdk/webpack.dev.js @@ -28,6 +28,11 @@ module.exports = { 'node_modules' ] }, + devServer: { + hot: true, + open: true, // 自动打开浏览器 + openPage: 'http://localhost:8080/enter.html' // 默认打开的页面路径，连接多个用手机修改为demo_multiple + }, resolveLoader: { modules: [ 'webpack-tools', @@ -63,30 +68,25 @@ module.exports = { '__APP_VERSION__': JSON.stringify(packageJSON.version), '__IS_DEBUG__': 'true' }), - new HtmlWebpackPlugin({ - template: 'index.html', - filename: path.join(__dirname, '/dist/index.html'), - inject: false - }), new HtmlWebpackPlugin({ template: 'login.html', - filename: path.join(__dirname, '/dist/login.html'), + filename: 'login.html', inject: false }), new HtmlWebpackPlugin({ template: 'enter.html', - filename: path.join(__dirname, '/dist/enter.html'), + filename: 'enter.html', inject: false }), new HtmlWebpackPlugin({ template: 'phone.html', - filename: path.join(__dirname, '/dist/phone.html'), + filename: 'phone.html', inject: false }), new HtmlWebpackPlugin({ template: 'demo/demo.html', - filename: path.join(__dirname, '/dist/demo.html'), - inject: false + filename: 'demo.html', + inject: 'head' }), new CopyWebpackPlugin([{ from: 'demo/demo.md', @@ -96,17 +96,13 @@ module.exports = { from: 'src/3rd/video-codec-lib/', to: path.join(__dirname, '/dist/lib'), force: true - }, { - from: 'images/mobileBg.png', - to: path.join(__dirname, '/dist/images/mobileBg.png'), - force: true },{ - from: 'images/ctrl_view.png', - to: path.join(__dirname, '/dist/images/ctrl_view.png'), + from: 'images/', + to: path.join(__dirname, '/dist/images/'), force: true },{ - from: 'style/common.css', - to: path.join(__dirname, '/dist/style/common.css'), + from: 'style/', + to: path.join(__dirname, '/dist/style/'), force: true },{ from: 'common.js', @@ -116,19 +112,22 @@ module.exports = { from: 'common.json', to: path.join(__dirname, '/dist/common.json'), force: true + }, { + from: 'demo/demo_multiple.html', + to: path.join(__dirname, '/dist/demo_multiple.html'), + force: true }]) ], entry: { CloudApp: './src/CloudApp.js' }, - devtool: 'source-map', output: { libraryTarget: 'umd', library: '[name]', libraryExport: 'default', umdNamedDefine: true, - path: path.join(__dirname, '/dist/sdk'), - filename: '[name].min.js', - chunkFilename: '[name].bundle.js' + path: path.join(__dirname, '/dist/'), + filename: './sdk/[name].min.js', + chunkFilename: './sdk/[name].bundle.js' } };