一种渐进增强全屏体验的Web云游戏方法技术

本发明专利技术公开一种渐进增强全屏体验的Web云游戏方法，包括以下步骤：S1：在推流连接初始化后获得流媒体内容宽高，宿主容器宽高；S2：若宿主容器宽高比例与流媒体内容宽高比例均大于1或均小于1则记为true；其余情况为false；S3：若为true则缩放流媒体内容适应宿主容器大小，当流媒体的宽高比小于宿主容器的宽高比，则使播放器高等于宿主容器高，宽等于播放器的高乘以流媒体的宽高比，反之则使用宿主容器宽做计算；S4：若方向不一致的情况，使播放器顺时针旋转90度，并使用上一步骤所述方法缩放播放器。本发明专利技术在后续实现交互控件时可忽略实际屏幕方向提供更有效的输入，在用户主动添加桌面后提供接近原生的全屏体验，有效提升使用者的使用体验。用体验。用体验。

【技术实现步骤摘要】
一种渐进增强全屏体验的Web云游戏方法


[0001]本专利技术涉及云游戏
，尤其涉及一种渐进增强全屏体验的Web云游戏方法。

技术介绍

[0002]使用任一协议传输媒体流，在终端浏览器使用video标签播放流内容或使用分别用canvas绘制视频流并使用WebAudio API播放音频流，在播放元素的区域内监听事件并转化为推流端对应的事件传输至推流端注入执行。现有的方式存在以下不足：
[0003]1、当IOS设备上开启旋转锁定时landscape方向的流内容会无法占满屏幕空间，交互区域受限，交互困难。
[0004]2、IOS大部分设备仅支持对video元素全屏，当云游戏场景需要额外的界面控件如虚拟摇杆或者虚拟键盘时无法显示在全屏的video元素上，影响输入能力。
[0005]因此，现有技术存在缺陷，需要改进。

技术实现思路

[0006]本专利技术要的解决的技术问题是：提供一种渐进增强全屏体验的Web云游戏方法，在后续实现交互控件时可忽略实际屏幕方向提供更有效的输入；在用户主动添加桌面后提供接近原生的全屏体验。
[0007]本专利技术的技术方案如下：提供一种渐进增强全屏体验的Web云游戏方法，包括以下步骤。
[0008]S1：在推流连接初始化后获得流媒体内容宽高，宿主容器宽高。
[0009]S2：若宿主容器宽高比例与流媒体内容宽高比例均大于1或均小于1则记状态OrientationMatch为true，即方向一致；其余情况视为方向不一致，记OrientationMatch为false。
[0010]S3：若方向一致的情况则缩放流媒体内容适应宿主容器大小，当流媒体的宽高比小于宿主容器的宽高比，则使播放器高等于宿主容器高，宽等于播放器的高乘以流媒体的宽高比，反之则使用宿主容器宽做计算；同时记录状态缩放比例AspectRatio用以后续处理事件坐标归一化的逻辑。
[0011]S4：若方向不一致的情况，应用CSS样式rotate(90deg)使播放器顺时针旋转90度，并使用上一步骤所述方法缩放播放器。
[0012]进一步地，通过PWA技术，在Web应用根路径部署其所需求的manifest.json/server
‑
worker.js文件，指定display属性为standalone，orientation属性为landscape，当环境支持并且用户选择添加至桌面后，Web应用将转化为PWA应用，实现设备全屏。
[0013]进一步地，在此基础上，使用代码方案旋转元素会使浏览器事件的坐标位置与用户预期的坐标不一致，即实际用户实际触控的横坐标为浏览器事件的纵坐标，纵坐标为容器高减去浏览器事件横坐标。为补全在云游戏场景下的推流体验下，实现了在上述方案前提下的坐标归一化方案，所述渐进增强全屏体验的Web云游戏方法，还包括。
[0014]S5：获取记录的状态：OrientationMatch与AspectRatio。
[0015]S6：在向服务器传递当前用户交互的指针坐标时，判断OrientationMatch，若为true，则直接乘以AspectRatio以复原在原始推流分辨率下的指针坐标。若OrientationMatch为false，则取事件纵坐标作为横坐标，取容器高减去事件横坐标作为纵坐标，并乘以AspectRatio后发送事件。
[0016]进一步地，所述宿主容器为显示屏。
[0017]采用上述方案，本专利技术提供一种渐进增强全屏体验的Web云游戏方法，在后续实现交互控件时可忽略实际屏幕方向提供更有效的输入，在用户主动添加桌面后提供接近原生的全屏体验，有效提升使用者的使用体验。
附图说明
[0018]图1为本专利技术的一实施例的方法流程图图；
[0019]图2为框1和框2的示意图；
[0020]图3为全屏显示的示意图。
具体实施方式
[0021]以下结合附图和具体实施例，对本专利技术进行详细说明。
[0022]请参阅图1，本实施例提供一种渐进增强全屏体验的Web云游戏方法，包括以下步骤。
[0023]S1：在推流连接初始化后获得流媒体内容宽高，宿主容器宽高。所述宿主容器为显示屏。
[0024]S2：若宿主容器宽高比例与流媒体内容宽高比例均大于1或均小于1则记状态OrientationMatch为true，即方向一致；其余情况视为方向不一致，记OrientationMatch为false。
[0025]S3：若方向一致的情况则缩放流媒体内容适应宿主容器大小，当流媒体的宽高比小于宿主容器的宽高比，则使播放器高等于宿主容器高，宽等于播放器的高乘以流媒体的宽高比，反之则使用宿主容器宽做计算；同时记录状态缩放比例AspectRatio用以后续处理事件坐标归一化的逻辑。
[0026]S4：若方向不一致的情况，应用CSS样式rotate(90deg)使播放器顺时针旋转90度，并使用上一步骤所述方法缩放播放器。
[0027]请参阅图2，通过PWA技术，其中框1为16:9的流媒体内容在直握的移动设备所能占用的最大尺寸，框2为缩放/旋转后所能占用的最大尺寸。
[0028]在本实施例中，在Web应用根路径部署其所需求的manifest.json/server
‑
worker.js文件，指定display属性为standalone，orientation属性为landscape，当环境支持并且用户选择添加至桌面后，Web应用将转化为PWA应用，实现设备全屏。
[0029]在本实施例中，在此基础上，使用代码方案旋转元素会使浏览器事件的坐标位置与用户预期的坐标不一致，即实际用户实际触控的横坐标为浏览器事件的纵坐标，纵坐标为容器高减去浏览器事件横坐标。为补全在云游戏场景下的推流体验下，实现了在上述方案前提下的坐标归一化方案，所述渐进增强全屏体验的Web云游戏方法，还包括。
[0030]S5：获取记录的状态：OrientationMatch与AspectRatio。
[0031]S6：在向服务器传递当前用户交互的指针坐标时，判断OrientationMatch，若为true，则直接乘以AspectRatio以复原在原始推流分辨率下的指针坐标。若OrientationMatch为false，则取事件纵坐标作为横坐标，取容器高减去事件横坐标作为纵坐标，并乘以AspectRatio后发送事件。
[0032]请参阅图3，当前设备屏幕方向仍为portrait，容器已自动旋转，此时样式的定位原点为右上角。
[0033]综上所述，本专利技术提供一种渐进增强全屏体验的Web云游戏方法，在后续实现交互控件时可忽略实际屏幕方向提供更有效的输入，在用户主动添加桌面后提供接近原生的全屏体验，有效提升使用者的使用体验。
[0034]以上仅为本专利技术的较佳实施例而已，并不用于限制本专利技术，凡在本专利技术的精神和原则之内所作的任何修改、等同替本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种渐进增强全屏体验的Web云游戏方法，其特征在于，包括以下步骤：S1：在推流连接初始化后获得流媒体内容宽高，宿主容器宽高；S2：若宿主容器宽高比例与流媒体内容宽高比例均大于1或均小于1则记状态OrientationMatch为true，即方向一致；其余情况视为方向不一致，记OrientationMatch为false；S3：若方向一致的情况则缩放流媒体内容适应宿主容器大小，当流媒体的宽高比小于宿主容器的宽高比，则使播放器高等于宿主容器高，宽等于播放器的高乘以流媒体的宽高比，反之则使用宿主容器宽做计算；S4：若方向不一致的情况，应用CSS样式rotate(90deg)使播放器顺时针旋转90度，并使用上一步骤所述方法缩放播放器。2.根据权利要求1所述的一种渐进增强全屏体验的Web云游戏方法，其特征在于，通过PWA技术，在Web应用根路径部署其所需求的manifest.json/server
‑
worker.js文件，指定display属性为standalone，orientation属性为landscape，当环境支持并且用户选择添...

【专利技术属性】
技术研发人员：王曦超，邹琼，周双全，
申请(专利权)人：深圳市瑞云科技股份有限公司，
类型：发明
国别省市：