CN117768667A - 画面配置方法、装置、设备、介质及程序产品 - Google Patents

Abstract

本申请公开了一种画面配置方法、装置、设备、介质及程序产品，涉及直播技术领域。该方法包括：响应于接收到在多个候选组件选项中对第一选项元素的选择操作，在画布区域中显示第一组件选项对应的目标组件元素；显示目标组件元素对应的组件配置区域，接收在组件配置区域中对目标组件元素的配置操作；响应于接收到对画布区域的确认操作，生成与画布区域对应的第一图文文件。提供了一个可视化制作扩展图文内容的平台，不需要通过编写复杂代码制作扩展图文内容，降低了制作扩展图文内容的门槛，使得非技术人员也能进行制作，并且相比通过编写代码扩展图文内容，通过可视化平台还能够降低内容制作时间，从而提高了图文内容的制作效率。

Description

画面配置方法、装置、设备、介质及程序产品

技术领域

本申请实施例涉及直播技术领域，特别涉及一种画面配置方法、装置、设备、介质及程序产品。

背景技术

在进行电竞赛事直播时，直播的内容除了赛事的实时直播画面外，还可以在直播画面中添加图文包装内容(例如：选手介绍面板、禁用/选择英雄面板等)，以辅助直播内容，增强观众的观看体验。

相关技术中，以禁用/选择英雄面板为例进行说明，开发人员需要编写该面板对应的插件程序，在该插件程序中设置禁用/选择英雄面板对应的布局、样式等信息，同时在插件程序中编写实时数据的获取接口，通过该接口获取实时赛事数据，以实现禁用/选择英雄面板的实时数据更新。该插件程序编写结束后，开发人员可以将该插件程序集成到直播软件中，从而使得直播画面播出时即可显示该禁用/选择英雄面板。

然而，相关技术中通过插件程序实现图文包装内容需要专业开发人员进行代码编写，整个过程较为繁琐且灵活性差，无法适应及时性要求较高的电竞赛事制作需求。

发明内容

本申请实施例提供了一种画面配置方法、装置、设备、介质及程序产品，能够提高对直播画面中的图文包装内容的制作效率，所述技术方案如下：

一方面，提供了一种画面配置方法，所述方法包括：

显示直播配置平台的图文制作界面，所述图文制作界面用于制作配合直播画面显示的扩展图文内容，所述图文制作界面中包括画布区域和组件选择区域，所述组件选择区域中包括多个候选组件选项；

响应于接收到在所述多个候选组件选项中对第一选项元素的选择操作，在所述画布区域中显示所述第一组件选项对应的目标组件元素；

显示所述目标组件元素对应的组件配置区域，接收在所述组件配置区域中对所述目标组件元素的配置操作，所述组件配置区域用于对所述目标组件元素的元素内容进行配置，其中，所述组件配置区域中包括内容配置项，所述内容配置项用于配置静态组件内容或者动态组件内容，所述动态组件内容是指在直播过程中调用与所述直播画面相关的实时直播数据后，获取的与所述实时直播数据对应的数据内容；

响应于接收到对所述画布区域的确认操作，生成与所述画布区域对应的第一图文文件，所述第一图文文件用于将所述画布区域中的组件元素作为所述扩展图文内容配合所述直播画面进行直播显示。

另一方面，提供了一种画面配置装置，所述装置包括：

显示模块，用于显示直播配置平台的图文制作界面，所述图文制作界面用于制作配合直播画面显示的扩展图文内容，所述图文制作界面中包括画布区域和组件选择区域，所述组件选择区域中包括多个候选组件选项；

所述显示模块，还用于响应于接收到在所述多个候选组件选项中对第一组件选项的选择操作，在所述画布区域中显示所述第一组件选项对应的目标组件元素；

所述显示模块，还用于显示所述目标组件元素对应的组件配置区域，接收在所述组件配置区域中对所述目标组件元素的配置操作，所述组件配置区域用于对所述目标组件元素的元素内容进行配置，其中，所述组件配置区域中包括内容配置项，所述内容配置项用于配置静态组件内容或者动态组件内容，所述动态组件内容是指在直播过程中调用与所述直播画面相关的实时直播数据后，获取的与所述实时直播数据对应的数据内容；

生成模块，用于响应于接收到对所述画布区域的确认操作，生成与所述画布区域对应的第一图文文件，所述第一图文文件用于将所述画布区域中的组件元素作为所述扩展图文内容配合所述直播画面进行直播显示。

另一方面，提供了一种计算机设备，所述计算机设备包括处理器和存储器，所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现上述任一所述画面配置方法。

另一方面，提供了一种计算机可读存储介质，所述存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由处理器加载并执行以实现上述任一所述的画面配置方法。

另一方面，提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行上述任一所述的画面配置方法。

本申请实施例提供的技术方案带来的有益效果至少包括：

在直播配置平台中提供用于制作扩展图文内容的图文制作界面，该图文制作界面中包括画布区域和多个候选组件选项；用户从多个候选组件选项中选择任意组件选项，画布区域会显示用户选择的组件选项对应的组件元素，用户可以对该组件元素的元素内容进行静态或者动态配置，配置完成后，用户对画布区域内的组件元素进行确认得到图文文件，该图文文件中包含的组件元素即为制作完成的扩展图文内容。本申请中，提供了一个可视化制作扩展图文内容的平台，一方面，不需要通过编写复杂代码制作扩展图文内容，降低了制作扩展图文内容的门槛，使得非技术人员也能进行制作，并且相比通过编写代码扩展图文内容，通过可视化平台还能够降低内容制作时间，从而提高了图文内容的制作效率；另一方面，由于扩展图文内容的制作过程是可视化的，减少了编写代码而导致的错误，并且能够按照当前直播需求对制作的内容进行灵活修改，提高了图文内容的在制作过程中的灵活性，从而使得图文内容的制作能够符合及时性要求较高的直播画面制作需求。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本申请一个示例性实施例提供的实施环境示意图；

图2是本申请一个示例性实施例提供的画面配置方法的流程图；

图3是本申请一个示例性实施例提供的图文制作界面的示意图；

图4是本申请另一个示例性实施例提供的画面配置方法的流程图；

图5是本申请一个示例性实施例提供的动态属性配置的示意图；

图6是本申请又一个示例性实施例提供的画面配置方法的流程图；

图7是本申请一个示例性实施例提供的图文播出界面的示意图；

图8是本申请一个示例性实施例提供的组合画面的示意图；

图9是本申请一个示例性实施例提供的动画效果配置的示意图；

图10是本申请一个示例性实施例提供的自动显隐效果配置的示意图；

图11是本申请一个示例性实施例提供的自动显隐效果的示意图；

图12是本申请一个示例性实施例提供的按照播单进行播出的完整流程图；

图13是本申请一个示例性实施例提供的图文播出界面可执行操作的事件流程示意图；

图14是本申请一个示例性实施例提供的渲染架构示意图；

图15是本申请一个示例性实施例提供的画面配置装置的结构框图；

图16是本申请一个示例性实施例提供的电子设备的结构框图。

具体实施方式

为使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请实施方式作进一步地详细描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

首先，对本申请实施例中涉及的名词进行简单介绍。

赛事：泛指所有体育赛事、电子竞技赛事等。本申请实施例主要以电竞赛事为例进行说明。需要说明的是，本申请实施例提供的方法，也能够用于配置和显示其它类型的赛事的直播画面，例如体育赛事中的足球比赛、篮球比赛、网球比赛等。

电竞赛事：是赛事主办方针对游戏竞技所举办的赛事。在本申请中，电竞赛事可以是针对任意游戏所举办的赛事。游戏可以是虚拟现实游戏、增强现实游戏、第一人称射击游戏(First-Person Shooting Game，FPS)、第三人称射击游戏(Third-Personal ShootingGame，TPS)、多人在线战术竞技游戏(Multiplayer Online Battle Arena Games，MOBA)、策略游戏(Simulation Game，SLG)中的至少之一。

在进行电竞赛事直播时，直播的内容除了赛事的实时直播画面外，还可以在直播画面中添加图文包装内容(例如：选手介绍面板、禁用/选择英雄面板等)，以辅助直播内容，增强观众的观看体验。相关技术中，以禁用/选择英雄面板为例进行说明，开发人员需要编写该面板对应的插件程序，在该插件程序中设置禁用/选择英雄面板对应的布局、样式等信息，同时在插件程序中编写实时数据的获取接口，通过该接口获取实时赛事数据，以实现禁用/选择英雄面板的实时数据更新。该插件程序编写结束后，开发人员可以将该插件程序集成到直播软件中，从而使得直播画面播出时即可显示该禁用/选择英雄面板。然而，通过插件程序实现图文包装内容需要专业开发人员进行代码编写，整个过程较为繁琐且灵活性差，无法适应及时性要求较高的电竞赛事制作需求。

本申请实施例涉及的画面配置方法，提供了一个可视化制作扩展图文内容的平台，一方面，不需要通过编写复杂代码制作扩展图文内容，降低了制作扩展图文内容的门槛，使得非技术人员也能进行制作，并且相比通过编写代码扩展图文内容，通过可视化平台还能够降低内容制作时间，从而提高了图文内容的制作效率；另一方面，由于扩展图文内容的制作过程是可视化的，减少了编写代码而导致的错误，并且能够按照当前直播需求对制作的内容进行灵活修改，提高了图文内容的在制作过程中的灵活性，从而使得图文内容的制作能够符合及时性要求较高的直播画面制作需求。

针对本申请提供的画面配置方法，在应用时包括游戏赛事转播场景、体育赛事转播场景、远程办公场景、远程教学场景等多种场景中的至少一种。值得注意的是，上述应用场景仅为示意性的举例，本实施例提供的画面配置方法还可以应用于其他场景中，本申请实施例对此不加以限定。

需要进行说明的是，本申请在收集用户的相关数据之前以及在收集用户的相关数据的过程中，都可以显示提示界面、弹窗或输出语音提示信息，该提示界面、弹窗或语音提示信息用于提示用户当前正在搜集其相关数据，使得本申请仅仅在获取到用户对该提示界面或者弹窗发出的确认操作后，才开始执行获取用户相关数据的相关步骤，否则(即未获取到用户对该提示界面或者弹窗发出的确认操作时)，结束获取用户相关数据的相关步骤，即不获取用户的相关数据。换句话说，本申请所采集的所有用户数据都是在用户同意并授权的情况下进行采集的，且相关用户数据的收集、使用和处理需要遵守相关法律法规和标准。

接下来，对具体实现画面配置方法的实施环境进行说明。

图1示出了本申请一个示例性实施例提供的实施环境的示意图。该实施环境包括：第一终端110、第二终端120和服务器130，第一终端110与服务器130之间通过通信网络连接，第二终端120与服务器130之间通过通信网络连接。

可选地，第一终端110可实现为电视机、平板电脑、笔记本电脑、个人计算机、手机、车载终端等设备；第二终端120也可实现为电视机、平板电脑、笔记本电脑、手机、车载终端等设备。本申请实施例对此不进行限定。

在一些实施例中，第一终端110中安装和运行有具有直播画面配置功能的第一应用，本申请对该第一应用的形式不作限定，包括但不限于App(Application，应用程序)、小程序等，还可以是网页形式。可选地，第一应用还可以实现为云应用。示意性的，第一终端110是直播制作人员使用的终端，直播制作人员可以使用第一终端110通过第一应用配置直播画面上的显示的图文包装内容。

在一些实施例中，第二终端120中安装和运行有具有直播功能的第二应用，本申请对该第一应用的形式不作限定，包括但不限于App(Application，应用程序)、小程序等，还可以是网页形式。可选地，第二应用还可以实现为云应用。可选地，第二终端120为观众使用的终端，观众可以使用第二终端120观看显示有图文包装内容的电竞赛事直播画面。

在一些实施例中，服务器130用于为上述第一应用和第二应用提供后台服务。可选地，服务器130可实现为直播服务器，通过服务器130可向第二终端120传输直播画面。

示意性的，在第一终端110中，运行第一应用，显示直播配置平台的图文制作界面，该图文制作界面中包括多个组件111；多个组件111用于构建各种类型的图文包装内容，可将多个组件111添加至图文制作界面中的画布中，然后针对添加的各个组件设置组件内容，即可得到制作好的图文面板112。其中，设置的组件内容可以是静态的也可以是动态的，如果组件内容是动态则组件中显示的组件内容(例如：图片等)会根据实时直播数据进行变化。

可选地，制作得到图文面板112后，显示直播配置平台的图文播出界面，在图文播出界面中添加图文面板112；图文播出界面中包括播出按钮，点击播出按钮后，第一终端110将该图文面板112发送至服务器130，服务器130将直播画面和图文面板112融合后推送至第二终端120，从而在第二终端120的第二应用中显示该配置有图文面板112的直播画面。

其中，如果图文面板112中包含具有动态内容的组件，则在服务器130中还需要获取实时直播数据，通过该实时直播数据更新图文面板112中的动态组件内容。可选地，服务器130可以从游戏服务器(用于处理玩家的数据和游戏逻辑)中获取玩家操作数据、实时对局数据等；或者，服务器130从直播现场的摄像头和音频设备获取实时的视频和音频流，基于该视频和音频流获取游戏比赛的现场数据；或者，服务器130第三终端中获取游戏比赛的实时数据，该第三终端可实现为观众终端，则实时数据可以是评论、弹幕等，该第三终端还可实现为解说终端，则实时数据可以是赛事解说、选手分析、胜负预测等，本申请实施例对此不进行限定。

可选地，图文播出界面中包括预览按钮，点击预览按钮后，图文播出界面的预览区域内将会显示基于图文面板112的预览画面。示意性的，如果图文面板112中包含具有动态内容的组件，第一终端110从服务器130(或者，从游戏服务器)中获取上述游戏比赛的实时数据，第一终端110根据该图文面板112和游戏比赛的实时数据生成预览画面，该预览画面中具有动态内容的组件中显示的数据是根据游戏比赛的实时数据生成的。

值得注意的是，服务器130能够是独立的物理服务器，也能够是多个物理服务器构成的服务器集群或者分布式系统，还能够是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、CDN(Content Delivery Network，内容分发网络)以及大数据和人工智能平台等基础云计算服务的云服务器。

其中，云技术是指在广域网或局域网内将硬件、软件、网络等系列资源统一起来，实现数据的计算、储存、处理和共享的一种托管技术。云技术基于云计算商业模型应用的网络技术、信息技术、整合技术、管理平台技术、应用技术等的总称，可以组成资源池，按需所用，灵活便利。云计算技术将变成重要支撑。技术网络系统的后台服务需要大量的计算、存储资源，如视频网站、图片类网站和更多的门户网站。伴随着互联网行业的高度发展和应用，将来每个物品都有可能存在自己的识别标志，都需要传输到后台系统进行逻辑处理，不同程度级别的数据将会分开处理，各类行业数据皆需要强大的系统后盾支撑，只能通过云计算来实现。可选地，服务器130还可以实现为区块链系统中的节点。

结合上述说明，对第一终端执行的画面配置方法进行介绍。

图2是本申请实施例提供的一种画面配置方法的流程图，以该方法应用于如图1所示的第一终端中为例进行说明，该方法如下步骤210至步骤240。

步骤210，显示直播配置平台的图文制作界面。

示意性的，直播配置平台是指对直播画面中的扩展图文内容进行配置的平台，其中，直播画面可以是任意的直播画面，如赛事直播画面、新闻直播画面、音乐直播画面、电商直播画面等，本申请实施例主要以电竞赛事的直播画面为例进行说明。

其中，图文制作界面用于制作配合直播画面显示的扩展图文内容。

可选地，扩展图文内容是指直播画面在播放过程中显示的辅助信息。示意性的，在电竞赛事直播中，扩展图文内容包括但不限于：

1、实时比赛数据：如击杀、死亡、助攻等信息；双方英雄的生命值、魔法值、状态、装备等信息；游戏地图信息；比赛时间、双方经济、经验等信息；比赛的实时排名或积分榜。

2、赛事播报信息：如在比赛间隙播放的赛事预告或广告信息。

3、赛事介绍信息：如参赛选手、战队背景等背景介绍信息；解说的胜负预测信息等。

4、赛事互动内容：如观众参与的投票活动等。

上述图文制作界面中包括画布区域和组件选择区域，组件选择区域中包括多个候选组件选项。

示意性的，请参考图3，其示出了一种图文制作界面的示意图，如图3所示，在图文制作界面300中包括画布区域310和组件选择区域320，组件选择区域320中包括多个候选组件选项。

本申请实施例对组件选择区域内包含的候选组件选项的数量和种类不加以限定，多个候选组件选项包括但不限于图3组件选择区域320中显示的组件选项。下面对图3中显示的各个组件选项进行说明：

1、骨架类组件。

容器组件：用于构建基础骨架，支持任意层级嵌套。示意性的，拖动容器组件至画布区域310中，在画布区域310中显示容器组件元素，拖动文本组件至容器组件元素中，显示在容器组件元素中的文本组件元素，容器组件元素+文本组件元素共同组成了可显示文本的组件元素a。

列表组件：用于构建基础骨架中可重复部分，支持任意组件作为列表组件的子项。示意性的，拖动列表组件至画布区域310中，在画布区域310中显示列表组件元素；此时，若将上述组件元素a拖动至列表组件元素中，并设置列表组件元素的列表数量为3，则在列表组件元素中会显示3个相同的组件元素a，可针对这3个相同的组件元素a设置不同的组件内容。

2、内容类组件。

多边形组件：用于创建各种形状复杂的多边形图形。

文本组件：用于创建文本内容。

图片组件：用于创建图片内容。

视频组件：用于创建视频内容。

音频组件：用于创建音频内容。

帧动画组件：用于创建帧动画内容，帧动画组件可以将一系列预先设计好的图片按照一定的顺序播放以实现动画效果。

浏览器组件：用于创建网页内容，浏览器组件从服务器请求资源，并解析和显示这些资源。

时钟组件：用于创建时钟。

曲线图组件：用于创建曲线图。

环规组件：用于创建滑动条或滑块，环规组件允许用户在给定范围内选择一个数值，通常用于滑动条、音量控制等交互场景。

饼状图组件：用于创建饼状图。

计时器组件：用于创建计时器。

扩散器组件：用于创建扩散器，扩散器组件是一种用于创建点击效果的元素。它的作用是在用户点击或触摸屏幕时，在点击位置上创建波纹扩散效果，给用户一种响应的视觉反馈。

轮播组件：用于创建轮播效果，轮播效果是指展示多张图片或其他多媒体内容，并以轮播方式进行切换。

跑马灯组件：用于创建跑马灯效果，跑马灯效果是指以跑马灯的方式展示文本内容或其他多媒体内容。

示意性的，通过上述骨架类组件可在面板区域内构建各种类型的图文结构，通过上述内容类组件可在图文结构中创建各种类型的图文内容。

步骤220，响应于接收到在多个候选组件选项中对第一组件选项的选择操作，在画布区域中显示第一组件选项对应的目标组件元素。

可选地，上述选择操作包括点击操作、长按操作、滑动操作、手势指令操作、语音指令操作等中的至少一种，本申请实施例对此不进行限定。

下面，以长按操作+滑动操作实现的拖动操作为例进行说明：

接收在多个候选组件选项中对第一组件选项的长按操作；接收衔接长按操作的滑动操作；响应于滑动操作在画布区域内终止，在画布区域中显示第一组件选项对应的目标组件元素。

可选地，在画布区域中滑动操作指示的滑动终止处显示第一组件选项对应的目标组件元素；或者，在画布区域中的预设位置(例如：画布区域中间等)显示第一组件选项对应的目标组件元素。

示意性的，请参考图3，拖动容器组件至画布区域310中，即可在画布区域310中创建容器组件对应的容器组件元素。

上述实施例中，通过对长按以及滑动操作实现对第一组件选项的选择，使得选择操作更为流畅，提高了人机交互效率。

步骤230，显示目标组件元素对应的组件配置区域，接收在组件配置区域中对目标组件元素的配置操作。

示意性的，在画布区域中显示第一组件选项对应的目标组件元素同时，在图文制作界面中显示目标组件元素对应的组件配置区域。

其中，组件配置区域用于对目标组件元素的元素内容进行配置，组件配置区域中包括内容配置项。

示意性的，以容器组件为例进行说明，其内容配置项包括位置大小配置项、布局配置项、样式配置项等。以文本组件为例进行说明，其内容配置项包括文本内容配置项、文本阴影效果配置项、文本入场效果配置项等。不同组件选项对应的内容配置项不同，此处不一一赘述。

示意性的，请参考图3，在图文制作界面300中包括组件配置区域330，组件配置区域330中包括容器组件元素311的多个内容配置项，接收在容器组件元素311的多个内容配置项上的配置操作，如：配置容器组件元素311的位置大小、配置容器组件元素311的布局、配置容器组件元素311的背景等。

上述内容配置项用于配置静态组件内容或者动态组件内容，动态组件内容是指在直播过程中调用与直播画面相关的实时直播数据后，获取的与实时直播数据对应的数据内容。

示意性的，静态组件内容用于表示固定显示的组件内容，即目标组件元素在直播画面中显示时，其中的组件内容是固定的，不会进行变化。动态组件内容用于表示动态显示的组件内容，即目标组件元素在直播画面中显示时，其中的组件内容是实时获取的，可能会有显示变化。

以图片组件为例进行说明，创建图片组件元素后，可设置图片组件元素中显示的组件内容为静态图片，例如：当前电竞赛事的主办方的图标标识等。也可设置图片组件元素中显示的组件内容为动态获取的图片，例如：设置图片组件元素中显示当前对局中选手选择的英雄，则在直播过程中，直播画面上显示的该图片组件元素会根据直播时选手的选择数据进行变化，选手选择英雄A，则该图片组件元素中会显示英雄A对应的图片。

步骤240，响应于接收到对画布区域的确认操作，生成与画布区域对应的第一图文文件。

示意性的，请参考图3，通过拖动组件选择区域320中的各个组件，用搭积木的形式在画布区域310上通过骨架类组件构建图文结构，基于图文结构通过内容类组件创建图文内容，并对画布区域310内的各个组件元素的元素内容进行配置，配置完成后，对画布区域进行确认，即可生成与画布区域310中的显示的组件元素对应的第一图文文件，即制作得到的扩展图文内容。

其中，第一图文文件用于将画布区域中的组件元素作为扩展图文内容配合直播画面进行直播显示。

综上所述，本申请实施例提供的画面配置方法，在直播配置平台中提供用于制作扩展图文内容的图文制作界面，该图文制作界面中包括画布区域和多个候选组件选项；用户从多个候选组件选项中选择任意组件选项，画布区域会显示用户选择的组件选项对应的组件元素，用户可以对该组件元素的元素内容进行静态或者动态配置，配置完成后，用户对画布区域内的组件元素进行确认得到图文文件，该图文文件中包含的组件元素即为制作完成的扩展图文内容。本申请中，提供了一个可视化制作扩展图文内容的平台，一方面，不需要通过编写复杂代码制作扩展图文内容，降低了制作扩展图文内容的门槛，使得非技术人员也能进行制作，并且相比通过编写代码扩展图文内容，通过可视化平台还能够降低内容制作时间，从而提高了图文内容的制作效率；另一方面，由于扩展图文内容的制作过程是可视化的，减少了编写代码而导致的错误，并且能够按照当前直播需求对制作的内容进行灵活修改，提高了图文内容的在制作过程中的灵活性，从而使得图文内容的制作能够符合及时性要求较高的直播画面制作需求。

在一些实施例中，可通过配置动态链接的方式为目标组件元素配置动态组件内容。示意性的，请参考图4，上述图2实施例还可实现为如图4示出的步骤410至步骤450。

步骤410，显示直播配置平台的图文制作界面。

其中，图文制作界面用于制作配合直播画面显示的扩展图文内容，图文制作界面中包括画布区域和组件选择区域，组件选择区域中包括多个候选组件选项。

步骤420，响应于接收到在多个候选组件选项中对第一组件选项的选择操作，在画布区域中显示第一组件选项对应的目标组件元素，同时显示目标组件元素对应的组件配置区域。

其中，组件配置区域用于对目标组件元素的元素内容进行配置，组件配置区域中包括内容配置项，内容配置项用于配置静态组件内容或者动态组件内容，动态组件内容是指在直播过程中调用与直播画面相关的实时直播数据后，获取的与实时直播数据对应的数据内容。

示意性的，请参考图3，将容器组件拖动至画布区域310后，即在画布区域310处显示容器组件元素311，同时在组件配置区域330处显示容器组件元素311对应的各个配置项，在各个配置项中包括预先设置的默认配置内容，则容器组件元素311初始在画布区域310是按照默认配置内容进行显示的，如：创建容器组件元素311后，按照默认的大小显示容器组件元素311。

在一些实施例中，图文制作界面中还包括图层列表区域，图层列表区域用于显示当前画布区域中的组件元素之间的层次结构。

可选地，在画布区域中显示目标组件元素的情况下，基于目标组件元素对应的层级关系，在图层列表区域中显示目标组件元素对应的组件列表项。

示意性的，层级关系可实现为组件元素之间的包含关系，若在容器元素a中创建文本元素b，则文本元素b即为容器元素的子项；若将容器元素a移动至列表元素c中，则容器元素a即为列表元素的子项；若为文本元素b添加跑马灯元素d，则跑马灯元素d即为文本元素b的子项；若在容器元素a中创建容器元素a’，则容器元素a’为容器元素a的子项。此处不一一列举。

示意性的，请参考图3，图文制作界面300中还包括图层列表区域340，当将容器组件拖动至画布区域310，在画布区域310创建容器组件元素311的同时，在图层列表区域340中创建容器组件列表项，如“container”；若将文本组件拖动至画布区域310的容器组件元素311处，则在容器组件元素311中创建文本组组件元素的同时，在图层列表区域340中的容器列表项下创建文本组件列表项，如“text”。

上述实施例中，创建组件元素后，根据画布区域内的组件元素的显示结构在图层列表区域内自动显示组件元素对应组件列表项，从而用户能够通过列表项之间的层次结构直观的了解各个组件元素之间的层级关系，提高用户体验，并且使得用户能够更方便的与图文制作界面进行交互，提高图文制作界面的交互性和易用性。

可选地，本实施例中，当用户在图层列表区域中调整各个列表项之间的层次结构时，画布区域内显示的各个组件元素也会随之改变；相应的，当用户在画布区域调整各个组件元素之间的层级关系时，图层列表区域中各个列表项之间的层次结构也会随之改变。

步骤430，响应于接收到对内容配置项对应的动态标识的触发操作，显示动态组件内容对应的动态属性配置区域。

其中，动态属性配置区域用于为目标组件元素配置与直播画面相关的实时直播数据的数据源。

示意性的，如图3所示，以内容配置项实现对容器组件元素311的背景图片配置项331为例进行说明，背景图片配置项331中包括静态标识A和动态标识B，点击静态标识A显示图片导入界面，即导入一张图片作为容器组件元素311的背景图片。

点击动态标识B后，请参考图5，显示如图5所示的动态属性配置区域500，在动态属性配置区域500为容器组件元素311配置动态属性(即动态组件内容)，其中，动态属性配置区域500中包括：

数据源列表：是指在设置动态属性时可供选择的数据源的列表。数据源是指存储数据的地方，可以是本地或远程的数据库，也可以是一个应用程序编程接口(ApplicationProgramming Interface，API)或其他数据提供来源。

数据源内容：是指选定的数据源中包含的数据。可以是数据库中的表格或查询结果，也可以是API返回的数据。

域数据内容：是指从选定的数据源所获取到的具体数据内容。可以是从数据源中查询、筛选后得到的数据。

已声明变量：是指预先定义的变量，可以定义数据源中的字段。

模版内容：用于展示动态链接。可以将已声明变量中的字段插入到动态链接中，以动态地生成内容。

步骤440，接收在动态属性配置区域对动态组件内容对应的数据源的配置操作。

示意性的，请参考图5，假设容器组件元素311的背景图片是指游戏对局时，选手选择的英雄图片，下面对在动态属性配置区域500为容器组件元素311配置动态背景图片的数据源的配置操作进行具体说明。

1、在数据源列表中选择数据源，该数据源可以是游戏的实时英雄选择数据API。

2、在数据源内容中，设置从实时英雄选择数据API获取的具体数据，例如：选手选择的英雄图片ID、英雄技能、英雄等级等。

3、在域数据内容中，设置需要在组件元素中显示具体内容，例如：选手选择的英雄ID。

4、在已声明变量中，创建一个已声明变量，例如：selectedHero，用于存储选手选择的英雄ID。

5、在模板内容中，创建一个动态链接，将已声明变量插入该动态链接中，该动态链接可实现为：

“https：//static.zhl.com/champions/1280/{{selectedHero}}”

其中，https：//static.zhl.com/champions/1280/表示基础的URL(UniformResource Locator，统一资源定位符)部分，指向英雄图片的存储位置，该动态链接的意思是从https://static.zhl.com/champions/1280/目录下获取被选择英雄的图片文件，变量{{selectedHero}}在后续会被具体的英雄ID所替换。例如：如果选手选择了英雄“a1”，那么完整的URL将变为https://static.zhl.com/champions/1280/a1，从而实现动态显示选手选择的英雄图片。

通过上述配置操作，动态属性配置区域500可配置容器组件元素311的背景图片对应的英雄图片数据源，从而容器组件元素311的背景图片将会根据选手选择的英雄而显示对应的英雄图片。

在一些实施例中，对于配置有动态组件内容的目标组件元素，还可以为目标组件元素配置目标关联事件以实现动态显示。

可选地，接收到在动态属性配置区域对动态组件内容对应的目标关联事件的配置操作，目标关联事件用于在被触发的情况下更新目标组件元素中的动态组件内容。不同目标关联事件对应有不同的触发情况，目标组件元素配置的动态组件内容对应的触发情况包括以下情况中的至少一种：

1、触发基于目标组件元素本身配置的事件，显示目标组件元素中的动态组件内 容。

以目标组件元素实现为游戏对局倒计时面板为例，目标关联事件可实现为游戏对局倒计时面板对应的倒计时结束事件；倒计时结束事件用于在游戏对局倒计时面板指示倒计时结束的情况下触发，根据实时获取的结算数据获取胜利方动画效果；目标组件元素对应的动态组件内容包括胜利方动画效果。

示意性的，假设目标组件元素实现为显示游戏对局倒计时的面板，当游戏对局倒计时结束后，通过游戏的结算数据API获取游戏的对局胜利方ID，根据对局胜利方ID从存储胜利动画效果的数据库中调取对应的胜利动画效果显示在游戏对局倒计时面板中。

2、触发基于其他组件元素配置的事件，显示目标组件元素中的动态组件内容。

以其他组件元素实现为英雄选择面板，目标组件元素实现为英雄介绍面板为例进行说明，目标关联事件可实现为英雄选择面板对应的英雄选择事件，英雄选择事件用于在指定选手在英雄选择面板上选择英雄的情况下触发，根据指定选手选择的目标英雄获取目标英雄对应的介绍信息；目标组件元素对应的动态组件内容包括目标英雄对应的介绍信息。

示意性的，假设其他组件元素为英雄选择面板，目标组件元素为英雄介绍面板，当指定选手在英雄选择面板上选择目标英雄后，英雄选择面板上指定选手对应的英雄数据进行了更新，则通过游戏的实时英雄选择数据API获取目标英雄ID，根据目标英雄ID从存储英雄介绍数据的数据库中调取对应的目标英雄介绍数据显示在英雄介绍面板中。

3、触发基于实时直播数据配置的事件，显示目标组件元素中的动态组件内容。

可选地，上述实时直播数据包括直播服务器中的实时直播画面、游戏服务器中的实时游戏数据等中的至少一种，本申请实施例对此不进行限定。

以目标组件元素为英雄介绍面板，目标关联事件实现为英雄选择事件为例进行说明：

示意性的，若实时直播数据包括直播服务器中的实时直播画面，采集实时直播画面，对该实时直播画面进行识别分析，若识别到指定选手选择目标英雄，则确定触发英雄选择事件，根据目标英雄ID从存储英雄介绍数据的数据库中调取对应的目标英雄介绍数据显示在英雄介绍面板中。

若实时直播数据包括游戏服务器中的实时游戏数据，采集实时游戏数据，对该实时游戏数据进行分析，若实时游戏数据指示指定选手选择目标英雄，则确定触发英雄选择事件，根据目标英雄ID从存储英雄介绍数据的数据库中调取对应的目标英雄介绍数据显示在英雄介绍面板中。

需要进行说明的是，上述对目标组件元素以及对目标关联事件的举例仅为示意性的说明，本申请实施例对此不进行限定。

在一些实施例中，对于配置有动态组件内容的目标组件元素，可为目标组件元素设置默认组件内容，从而在图文制作界面中，根据该默认组件内容显示目标组件元素，避免图文制作过程中目标组件元素中出现空白内容的情况，使得用户对将要展示的动态内容有更好的理解，提高在制作过程中用户和图文制作界面之间的交互性。

可选地，响应于在动态属性配置区域对动态组件内容对应的默认数据源的配置操作，在目标组件元素内显示默认数据源对应的默认组件内容，默认组件内容用于在扩展图文内容制作过程中进行预览显示。

示意性的，在目标组件元素中展示一初始内容，后续，目标组件元素显示在直播画面中时，初始内容将被替换成配置的数据源对应的实时数据。

步骤450，在对画布区域中的组件元素配置完成后，响应于接收到对画布区域的确认操作，生成与画布区域对应的第一图文文件。

其中，第一图文文件用于将画布区域中的组件元素作为扩展图文内容配合直播画面进行直播显示。

综上所述，本申请实施例提供的画面配置方法，可以在图文制作界面中为画布区域内容的组件元素配置动态属性，从而使得组件元素显示在直播画面上时，能够根据直播画面对应的实时直播数据进行动态显示。

其中，可在动态属性配置界面通过配置数据源的方式实现组件元素的动态显示，配置数据源可以使组件的显示与数据源的变化保持实时同步，当数据源中的数据发生更改时，组件上的数据将自动更新，能够符合电竞赛事直播场景的及时性需求；另一方面，通过配置数据源，便于切换或添加不同的数据源，使得组件元素的动态显示更具灵活性。

还可以在动态属性配置界面通过配置关联事件的方式实现组件元素的动态显示，从而根据直播需求和用户需求进行个性化定制，应用在电竞赛事场景下，根据不同电竞赛事的特点定制不同的关联事件和显示方式，提高了图文制作和显示的灵活性；另外，基于关联事件触发的动态显示，还可以避免频繁获取动态数据实现数据动态显示造成的资源浪费。

在一些实施例中，直播配置平台中还包括图文播出界面，图文播出界面用于播出配合直播画面显示的扩展图文内容。示意性的，请参考图6，上述步骤240或者步骤450之后还包括步骤610至步骤630。

步骤610，显示直播配置平台的图文播出界面。

其中，图文播出界面用于播出配合直播画面显示的扩展图文内容，图文播出界面中包括预览区域和图文选择区域，图文选择区域中包括第一图文文件。

示意性的，请参考图7，其示出了一种图文播出界面的示意图，如图7所示，图文播出界面700是指目标导播间对应的界面，该目标导播间是指播出直播画面的导播间。

在图文播出界面700中包括预览区域710和图文选择区域720，初始进入图文播出界面700时，图文选择区域720中可以不包含任何图文文件，点击添加按钮721，可将在图文制作界面中制作完成的图文文件(如第一图文文件)添加至图文选择区域720中。

步骤620，响应于接收到对第一图文文件的选择操作，在预览区域显示第一图文文件对应的组件元素。

在一些实施例中，可以直接在图文选择区域中选择第一图文文件，然后对第一图文文件进行预览显示。

示意性的，请参考图7，点击图文选择区域720中的图文文件722后，再点击预览按钮701，即在预览区域710显示图文文件722对应的组件元素。

在另一些实施例中，图文播出界面中包括播放列表区域，播放列表区域中包括预设场景对应的播出画面列表项，播出画面列表项用于显示待播出的扩展图文内容。

可选地，响应于接收到对第一图文文件的选择操作，将第一图文文件添加至播出画面列表项中；响应于接收到在播放列表区域中对播出画面列表项的预览操作，在预览区域显示第一图文文件对应的组件元素。

示意性的，预设场景包括系统创建的默认场景，例如：赛前场景、赛中场景、赛后场景等。预设场景还包括为用户在播放列表区域中创建的自定义场景。

请参考图7，图文播出界面700中还包括播放列表区域730，当前播放列表区域730为系统创建的赛前场景对应的列表，在播放列表区域730内，还包括用户创建的自定义场景“未命名场景”，在“未命名场景”下，用户可创建播出画面列表项731。

创建播出画面列表项731后，用户即可在图文选择区域720中选择任意图文文件加入播出画面列表项731，例如：拖动图文文件722至播出画面列表项731处，将图文文件722加入播出画面列表项731；则点击播出画面列表项731后，再点击预览按钮701，即在预览区域710显示图文文件722对应的组件元素。

可选的，图文播出界面700还包括预选画面显示区域740，点击播出画面列表项731后，即可将图文文件722对应的组件元素显示在预选画面显示区域740。

在一些实施例中，可根据获取的实时直播数据从播出列表区域自动选择播出画面列表项进行预览，从而提高控制扩展图文内容播出的工作人员的工作效率。

可选地，以直播画面包括目标赛事的赛前直播画面，第一图文文件包括选手介绍文件为例进行说明：

获取赛前直播画面对应的画面特征表示和音频特征表示，赛前直播画面中包含目标参赛选手；对画面特征表示和音频特征表示进行特征分析，得到预测播出信号；在预测播出信号指示播出选手介绍文件的情况下，触发对播出画面列表项的预览操作，在预览区域显示选手介绍文件对应的组件元素。

示意性的，通过播出预测模型对实时赛前直播视频流进行特征提取，得当前赛前直播画面对应的画面特征表示和音频特征表示，基于画面特征表示和音频特征表示预测与所述赛前直播画面匹配的图文内容类型，若该图文内容类型为选手介绍，则生成指示播出选手介绍文件的预测播出信号，基于该预测播出信号自动触发对播放列表区域中对选手介绍文件对应的播出画面列表项的触发操作。其中，在播放列表区域中可设置选手介绍文件对应的播出画面列表项的名称为“选手介绍”，则预测播出信号可根据播出画面列表项的名称进行自动触发。

可选地，播出预测模型是在样本数据中训练得到的模型，该样本数据包括直播过程中的直播画面和与该直播画面匹配的音频数据。下面对播出预测模型的训练过程进行简单描述：

获取样本直播画面和与样本直播画面匹配的样本音频数据，该样本直播画面标注有参考图文类型，参考图文类型是指与样本直播画面匹配的图文内容的类型；通过候选播出预测模型对样本直播画面和样本音频数据进行特性提取，得到画面特征表示和音频特征表示；通过候选播出预测模型对画面特征表示和音频特征表示进行特征分析，得到预测图文类型；基于参考图文类型和预测图文类型之间的差异对候选播出预测模型进行训练，得到上述播出预测模型。

在一些实施例中，图文选择区域中包括包含第一图文文件在内的多个图文文件。

可选的，播放列表区域中包括多个播出画面列表项，多个播出画面列表项分别包含有图文文件。响应于接收到在播放列表区域中对至少两个播出画面列表项的预览操作，在预览区域按照预设布局组合显示至少两个播出画面列表包含的图文文件对应的组件元素。

示意性的，用户可以对多个图文文件进行组合，从而形成组合画面进行播出。请参考图7，播放列表区域730中包括多个播出画面列表项，每个播出画面列表项包含有一个图文选择区域720中的图文文件，选择其中至少两个播出画面列表项，再点击预览按钮701，即在预览区域710中显示至少两个播出画面列表项包含的至少两个图文文件对应的组件元素。

或者，响应于接收到对多个图文文件中至少两个图文文件的选择操作，将至少两个图文文件添加至播出画面列表项中；响应于接收到在播放列表区域中对播出画面列表项的预览操作，在预览区域按照预设布局组合显示至少两个图文文件对应的组件元素。

示意性的，用户可以对多个图文文件进行组合，从而形成组合画面进行播出。请参考图7，图文选择区域720中包括图文文件722和图文文件723，拖动图文文件722和图文文件723至播出画面列表项731处，将图文文件722和图文文件723加入播出画面列表项731，此时点击播出画面列表项731后，再点击预览按钮701，即在预览区域710显示图文文件722和图文文件723对应的组件元素，图文文件722和图文文件723对应的组件元素按照预设的布局进行组合显示。

示意性的，请参考图8，其示出了一种组合画面的示意图。在预览区域800中显示回合胜利面板801、顶条面板802、常规对局数据面板803和武器购买面板804对应的组合画面。

步骤630，接收对预览区域的播出操作。

其中，播出操作用于向直播服务器发送第一图文文件，直播服务器用于将第一图文文件对应的组件元素与实时播放的直播画面融合。

示意性的，请参考图7，点击播出按钮702后，即可将预览区域710中显示的内容发送至直播服务器，直播服务器将预览区域710中显示的内容与导播间实时播放的直播画面融合，例如将预览区域710中显示的内容叠加在直播画面上，得到融合画面后，直播服务器将该融合画面推送至直播客户端进行显示。

在一些实施例中，接收对预览区域的播出操作之前还包括：响应于接收到对第一图文文件的动画配置操作，显示第一图文文件对应的动画配置区域，动画配置区域用于配置第一图文文件对应的组件元素播出时的目标动画效果。

示意性的，请参考图9，其示出了一种动画效果配置的示意图，在播放列表区域中可点击播出画面列表项901中的设置标识902，即显示播出画面列表项901中包含的图文文件对应的动画配置区域910，在动画配置区域910中可对播出画面列表项901中包含的图文文件对应的组件元素的转场效果、前景动画效果、背景动画效果等进行设置。

在设置动画效果后，点击预览按钮，可在预览区域内显示具有该动画效果的组件元素。点击播出按钮后，可在直播画面上显示具有该动画效果的组件元素。

通过在图文播出界面上对图文文件的动画效果的设置，能够提高直播界面中显示的图文内容的多样性，提升用户体验；同时在本申请中，可以在图文播出界面的制作好的单个图文内容进行多种动画效果的配置，从而提高对图文内容的利用效率。

在一些实施例中，可通过对图文文件的动画效果的设置实现对直播画面中显示的组件元素的自动显隐设置。

示意性的，请参考图10，其示出了一种自动显隐效果配置的示意图，针对预览区域内显示目标图文文件对应的组件元素，显示该组件元素对应的动画效果设置区域1000，在动画效果设置区域1000中包含目标图文文件对应的组件元素已设置的各个动画效果，针对在直播界面显示组件元素的效果，例如：底部滑入效果，可以设置延时时间为3s，则点击播出按钮后，3s后，将组件元素会以底部滑入的方式显示在直播界面。

针对在直播界面取消显示组件元素的效果，例如：底部滑出效果，可以设置延时3秒，则将组件元素以底部滑入的方式显示在直播界面后，不会立马取消显示组件元素，而是在3s后，以底部滑出的方式在直播界面取消显示组件元素。

示意性的，请参考图11，其示出了一种自动显隐效果的示意图，在预览区域1100中，仅显示顶条面板1101和常规对局数据面板1102，对回合胜利面板(可参考图8)以及武器购买面板(可参考图8)进行隐藏。

在一些实施例中，接收对所述预览区域的播出操作之前，可以对面板内的组件进行实时修改，从而适应直播时提出的一些实时需求。

可选地，响应于接收到对第一图文文件的元素修改操作，显示元素修改界面，元素修改界面用于修改第一图文文件对应的组件元素；响应于对第一图文文件修改完成，在预览区域显示修改后的第一图文文件对应的组件元素。

示意性的，直播时，需要对战队数据的颜色进行调整，则不需要返回制作界面调整已制作好的战队数据面板，可以在播出界面即时对该战队数据面板中的数据颜色进行调整，从而提高面板的播出效率。

综上所述，本申请实施例提供的画面配置方法，将图文制作和图文播出流程集成在一个直播配置平台中，用户可以通过该直播配置平台进行图文制作和图文播出，从而将在直播画面中的图文内容的显示流程与直播画面的播出流程进行解耦，提高了图文内容的播出效率。

本申请实施例中，在图文播出界面中提供了播放列表区域，从而用户能够根据预设场景在播放列表区域预先添加待播出的图文内容，按照该播放列表区域中显示的图文内容进行图文播出，提高图文内容的播出效率的同时减少了播出过程中产生的图文播出事故。

示意性的，用户可以根据播出流程对需要播出的图文文件进行播出顺序的编排得到播单，从而按照播单对图文文件进行播出。其中，播单的编排流程可参考图12，如图12所示，编排流程包括：

S1201：开始。

即开始对图文文件进行播出。

S1202：进入导播间。

即进入目标直播画面对应的导播间，例如：进入电竞赛事直播对应的导播间，该导播间(即上述直播配置平台)用于配置电竞赛事直播的直播画面上显示的图文扩展内容。

S1203：判断播单是否存在。

示意性的，播单即上述播放列表区，判断导播间是否存在播单。

S1204：若播单不存在，创建播单。

示意性的，若导播间中不存在播单，系统自动创建播单或者用户自行创建播单。

在创建播单后，后端流程中，需要向预览窗口推送src(即对应的播单资源)，并更新播单，然后向播出窗口推送src(即对应的播单资源)。前端流程中，刷新预览窗口播单，参考图7，即为刷新显示播放列表区域730；并且，刷新播出窗口画面。

S1205：若播单存在，判断播单下是否有场景。

示意性的，若导播间中存在播单，继续判断播单下是否有场景，如：赛前场景、赛中场景、赛后场景等。

S1206：若播单下没有场景，创建场景。

示意性的，若播单下没有场景，系统自动创建场景或者用户自行创建场景。

在创建场景后，后端流程中，需要向预览窗口推送src(即对应的场景资源)，并更新场景，然后向播出窗口推送src(即对应的场景资源)。前端流程中，刷新预览窗口场景，参考图7，即为刷新显示播放列表区域730中的场景，如：赛前场景、赛中场景、赛后场景、“未命名场景”等；并且，刷新播出窗口画面。

其中，若用户选择不创建场景，则结束流程。

S1207：若播单下有场景，判断场景下是否有画面。

示意性的，若播单下有场景，判断场景下是否有画面，画面即为上述播出画面列表项。

S1208：若场景下没有画面，创建画面。

示意性的，若场景下没有画面，系统自动创建画面或者用户自行创建画面。

在创建画面后，后端流程中，需要向预览窗口推送src(即对应的画面资源)，并更新画面，然后向播出窗口推送src(即对应的画面资源)。前端流程中，刷新预览窗口画面，参考图7，即为刷新显示预览区域710中的画面；并且，刷新播出窗口画面。

在一些实施例中，响应于接收到对预览区域的复位操作，在预览区域中显示当前直播画面上显示的组件元素。

示意性的，请参考图7，点击复位按钮703，则预览区域710中显示的内容会显示为当前直播画面上显示的组件元素，即扩展图文内容。

示意性的，在图文播出界面可执行的操作包括：预览操作、下板操作、播出操作、离场操作、复位操作。下面对这些操作的对应的事件流程进行介绍，示意性的，请参考图13，其示出了图文播出界面可执行操作的事件流程示意图，如图13所示：

针对预览操作1301，其对应的业务场景包括：

在预览面板上的预览操作(包括点击预览按钮的操作)，执行预览操作触发cmd on(上板)指令后，触发预览窗口事件；针对预览窗口，更新cmd log，即操作日志，同时更新window panel，即更新预览窗口和面板(即图文文件)之间的关系。

在预览画面上的预览操作(包括在预览区域内对各个显示的组件元素的操作)，执行预览操作触发cmd cut指令后，触发预览窗口事件；针对预览窗口更新cmd log，即操作日志，同时更新window panel，即更新预览窗口和面板之间的关系，同时更新graphic，即更新预览画面。

针对下板操作1302，其对应的业务场景为下板，即在预览区域上取消显示面板或者预览其他面板，执行下板操作触发cmd off指令后，触发预览窗口事件；针对预览窗口更新cmd log，即操作日志，同时更新window panel，即更新预览窗口和面板(即图文文件)之间的关系。

针对播出操作1303，其对应的业务场景包括：

若工作流下无场景，执行播出操作触发cmd swap指令后，触发播出窗口事件；针对播出窗口更新cmd log，即操作日志，同时更新window panel，即更新播出窗口和面板(即图文文件)之间的关系。

若工作流下有场景，执行播出操作触发cmd cut指令后，触发播出窗口事件；针对播出窗口更新graphic，即更新播出画面。

针对离场操作1304，即离开当前导播间，若当前播出画面和预览画面一致，执行离场操作触发cmd cut指令后，触发预览窗口事件；针对预览窗口更新cmd log，即操作日志，同时更新window panel，即更新预览窗口和面板(即图文文件)之间的关系，同时更新graphic，即更新预览画面。针对播出窗口更新cmd log，即操作日志，同时更新windowpanel，即更新播出窗口和面板(即图文文件)之间的关系，同时更新graphic，即更新播出画面。

针对复位操作1305：

若当前播出画面和预览画面一致，执行复位操作触发cmd swap指令后，触发预览窗口事件；针对预览窗口更新cmd log，即操作日志，同时更新window panel，即更新预览窗口和面板(即图文文件)之间的关系。

若当前播出画面和预览画面不一致，执行复位操作触发cmd cut指令后，触发播出窗口事件；针对播出窗口更新cmd log，即操作日志，同时更新window panel，即更新播出窗口和面板(即图文文件)之间的关系，同时更新graphic，即更新播出画面。

综上所述，本申请实施例提供的画面配置方法：

(1)通过搭建一个图文包装可视化制作平台，降低制作门槛、提升制作灵活性、缩短制作流程。系统内置丰富的组件，提供可视画布，允许对组件的各种属性进行静态或动态设置，以及丰富的动画编排。这使得非专业开发人员也能够进行图文包装制作，满足电竞赛事图文包装的制作需求。

(2)通过搭建一个图文包装自动化播出平台，集成图文包装的上下板控制、流程编排、转场设置、组合显示、自动控制等功能。用户可以根据播出流程对需要播出的图文包装进行播出顺序的编排，进行转场设置，实现丰富的转场效果，以及实现自动化显隐控制。

在一些实施例中，本申请实施例提供的画面配置方法制作得到的扩展图文内容在渲染至浏览器时，充分利用多线程技术，通过将复杂的计算、数据处理、预渲染任务委托给Web Worker(工作线程)处理，主线程的压力得到了大幅度的缓解，浏览器的运行效率也因此得到了提升。其中，Web Worker是浏览器提供的JavaScript API，用于在浏览器应用程序中运行后台任务。

示意性的，渲染架构如图14中的1400所示，其中：

主线程：是浏览器(例如：显示直播画面的浏览器)中最重要的线程，主要负责处理用户交互、样式计算、布局计算、绘制和事件处理等任务。

主线程中的codex负责与渲染进程通信，将渲染结果传递给渲染进程进行显示。

主线程中的主程序中包括控制器和WebSocket。控制器是一部分用于处理用户交互和管理应用程序逻辑的组件，控制器主要负责接收用户的输入，并相应地更新模型(数据)和视图(界面)，以及处理业务逻辑。WebSocket是一种在浏览器和服务器之间实现全双工通信的网络协议，它允许在单个TCP连接上进行双向通信，使得服务器可以主动发送数据给客户端。

工作线程：是一种在浏览器后台独立运行的线程，用于在不影响用户界面的情况下处理密集型计算任务。在直播浏览器中，工作线程可以处理渲染、数据订阅、数据计算等任务，从而不阻塞主线程，提高网页性能和响应速度。

下面介绍在本申请中如何通过Web Worker在直播画面上渲染组件元素：

首先，播放直播画面的直播浏览器可以创建一个Web Worker实例；在主线程中，当需要显示组件元素时，将组件元素相关数据发送给Web Worker；在Web Worker中，接收到数据后进行相应的处理，例如，根据数据生成相应的HTML元素；Web Worker将渲染结果通过发送回主线程；在主线程中，关注Web Worker的message事件，接收到组件元素的渲染结果后，将其显示在直播画面上。

可选地，本申请实施例，在进行组件元素渲染时还通过合并更新操作来提升渲染效率和性能，把多个小规模的更新合并为一个大型更新，例如：当多个玩家经济数据有更新时，只有产生经济数据更新的玩家数据达到预设数量时，才会进行更新渲染，有效地减少了主线程上的频繁操作，从而提高了直播浏览器的运行效率。

图15是本申请一个示例性实施例提供的画面配置装置的结构框图，如图15所示，该装置包括如下部分：

显示模块1510，用于显示直播配置平台的图文制作界面，所述图文制作界面用于制作配合直播画面显示的扩展图文内容，所述图文制作界面中包括画布区域和组件选择区域，所述组件选择区域中包括多个候选组件选项；

所述显示模块1510，还用于响应于接收到在所述多个候选组件选项中对第一组件选项的选择操作，在所述画布区域中显示所述第一组件选项对应的目标组件元素；

所述显示模块1510，还用于显示所述目标组件元素对应的组件配置区域，接收在所述组件配置区域中对所述目标组件元素的配置操作，所述组件配置区域用于对所述目标组件元素的元素内容进行配置，其中，所述组件配置区域中包括内容配置项，所述内容配置项用于配置静态组件内容或者动态组件内容，所述动态组件内容是指在直播过程中调用与所述直播画面相关的实时直播数据后，获取的与所述实时直播数据对应的数据内容；

生成模块1520，用于响应于接收到对所述画布区域的确认操作，生成与所述画布区域对应的第一图文文件，所述第一图文文件用于将所述画布区域中的组件元素作为所述扩展图文内容配合所述直播画面进行直播显示。

在一些实施例中，所述显示模块1510，还用于：响应于接收到对所述内容配置项对应的动态标识的触发操作，显示所述动态组件内容对应的动态属性配置区域，所述动态属性配置区域用于为所述目标组件元素配置与所述直播画面相关的实时直播数据的数据源；接收在所述动态属性配置区域对所述动态组件内容对应的数据源的配置操作。

在一些实施例中，所述显示模块1510，还用于：响应于在所述动态属性配置区域对所述动态组件内容对应的默认数据源的配置操作，在所述目标组件元素内显示默认数据源对应的默认组件内容，所述默认组件内容用于在所述扩展图文内容制作过程中进行预览显示。

在一些实施例中，所述显示模块1510，还用于：接收在所述动态属性配置区域对所述动态组件内容对应的目标关联事件的配置操作，所述目标关联事件用于在被触发的情况下更新所述目标组件元素对应的所述动态组件内容。

在一些实施例中，所述显示模块1510，还用于：接收在所述多个候选组件选项中对所述第一组件选项的长按操作；接收衔接所述长按操作的滑动操作；响应于所述滑动操作在所述画布区域内终止，在所述画布区域中显示所述第一组件选项对应的所述目标组件元素。

在一些实施例中，所述图文制作界面中还包括图层列表区域，所述图层列表区域用于显示当前所述画布区域中的组件元素之间的层次结构；所述显示模块1510，还用于：在所述画布区域中显示所述目标组件元素的情况下，基于所述目标组件元素对应的层级关系，在所述图层列表区域中显示所述目标组件元素对应的组件列表项。

在一些实施例中，所述显示模块1510，还用于：显示所述直播配置平台的图文播出界面，所述图文播出界面用于播出配合所述直播画面显示的所述扩展图文内容，所述图文播出界面中包括预览区域和图文选择区域，所述图文选择区域中包括所述第一图文文件；响应于接收到对所述第一图文文件的选择操作，在所述预览区域显示所述第一图文文件对应的组件元素；接收对所述预览区域的播出操作，所述播出操作用于向直播服务器发送所述第一图文文件，所述直播服务器用于将所述第一图文文件对应的组件元素与实时播放的所述直播画面融合。

在一些实施例中，所述图文播出界面中包括播放列表区域，所述播放列表区域中包括预设场景对应的播出画面列表项，所述播出画面列表项用于显示待播出的所述扩展图文内容；所述显示模块1510，还用于：响应于接收到对所述第一图文文件的选择操作，将所述第一图文文件添加至所述播出画面列表项中；响应于接收到在所述播放列表区域中对所述播出画面列表项的预览操作，在所述预览区域显示所述第一图文文件对应的组件元素。

在一些实施例中，所述直播画面包括目标赛事的赛前直播画面，所述第一图文文件包括选手介绍文件；所述显示模块1510，还用于：获取所述赛前直播画面对应的画面特征表示和音频特征表示，所述赛前直播画面中包含目标参赛选手；对所述画面特征表示和所述音频特征表示进行特征分析，得到预测播出信号；在所述预测播出信号指示播出所述选手介绍文件的情况下，触发对所述播出画面列表项的预览操作，在所述预览区域显示所述选手介绍文件对应的组件元素。

在一些实施例中，所述显示模块1510，还用于：响应于接收到对所述第一图文文件的动画配置操作，显示所述第一图文文件对应的动画配置区域，所述动画配置区域用于配置所述第一图文文件对应的组件元素播出时的目标动画效果。

在一些实施例中，所述显示模块1510，还用于：响应于接收到对所述第一图文文件的元素修改操作，显示元素修改界面，所述元素修改界面用于修改所述第一图文文件对应的组件元素；响应于对所述第一图文文件修改完成，在所述预览区域显示修改后的所述第一图文文件对应的组件元素。

综上所述，本申请实施例提供的画面配置装置，在直播配置平台中提供用于制作扩展图文内容的图文制作界面，该图文制作界面中包括画布区域和多个候选组件选项；用户从多个候选组件选项中选择任意组件选项，画布区域会显示用户选择的组件选项对应的组件元素，用户可以对该组件元素的元素内容进行静态或者动态配置，配置完成后，用户对画布区域内的组件元素进行确认得到图文文件，该图文文件中包含的组件元素即为制作完成的扩展图文内容。本申请中，提供了一个可视化制作扩展图文内容的平台，一方面，不需要通过编写复杂代码制作扩展图文内容，降低了制作扩展图文内容的门槛，使得非技术人员也能进行制作，并且相比通过编写代码扩展图文内容，通过可视化平台还能够降低内容制作时间，从而提高了图文内容的制作效率；另一方面，由于扩展图文内容的制作过程是可视化的，减少了编写代码而导致的错误，并且能够按照当前直播需求对制作的内容进行灵活修改，提高了图文内容的在制作过程中的灵活性，从而使得图文内容的制作能够符合及时性要求较高的直播画面制作需求。

需要说明的是：上述实施例提供的画面配置装置，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将设备的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。另外，上述实施例提供的画面配置装置与画面配置方法实施例属于同一构思，其具体实现过程详见方法实施例，这里不再赘述。

图16示出了本申请一个示例性实施例提供的电子设备1600的结构框图。该计算机设备1600可以是便携式移动终端，比如：智能手机、车载终端、平板电脑、MP3播放器(MovingPicture Experts Group Audio Layer III，动态影像专家压缩标准音频层面3)、MP4(Moving Picture Experts Group Audio Layer IV，动态影像专家压缩标准音频层面4)播放器、笔记本电脑或台式电脑。计算机设备1600还可能被称为用户设备、便携式终端、膝上型终端、台式终端等其他名称。

通常，计算机设备1600包括有：处理器1601和存储器1602。

处理器1601可以包括一个或多个处理核心，比如4核心处理器、8核心处理器等。处理器1601可以采用DSP(Digital Signal Processing，数字信号处理)、FPGA(Field－Programmable Gate Array，现场可编程门阵列)、PLA(Programmable Logic Array，可编程逻辑阵列)中的至少一种硬件形式来实现。处理器1601也可以包括主处理器和协处理器，主处理器是用于对在唤醒状态下的数据进行处理的处理器，也称CPU(Central ProcessingUnit，中央处理器)；协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中，处理器1601可以集成有GPU(Graphics Processing Unit，图像处理器)，GPU用于负责显示屏所需要显示的内容的渲染和绘制。一些实施例中，处理器1601还可以包括AI(Artificial Intelligence，人工智能)处理器，该AI处理器用于处理有关机器学习的计算操作。

存储器1602可以包括一个或多个计算机可读存储介质，该计算机可读存储介质可以是非暂态的。存储器1602还可包括高速随机存取存储器，以及非易失性存储器，比如一个或多个磁盘存储设备、闪存存储设备。在一些实施例中，存储器1602中的非暂态的计算机可读存储介质用于存储至少一个指令，该至少一个指令用于被处理器1601所执行以实现本申请中方法实施例提供的画面配置方法。

在一些实施例中，计算机设备1600还包括有一个或多个传感器。该一个或多个传感器包括但不限于：接近传感器、陀螺仪传感器、压力传感器。

接近传感器，也称距离传感器，通常设置在计算机设备1600的前面板。接近传感器用于采集用户与计算机设备1600的正面之间的距离。

陀螺仪传感器可以检测计算机设备1600的机体方向及转动角度，陀螺仪传感器可以与加速度传感器协同采集用户对计算机设备1600的3D动作。处理器1601根据陀螺仪传感器采集的数据，可以实现如下功能：动作感应(比如根据用户的倾斜操作来改变UI)、拍摄时的图像稳定、游戏控制以及惯性导航。

压力传感器可以设置在计算机设备1600的侧边框和/或显示屏的下层。当压力传感器设置在计算机设备1600的侧边框时，可以检测用户对计算机设备1600的握持信号，由处理器1601根据压力传感器采集的握持信号进行左右手识别或快捷操作。当压力传感器设置在显示屏的下层时，由处理器1601根据用户对显示屏的压力操作，实现对UI界面上的可操作性控件进行控制。可操作性控件包括按钮控件、滚动条控件、图标控件、菜单控件中的至少一种。

在一些实施例中，计算机设备1600还包括其他组件部分，本领域技术人员可以理解，图16中示出的结构并不构成对计算机设备1600的限定，可以包括比图示更多或更少的组件，或者组合某些组件，或者采用不同的组件布置。

本申请的实施例还提供了一种计算机设备，该计算机设备可以实现为如图2所示的终端或者服务器。该计算机设备包括处理器和存储器，该存储器中存储有至少一条指令、至少一段程序、代码集或指令集，至少一条指令、至少一段程序、代码集或指令集由处理器加载并执行以实现上述各方法实施例提供的画面配置方法。

本申请的实施例还提供了一种计算机可读存储介质，该计算机可读存储介质上存储有至少一条指令、至少一段程序、代码集或指令集，至少一条指令、至少一段程序、代码集或指令集由处理器加载并执行，以实现上述各方法实施例提供的画面配置方法。

本申请的实施例还提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行上述实施例中任一所述的画面配置方法。

可选地，该计算机可读存储介质可以包括：只读存储器(ROM，Read Only Memory)、随机存取记忆体(RAM，Random Access Memory)、固态硬盘(SSD，Solid State Drives)或光盘等。其中，随机存取记忆体可以包括电阻式随机存取记忆体(ReRAM，Resistance RandomAccess Memory)和动态随机存取存储器(DRAM，Dynamic Random Access Memory)。上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。

本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。

以上所述仅为本申请的可选实施例，并不用以限制本申请，凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

Claims (15)

1.一种画面配置方法，其特征在于，所述方法包括：

显示直播配置平台的图文制作界面，所述图文制作界面用于制作配合直播画面显示的扩展图文内容，所述图文制作界面中包括画布区域和组件选择区域，所述组件选择区域中包括多个候选组件选项；

响应于接收到在所述多个候选组件选项中对第一组件选项的选择操作，在所述画布区域中显示所述第一组件选项对应的目标组件元素；

显示所述目标组件元素对应的组件配置区域，接收在所述组件配置区域中对所述目标组件元素的配置操作，所述组件配置区域用于对所述目标组件元素的元素内容进行配置，其中，所述组件配置区域中包括内容配置项，所述内容配置项用于配置静态组件内容或者动态组件内容，所述动态组件内容是指在直播过程中调用与所述直播画面相关的实时直播数据后，获取的与所述实时直播数据对应的数据内容；

响应于接收到对所述画布区域的确认操作，生成与所述画布区域对应的第一图文文件，所述第一图文文件用于将所述画布区域中的组件元素作为所述扩展图文内容配合所述直播画面进行直播显示。

2.根据权利要求1所述的方法，其特征在于，所述接收在所述组件配置区域中对所述目标组件元素的配置操作，包括：

响应于接收到对所述内容配置项对应的动态标识的触发操作，显示所述动态组件内容对应的动态属性配置区域，所述动态属性配置区域用于为所述目标组件元素配置与所述直播画面相关的实时直播数据的数据源；

接收在所述动态属性配置区域对所述动态组件内容对应的数据源的配置操作。

3.根据权利要求2所述的方法，其特征在于，所述方法还包括：

响应于在所述动态属性配置区域对所述动态组件内容对应的默认数据源的配置操作，在所述目标组件元素内显示默认数据源对应的默认组件内容，所述默认组件内容用于在所述扩展图文内容制作过程中进行预览显示。

4.根据权利要求1所述的方法，其特征在于，所述接收在所述组件配置区域中对所述目标组件元素的配置操作，包括：

接收在所述动态属性配置区域对所述动态组件内容对应的目标关联事件的配置操作，所述目标关联事件用于在被触发的情况下更新所述目标组件元素对应的所述动态组件内容。

5.根据权利要求1所述的方法，其特征在于，所述响应于接收到在所述多个候选组件选项中对第一组件选项的选择操作，在所述画布区域中显示所述第一组件选项对应的目标组件元素，包括：

接收在所述多个候选组件选项中对所述第一组件选项的长按操作；

接收衔接所述长按操作的滑动操作；

响应于所述滑动操作在所述画布区域内终止，在所述画布区域中显示所述第一组件选项对应的所述目标组件元素。

6.根据权利要求1至5任一所述的方法，其特征在于，所述图文制作界面中还包括图层列表区域，所述图层列表区域用于显示当前所述画布区域中的组件元素之间的层次结构；

所述方法还包括：

在所述画布区域中显示所述目标组件元素的情况下，基于所述目标组件元素对应的层级关系，在所述图层列表区域中显示所述目标组件元素对应的组件列表项。

7.根据权利要求1至5任一所述的方法，其特征在于，所述响应于接收到对所述画布区域的确认操作，生成与所述画布区域对应的第一图文文件之后，还包括：

显示所述直播配置平台的图文播出界面，所述图文播出界面用于播出配合所述直播画面显示的所述扩展图文内容，所述图文播出界面中包括预览区域和图文选择区域，所述图文选择区域中包括所述第一图文文件；

响应于接收到对所述第一图文文件的选择操作，在所述预览区域显示所述第一图文文件对应的组件元素；

接收对所述预览区域的播出操作，所述播出操作用于向直播服务器发送所述第一图文文件，所述直播服务器用于将所述第一图文文件对应的组件元素与实时播放的所述直播画面融合。

8.根据权利要求7所述的方法，其特征在于，所述图文播出界面中包括播放列表区域，所述播放列表区域中包括预设场景对应的播出画面列表项，所述播出画面列表项用于显示待播出的所述扩展图文内容；

所述响应于接收到对所述第一图文文件的选择操作，在所述预览区域显示所述第一图文文件对应的组件元素，包括：

响应于接收到对所述第一图文文件的选择操作，将所述第一图文文件添加至所述播出画面列表项中；

响应于接收到在所述播放列表区域中对所述播出画面列表项的预览操作，在所述预览区域显示所述第一图文文件对应的组件元素。

9.根据权利要求8所述的方法，其特征在于，所述直播画面包括目标赛事的赛前直播画面，所述第一图文文件包括选手介绍文件；

所述响应于接收到在所述播放列表区域中对所述播出画面列表项的预览操作，在所述预览区域显示所述第一图文文件对应的组件元素，包括：

获取所述赛前直播画面对应的画面特征表示和音频特征表示，所述赛前直播画面中包含目标参赛选手；

对所述画面特征表示和所述音频特征表示进行特征分析，得到预测播出信号；

在所述预测播出信号指示播出所述选手介绍文件的情况下，触发对所述播出画面列表项的预览操作，在所述预览区域显示所述选手介绍文件对应的组件元素。

10.根据权利要求8所述的方法，其特征在于，所述接收对所述预览区域的播出操作之前，还包括：

响应于接收到对所述第一图文文件的动画配置操作，显示所述第一图文文件对应的动画配置区域，所述动画配置区域用于配置所述第一图文文件对应的组件元素播出时的目标动画效果。

11.根据权利要求8所述的方法，其特征在于，所述接收对所述预览区域的播出操作之前，还包括：

响应于接收到对所述第一图文文件的元素修改操作，显示元素修改界面，所述元素修改界面用于修改所述第一图文文件对应的组件元素；

响应于对所述第一图文文件修改完成，在所述预览区域显示修改后的所述第一图文文件对应的组件元素。

12.一种画面配置装置，其特征在于，所述装置包括：

显示模块，用于显示直播配置平台的图文制作界面，所述图文制作界面用于制作配合直播画面显示的扩展图文内容，所述图文制作界面中包括画布区域和组件选择区域，所述组件选择区域中包括多个候选组件选项；

所述显示模块，还用于响应于接收到在所述多个候选组件选项中对第一组件选项的选择操作，在所述画布区域中显示所述第一组件选项对应的目标组件元素；

所述显示模块，还用于显示所述目标组件元素对应的组件配置区域，接收在所述组件配置区域中对所述目标组件元素的配置操作，所述组件配置区域用于对所述目标组件元素的元素内容进行配置，其中，所述组件配置区域中包括内容配置项，所述内容配置项用于配置静态组件内容或者动态组件内容，所述动态组件内容是指在直播过程中调用与所述直播画面相关的实时直播数据后，获取的与所述实时直播数据对应的数据内容；

生成模块，用于响应于接收到对所述画布区域的确认操作，生成与所述画布区域对应的第一图文文件，所述第一图文文件用于将所述画布区域中的组件元素作为所述扩展图文内容配合所述直播画面进行直播显示。

13.一种计算机设备，其特征在于，所述计算机设备包括处理器和存储器，所述存储器中存储有至少一段程序，所述至少一段程序由所述处理器加载并执行以实现如权利要求1至11任一所述的画面配置方法。

14.一种计算机可读存储介质，其特征在于，所述存储介质中存储有至少一段程序，所述至少一段程序由处理器加载并执行以实现如权利要求1至11任一所述的画面配置方法。

15.一种计算机程序产品，其特征在于，包括计算机程序，所述计算机程序被处理器执行时实现如权利要求1至11任一所述的画面配置方法。