diff --git a/README.md b/README.md index 6a8453c67ec40ca33271d0116465ee2116eac277..48ecdafac951b037548204c762c543afeeacb9bb 100644 --- a/README.md +++ b/README.md @@ -102,7 +102,7 @@ Chrome restricts the usage of WebCryptographyApi to secure origins. It means 'ht - 参数介绍 - @param {string} containerId：渲染游戏视图的 DOM 元素 id，必选 + @param {string} containerId：渲染游戏视图的 DOM 元素 id，必选。暂时不支持修改，可能导致JS获取不到DOM @param {object} params：启动相关配置，必选 @@ -114,9 +114,9 @@ Chrome restricts the usage of WebCryptographyApi to secure origins. It means 'ht | ticket | 是 | String | 随机数 | | aes_key | 是 | String | 对称秘钥 | | auth_ts | 是 | String | 验签时间戳 | - | background_timeout | 是 | String | home时长 | - | available_playtime | 是 | String | 试玩时长 | - | touch_timeout | 否 | String | 无触控时长 | + | background_timeout | 是 | String | 页面非活跃状态超时时长 (值为0时，无超时判断) | + | 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) | @@ -341,11 +341,14 @@ Chrome restricts the usage of WebCryptographyApi to secure origins. It means 'ht ### 6. FAQ - 部署后页面访问地址中需要携带目标html的完整名称。如：https://110.123.23.34:1001/enter.html -- 出现AESGCMCrypto undefined的相关错误，是由于浏览器安全策略限制。需要使用HTTPS协议访问项目。 +- 出现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。请检查demo.html中libPath(编解码库文件的地址)参数的值是否正确。libPath可以不用修改。如果用户需要修改，要写完整的目录路径，如：'https://110.123.23.34:1001/lib/'。验证目录地址配置是否正确，可在浏览器中输入'https://110.123.23.34:1001/lib/libffmpeg_264_265.js'访问，可成功访问文件内容，则配置正确。 +- 部署后页面提示样式找不到。如：style is null | undefined +- 请检查是否修改了demo.html中DOM元素的ID，当前ID与逻辑绑定，正在优化中。若要修改，请确保JS操作DOM时，对应的ID参数也一并进行了修改。 + ### 7. license Apache License 2.0。 diff --git a/sdk/demo/demo.html b/sdk/demo/demo.html index 925923efe38f8ea7291b1166ecc9c2b17c8b7172..af06a31e7027204d6ddfe208dd060d66631bf8d3 100644 --- a/sdk/demo/demo.html +++ b/sdk/demo/demo.html @@ -589,10 +589,17 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd. STARTED: 2048, RESUMED: 5120, MEDIA_CONFIG_SUCCESS: 8448, - BACK_HOME: 6400 + RETRY_SUCCESS: 3072, + BACK_HOME: 6400, }; - var normalStates = [STATE_CONFIG.STARTED, STATE_CONFIG.RESUMED, STATE_CONFIG.MEDIA_CONFIG_SUCCESS, STATE_CONFIG.BACK_HOME]; + var normalStates = [ + STATE_CONFIG.STARTED, + STATE_CONFIG.RESUMED, + STATE_CONFIG.MEDIA_CONFIG_SUCCESS, + STATE_CONFIG.BACK_HOME, + STATE_CONFIG.RETRY_SUCCESS, + ]; document.getElementById("loading").style.display = normalStates.includes(state) ? 'none' : 'block'; showAlertModal(data); startsuccessCallBack(data); diff --git a/sdk/package.json b/sdk/package.json index d3968af0fc471caf75733e190a48855afa43d794..e4b01bd736925e4f8566dcea63e870b59c66b8f9 100644 --- a/sdk/package.json +++ b/sdk/package.json @@ -6,7 +6,6 @@ "scripts": { "build": "webpack --config webpack.config.js", "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", "test": "jest --watchAll --coverage" diff --git a/sdk/src/AppController.js b/sdk/src/AppController.js index a2d0cc99055819bfd4dafbeec74ad447bba11e5e..e17a82c3d121d97393ee1233aac7f516d98a291f 100644 --- a/sdk/src/AppController.js +++ b/sdk/src/AppController.js @@ -365,7 +365,8 @@ class AppController { sendHandler: this.send, isDebug: this.options.isDebug, autoRotate: this.options.autoRotate, - inputId: this.keyboardInput && this.keyboardInput.inputId || '' + inputId: this.keyboardInput && this.keyboardInput.inputId || '', + containerId: this.options.containerId, }); this.touchHandler.start(); if (this.options.keycodeInput && !this.options.isMobile) { diff --git a/sdk/src/TouchHandler.js b/sdk/src/TouchHandler.js index 886bbb872961163d6043bb8e3750b5c7ba5720e3..c50f8851e2cccede5a4fbcda9fcb9af2038bfe48 100644 --- a/sdk/src/TouchHandler.js +++ b/sdk/src/TouchHandler.js @@ -47,7 +47,10 @@ const KEYBOARD_MODE = { }; export default class TouchHandler { - constructor({player, isMobile, sendHandler, isDebug, autoRotate, inputId = ''}) { + constructor({player, isMobile, sendHandler, isDebug, autoRotate, inputId = '', containerId}) { + // 离开画面前最后一次鼠标操作 + this.lastMouseAction = ''; + this.containerId = containerId; // 监听触控鼠键事件的Dom this.displayDom = player; // 事件回调，可通过该函数获取模拟事件 @@ -122,6 +125,7 @@ export default class TouchHandler { this.util.bind(this.displayDom, 'mouseup', this.onMouseUp.bind(this)); this.util.bind(this.displayDom, 'mousemove', this.util.throttle( this.onMouseMove.bind(this), MOVE_THROTTLE_DELAY, this).bind(this)); + this.util.bind(document.getElementById(this.containerId), 'mouseleave', this.onMouseLeave.bind(this)); this.util.bind(this.displayDom, 'contextmenu', () => false); } @@ -221,6 +225,9 @@ export default class TouchHandler { ...pos, vId: existTouch && existTouch.vId || 0 }, 'MOVE'); + if((pos.x > this.displayBox.width || pos.x < 0 || pos.y < 0 || pos.y > this.displayBox.height)){ + this.clearTouchAndMouse() + } } } @@ -246,6 +253,7 @@ export default class TouchHandler { } _mouseAction(event, action) { + this.lastMouseAction = action; const mouseCode = event.button; const pos = this.getCurrentMousePos(event); let mouseState = this.simulationState.mouse; @@ -257,7 +265,6 @@ export default class TouchHandler { vId = this.allocVirtualTouchId(); mouseState[mouseCode] = vId; } - this.sendTouchMsg({ ...pos, vId @@ -293,6 +300,13 @@ export default class TouchHandler { } } + onMouseLeave() { + if(this.lastMouseAction === 'DOWN'){ + this.lastMouseAction ="UP"; + this.clearTouchAndMouse() + } + } + onMouseUp(event) { event = event || window.event; this.preventDefault(event); @@ -486,7 +500,6 @@ export default class TouchHandler { if (touch.x > this.displayBox.width || touch.x < 0 || touch.y < 0 || touch.y > this.displayBox.height) { return; } - let finalOrientation; if (this.isMobile) { finalOrientation = ORIENTATION_ORIGIN_MOBILE[this.orientation]; @@ -515,6 +528,20 @@ export default class TouchHandler { const msgBuf = this.getKeyCodeEventMsgBuf(msg); this.sendHandler(msgBuf); } + + clearTouchAndMouse() { + this.freeVirtualTouchId(0); + this.simulationState.touch = {}; + this.simulationState.mouse = {}; + this.sendTouchMsg( + { + x: 0, + y: 0, + vId: 0, + }, + "UP" + ); + } destroy() { this.util.unbind(window, 'resize');