CN113064809A

CN113064809A - 一种跨设备页面调试方法和装置

Info

Publication number: CN113064809A
Application number: CN202010001193.8A
Authority: CN
Inventors: 何进萍
Original assignee: Beijing Jingdong Century Trading Co Ltd; Beijing Wodong Tianjun Information Technology Co Ltd
Current assignee: Beijing Jingdong Century Trading Co Ltd; Beijing Wodong Tianjun Information Technology Co Ltd
Priority date: 2020-01-02
Filing date: 2020-01-02
Publication date: 2021-07-02

Abstract

本发明公开了一种跨设备页面调试方法和装置，涉及计算机技术领域。该方法的一具体实施方式包括：对第一设备浏览器中的页面进行姿态监听，得到页面在各个坐标轴的旋转角度，基于预定转换矩阵对旋转角度进行转换，得到四元数；传输四元数至服务端，通过服务端将四元数广播至第二设备，以在第二设备中对四元数进行虚拟现实全景渲染后，根据所述虚拟现实全景对所述页面的代码进行断点调试。该实施方式基于第二设备无法模拟第一设备的姿态，而第一设备的浏览器不具备调试能力的思路，通过分离数据的计算和渲染，将计算所得结果传输至第二设备，并在第二设备进行代码调试，以此解决第一设备上无法调试VR全景(H5)的问题。

Description

一种跨设备页面调试方法和装置

技术领域

本发明涉及计算机技术领域，尤其涉及一种跨设备页面调试方法和装置。

背景技术

随着移动互联网的发展和智能手机的普及，许多应用使用手机的陀螺仪数据实现VR(Virtual Reality，虚拟现实)全景H5效果。VR全景几乎覆盖了各个行业，包括居家、家装、教育、游戏等。

在实现本发明的过程中，发明人发现现有技术至少存在如下问题：

现有方式开发效率低，手机上的浏览器无法断点调试，查看日志不便，不利于错误排查；且手机机型较多、不同浏览器的标准不统一、内核版本不一致，导致调试困难，因此在开发VR全景(H5)时面临诸多不确定问题。

发明内容

有鉴于此，本发明实施例提供一种跨设备页面调试方法和装置，至少能够解决现有手持设备无法调试VR全景(H5)的问题。

为实现上述目的，根据本发明实施例的一个方面，提供了一种跨设备页面调试方法，包括：

对第一设备浏览器中的页面进行姿态监听，得到所述页面在各个坐标轴的旋转角度，基于预定转换矩阵对所述旋转角度进行转换，得到四元数；其中，所述四元数表示所述页面所处平面的姿态；

传输所述四元数至服务端，通过所述服务端将所述四元数广播至第二设备，以在所述第二设备中对所述四元数进行虚拟现实全景渲染后，根据所述虚拟现实全景对所述页面的代码进行断点调试。

可选的，在所述传输所述四元数至服务端之前，还包括：

建立与所述服务端之间的长链接，通过所述长链接将身份标识传输至所述服务端，以在所述服务端识别所述身份标识为生产者身份标识时，将所述长链接确定为生产者长链接。

可选的，在所述根据所述虚拟现实全景对所述页面的代码进行断点调试之后，还包括：

通过与页面端之间的链接，对所述页面的代码是否变化进行监测，以在监测到所述页面的代码发生变化时，传输页面刷新请求至所述页面端；

接收所述页面端反馈的对所述页面调试后的代码，基于所述代码对所述页面进行刷新。

接收页面端传输的代码更新指令；其中，所述代码更新指令为所述页面端在接收到所述第二设备传输的代码后生成，所述代码为对所述页面调试后的代码；

基于所述代码对所述页面进行刷新。

可选的，在所述第二设备中对所述四元数进行虚拟现实全景渲染，还包括：

所述第二设备基于正交投影方式，构建投影矩阵，结合所述四元数和全景模型进行虚拟现实全景渲染。

为实现上述目的，根据本发明实施例的另一方面，提供了一种跨设备页面调试装置，包括：

姿态监听模块，用于对第一设备浏览器中的页面进行姿态监听，得到所述页面在各个坐标轴的旋转角度，基于预定转换矩阵对所述旋转角度进行转换，得到四元数；其中，所述四元数表示所述页面所处平面的姿态；

信息传输模块，用于传输所述四元数至服务端，通过所述服务端将所述四元数广播至第二设备，以在所述第二设备中对所述四元数进行虚拟现实全景渲染后，根据所述虚拟现实全景对所述页面的代码进行断点调试。

可选的，还包括链接建立模块，用于：

可选的，还包括代码刷新模块，用于：

基于所述代码对所述页面进行刷新。

可选的，还包括全景渲染模块，用于：

为实现上述目的，根据本发明实施例的再一方面，提供了一种跨设备页面调试电子设备。

本发明实施例的电子设备包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现上述任一所述的跨设备页面调试方法。

为实现上述目的，根据本发明实施例的再一方面，提供了一种计算机可读介质，其上存储有计算机程序，所述程序被处理器执行时实现上述任一所述的跨设备页面调试方法。

根据本发明所述提供的方案，上述发明中的一个实施例具有如下优点或有益效果：基于第二设备无法模拟第一设备的姿态，而第一设备的浏览器不具备调试能力的思路，通过分离数据的计算和渲染，将第一设备计算所得结果传输至第二设备，并在第二设备进行代码调试，以此解决第一设备上无法调试VR全景(H5)的问题。

上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。

附图说明

附图用于更好地理解本发明，不构成对本发明的不当限定。其中：

图1是根据本发明实施例的一种跨设备页面调试方法的主要流程示意图；

图2是对第一设备进行设备坐标系构建示意图；

图3(a)～图3(c)是对第一设备坐标系中各个坐标轴的旋转瑰色示意图；

图4是中转换与第一设备、第二设备的交互流程示意图；

图5是利用正交投影方式构建投影矩阵的示意图；

图6是在PC端渲染VR全景和代码调试示意图；

图7是根据本发明实施例的一种跨设备页面调试装置的主要模块示意图；

图8是本发明实施例可以应用于其中的示例性系统架构图；

图9是适于用来实现本发明实施例的移动设备或服务器的计算机系统的结构示意图。

具体实施方式

以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

参见图1，示出的是本发明实施例提供的一种跨设备页面调试方法的主要流程图，包括如下步骤：

S101：对第一设备浏览器中的页面进行姿态监听，得到所述页面在各个坐标轴的旋转角度，基于预定转换矩阵对所述旋转角度进行转换，得到四元数；其中，四元数表示页面所处平面的姿态；

S102：传输所述四元数至服务端，通过所述服务端将所述四元数广播至第二设备，以在所述第二设备中对所述四元数进行虚拟现实全景渲染后，根据所述虚拟现实全景对所述页面的代码进行断点调试。

上述实施方式中，对于步骤S101，本发明实施例适用H5中一切适用陀螺仪数据的场景，所涉及的第一设备可以为手机等手持设备，第二设备可以为PC端、平板电脑、台式电脑等。

对第一设备定义X、Y、Z轴，具体参见图2所示。第一设备的坐标系定义于集成显示屏幕：

1)x在显示屏幕平面上，屏幕的右侧为正；

2)y在显示屏幕上，屏幕的上方为正；

3)z垂直于显示屏幕，离开屏幕为正。

为确定第一设备是否抖动、摆放位置(横着放或者斜着放)等，可以监听deviceOrientation(第一设备中的陀螺仪)事件，获取第一设备在三个坐标轴的旋转角度：alpha(α)值、beta(β)值、gamma(γ)值。需要说明的是，本事件的alpha、beta和gamma属性必须指示第一设备的方向，其表现形式为从固定在地球上的坐标系到固定在第一设备上的坐标系的转换。

旋转必须使用右手规则，即正向沿一个轴旋转为从该轴的方向看顺时针旋转。从两个系重合开始，旋转应用下列规则：

1)以第一设备坐标系z轴为轴，旋转alpha度。alpha的作用域为[0,360)，参见图3(a)所示。

2)以第一设备坐标系x轴为轴，旋转beta度。beta的作用域为[-180,180)，参见图3(b)所示。

3)以第一设备坐标系y轴为轴，旋转gamma度。gamma的作用域为[-90,90)，参见图3(c)所示。

其中，陀螺仪是用高速回转体的动量矩敏感壳体相对惯性空间绕正交于自转轴的一个或二个轴的角运动检测装置。利用其他原理制成的角运动检测装置起同样功能的也称陀螺仪。陀螺仪可以对转动、偏转的动作做很好的测量，精确分析判断出使用者的实际动作，而后根据动作，可以对第一设备做相应的控制操作。

对于步骤S102，基于欧拉转换，将第一设备的旋转角度转换为四元数的形式。

在3D图形学中，最常用的旋转表示方法为四元数和欧拉角，由于欧拉角存在万向锁的问题，不利于后续计算。通常操作是将欧拉角转换为四元数，对于四元数q的定义为：

其中，q表示绕坐标轴的多次旋转可以等效为绕某一转轴旋转一定的角度，存储了旋转轴和旋转角的信息，能方便的描述刚体绕任意轴的旋转。

基于将Z-Y-X欧拉角(或RPY角：绕固定坐标系的X-Y-Z依次旋转α,β,γ角)转换为四元数的转换方式为：

因此，对于本次陀螺仪所采集到的第一设备姿态信息，通过上述转换方式进行转换，以此得到该第一设备的四元数。另外，在对不同第一设备进行调试时，可以基于运行页面包含该算法即可。

对于步骤S103，本发明主要解决的是第一设备中的浏览器不具备调试能力的问题，针对该问题，本发明提出基于第二设备对第一设备中的页面进行调试的思路，例如，PC端无法模拟手机的姿态，而手机的浏览器不具备调试能力，两者配合得以实现页面调试思路。整体流程具体参见图4所示。

第一设备将视图坐标的四元数发送至服务端，服务端将收到的四元数广播至第二设备。除了广播方式外，还可以是其他可以实现多端同时接受的方式。

第二设备对于接收到的四元数，结合正交投影的投影矩阵和全景模型的坐标(全景图按固有网格可得到，可视为是地球仪)进行VR全景渲染及显示。

其中，对于投影矩阵的构建方式具体为：主要使用正交投影(OrthographicProjection)方式生成投影矩阵Projection。且保证显示不会变形，同时适应屏幕尺寸。

正交投影方式主要目的在于将3D内容在2D屏幕上显示，所有的投影线都与最终的绘图表面垂直，是一种相对简单的投影技术，即待显示的几何体的可视空间——是一个将被变换到规范视域体的轴对齐盒子。参见图5所示。

图中视域体由6个面定义：

Left：x＝l

Right：x＝r

Bottom：y＝b

Top：y＝t

Near：z＝n

Far：z＝f

将3个坐标轴分开进行考虑，从x轴开始，视域体中的点的x坐标范围在[l,r]，将其变换到范围在[-1,1]：l≤x≤r；

缩小范围，各项减去l，此时最左边的项变化为0。另一种方式是平移范围使其以0为中心，而不是一端为0，但是现在这种方式代数式更为整洁，得到：0≤x-l≤r-l；

假设期望x值的范围为2个单位宽，从1到-1，所以把各项乘以2/(r-l)。注意(r-l)是视域体的宽度，因此始终是一个正数，所以不用担心不等号会改变方向：0≤(2x-2l)/(r-l)≤2；之后各项减一得到期望的范围：-1≤(2x-2l)/(r-l)-1≤1；

将中间部分分为两部分，便于后续的矩阵形式转换：

不等式的中间项即为x转换到规范视域体的公式：

Y轴的变换与x轴一致，仅仅是y替代x、用t替代r、用b替代l，所得结果为：

对于Z轴，需要将z映射到范围[0,1]。z坐标最开始在范围[n,f]：n≤z≤f。之后步骤和之前类似，最后得到z轴的变换公式：

基于上述三个投影公式，可推导出投影矩阵：

在3D场景中，可以使用MVP矩阵(Model-View-Projection模型-视图-投影矩阵)变换实现对物体的观测。其中，MVP是图形学中的通用公式，有通用的方案。

用户在第二设备，基于浏览器(例如chrome或其他支持H5的浏览器)的调试插件进行代码断点调试，具体参见图6所示；其中，代码为HTML代码，HTML代码描述了页面的框架和内容。断点调试为只让程序执行到让它执行的地方，这样在调试程序的时候，容易找出程序的错误。

另外，第二设备对于代码的修改主要为对页面源码的调试，且修改后的代码需再次发布到web端中，便于第一设备对该页面的刷新。之后，继续使用陀螺仪监听第一设备的姿态，第二设备渲染页面的VR全景并进行代码断点调试。

对于第二设备调试后的代码，可以通过两种方式对第一设备浏览器中该页面的代码进行更新：

1)第一设备主动更新，即第一设备实时监测web端中该页面的代码是否发生变化，若变化，则从web端中提取/接收代码进行页面刷新；

2)第一设备被动更新，即第二设备将修改后的代码资源加载到web端，之后web端自动将修改后的代码下发至第一设备，以对第一设备中的代码进行更新。

上述实施例所提供的方法，基于第二设备无法模拟第一设备的姿态，而第一设备的浏览器不具备调试能力的思路，通过分离数据的计算和渲染，将第一设备计算所得结果传输至第二设备，并在第二设备进行代码调试，以此解决第一设备上无法调试VR全景(H5)的问题。

另外，本发明的中转服务主要使用H5的websocket协议实现；其中，WebSocket协议为一种长链接，目标是在一个独立的持久连接上提供全双工双向通信，便于第一设备和第二设备可以向对方主动发送和接受数据。

需要说明的是，Websocket是标准的协议，开发人员可以自定义传输格式，方式较为常用。通常客户端会通过短链接发起一个WebSocket请求，在取得服务器响应后，建立的连接会使用HTTP升级将HTTP协议转换为WebSocket协议。Web浏览器和服务器都必须实现WebSockets协议来建立和维护链接。由于WebSockets链接长期存在，与典型的HTTP链接不同，对服务器有重要的影响。

第一设备属于生产者，第二设备属于消费者。第一设备与服务端建立连接后，先发送第一身份标识(例如{“type:”:1})，服务端识别该身份标识，并将至type为1的websocket链接加入生成者队列。

同样，对于第二设备，在与服务端建立链接后，先发送第二身份标识(例如{“type:”:2})至服务端，服务端识别该身份标识，并将type为2的websocket链接加入消费者队列。

需要说明的是，本发明中对于所有生产者的身份标识一致，对于消费者的身份标识也一致。

参见图7，示出了本发明实施例提供的一种跨设备页面调试装置700的主要模块示意图，包括：

姿态监听模块701，用于对第一设备浏览器中的页面进行姿态监听，得到所述页面在各个坐标轴的旋转角度，基于预定转换矩阵对所述旋转角度进行转换，得到四元数；其中，四元数表示页面所处平面的姿态；

信息传输模块702，用于传输所述四元数至服务端，通过所述服务端将所述四元数广播至第二设备，以在所述第二设备中对所述四元数进行虚拟现实全景渲染后，根据所述虚拟现实全景对所述页面的代码进行断点调试。

本发明实施装置还包括链接建立模块703(图中未标出)，用于：

本发明实施装置还包括代码刷新模块703，用于：

本发明实施装置还包括代码刷新模块704(图中未标出)，用于：

基于所述代码对所述页面进行刷新。

本发明实施装置还包括全景渲染模块705(图中未标出)，用于：

另外，在本发明实施例中所述装置的具体实施内容，在上面所述方法中已经详细说明了，故在此重复内容不再说明。

图8示出了可以应用本发明实施例的示例性系统架构800。

如图8所示，系统架构800可以包括终端设备801、802、803，网络804和服务器805(仅仅是示例)。网络804用以在终端设备801、802、803和服务器805之间提供通信链路的介质。网络804可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用终端设备801、802、803通过网络804与服务器805交互，以接收或发送消息等。终端设备801、802、803上可以安装有各种通讯客户端应用。

终端设备801、802、803可以是具有显示屏并且支持页面浏览的各种电子设备，包括但不限于智能第一设备、平板电脑、膝上型便携计算机和台式计算机等等。

服务器805可以是提供各种服务的服务器，例如对用户利用终端设备801、802、803所浏览的购物类网站提供支持的后台管理服务器(仅为示例)。

需要说明的是，本发明实施例所提供的方法一般由服务器805执行，相应地，装置一般设置于服务器805中。

应该理解，图8中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

下面参考图9，其示出了适于用来实现本发明实施例的终端设备的计算机系统900的结构示意图。图9示出的终端设备仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图9所示，计算机系统900包括中央处理单元(CPU)901，其可以根据存储在只读存储器(ROM)902中的程序或者从存储部分908加载到随机访问存储器(RAM)903中的程序而执行各种适当的动作和处理。在RAM 903中，还存储有系统900操作所需的各种程序和数据。CPU 901、ROM 902以及RAM 903通过总线904彼此相连。输入/输出(I/O)接口905也连接至总线904。

以下部件连接至I/O接口905：包括键盘、鼠标等的输入部分906；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分907；包括硬盘等的存储部分908；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分909。通信部分909经由诸如因特网的网络执行通信处理。驱动器910也根据需要连接至I/O接口905。可拆卸介质911，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器910上，以便于从其上读出的计算机程序根据需要被安装入存储部分908。

特别地，根据本发明公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本发明公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分909从网络上被下载和安装，和/或从可拆卸介质911被安装。在该计算机程序被中央处理单元(CPU)901执行时，执行本发明的系统中限定的上述功能。

需要说明的是，本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本发明中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本发明中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。

附图中的流程图和框图，图示了按照本发明各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本发明实施例中所涉及到的模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的模块也可以设置在处理器中，例如，可以描述为：一种处理器包括姿态监听模块、信息传输模块。其中，这些模块的名称在某种情况下并不构成对该模块本身的限定，例如，信息传输模块块还可以被描述为“传输四元数的模块”。

作为另一方面，本发明还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的设备中所包含的；也可以是单独存在，而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该设备执行时，使得该设备包括：

对第一设备浏览器中的页面进行姿态监听，得到所述页面在各个坐标轴的旋转角度，基于预定转换矩阵对所述旋转角度进行转换，得到四元数；其中，四元数表示页面所处平面的姿态；

根据本发明实施例的技术方案，基于第二设备无法模拟第一设备的姿态，而第一设备的浏览器不具备调试能力的思路，通过分离数据的计算和渲染，将计算所得结果传输至第二设备，并在第二设备进行代码调试，以此解决第一设备上无法调试VR全景(H5)的问题。

上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。

Claims

1.一种跨设备页面调试方法，其特征在于，包括：

2.根据权利要求1所述的方法，其特征在于，在所述传输所述四元数至服务端之前，还包括：

3.根据权利要求1所述的方法，其特征在于，在所述根据所述虚拟现实全景对所述页面的代码进行断点调试之后，还包括：

4.根据权利要求1所述的方法，其特征在于，在所述根据所述虚拟现实全景对所述页面的代码进行断点调试之后，还包括：

基于所述代码对所述页面进行刷新。

5.根据权利要求1所述的方法，其特征在于，在所述第二设备中对所述四元数进行虚拟现实全景渲染，还包括：

6.一种跨设备页面调试装置，其特征在于，包括：

7.一种电子设备，其特征在于，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-5中任一所述的方法。

8.一种计算机可读介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现如权利要求1-5中任一所述的方法。