CN114363696B - 视频支持元素插入的显示处理方法、电子终端及存储介质 - Google Patents

Abstract

本申请公开了视频支持元素插入的显示处理方法、电子终端及存储介质，其中方法包括：获取每一帧素材图像的插入图层在素材图像中的第一位置数据，以作为插入图层在源视频与素材图像对应的源视频帧中的位置数据；将源视频的视频数据和第一位置数据发送给服务器，经由服务器发送给客户终端，以使得客户终端接收到源视频的视频数据以及第一位置数据后，获取与插入图层相应的元素图像，并在直播画面中渲染源视频时将元素图像按照相应的第一位置数据渲染至对应的源视频帧中。通过上述方式，本申请能够实现将元素插入视频中。

Description

视频支持元素插入的显示处理方法、电子终端及存储介质

技术领域

本申请涉及直播技术领域，特别是涉及视频支持元素插入的显示处理方法、电子终端及存储介质。

背景技术

随着智能设备的普及以及通信技术的发展，社会进入了智能互联的时代。网络通信速度越来越快，人们能够方便地使用智能设备畅游网络。直播技术的出现，丰富了智能设备的使用场景，人们可以随时随地观看直播或者进行直播，进而也丰富了人们的生活。

目前由于直播技术的进步，直播的功能也越来越丰富，直播画面呈现的各种动态效果也越来越丰富。在直播中往往也会涉及到视频的播放，例如礼物动效可以以视频的方式播放，通过视频动效的方式能够呈现更多的细节，但是视频制作完成后在渲染中一般是难以插入相应的元素。

发明内容

本申请主要解决的技术问题是提供视频支持元素插入的显示处理方法、电子终端及存储介质，能够改善现有技术中难以在视频中插入元素的问题。

为解决上述技术问题，第一方面，本申请采用的技术方案是：提供一种视频支持元素插入的显示处理方法，该方法包括：

获取每一帧素材图像的插入图层在素材图像中的第一位置数据，以作为插入图层在源视频与素材图像对应的源视频帧中的位置数据；

将源视频的视频数据和第一位置数据发送给服务器，经由服务器发送给客户终端，以使得客户终端接收到源视频的视频数据以及第一位置数据后，获取与插入图层相应的元素图像，并在直播画面中渲染源视频时将元素图像按照相应的第一位置数据渲染至对应的源视频帧中。

为了解决上述技术问题，第二方面，本申请采用的技术方案是：提供一种视频支持元素插入的显示处理方法，该方法包括：

接收源视频的视频数据和每一帧素材图像的插入图层在素材图像中的第一位置数据；

获取与插入图层相应的元素图像，并在直播画面渲染源视频时将元素图像按照相应的第一位置数据渲染至相应的源视频帧中。

为了解决上述技术问题，第三方面，本申请采用的技术方案是：提供一种电子终端，该电子终端包括：处理器、存储器、通信电路以及显示器；通信电路、存储器以及显示器分别耦接处理器，通信电路用于与其他终端进行通信连接，存储器存储有计算机程序，计算机程序能够被处理器执行以实现上述第一方面提及的显示处理方法。

为了解决上述技术问题，第四方面，本申请采用的技术方案是：提供一种电子终端，该电子终端包括：处理器、存储器、通信电路以及显示器；通信电路、存储器以及显示器分别耦接处理器，通信电路用于与其他终端进行通信连接，存储器存储有计算机程序，计算机程序能够被处理器执行以实现上述第二方面提及的显示处理方法。

为了解决上述技术问题，第五方面，本申请采用的技术方案是：提供一种计算机可读的存储介质，该存储介质存储有计算机程序，计算机程序能够被处理器执行以实现如第一方面和第二方面提及显示处理方法。

本申请的有益效果是：区别于现有技术的情况，通过设计与源视频帧对应的素材图像，并在素材图像上设计与所需插入的元素图像对应的插入图层，进而可以从素材图像上获取到插入图层的第一位置数据，第一位置数据可以表示插入图层在源视频帧的插入位置，服务器接收到第一位置数据和源视频的视频数据可以发送发给客户终端，客户终端可以提取与插入图层对应的元素图像，进而在直播画面中渲染源视频帧时，将元素图像按照相应第一位置数据渲染至对应的源视频帧中，如此通过建立插入图层和元素图像之间以及插入图层和源视频之间的联系，进而利用插入图层在素材图像中位置来映射元素图像在源视频帧中位置，进而在渲染时，元素图像可以按照插入图层的第一位置数据等渲染至源视频帧中，如此能够较好且有效地实现在源视频帧渲染时动态插入元素，而且由于预先设计好了相应的素材图像获取了第一位置数据，使得在渲染时能够快速地将元素图像渲染至相应的位置中，减少客户终端的渲染压力，提升渲染速度，提升实时性。

附图说明

图1是本申请直播系统实施例的系统组成示意图；

图2是本申请视频支持元素插入的显示处理方法第一实施例的流程示意图；

图3是本申请视频支持元素插入的显示处理方法第一实施例的素材图像设计界面的示意图；

图4是本申请视频支持元素插入的显示处理方法第一实施例的素材图像的示意图；

图5是本申请视频支持元素插入的显示处理方法第一实施例的时序示意图；

图6是本申请视频支持元素插入的显示处理方法第一实施例的输出视频帧的示意图；

图7是本申请视频支持元素插入的显示处理方法第一实施例的另一输出视频帧的示意图；

图8是本申请视频支持元素插入的显示处理方法第二实施例的流程示意图；

图9是本申请电子终端第一实施例的电路结构示意框图；

图10是本申请电子终端第二实施例的电路结构示意框图；

图11是本申请计算机可读的存储介质的电路结构示意框图。

具体实施方式

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

本申请的发明人在长期研发过程中发现，在直播等场景中为了丰富直播效果，往往需要在播放的视频中动态插入相应的元素，比如文字或者图片，而在视频渲染显示的过程中动态插入相应的元素实现过程较为复杂，实现难度较大。当然，通过一些动画动效格式能够简单地实现元素插入效果，比如Y2A或者SVGA，但是视频格式往往在显示效果更优于普通的动效格式，而且能够实现更炫酷的效果。尤其是MP4格式的视频，MP4格式的视频能够实现更多酷炫的效果，所见即所得，但视频要想在视频渲染的过程中动态插入元素比较困难。为了实现在视频渲染过程中插入动态元素，本申请提出以下实施例。

如图1所示，本申请直播系统实施例描述的直播系统1可以包括服务器10、主播终端20、观众终端30以及配置终端40。主播终端20、观众终端30、配置终端40可以为电子终端，具体地，主播终端20和观众终端30为安装有相应客户端程序的电子终端，也即客户终端。电子终端可以是移动终端、计算机、服务器或者其他终端等，移动终端可以是手机、笔记本电脑、平板电脑、智能穿戴设备等，计算机可以是台式电脑等。

服务器10可以从主播终端20中对直播数据流拉流，并可以将获取的直播数据流进行相应的处理后推流到观众终端30。观众终端30获取到直播数据流后即可观看主播或者嘉宾的直播过程。直播数据流的混流可以发生在服务器10、主播终端20和观众终端30中的至少一方。主播终端20和主播终端20之间、主播终端20和观众终端30之间均可以进行视频连麦或语音连麦。在视频连麦中，连麦方可以将包括视频流在内的直播数据流推送到服务器10，进而将相应的直播数据推送至相应的连麦方以及观众终端30。主播终端20和观众终端30能够在直播间中显示到相应的直播画面。

当然，主播终端20和观众终端30是相对而言的，处于在直播过程中的终端为主播终端20，处于观看直播过程的终端为观众终端30。配置终端40用于对客户端以及服务器等进行配置，例如对客户端内显示的界面布局、礼物特效、动画等各项功能进行配置。配置终端40可以将相应的项目制作完成后发送给服务器10，由服务器10发送给客户终端，以实现客户端的后台配置。

如图2所示，本申请视频支持元素插入的显示处理方法第一实施例可以以配置终端40为执行主体。本实施例可以包括如下步骤：

S100：获取每一帧素材图像的插入图层在素材图像中的第一位置数据，以作为插入图层在源视频与素材图像对应的源视频帧中的位置数据。

S200：将源视频的视频数据和第一位置数据发送给服务器，以使得客户终端经由服务器接收到源视频的视频数据以及第一位置数据后，获取与插入图层相应的元素图像，并在直播画面中渲染源视频时将元素图像按照相应的第一位置数据渲染至对应的源视频帧中。

通过设计与源视频帧对应的素材图像，并在素材图像上设计与所需插入的元素图像对应的插入图层，进而可以从素材图像上获取到插入图层的第一位置数据，第一位置数据是插入图层在源视频帧上的显示位置，服务器接收到第一位置数据和源视频的视频数据可以发送发给客户终端，客户终端可以提取与插入图层对应的元素图像，进而在直播画面中渲染源视频帧时，将元素图像按照相应第一位置数据渲染至对应的源视频帧中，如此通过建立插入图层和元素图像之间以及插入图层和源视频之间的联系，进而利用插入图层在素材图像中位置来映射元素图像在源视频帧中位置，进而在渲染时，元素图像可以按照插入图层的第一位置数据等渲染至源视频帧中，如此能够较好且有效地实现在源视频帧渲染时动态插入元素，而且由于预先设计好了相应的素材图像获取了第一位置数据，使得在渲染时能够快速地将元素图像渲染至相应的位置中，减少客户终端的渲染压力，提升渲染速度，提升实时性。

以下对本实施例进行详细的描述：

一、设计素材资源

根据实际需要确定以下内容：元素在源视频帧中的插入位置以及形状，以及元素的类型。元素的类型也即需要插入什么样的元素。所需要插入的元素可以包括图片以及文字。也即，需要将图片和文字渲染至相应的源视频帧中。

在确定上述内容后，可以具体设计和制作素材资源。素材资源可以根据元素的类型分为两类，一是图像合成资源，二是文字合成资源。具体可以利用Adobe-Effects软件(简称AE软件)对素材资源进行制作。如图3所示，图3中命名为mask_image的合成信息，即为图像合成资源，其描述的是源视频中进行图像插入。图3中命名为mask_text，即为文字合成资源，其描述的是源视频中进行文字插入。

无论是图像合成资源还是文字合成资源，其内可以包括多帧素材图像以及其他一些相关的信息。一帧素材图像和源视频中的一帧源视频帧对应。例如，需要在源视频的第2-10帧插入相应的元素。素材图像可以对应于源视频中需要插入元素的源视频帧。可选地，素材图像的帧数可以和源视频帧的帧数是相同的，素材图像的帧序列一一对应于源视频帧的帧序列，也即第一帧素材图像对插入图层描述，对应于相应的元素在第一帧源视频帧中的具体渲染。

本实施例中可以通过在素材资源中配置相应的标识信息，标识信息用于建立插入图层和元素之间的关系。例如，可以设置素材图像的名称作为标识信息，用来索引相应的元素。或者，可以在合成资源中为每个插入图层配置单独的图像，以该图像的名称作为标识信息，用于索引相应的元素。当然，配置元素索引的方式有很多，不限于以上方式。例如，如图3所示，标识信息为素材图像的名称，比如keyname，也即客户终端在提取该标识信息后，可以提取对应用户的昵称作为待渲染的元素。通过在素材资源中设置相应标识信息，客户终端在接收到标识信后，就可以知道需要插入什么元素，进而可以索引获取相应的元素。

素材图像的尺寸可以和源视频的源视频帧的尺寸相同。在素材图像内可以设计插入图层的位置以及所呈现的形状，以此来反映元素最终在相应的源视频帧中渲染所呈现出来的位置以及形状。在连续多帧的素材图像中，对于相同的插入图层可以进行变换和调整，以在渲染时，使得相应的元素可以呈现相应的动画效果。

如图4所示，例如项目要实现插入图层1和插入图层2往相互靠拢的方向移动并且旋转，最终两者相撞，那么肯定针对这个目的可以设计连续多帧素材图像来实现。素材图像的帧数可以和源视频帧的帧数相同，且一一对应，换言之，素材图像所要实现的动画过程和源视频帧的播放过程同步。

上述提及的元素在待渲染时会以图片呈现，也即后面内容所提及的元素图像。

二、读取素材资源

在设计完相应的素材资源后，可以读取该素材资源。具体地，可以通过AE软件中开发相应插件/扩展功能去实现本实施例描述的方法。具体地，可以遍历项目中所有的素材资源，并提取出图像合成资源mask_image和文字合成资源mask_text，分成2组。之后可以分别对2组合成资源分析其内相应的插入图层。

如图5所示，本实施例在步骤S100之前包括：

S080：获取描述所需要插入的元素图像的素材资源。

在制作完相应的素材资源后，通过相应的软件可以读取素材资源。基于上述的描述，素材资源可以是用于描述在源视频中插入相应的元素图像的，包括元素图像所对应的标识信息、位置以及形状，以便于客户终端能够在知道要提取什么元素，以什么样的形状渲染在源视频帧的什么位置。

S090：解析所述素材资源，提取图像合成资源和文字合成资源，以分别获得所述图像合成资源和所述文字合成资源各自的所有帧所述素材图像。

从项目的素材资源中提取出图像合成资源和文字合成资源，进而可以对图像合成资源和文字合成资源的各素材图像进行分析，例如获取插入图层的位置等。

三、分析素材资源

如图5所示，本实施例可以包括：

S100：获取每一帧素材图像的插入图层在素材图像中的第一位置数据，以作为插入图层在源视频与素材图像对应的源视频帧中的位置数据。

在读取到素材资源后，对素材资源进行分析。通过对素材资源中各素材图像的分析，可以计算每一素材图像中各插入图层在该素材图像中的位置，获取各插入图层的第一位置数据，进而可以获取到该项目的所有素材图像的各插入图层的第一位置数据。通过插入图层在相应的素材图像中的第一位置数据来反映/映射相应的元素图像在源视频帧中的位置数据，进而使得客户终端能够知道所提取的元素图像要渲染至源视频帧的什么位置。

就如上面所言，每一帧素材图像与源视频中的一帧源视频帧对应。在本步骤中获取到某素材图像的插入图层在该素材图像中的第一位置数据，作为该插入图层在与该素材图像对应的源视频帧的位置数据。第一位置数据例如可以通过坐标数据进行表示，也即插入图层在素材图像中的坐标。

在设计素材资源时，利用多帧素材图像实现插入图像的动态变换，例如实现动画效果，在客户终端渲染时，相应的元素图像在源视频中也可以呈现动画效果。设计多帧素材图像时，一般往往需要给出插入图层的起始位置数据，进而利用AE软件可以快速实现想要的动态变换。而为了实现元素图像在多个源视频帧中插入位置，需要获取计算机能够读取和利用的位置数据。

至于如何获取各个素材图像中的插入图层的第一位置数据，可以参见S100包括的如下步骤：

S110：计算映射插入图层在第一帧素材图像和各后续帧素材图像之间产生的相对变化的第一变换矩阵。

例如，需要渲染至源视频中的整个动画项目的帧率fps以及设置的动画时间duration，如此可以将整个过程分割成fps*duration帧，也即素材图像可以有fps*duration帧，需要去获取这些帧素材图像上插入图层的位置。具体地，通过分析该些帧素材图像可以生成相应的第一变换矩阵，例如为可以为每一帧素材图像创建一个变换矩阵，进而来描述插入图层在不同帧的素材图像中的位置变换。

各后续帧素材图像的第一变换矩阵是映射该后续帧素材图像的插入图层相对于第一帧素材图像的同一插入图层产生的相对变化。例如，素材图像的总帧数为10帧，那么第2-10帧分别对应创建一个第一变换矩阵，不同帧的素材图像的第一变换矩阵描述的是该素材图像的插入图层相对于第1帧素材图像的插入图层的相对变化。

至于第一变化矩阵的具体创建过程，可以参见步骤S110包括的如下步骤：

S111：获取各后续帧所述素材图像的所述插入图层相对于第一帧所述素材图像的所述插入图层在平移维度、旋转维度以及缩放维度上的变化数据。

后续帧素材图像是在同一个项目中相对于第一帧素材图像而言的，也即第一帧素材图像之后的素材图像称为后续帧素材图像。

变换数据可以是指插入图层在不同帧素材图像中的平移、旋转以及缩放情况的数据。变化数据可以是在素材资源设计的时候就需要确定或者输入每帧素材图像的插入图层在平移、旋转以及缩放维度上的数据，或者可以是对所设计好的素材资源的所有帧素材图像进行分析和计算得出的。

例如，在0s的时候，插入图层1的锚点为(0,0)，位置为(225,730),旋转角度为0，缩放为60％。在2s的时候，插入图层1的锚点为(0,0)，位置为(352,730),旋转角度为0，缩放为60％。

锚点可以选定为插入图层1的原点，也即插入图层1的图层范围左上角的位置，此时锚点为(0,0)。位置为(225,730)、位置为(352,730)是锚点相对于素材图像的原点的位置，也即相对于素材图像左上角的顶点的位置。位置可以体现插入图层的平移关系、旋转角度可以体现插入图层的旋转关系，缩放比例体现插入图层的缩放关系。如此可以计算2s和0s之间在平移、旋转和缩放维度上的变化，进而得到2s相对0s的变化数据。

总而言之，可以通过计算后续帧素材图像相对于第一帧素材图像在三个维度上的变化，可以得到相应的变化数据，便于利用变化数据构建相应的第一变换矩阵。

S112：利用各后续帧所述素材图像各自对应的所述变化数据计算出各后续帧所述素材图像对应的所述第一变换矩阵。

在得出各后续帧素材图像的变化数据后，可以利用各后续帧素材图像的变化数据计算出各自对应的第一变换矩阵。在计算出各后续帧素材图像对应的第一变换矩阵后，可以利用第一帧素材图像的第一位置数据计算出各后续帧素材图像对应的第一位置数据，具体可以参见如下S120。

S120：获取插入图层在第一帧素材图像中的第一位置数据，并将插入图层在第一帧素材图像中的第一位置数据分别经各后续帧素材图像对应的第一变换矩阵变换后得到插入图层在各后续帧素材图像中的第一位置数据。

获取第一帧素材图像的插入图层的第一位置数据，也即插入图层实现动画过程的起始位置数据。将第一帧素材图像的第一位置数据经过各后续帧素材图像的第一变换矩阵进行变换，就可以获得各后续帧素材图像的同一插入图层的第一位置数据。如此，利用第一变换矩阵能够快速地计算出各后续帧素材图像的插入图层的第一位置数据，也即素材图像的图像呈现的位置转换成了计算机能够读取运算的位置数据。

具体地，利用第一帧素材图像对应的第一位置数据计算各后续帧素材图像对应的第一位置数据的具体过程可以参见S120包括的如下步骤：

S121：确定插入图层在第一帧素材图像中的各顶点坐标对应第一坐标数据，以获得插入图层在第一帧素材图像中的第一位置数据。

例如，可以根据第一帧素材图像的插入图层的宽高，以及位置(例如锚点位置)，能够得到该图层的范围：左上顶点、左下顶点、右上顶点以及右下顶点。如此即可算出各顶点的坐标，获得第一坐标数据。第一位置数据可以通过第一坐标数据体现。以图4的A图示出的插入图层1为例，可以利用上述方式确定后插入图层1在第一帧素材图像的4顶点的坐标。

S122：将第一坐标数据分别乘以各后续帧素材图像对应的第一变换矩阵，得到插入图层在各后续帧素材图像中的变换坐标数据。

结合上面步骤计算出的第一变换矩阵，第一坐标数据乘以后续帧素材图像对应的第一变换矩阵，计算出该后续帧素材图像的变换坐标数据。具体地，将四个上面计算出的四个顶点分别乘以第一变换矩阵，得到对应帧素材图像的插入图层新的四个顶点位置，而这四个顶点的位置并不一定是该帧素材图像的插入图层的图层范围的顶点位置。

例如，图4的B图示出的插入图层1，某后续帧素材图像的插入图层1相对于第一帧素材图像的插入图层1进行了移动且旋转。第一帧素材图像中呈正方形的插入图层1经过旋转后在某后续帧素材图像中呈现类似菱形的形状，但两者的图层范围是不同的，第一帧素材图像的插入图层1的图层范围为该正方形的四个顶点所定义的，而在某素材图像中，插入图层1的图层范围由图中示出的“虚线框”所定义。因此，还需要根据得出的新的四个顶点位置确定该帧素材图像的插入图层的图层范围。

S123：利用插入图层的变换坐标数据确定插入图层在各后续帧素材图像中的各顶点坐标对应的第二坐标数据，以获得插入图层分别在各后续帧素材图像中的第一位置数据。

具体地，可以在上述步骤得出的变换坐标数据中确定该帧素材图像的插入图层在横坐标的最大值和最小值，在纵坐标上的最大值和最小值。利用该帧素材图像的插入图层在横坐标的最大值和最小值，在纵坐标上的最大值和最小值确定插入图层的图层范围。

例如，在变换坐标数据对应的新的顶点位置中，确定x,y轴最大值和最小值，4个数值为(minX，minY，maxX，maxY)。确定该后续帧素材图像的插入图层的图层范围新的四个顶点位置：左上：(minX,minY)；左下：(minX,maxY)；右上：(maxX,minY)；右下：(maxX,maxY)，也即第二坐标数据。插入图层在该后续帧素材图像中的第一位置数据可以通过第二坐标数据表示。

在获取到各帧素材图像的插入图层的第一位置数据后，保存各第一位置数据，记录为该插入图层在该帧素材图像对应的源视频帧中的显示位置。依次类推，可以计算出所有插入图层在每一帧素材图像中的四个顶点位置，保存在一个字典中。

四、数据输出

S200：将源视频的视频数据和第一位置数据发送给服务器，经服务器转发给客户终端。

在上述获取到第一位置数据后，可以将源视频的视频数据和第一位置数据输出。服务器可以将接收到的数据转发给客户终端，在客户终端上进行渲染。客户终端经由服务器接收到源视频的视频数据以及第一位置数据后，获取与插入图层相应的元素图像，并在直播画面中渲染源视频时将元素图像按照相应的第一位置数据渲染至对应的源视频帧中。

具体地，客户终端可以获取与插入图层对应的标识信息，进而获取与标识信息对应的元素图像。在直播画面中渲染源视频的过程中将元素图像按照其所对应的第一位置数据渲染至对应的源视频帧中，如此在源视频播放的过程中实现元素的动态插入，源视频播放的同时元素也可以展现相应的动画效果，便捷且有效地实现了视频的元素动态插入，丰富了动态的显示效果。

客户终端在提取元素图像时，若标识信息所标识的元素为文字，则先生成相应的文字，然后将相应的所述文字转成相应的元素图像，比如用户昵称。若标识信息所标识的元素为图片，则可以直接提取相应的元素图像，比如用户头像。

上述各步骤主要是描述元素图像在源视频帧中的插入位置，可以源视频的视频数据和各第一位置数据发送给服务器，服务器再发送给各客户终端。在本实施例中，插入图层还可以对元素图像的形状进行描述，进而在客户终端渲染时可以呈现相应的形状。具体可以通过生成输出视频来实现插入图层对元素图像形状的描述，可以参见如下步骤：

S210：获取其上间隔显示源视频帧和与源视频帧对应的插入图层的输出视频帧，以及插入图层在输出视频帧中的第二位置数据。

在步骤S200之前可以获取输出视频帧以及第二位置数据。具体地，如图6所示，输出视频帧对应的输出画布可以划分为间隔设置的第一区域和第二区域。可选地，输出视频帧的数量和源视频帧的数量相同，也即输出视频帧和源视频帧一一对应。输出视频帧的第一区域显示有对应的源视频帧，输出视频帧的第二区域显示有要插入该源视频帧的各插入图层。第二区域的作用实际上就是为了保存该源视频帧对应的各插入图层，以便于客户终端可以具体识别出各插入图层。

具体地，可以通过AE软件中相应的插件/扩展功能获取到输出视频帧以及插入图层在第二区域中的第二位置数据。第二位置数据可以通过插入图层在输出视频帧中的坐标数据来表达。

至于获取输出视频帧的具体过程，可以参见S210包括的如下步骤：

S211：生成输出画布。

具体地，可以根据源视频帧的尺寸生成相应尺寸的输出画布，输画布的尺寸比源视频帧的尺寸大。例如源视频帧的尺寸(长*宽)为100*100，那么输出画布的尺寸扩充为200*100。

S212：将源视频帧显示于所述输出画布的第一区域。

第一帧的输出画布显示第一帧的源视频帧，以此类推，每个源视频帧显示于相应的输出画布上。源视频帧所占据的区域为第一区域。就上述举例而言，源视频帧可以占据输出画布的一半100*100，第二区域则可以位于输出画布的另一半内。

S213：将源视频帧对应的素材图像中的各插入图层依次复制至输出画布的第二区域，以形成输出视频帧，且记录各插入图层在输出画布的第二区域中的第二位置数据。

将描述在该源视频帧中插入元素图像的各插入图层依次复制到画布的第二区域内，具体的复制过程可以参见S213包括的如下步骤：

S2131：确定插入图层的各顶点在第二区域中的第三坐标数据以及在相应的素材图像中的第四坐标数据。

第一帧素材图像的插入图层的各顶点在该素材图像中的第四坐标数据则为前面已经提及的第一坐标数据。后续帧素材图像的插入图层的各顶点在该素材图像中的第四坐标数据则为前面已经提及的第二坐标数据。如图6所示，在将源视频帧显示于输出画布后，第二区域可以被确定，可以根据第二区域的剩余区域(其他插入图层占据所剩余的区域)的大小确定插入图层所能够填充的区域，进而可以为该插入图层在第二区域内分配相应的位置，进而可以获取到相应第三坐标数据。

例如，第二区域为矩形，各插入图层可以按照一定的顺序依次排列，第一个插入图层可以贴着第二区域的边界进行排列，第二个插入图层可以接着第一个图层排列，例如两者可以间隔两个像素。如此，可以确定第一个插入图层的左上角坐标(即，第二区域的左上角坐标)(x,y)。通过第一插入图层的大小，分别计算出四个顶点的坐标：(x,y)、(x+width,y)、(x,y+height)、(x+width,y+height)。

就如前面所言，输出画布是基于源视频帧进行扩充的，例如是沿其横向方向上扩展以形成第二区域。插入图层在相应的素材图像的第四位置数据可以相当于该插入图层在输出画布的第一区域的位置数据。如此，将插入图层复制到第二区域相当于插入图层变换从第一区域变换至第二区域。从第一区域变换至第二区域同样可以利用变换矩阵实现，进而实现插入图层的快速且有效的复制。

S2132：利用第三坐标数据和第四坐标数据计算映射插入图层在第二区域和素材图像之间的相对变化的第二变换矩阵。

第二变换矩阵是用于描述/映射输出画布的第二区域内的插入图层相对于相应的素材图像中的插入图层的位置变换。复制过程一般来说是平移关系。当然，也可以将第二区域缩小一定的比例后存放于第二区域，例如第二区域的插入图层的尺寸是素材图像的插入图层的尺寸的50％。如此，第二变换矩阵可以是反映插入图层在平移以及缩放维度上的变化。具体地，根据S2131确定出的第三坐标数据和第四坐标数据可以计算出第二变换矩阵。

S2133：将插入图层在相应的素材图像内的各像素点经第二变换矩阵进行坐标变换，以将插入图层的各像素点复制至第二区域。

为了实现插入图层的复制，一般来说需要将插入图层的各像素点，或者能够确定其形状的像素点复制到第二区域内。具体地，将插入图层在相应的素材图像内的各像素点经第二变换矩阵进行坐标变换，以将各像素点复制至第二区域内相应的坐标位置上，进而实现插入图层复制到第二区域的相应位置上。

将各插入图层依次复制至第二区域内，并排列在第二区域内。具体的排列方式可以参见S213包括的如下步骤：

S2134：沿第二区域在坐标系的横坐标方向依次排列各插入图层。

如图7所示，坐标系可以是AE软件内对图像进行处理所参考/使用的坐标系。沿第二区域的横坐标方向依次排列各插入图层。若一直沿横坐标方向排列各插入图层，如果插入图层的数量较多的情况下，可能会超出整个输出画布的边界，如此就无法把插入图层复制到第二区域内。

S2135：若当前排列的插入图层的图层范围超出第二区域在坐标系的横向范围，则将当前排列的插入图层重新排列于第二区域的另一行。

例如，第二区域为矩形区域，从第二区域的左上角开始沿横坐标方向排列。若将当前排列的插入图层超出了第二区域的横向范围时，将该插入图层重新另起一行排列，也即一行一行地往纵坐标方向排列。如此，可以有效地保证该源视频帧对应的所有插入图层都能够显示在第二区域内。

就如上面的举例，确定第一个插入图层的左上角坐标(即，第二区域的左上角坐标)(x,y)。通过第一插入图层的大小，分别计算出四个顶点的坐标：(x,y)、(x+width,y)、(x,y+height)、(x+width,y+height)。下一个插入图层左上角的坐标可以赋值为(x+width,y)，也即第一个插入图层的右上角的坐标。如此，插入图层可以一个接着一个排列，当然也可以间隔多个像素点排列。

如图7所示，如果x+width+当前图层的宽度已经超过了第二区域的大小，则将第二个插入图层的左上角的坐标置为(x,y+height)，也即第二区域的最左侧的第一个插入图层的左下角位置，进而可以继续重复S2134。

S220：将全部的输出视频帧按序列转成输出视频，以获得输出视频的视频数据。

将全部的输出视频帧按序列转成输出视频，也即输出视频的视频数据相当于包含了源视频帧的视频数据。在本实施例中，输出视频的格式可以为MP4格式。输出视频的视频数据还包括与源视频各源视频帧对应的插入图层。

插入图层保存于输出视频帧中是为了描述相应元素图像的形状。插入图层如何描述形状内，可以通过控制Alpha通道值，进而可以控制插入图层的透明区域和不透明区域，进而使得不透明区域可以呈现出相应的形状，比如为圆形、五角星等。一般来说，在计算机中，图像一般都是矩形，通过控制透明区域和不透明区域实现相应形状的呈现。

在设计素材图像时，插入图层可以通过为不同区域配置不同的颜色，不同的颜色对应的不同的alpha通道值，进而通过读取颜色信息获知透明度信息。比如，黑色对应全透明，也即黑色对应的alpha通道值为0；白色对应不透明，也即alpha通道值为1；通过将插入图层不予显示的区域(透明的区域)配置为黑色，要显示的区域(不透明的区域)配置为白色，如此插入图层就可以描述相应的形状。因此，客户终端在渲染时，可以从第二区域的插入图层中获取颜色信息，进而可以获得相应区域的alpha通道值，实现元素图像的透明度控制。

因此，输出视频的输出可以参见步骤S200包括的如下步骤：

S230：将输出视频的视频数据、第一位置数据和第二位置数据发送给服务器，经服务器转发给客户终端。

在形成与源视频帧对应的输出视频后，将输出视频的数据、各第一位置数据以及各第二位置数据发送给服务器，服务器将该写数据下发给客户终端。客户终端在接收到该些数据后，能够获取与插入图层对应的元素图像，并按照第二位置数据与相应的插入图层进行融合，使得融合后的元素图像具有与相应的插入图层相同的形状，并在直播画面渲染输出视频中的源视频时将融合后的元素图像按照相应的第一位置数据渲染至相应的源视频帧中。

具体而言，客户终端提取到相应的元素图像后，获取相应的第二位置数据对应的插入图层，并利用对应的插入图层的透明度信息对元素图像进行透明度控制，此过程可以称为融合，使得融合处理后的元素图像可以呈现跟插入图层所描述的形状相同。客户终端在直播画面中可以渲染输出视频中的源视频(也即，将输出视频帧的第一区域的源视频帧渲染在显示屏上)，在渲染过程中，将处理后的元素图像按照相应的第一位置渲染至相应的源视频帧中，如此可以有效地实现元素图像动态地插入源视频帧中，而且能够实现在源视频帧序列中进行形状变化，使得所呈现相应的动画动感更加十足、视觉效果更丰富。

当然，本实施例不仅限于对插入图层的形状/透明度控制，还可以对源视频帧的形状/透明度进行控制，可以在输出视频帧中配置第三区域，第三区域和第一区域以及第二区域间隔设置，第三区域显示有源视频帧的控制图层。

控制图层例如是源视频帧通过颜色信息区域透明区域和不透明区域的图层。例如，源视频帧中需要显示的区域则用白色配置，透明的区域则用黑色配置。客户终端在渲染的时候，可以将第一区域的源视频帧和第三区域的控制图层融合，也即利用第三区域的控制图层的透明度信息对源视频帧进行透明度控制，使得融合后的源视频帧呈现控制图层所描述的形状。

也即S210可以包括如下步骤：

S214：获取在其第一区域显示源视频帧、第二区域显示相应的插入图层以及第三区域显示源视频帧的控制图层的输出视频帧；其中，位于第三区域的控制图层用于在渲染时和第一区域的源视频帧融合，使得源视频帧在渲染时呈现控制图层所描述的形状。

关于第三区域的控制图层和第二区域的输入图层都是用于描述所要呈现的形状，前者是为了描述源视频帧的画面所要呈现的形状，后者是为了描述元素图像所要呈现的形状。

五、生成描述信息

可以将上述生成的插入图层在源视频帧中的第一位置数据，和在输出视频帧中的第二位置数据生成描述信息，如图5所示，具体可以参见S230包括的如下步骤：

S231：基于各所述输出图层的所述第一位置数据和所述第二位置数据生成json结构的位置数组。

换言之，将各输出图层在相应的源视频帧中的第一位置数据以及在输出视频帧中的第二位置数据，生成描述信息，该描述信息是json结构的位置数据，也即前面所提及的“字典”。位置数据用于在客户终端在渲染的时候，能够按照渲染的序列从该“字典”中依次提取相应的第一位置数据，以及第二位置数据。客户终端按照第二位置数据将所提及的元素图像跟相应的插入图层进行融合，并将融合后的元素图像按照第一位置数据渲染至相应视频帧中。

S232：基于位置数组和输出视频的视频数据生成视频数据体。

通过AE软件将混合有插入图层的输出视频帧渲染成一个视频数组，也即输出视频，例如MP4格式的输出视频。将上述步骤生成的json结构的位置数组跟视频数组生成视频数据体。例如，视频数据体内可以插入一个新的body段，用于存放json结构的位置数组。

S233：将视频数据体发送给服务器，以使得客户终端经由服务器接收到视频数据体，并在解析视频数据体后获得位置数组以及输出视频的视频数据。

在配置终端上完成配置，形成视频数据体后，可以将视频数据体发送给服务器，服务器进而可以将视频数据体发送给客户终端。客户终端可以解析视频数据体获得位置数组，即“字典”，以及输出视频的视频数组，进而可以按照本实施例描述的方法实现元素动态插入视频中。通过获取第一位置数据，以及设计输出视频帧，将每一源视频帧所对应的插入图层全部复制到第二区域，以及获取第二位置，输出视频帧可以构建出一个输出视频，也即，生成一套序列帧即可包含源视频以及插入图层，也无需为元素和源视频分别构建两套序列帧，也无需为每个需要插入的动态元素都构建一套序列帧，如此可以减少渲染压力，也可以减少设计师的工作量，能够有效地减少配置终端以及客户终端的处理压力。而且通过本实施例的方法能够在导入素材资源后支持一键生成视频数据体，方便快捷，中间过程无感知。

基于上述本实施例的描述，以下描述示例性的应用场景：

源视频可以为直播过程中赠送某个礼物所要呈现的礼物动效的视频文件。一般，礼物动效在制作完成后，每个直播间每个用户怎送该礼物所呈现的礼物动效都是一样的。本实施例可以将礼物动效结合到具体的直播场景中。也即，具体的元素图像可以是在具体的直播场景中所提取的，例如用户A给主播B送礼，那么元素图像可以是用户A和主播B的头像、昵称等等，将所提取的元素图像在渲染礼物动效的视频文件时能够插入到具体的礼物动效的视频帧中，实现该礼物动效结合了具体的直播场景。

具体是涉及素材图像，为要提取的元素图像构建相应的插入图层。插入图层是用于描述元素图像在礼物动效的视频文件中的位置、形状等。设计多帧素材图像使得插入图层能够呈现相应的变化，进而可以描述元素图像的动画效果。在设计完素材图像后，可以获取插入图层的第一位置数据，以及制作输出视频帧，获得第二位置数据等。客户终端在获取到该些数据后，能够根据相应的标识信息在当前的直播场景中提取相应的元素图像，比如用户A和主播B的头像，进而将用户A和主播B的头像按照各自对应的第二位置数据与各自相应的插入图层进行融合后，呈现相应的形状，也即做了透明控制处理。将融合后的用户A和主播B的头像按照各自对应的第一位置渲染至相应的礼物动效的源视频帧中，进而能够随着礼物动效的变化，元素图像也随之变化。也即，本实施例是利用插入图层而非具体的元素图像去设计整个效果，在具体的渲染时才提取的具体的元素图像去进行渲染，如此不针对具体的用户，在整个直播平台都可以使用，实现礼物动效能够结合具体的场景。

本申请视频支持元素插入的显示处理方法第二实施例可以以客户终端作为执行主体，是将上述本申请视频支持元素插入的显示处理方法第一实施例描述的技术方案以客户终端的角度去呈现，因此关于本实施例的内容可以参见以上第一实施例的描述，以下不再赘述。如图8所示，本实施例可以包括：

M100：接收源视频的视频数据和每一帧素材图像的插入图层在素材图像中的第一位置数据。

M200：获取与插入图层相应的元素图像，并在直播画面渲染源视频时将元素图像按照相应的第一位置数据渲染至相应的源视频帧中。

关于M100和M200的描述可以参见上述第一实施例中的相关描述，在此不再赘述。

进一步地，对于具体获取与插入图层相应的元素图像，可以参见M200可以包括如下步骤：

M210：获取所述插入图层的用于标识对应的元素图像的标识信息。

M220：获取与标识信息相对应的元素图像。

对于具体获取与所述标识信息相对应的元素图像，可以参见S220包括的如下步骤：

M221：若所述标识信息所标识的元素为文字，则生成相应的文字。

M222：将相应的文字转成相应的元素图像。

关于M210和M220的描述可以参见上述第一实施例中的相关描述，在此不再赘述。

另外，第二实施例中未提及的内容和细节均可以参见第一实施例中的相关描述，换言之，第一实施例的技术方案通过客户终端的视角转换可以作为第二实施例的内容，在此不再赘述。

本申请电子终端第一实施例描述的是上述实施例提及到的配置终端。如图9所示，本实施例描述的电子终端100包括处理器110和存储器120。存储器120耦接处理器110。

存储器120用于存储计算机程序，可以是RAM，也是可以ROM，或者其他类型的存储设备。具体地，存储器可以包括一个或多个计算机可读存储介质，该计算机可读存储介质可以是非暂态的。存储器还可包括高速随机存取存储器，以及非易失性存储器，比如一个或多个磁盘存储设备、闪存存储设备。在一些实施例中，存储器中的非暂态的计算机可读存储介质用于存储至少一条程序代码。

处理器110用于控制电子终端100的操作，处理器110还可以称为CPU(CentralProcessing Unit，中央处理单元)。处理器110可能是一种集成电路芯片，具有信号的处理能力。处理器110还可以是通用处理器、数字信号处理器(DSP)、专用集成电路(ASIC)、现成可编程门阵列(FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。通用处理器可以是微处理器或者该处理器110也可以是任何常规的处理器等。

处理器110用于执行存储器120中存储的计算机程序以实现本申请视频支持元素插入的显示处理方法第一实施例和第二实施例描述的显示处理方法。

在一些实施方式中，电子终端100还可以包括：外围设备接口130和至少一个外围设备。处理器110、存储器120和外围设备接口130之间可以通过总线或信号线相连。各个外围设备可以通过总线、信号线或电路板与外围设备接口130相连。具体地，外围设备包括：射频电路140、显示屏150、音频电路160和电源170中的至少一种。

外围设备接口130可被用于将I/O(Input/output，输入/输出)相关的至少一个外围设备连接到处理器110和存储器120。在一些实施例中，处理器110、存储器120和外围设备接口130被集成在同一芯片或电路板上；在一些其他实施方式中，处理器110、存储器120和外围设备接口130中的任意一个或两个可以在单独的芯片或电路板上实现，本实施例对此不加以限定。

射频电路140用于接收和发射RF(Radio Frequency，射频)信号，也称电磁信号。射频电路140通过电磁信号与通信网络以及其他通信设备进行通信，也可以称为通信电路。射频电路140将电信号转换为电磁信号进行发送，或者，将接收到的电磁信号转换为电信号。可选地，射频电路140包括：天线系统、RF收发器、一个或多个放大器、调谐器、振荡器、数字信号处理器、编解码芯片组、用户身份模块卡等等。射频电路140可以通过至少一种无线通信协议来与其它终端进行通信。该无线通信协议包括但不限于：万维网、城域网、内联网、各代移动通信网络(2G、3G、4G及5G)、无线局域网和/或WiFi(Wireless Fidelity，无线保真)网络。在一些实施例中，射频电路140还可以包括NFC(Near Field Communication，近距离无线通信)有关的电路，本申请对此不加以限定。

显示屏150用于显示UI(User Interface，用户界面)。该UI可以包括图形、文本、图标、视频及其它们的任意组合。当显示屏150是触摸显示屏时，显示屏150还具有采集在显示屏150的表面或表面上方的触摸信号的能力。该触摸信号可以作为控制信号输入至处理器110进行处理。此时，显示屏150还可以用于提供虚拟按钮和/或虚拟键盘，也称软按钮和/或软键盘。在一些实施方式中，显示屏150可以为一个，设置在电子终端100的前面板；在另一些实施方式中，显示屏150可以为至少两个，分别设置在电子终端100的不同表面或呈折叠设计；在另一些实施方式中，显示屏150可以是柔性显示屏，设置在电子终端100的弯曲表面上或折叠面上。甚至，显示屏150还可以设置成非矩形的不规则图形，也即异形屏。显示屏150可以采用LCD(Liquid Crystal Display，液晶显示屏)、OLED(Organic Light-EmittingDiode,有机发光二极管)等材质制备。

音频电路160可以包括麦克风和扬声器。麦克风用于采集用户及环境的声波，并将声波转换为电信号输入至处理器110进行处理，或者输入至射频电路140以实现语音通信。出于立体声采集或降噪的目的，麦克风可以为多个，分别设置在电子终端100的不同部位。麦克风还可以是阵列麦克风或全向采集型麦克风。扬声器则用于将来自处理器110或射频电路140的电信号转换为声波。扬声器可以是传统的薄膜扬声器，也可以是压电陶瓷扬声器。当扬声器是压电陶瓷扬声器时，不仅可以将电信号转换为人类可听见的声波，也可以将电信号转换为人类听不见的声波以进行测距等用途。在一些实施例中，音频电路160还可以包括耳机插孔。

电源170用于为电子终端100中的各个组件进行供电。电源170可以是交流电、直流电、一次性电池或可充电电池。当电源170包括可充电电池时，该可充电电池可以是有线充电电池或无线充电电池。有线充电电池是通过有线线路充电的电池，无线充电电池是通过无线线圈充电的电池。该可充电电池还可以用于支持快充技术。

关于本申请电子终端第一实施例中各功能模块或者部件功能和执行过程的详细阐述，可以参照上述本申请视频支持元素插入的显示处理方法第一实施例中的阐述，在此不再赘述。

本申请电子终端第二实施例描述的是上述实施例提及到的客户终端。如图10所示，第二实施例描述的电子终端200包括处理器210和存储器220。存储器220耦接处理器210。

存储器220用于存储计算机程序，可以是RAM，也是可以ROM，或者其他类型的存储设备。具体地，存储器可以包括一个或多个计算机可读存储介质，该计算机可读存储介质可以是非暂态的。存储器还可包括高速随机存取存储器，以及非易失性存储器，比如一个或多个磁盘存储设备、闪存存储设备。在一些实施例中，存储器中的非暂态的计算机可读存储介质用于存储至少一条程序代码。

处理器210用于控制电子终端200的操作，处理器210还可以称为CPU(CentralProcessing Unit，中央处理单元)。处理器210可能是一种集成电路芯片，具有信号的处理能力。处理器210还可以是通用处理器、数字信号处理器(DSP)、专用集成电路(ASIC)、现成可编程门阵列(FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。通用处理器可以是微处理器或者该处理器210也可以是任何常规的处理器等。

处理器210用于执行存储器220中存储的计算机程序以实现本申请视频支持元素插入的显示处理方法第一实施例和第二实施例描述的显示处理方法。

在一些实施方式中，电子终端200还可以包括：外围设备接口230和至少一个外围设备。处理器210、存储器220和外围设备接口230之间可以通过总线或信号线相连。各个外围设备可以通过总线、信号线或电路板与外围设备接口230相连。具体地，外围设备包括：射频电路240、显示屏250、音频电路260和电源270中的至少一种。

外围设备接口230可被用于将I/O(Input/output，输入/输出)相关的至少一个外围设备连接到处理器210和存储器220。在一些实施例中，处理器210、存储器220和外围设备接口230被集成在同一芯片或电路板上；在一些其他实施方式中，处理器210、存储器220和外围设备接口230中的任意一个或两个可以在单独的芯片或电路板上实现，本实施例对此不加以限定。

射频电路240用于接收和发射RF(Radio Frequency，射频)信号，也称电磁信号。射频电路240通过电磁信号与通信网络以及其他通信设备进行通信，也可以称为通信电路。射频电路240将电信号转换为电磁信号进行发送，或者，将接收到的电磁信号转换为电信号。可选地，射频电路240包括：天线系统、RF收发器、一个或多个放大器、调谐器、振荡器、数字信号处理器、编解码芯片组、用户身份模块卡等等。射频电路240可以通过至少一种无线通信协议来与其它终端进行通信。该无线通信协议包括但不限于：万维网、城域网、内联网、各代移动通信网络(2G、3G、4G及5G)、无线局域网和/或WiFi(Wireless Fidelity，无线保真)网络。在一些实施例中，射频电路240还可以包括NFC(Near Field Communication，近距离无线通信)有关的电路，本申请对此不加以限定。

显示屏250用于显示UI(User Interface，用户界面)。该UI可以包括图形、文本、图标、视频及其它们的任意组合。当显示屏250是触摸显示屏时，显示屏250还具有采集在显示屏250的表面或表面上方的触摸信号的能力。该触摸信号可以作为控制信号输入至处理器210进行处理。此时，显示屏250还可以用于提供虚拟按钮和/或虚拟键盘，也称软按钮和/或软键盘。在一些实施方式中，显示屏250可以为一个，设置在电子终端200的前面板；在另一些实施方式中，显示屏250可以为至少两个，分别设置在电子终端200的不同表面或呈折叠设计；在另一些实施方式中，显示屏250可以是柔性显示屏，设置在电子终端200的弯曲表面上或折叠面上。甚至，显示屏250还可以设置成非矩形的不规则图形，也即异形屏。显示屏250可以采用LCD(Liquid Crystal Display，液晶显示屏)、OLED(Organic Light-EmittingDiode,有机发光二极管)等材质制备。

音频电路260可以包括麦克风和扬声器。麦克风用于采集用户及环境的声波，并将声波转换为电信号输入至处理器210进行处理，或者输入至射频电路240以实现语音通信。出于立体声采集或降噪的目的，麦克风可以为多个，分别设置在电子终端200的不同部位。麦克风还可以是阵列麦克风或全向采集型麦克风。扬声器则用于将来自处理器210或射频电路240的电信号转换为声波。扬声器可以是传统的薄膜扬声器，也可以是压电陶瓷扬声器。当扬声器是压电陶瓷扬声器时，不仅可以将电信号转换为人类可听见的声波，也可以将电信号转换为人类听不见的声波以进行测距等用途。在一些实施例中，音频电路260还可以包括耳机插孔。

电源270用于为电子终端200中的各个组件进行供电。电源270可以是交流电、直流电、一次性电池或可充电电池。当电源270包括可充电电池时，该可充电电池可以是有线充电电池或无线充电电池。有线充电电池是通过有线线路充电的电池，无线充电电池是通过无线线圈充电的电池。该可充电电池还可以用于支持快充技术。

关于本申请电子终端第二实施例中各功能模块或者部件功能和执行过程的详细阐述，可以参照上述本申请视频支持元素插入的显示处理方法第一实施例和第二实施例中的阐述，在此不再赘述。

在本申请所提供的几个实施例中，应该理解到，所揭露的电子终端和显示处理方法，可以通过其它的方式实现。例如，以上所描述的电子设备各实施例仅仅是示意性的，例如，模块或单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施方式方案的目的。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

参阅图11，上述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在计算机可读的存储介质300中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令/计算机程序用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)或处理器(processor)执行本发明各个实施方式方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random AccessMemory)、磁碟或者光盘等各种介质以及具有上述存储介质的电脑、手机、笔记本电脑、平板电脑、相机等电子设备。

关于计算机可读的存储介质中的程序数据的执行过程的阐述可以参照上述本申请视频支持元素插入的显示处理方法第一实施例和第二实施例中的阐述，在此不再赘述。

以上所述仅为本申请的实施例，并非因此限制本申请的专利范围，凡是利用本申请说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本申请的专利保护范围内。

Claims (16)

1.一种视频支持元素插入的显示处理方法，其特征在于，包括：

获取每一帧素材图像的插入图层在所述素材图像中的第一位置数据，以作为所述插入图层在源视频与所述素材图像对应的源视频帧中的位置数据；

获取其上间隔显示所述源视频帧和与所述源视频帧对应的所述插入图层的输出视频帧，以及所述插入图层在所述输出视频帧中的第二位置数据；

将全部的所述输出视频帧按序列转成输出视频，以获得所述输出视频的视频数据，其中，所述源视频帧的数量与所述输出视频帧的数量相同且一一对应；

将所述输出视频的视频数据、所述第一位置数据和所述第二位置数据发送给服务器，经由所述服务器发送给客户终端，以使得客户终端获取与所述插入图层相应的元素图像，将所述元素图像按照相应的所述第二位置数据与相应的所述插入图层进行融合，使得融合后的所述元素图像具有相应的所述插入图层所描述的形状，并在直播画面渲染所述源视频时将融合后的所述元素图像按照相应的所述第一位置数据渲染至相应的所述源视频帧中。

2.根据权利要求1所述的显示处理方法，其特征在于：

所述获取每一帧素材图像的插入图层在所述素材图像中的第一位置数据，包括：

计算映射所述插入图层在第一帧所述素材图像和各后续帧所述素材图像之间产生的相对变化的第一变换矩阵；

获取所述插入图层在第一帧所述素材图像中的第一位置数据，并将所述插入图层在第一帧所述素材图像中的第一位置数据分别经各后续帧所述素材图像对应的第一变换矩阵变换后得到所述插入图层在各后续帧所述素材图像中的第一位置数据。

3.根据权利要求2所述的显示处理方法，其特征在于：

所述计算映射所述插入图层在第一帧所述素材图像和各后续帧所述素材图像之间产生的相对变化的第一变换矩阵，包括：

获取各后续帧所述素材图像的所述插入图层相对于第一帧所述素材图像的所述插入图层在平移维度、旋转维度以及缩放维度上的变化数据；

利用各后续帧所述素材图像各自对应的所述变化数据计算出各后续帧所述素材图像各自对应的所述第一变换矩阵。

4.根据权利要求2所述的显示处理方法，其特征在于：

获取所述插入图层在第一帧所述素材图像中的第一位置数据，并将所述插入图层在第一帧所述素材图像中的第一位置数据分别经各后续帧所述素材图像对应的第一变换矩阵变换后得到所述插入图层在各后续帧所述素材图像中的第一位置数据，包括：

确定所述插入图层在第一帧所述素材图像中的各顶点坐标对应第一坐标数据，以获得所述插入图层在第一帧所述素材图像中的第一位置数据；

将所述第一坐标数据分别乘以各后续帧所述素材图像对应的第一变换矩阵，得到所述插入图层在各后续帧所述素材图像中的变换坐标数据；

利用所述插入图层的所述变换坐标数据确定所述插入图层在各后续帧所述素材图像中的各顶点坐标对应的第二坐标数据，以获得所述插入图层在各后续帧所述素材图像中的第一位置数据。

5.根据权利要求1所述的显示处理方法，其特征在于：

所述获取其上间隔显示所述源视频帧和与所述源视频帧对应的所述插入图层的输出视频帧，以及所述插入图层在所述输出视频帧中的第二位置数据，包括：

生成输出画布；

将所述源视频帧显示于所述输出画布的第一区域；

将所述源视频帧对应的所述素材图像中的各所述插入图层依次复制至所述输出画布的与所述第一区域间隔设置的第二区域，以形成所述输出视频帧，且记录各所述插入图层在所述输出画布中的所述第二位置数据。

6.根据权利要求5所述的显示处理方法，其特征在于：

所述将所述源视频帧对应的所述素材图像中的各所述插入图层依次复制至所述输出画布的与所述第一区域间隔设置的第二区域，以形成所述输出视频帧，且记录各所述插入图层在所述输出画布中的所述第二位置数据，包括：

确定所述插入图层的各顶点在所述第二区域中的第三坐标数据以及在相应的所述素材图像中的第四坐标数据；

利用所述第三坐标数据和所述第四坐标数据计算映射所述插入图层在所述第二区域和相应的所述素材图像之间的相对变化的第二变换矩阵；

将所述插入图层在相应的所述素材图像内的各像素点分别经所述第二变换矩阵进行坐标变换，以将所述插入图层的各像素点复制至所述第二区域。

7.根据权利要求5所述的显示处理方法，其特征在于：

所述将所述源视频帧对应的所述素材图像中的各所述插入图层依次复制至所述输出画布的与所述第一区域间隔设置的第二区域，包括：

沿所述第二区域的横坐标方向依次排列各所述插入图层；

若当前排列的所述插入图层的图层范围超出所述第二区域在所述横坐标方向上的横向范围，则将当前排列的所述插入图层重新排列于所述第二区域的另一行。

8.根据权利要求1所述的显示处理方法，其特征在于：

所述将所述输出视频的视频数据、所述第一位置数据和所述第二位置数据发送给所述服务器，包括：

基于各所述插入图层分别在各所述素材图像中的所述第一位置数据以及在各所述输出视频帧中的所述第二位置数据生成json结构的位置数组；

基于所述位置数组和所述输出视频的视频数据生成视频数据体；

将所述视频数据体发送给所述服务器，以使得所述客户终端经由所述服务器接收到所述视频数据体，并在解析所述视频数据体后获得所述位置数组以及所述输出视频的视频数据。

9.根据权利要求1所述的显示处理方法，其特征在于：

所述获取其上间隔显示所述源视频帧和与所述源视频帧对应的所述插入图层的输出视频帧，包括：

获取在其第一区域显示所述源视频帧、第二区域显示相应的所述插入图层以及第三区域显示所述源视频帧的控制图层的所述输出视频帧；其中，位于所述第三区域的所述控制图层用于与所述第一区域的所述源视频帧进行融合，使得融合后的源视频帧在渲染时呈现所述控制图层所描述的形状。

10.根据权利要求1所述的显示处理方法，其特征在于：

在所述获取每一帧素材图像的插入图层在所述素材图像中的第一位置数据之前，包括：

获取描述所需要插入的元素图像的素材资源；

解析所述素材资源，提取图像合成资源和文字合成资源，以分别获得所述图像合成资源和所述文字合成资源各自的所有帧所述素材图像。

11.一种视频支持元素插入的显示处理方法，其特征在于，包括：

获取输出视频的视频数据，所述输出视频是由全部的输出视频帧按序列转成的，所述输出视频帧上间隔显示有源视频帧和与所述源视频帧对应的插入图层；

获取每一帧素材图像的所述插入图层在所述素材图像中的第一位置数据以及所述插入图层在所述输出视频帧的第二位置数据；

获取与所述插入图层相应的元素图像，将所述元素图像按照相应的所述第二位置数据与相应的所述插入图层进行融合，使得融合后的所述元素图像具有相应的所述插入图层所描述的形状，并在直播画面渲染所述源视频时将融合后的所述元素图像按照相应的所述第一位置数据渲染至相应的所述源视频帧中。

12.根据权利要求11所述的显示处理方法，其特征在于：

所述获取与所述插入图层相应的元素图像，包括：

获取所述插入图层的用于标识对应的所述元素图像的标识信息；

获取与所述标识信息相对应的元素图像。

13.根据权利要求12所述的显示处理方法，其特征在于：

所述获取与所述标识信息相对应的元素图像，包括：

若所述标识信息所标识的元素为文字，则生成相应的文字；

将相应的所述文字转成相应的所述元素图像。

14.一种电子终端，其特征在于，包括：处理器、存储器、通信电路以及显示器；所述通信电路、所述存储器以及所述显示器分别耦接所述处理器，所述通信电路用于与其他终端进行通信连接，所述存储器存储有计算机程序，所述计算机程序能够被所述处理器执行以实现如权利要求1-10任一项所述的显示处理方法。

15.一种电子终端，其特征在于，包括：处理器、存储器、通信电路以及显示器；所述通信电路、所述存储器以及所述显示器分别耦接所述处理器，所述通信电路用于与其他终端进行通信连接，所述存储器存储有计算机程序，所述计算机程序能够被所述处理器执行以实现如权利要求11-13任一项所述的显示处理方法。

16.一种计算机可读的存储介质，其特征在于，存储有计算机程序，所述计算机程序能够被处理器执行以实现如权利要求1-13任一项所述的显示处理方法。