CN110996151A - 视频图层叠加方法、装置、电子设备和存储介质 - Google Patents

视频图层叠加方法、装置、电子设备和存储介质 Download PDF

Info

Publication number
CN110996151A
CN110996151A CN201911162377.6A CN201911162377A CN110996151A CN 110996151 A CN110996151 A CN 110996151A CN 201911162377 A CN201911162377 A CN 201911162377A CN 110996151 A CN110996151 A CN 110996151A
Authority
CN
China
Prior art keywords
html
video
live broadcast
preview interface
html element
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201911162377.6A
Other languages
English (en)
Inventor
杨剑飞
廖卓杰
麦志英
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Guangzhou Huya Technology Co Ltd
Original Assignee
Guangzhou Huya Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Guangzhou Huya Technology Co Ltd filed Critical Guangzhou Huya Technology Co Ltd
Priority to CN201911162377.6A priority Critical patent/CN110996151A/zh
Publication of CN110996151A publication Critical patent/CN110996151A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
    • H04N21/431—Generation of visual interfaces for content selection or interaction; Content or additional data rendering
    • H04N21/4312—Generation of visual interfaces for content selection or interaction; Content or additional data rendering involving specific graphical features, e.g. screen layout, special fonts or colors, blinking icons, highlights or animations
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
    • H04N21/435—Processing of additional data, e.g. decrypting of additional data, reconstructing software from modules extracted from the transport stream
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
    • H04N21/44—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream, rendering scenes according to MPEG-4 scene graphs
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/47—End-user applications
    • H04N21/472—End-user interface for requesting content, additional data or services; End-user interface for interacting with content, e.g. for content reservation or setting reminders, for requesting event notification, for manipulating displayed content
    • H04N21/47205—End-user interface for requesting content, additional data or services; End-user interface for interacting with content, e.g. for content reservation or setting reminders, for requesting event notification, for manipulating displayed content for manipulating displayed content, e.g. interacting with MPEG-4 objects, editing locally
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/47—End-user applications
    • H04N21/478—Supplemental services, e.g. displaying phone caller identification, shopping application
    • H04N21/4782—Web browsing, e.g. WebTV
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/80—Generation or processing of content or additional data by content creator independently of the distribution process; Content per se
    • H04N21/81—Monomedia components thereof
    • H04N21/8146—Monomedia components thereof involving graphical data, e.g. 3D object, 2D graphics
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/80—Generation or processing of content or additional data by content creator independently of the distribution process; Content per se
    • H04N21/81—Monomedia components thereof
    • H04N21/8166—Monomedia components thereof involving executable data, e.g. software
    • H04N21/8173—End-user applications, e.g. Web browser, game

Abstract

本发明的实施例提供了一种视频图层叠加方法、装置、电子设备和存储介质，涉及视频处理技术领域。本发明实施例提供的视频图层叠加方法、装置、电子设备和存储介质，在加载HTML页面后，只需确定HTML页面中所要叠加的HTML元素，然后将HTML元素共享至直播端的视频预览界面，即可将HTML元素与直播端的视频预览界面进行叠加，灵活度较高且无需插件，操作简便。

Description

视频图层叠加方法、装置、电子设备和存储介质
技术领域
本发明涉及视频处理技术领域，具体而言，涉及一种视频图层叠加方法、装置、电子设备和存储介质。
背景技术
随着计算机技术的发展，网络视频直播越来越受到用户的青睐，越来越多的人作为主播进入直播行业。目前，在主播进行直播的过程中，经常需要往视频流里面叠加一些动态的内容(比如图片、视频等)来吸引观众，而现今往视频流里面叠加内容通常是采用桌面捕捉的方式，将所需叠加的内容拖入捕捉区域，然后将内容呈现在直播画面中，但是这种方式灵活性较低，且需要多种插件，例如OBS(Open Broadcaster Software)插件等，导致其操作复杂度较高。
发明内容
基于上述研究，本发明提供了一种视频图层叠加方法、装置、电子设备和存储介质，以改善上述问题。
本发明的实施例可以这样实现：
第一方面，本发明实施例提供一种视频图层叠加方法，应用于视频直播的直播端，所述方法包括：
加载HTML页面，确定所述HTML页面中所要叠加的HTML元素，并将所述HTML元素共享至所述直播端的视频预览界面；
将所述HTML元素与所述直播端的视频预览界面进行叠加。
在可选的实施方式中，所述确定所述HTML页面中所要叠加的HTML元素的步骤包括：
响应用户的操作，获取所要叠加的HTML元素在所述HTML页面中的位置信息；
根据所述位置信息，在所述HTML页面中确定所述所要叠加的HTML元素。
在可选的实施方式中，所述将所述HTML元素共享至所述直播端的视频预览界面的步骤包括：
获取所述HTML元素的属性信息；其中，所述属性信息包括所述HTML元素的图像纹理信息、大小信息以及位置信息；
将所述HTML元素的属性信息共享至所述直播端的视频预览界面。
在可选的实施方式中，所述直播端包括至少一个直播软件，各所述直播软件中集成有浏览器内核，所述加载HTML页面的步骤包括：
在所述直播软件内，调用所述浏览器内核，加载所述HTML页面。
在可选的实施方式中，所述将所述HTML元素共享至所述直播端的视频预览界面后，所述方法还包括：
响应用户对所述HTML元素的编辑操作，根据所述编辑操作，对所述HTML元素进行编辑；所述编辑操作包括放大操作、缩小操作、移动操作以及颜色编辑操作中的至少一种；
所述将所述HTML元素与所述视频预览界面进行叠加的步骤，包括：
将编辑后的HTML元素与所述视频预览界面进行叠加。
在可选的实施方式中，所述将所述HTML元素与所述视频预览界面进行叠加的步骤包括：
基于图形编程套件将所述HTML元素与所述视频预览界面进行叠加。
第二方面，本发明实施例提供一种视频图层叠加装置，应用于视频直播的直播端，所述视频图层叠加装置包括加载模块以及叠加模块；
所述加载模块用于加载HTML页面，确定所述HTML页面中所要叠加的HTML元素，并将所述HTML元素共享至所述直播端的视频预览界面；
所述叠加模块用于将所述HTML元素与所述直播端的视频预览界面进行叠加。
在可选的实施方式中，所述加载模块用于响应用户的操作，获取所要叠加的HTML元素在所述HTML页面中的位置信息，并根据所述位置信息，在所述HTML页面中确定所述所要叠加的HTML元素。
第三方面，本发明实施例提供一种电子设备，包括处理器及存储有计算机指令的非易失性存储器，所述计算机指令被所述处理器执行时，所述电子设备执行前述实施方式中任意一项所述的视频图层叠加方法。
第四方面，本发明实施例提供一种存储介质，所述存储介质中存储有计算机程序，所述计算机程序被执行时实现前述实施方式中任意一项所述的视频图层叠加方法。
本发明实施例提供的视频图层叠加方法、装置、电子设备和存储介质，在加载HTML页面后，只需确定HTML页面中所要叠加的HTML元素，然后将HTML元素共享至直播端的视频预览界面，即可将HTML元素与直播端的视频预览界面进行叠加，灵活度较高且无需插件，操作简便。
附图说明
为了更清楚地说明本发明实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。
图1为本发明实施例所提供的直播端的一种方框示意图。
图2为本发明实施例所提供的视频图层叠加方法的一种流程示意图。
图3为本发明实施例所提供的直播端的直播界面的一种示意图。
图4为本发明实施例所提供的视频图层叠加方法的一种应用示意图。
图5为本发明实施例所提供的视频图层叠加方法的一子步骤流程示意图。
图6为本发明实施例所提供的视频图层叠加方法的另一子步骤流程示意图。
图7为本发明实施例所提供的视频图层叠加方法的另一种应用示意图。
图8为本发明实施例所提供的视频图层叠加方法的又一种应用示意图。
图9为本发明实施例所提供的观众端的直播界面的一种示意图。
图10为本发明实施例所提供的视频图层叠加装置的一种方框示意图。
图标：100-直播端；10-视频图层叠加装置；11-加载模块；12-叠加模块；20-存储器；30-处理器；40-输入输出单元；50-显示单元；60-通信单元；70-外设接口。
具体实施方式
为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。
因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。
在本发明的描述中，需要说明的是，若出现术语“上”、“下”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系，或者是该发明产品使用时惯常摆放的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。
需要说明的是，在不冲突的情况下，本发明的实施例中的特征可以相互结合。
目前，主播在进行直播的过程中，经常需要往视频流中叠加一些图片、视频等内容，来吸引观众，提高互动性，而现有技术中，大多采用桌面捕捉的方式实现叠加，但是这种方式灵活度较低，需通过用户将所需叠加的内容拖入至捕捉区域，才能在直播画面中进行呈现，并且，这种方式，需要多种插件，导致其操作复杂度较高，用户体验感较差。
基于上述研究，本实施例提供了一种视频图层叠加方法，以改善上述问题。
请参考图1，为本实施例提供的一种用于视频直播的直播端100的方框示意图，本实施例的视频图层叠加方法可以应用于该直播端100。所述直播端100，指的是与直播平台服务器对应的主播用户所使用的用户终端。所述直播端100可以是，但不限于，智能手机、个人电脑(personal computer，PC)、平板电脑、个人数字助理(personal digitalassistant，PDA)、移动上网设备(mobile Internet device，MID)等。
如图1所示，所述直播端100包括视频图层叠加装置10、存储器20、处理器30、输入输出单元40、显示单元50、通信单元60和外设接口70。
所述存储器20、处理器30、输入输出单元40、显示单元50、通信单元60和外设接口70各元件相互之间直接或间接地电性连接，以实现数据的传输或交互。例如，这些元件相互之间可通过一条或多条通讯总线或信号线实现电性连接。
所述视频图层叠加装置10包括至少一个可以软件或固件(firmware)的形式存储于所述存储器20中或固化在所述直播端100的操作系统(operating system，OS)中的软件功能模块。所述处理器30用于执行所述存储器20中存储的可执行模块，例如所述视频图层叠加装置10所包括的软件功能模块及计算机程序等。
其中，所述存储器20可以是，但不限于，随机存取存储器(Random Access Memory，RAM)，只读存储器(Read Only Memory，ROM)，可编程只读存储器(Programmable Read-OnlyMemory，PROM)，可擦除只读存储器(Erasable Programmable Read-Only Memory，EPROM)，电可擦除只读存储器(Electric Erasable Programmable Read-Only Memory，EEPROM)等。其中，存储器20用于存储程序或者数据。
所述处理器30可以是一种集成电路芯片，具有信号的处理能力。上述的处理器可以是通用处理器，包括中央处理器(Central Processing Unit，CPU)、网络处理器(NetworkProcessor，NP)等；还可以是数字信号处理器(DSP))、专用集成电路(ASIC)、现成可编程门阵列(FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本发明实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。
所述输入输出单元40用于提供给用户输入数据实现用户与所述直播端100的交互。所述输入输出单元40可以是，但不限于，鼠标和键盘等。
所述显示单元50在所述直播端100与用户之间提供一个交互界面(例如用户操作界面)用于显示网页信息。具体地，该显示单元50可以向用户显示页面及视频输出，这些输出的内容可包括文字、图形、视频及其任意组合。一些输出结果是对应于一些用户界面对象。在本实施例中，所述显示单元50可以是液晶显示器或触控显示器。若为触控显示器，其可为支持单点和多点触控操作的电容式触控屏或电阻式触控屏等。支持单点和多点触控操作是指触控显示器能感应到来自该触控显示器上一个或多个位置处产生的触控操作，并将该感应到的触控操作交由处理器进行计算和处理。在本实施例中，显示单元50的具体实例包括但并不限于液晶显示器或发光聚合物显示器。
所述通信单元60用于通过网络建立所述直播平台服务器与直播端100之间的通信连接，并用于通过网络收发数据。
所述外设接口70将各种输入/输出装置(例如输入输出单元40及显示单元50)耦合至所述处理器30以及所述存储器20。
所述直播端100可以安装多个客户端，例如浏览器(IE浏览器、UC浏览器、360浏览器及QQ浏览器等)、直播软件以及其它应用程序等。
可以理解，图1所示的结构仅为示意，所述直播端100还可包括比图1中所示更多或者更少的组件，或者具有与图1所示不同的配置。图1中所示的各组件可以采用硬件、软件或其组合实现。
基于上述直播端100的实现架构，请结合参阅图2，图2为本实施例所提供的视频图层叠加方法的流程示意图，由图1所示的直播端100执行，下面对图2所示的流程示意图进行详细阐述。
步骤S10：加载HTML页面，确定所述HTML页面中所要叠加的HTML元素，并将所述HTML元素共享至所述直播端的视频预览界面。
步骤S20：将所述HTML元素与所述直播端的视频预览界面进行叠加。
其中，超级文本标记语言(Hypertext Marked Language，HTML)是一种标识性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。而HTML页面是可以在常规浏览器中展示的页面，可以包含多种HTML元素，所述HTML元素可以是图片、链接、音乐、程序以及视频等内容。
本实施例所提供的视频图层叠加方法，通过在HTML页面中布局多种HTML元素，当用户需要向直播的视频流中叠加内容时，只需要加载出HTML页面，从HTML页面中确定出所要叠加的HTML元素，然后将所要叠加的HTML元素共享至直播端100的视频预览界面进行叠加，操作简便且灵活易用。
可选的，在本实施例中，在安装于所述直播端100中的直播软件内，加载所述HTML页面。
在进一步的实施方式中，所述加载HTML页面的过程包括：
在所述直播软件内，调用所述浏览器内核，加载所述HTML页面。
其中，直播端100包括至少一个直播软件，各直播软件中集成有浏览器内核。可选的，本实施例所述的浏览器内核，可以是，但不限于webkit、Chromium嵌入式框架(ChromiumEmbedded Framework，CEF)等。
本实施例通过在各直播软件中集成浏览器内核，进而可从直播软件中直接调用浏览器内核，加载出HTML页面。
作为另一种可选的实施方式，本实施例还可基于应用程序之间的通信，即直播软件与浏览器之间的通信，从直播软件中打开浏览器，加载出HTML页面，例如，直播软件向浏览器发送信息，通知浏览器加载HTML页面。
在本实例中，当用户登录直播软件进入直播间后，直播端100可以向用户展示一直播界面，如图3所示，该直播界面上可以包括多种按键，例如，关闭直播、开启直播、设置以及加载等按键。可以理解地，当用户点击直播界面上的按键时，直播端100会响应用户的操作，执行相应的功能。例如，当用户点击关闭直播的按键时，直播端100响应用户的操作，关闭直播软件，退出直播。又例如，用户点击加载按键时，直播端100响应用户的操作，调用浏览器内核，加载HTML页面。可选的，在本实例中，用户可通过鼠标或者手指触摸点击直播界面中的按键，实现人机交互。
在本实施例中，直播端100向用户展示的直播界面还可以包括一直播区域，所述直播区域用于显示用户的直播画面。
在一种示例性地实施方式中，当用户点击直播界面上的加载按键，主播端100检测到用户的加载操作时，可以响应用户的操作，在直播软件内调用浏览器内核，加载出一HTML页面，向用户进行展示，同时，直播区域展示出一视频预览界面，如图4所示。可以理解的是，在视频预览界面外，直播区域中仍然可以展示直播画面。
为了便于用户操作，可选的，在本实例中，加载出的HTML页面可根据用户的需求进行调整，包括调整HTML页面的位置、大小等。
在加载出HTML页面后，若用户需要向视频流中叠加HTML元素，则需要从HTML页面中确定出所要叠加的HTML元素。
在可选的实施方式中，如图5所示，所述确定所述HTML页面中所要叠加的HTML元素的步骤包括步骤S11至步骤S12。
步骤S11：响应用户的操作，获取所要叠加的HTML元素在所述HTML页面中的位置信息。
步骤S12：根据所述位置信息，在所述HTML页面中确定所述所要叠加的HTML元素。
由于HTML页面包含多种HTML元素，而直播用户可能只需要叠加其中的一种或多种HTML元素，因此，用户需要从加载出的HTML页面中选取所要叠加的HTML元素。可选的，用户可通过鼠标点击或触摸HTML页面中的HTML元素进行选取。而直播端100在检测到用户在HTML页面的选取操作后，则响应用户的选取操作，获取所要叠加的HTML元素在HTML页面的位置信息。
在一种示例性实现方式中，当用户在HTML页面中选取某个HTML元素时，直播端100检测用户的点击位置，根据用户的点击位置，即可获取到该HTML元素在HTML页面中的位置信息。当获取到HTML元素在HTML页面中的位置信息后，即可根据HTML元素的位置信息，在HTML页面中找到该HTML元素，确定该HTML元素为所要叠加的元素。
可选的，在本实施例中，通过JavaScript去获取所要叠加的HTML元素在HTML中页面的位置信息，并根据位置信息，在HTML页面中找到所要叠加的HTML元素。
其中，HTML页面中嵌入有JavaScript脚本，当用户在HTML页面中选取所要叠加的HTML元素时，直播端100则可通过JavaScript去获取该HTML元素在HTML页面中的位置信息，根据该HTML元素在HTML页面中的位置信息，在HTML页面中找到所要叠加的HTML元素。
在HTML页面中确定所要叠加的HTML元素后，即可将HTML元素共享至视频预览界面。
在可选的实施方式中，如图6所示，将HTML元素共享至视频预览界面的步骤包括步骤S13至步骤S14。
步骤S13：获取所述HTML元素的属性信息。
步骤S14：将所述HTML元素的属性信息共享至所述直播端的视频预览界面。
可选的，在本实施例中，由于HTML页面是在直播软件中通过浏览器加载得到的，浏览器内核与直播软件的进程共享，因此，本实施例可基于安装于直播端100中的直播软件与浏览器内核的进程共享，将HTML元素共享至视频预览界面。
作为一种可选的实施方式，在本实施例中，当浏览器内核加载HTML页面并确认HTML页面中所要叠加的HTML元素后，可通过浏览器内核与直播软件的进程间通信(例如管道)，向直播软件提供共享指针，该共享指针指向所要叠加的HTML元素，进而直播软件可通过该共享指针从直播端100的显卡中获取所要叠加的HTML元素的属性信息，然后通过DX(DirectX)将HTML元素的属性信息渲染至视频预览界面，实现将HTML元素共享至视频预览界面。
作为另一种可选的实施方式，为了保证HTML元素可成功共享至视频预览界面，在本实施例中，当浏览器内核加载HTML页面并确认HTML页面中所要叠加的HTML元素后，通过浏览器内核进程将所要叠加的HTML元素从直播端100的显卡拷贝到直播端100内存中，然后根据浏览器内核与直播软件的进程间通信，将内存共享至直播软件，进而直播软件可从内存中获取HTML元素的属性信息，并通过DX(DirectX)将HTML元素的属性信息渲染至视频预览界面，实现将HTML元素共享至视频预览界面。
可选的，在本实施例中，所述属性信息包括HTML元素的图像纹理信息、HTML元素的大小信息、位置信息等。通过将HTML元素的属性信息共享至视频预览界面，从而使得视频预览界面中的HTML元素与HTML页面中的HTML元素的视觉特征一致。
在可选的实施方式中，为了提高用户的体验性，在将HTML元素共享至所述直播端100的视频预览界面后，所述方法还包括以下过程：
响应用户对所述HTML元素的编辑操作，根据所述编辑操作，对所述HTML元素进行调整。
其中，所述编辑操作可以是，但不限于，放大操作、缩小操作、移动操作以及颜色编辑操作等中的一种。
在本实施例中，将HTML元素共享至预览界面后，如图7所示，若用户需要对HTML元素进行调整，则在视频预览界面上点击该HTML元素，对HTML元素进行编辑。
当直播端100检测到用户在视频预览界面对HTML元素的编辑操作后，响应用户对HTML元素的编辑操作，根据编辑操作，对HTML元素进行调整。例如，用户需要对HTML元素进行放大，可以在视频预览界面选中该HTML元素，对HTML元素进行放大操作，直播端100响应用户的操作对HTML元素进行放大。
作为一种可选的实施方式，如图8所示，在将HTML元素共享至视频预览界面后，还可以在视频预览界面显示一HTML元素的编辑框，所述编辑框可以设置于HTML元素的周侧，也可以设置于视频预览界面的任意位置。通过对编辑框进行调整，实现对HTML元素的调整。例如，当HTML元素共享至视频预览界面后，主播端100会在视频预览界面中显示一编辑框，用户通过调整该编辑框，对HTML元素进行调整。
例如，当用户对HTML元素进行放大操作时，选中该编辑框，对该编辑框进行放大，直播端100检测到编辑框的放大操作后，则对HTML元素进行放大。又例如，当用户对HTML元素进行移动操作时，选中该编辑框，然后对该编辑框进行拖动，直播端100检测到编辑框的拖动操作时，则将HTML元素进行移动，其中，HTML元素的移动方向与编辑框的移动方向一致，当用户停止拖动编辑框，HTML元素停止移动。
作为一种可选的实施方式，在本实例中，用户还可先移动编辑框，直播端100根据编辑框在视频预览界面的移动距离，计算出HTML元素在视频预览界面所需移动的距离，然后根据计算得到距离，对HTML元素进行移动。
在对HTML元素进行调整后，即可将HTML元素与视频预览界面进行叠加。可以理解地，若用户未对HTML元素进行调整，则当HTML元素共享至视频预览界面后，直接将HTML元素与视频预览界面进行叠加。
在可选的实施方式中，本实施基于图形编程套件将所述HTML元素与所述视频预览界面进行叠加。
其中，本实施例所述的图形编程套件可以是，但不限于，开放图形库(OpenGraphics Library，OpenGL)套件、DirectX(Direct eXtension)套件等。
在将HTML元素和视频预览界面进行叠加后，即可将叠加后的视频预览界面进行推流。
作为一种可选的实施方式，本实施例所提供的直播端100还可以包括一采集器，所述采集器用于获取用户的直播视频画面。在将HTML元素和视频预览界面进行叠加后，直播端100将叠加后的视频预览界面和获取到的直播视频画面进行编码，得到编码后的数据，然后通过直播协议，将编码后的数据传输到直播平台服务器，实现视频预览界面的推流。
在本实施例中，将叠加后的视频预览界面和获取到的直播视频画面进行编码的方式有多种，例如，H.264、H.265以及HEVC(High Efficiency Video Coding)等方式。所述直播协议可以是实时信息传输协议(Real Time Message Protocol，RTMP)、基于HTT的流媒体网络传输协议(HTTP Live Streaming，HLS)以及HTTP-FLV(RTMP封装在HTTP协议)等传输协议。
在一种示例性的实施方式中，直播平台服务器收到编码后的数据后，把编码后的数据转推到内容分发网络(Content Delivery Network，CDN)厂商，进而观众端可从CDN厂商获取编码后的数据，进行视频播放。观众端获取到编码后的数据，对编码后的数据进行解码，即可查看到叠加后的视频预览界面，图9为观众端所看到的视频界面。在本实施例中，所述观众端，指的是与直播平台服务器对应的观众用户所使用的用户终端。
基于上述方案，在具体的应用中，用户只需通过直播端100登录直播软件后，点击直播界面上的加载按钮，直播端100则会加载一HTML页面，同时直播界面会出现视频预览界面，当用户点击所要叠加的HTML元素后，点击的所要叠加的HTML元素即可共享到视频预览界面，若用户需要对视频预览界面中的HTML元素进行编辑，则直接点击HTML元素进行操作，在用户完成编辑后，即可将HTML元素与视频预览界面进行叠加，观众端即可查看到叠加的HTML元素。
本实施例所提供的视频图层叠加方法，在直播端100加载HTML页面后，通过指定HTML页面中的HTML元素，即可将HTML元素共享至直播端100的视频预览界面进行叠加，简单易操作，且灵活性较高，改善了用户体验。
在此基础上，请结合参阅图10，本实施例还提供一种视频图层叠加装置10，应用于视频直播的直播端100，所述视频图层叠加装置10包括加载模块11以及叠加模块12。
所述加载模块11用于加载HTML页面，确定所述HTML页面中所要叠加的HTML元素，并将所述HTML元素共享至所述直播端的视频预览界面。
所述叠加模块12用于将所述HTML元素与所述直播端的视频预览界面进行叠加。
在可选的实施方式中，所述加载模块11用于响应用户的操作获取所要叠加的HTML元素在所述HTML页面中的位置信息，并根据所述位置信息，在所述HTML页面中确定所述所要叠加的HTML元素。
在可选的实施方式中，加载模块11可以通过以下方式将所述HTML元素共享至所述直播端的视频预览界面：获取所述HTML元素的属性信息，其中，所述属性信息包括所述HTML元素的图像纹理信息、大小信息以及位置信息。将所述HTML元素的属性信息共享至所述直播端的视频预览界面。
在可选的实施方式中，所述直播端包括至少一个直播软件，各所述直播软件中集成有浏览器内核，加载模块11可以通过以下方式加载HTML页面：在所述直播软件内，调用所述浏览器内核，加载所述HTML页面。
在可选的实施方式中，叠加模块12可以在加载模块11将所述HTML元素共享至所述直播端的视频预览界面后，响应用户对所述HTML元素的编辑操作，根据所述编辑操作，对所述HTML元素进行编辑。所述编辑操作包括放大操作、缩小操作、移动操作以及颜色编辑操作中的至少一种。叠加模块12进而将编辑后的HTML元素与所述视频预览界面进行叠加。
在可选的实施方式中，叠加模块12可以基于图形编程套件将所述HTML元素与所述视频预览界面进行叠加。
所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的视频图层叠加装置10的具体工作过程，可以参考前述方法中的对应过程，在此不再过多赘述。
在上述基础上，本实施例还提供一种电子设备，包括处理器及存储有计算机指令的非易失性存储器，所述计算机指令被所述处理器执行时，所述电子设备执行前述实施方式中任意一项所述的视频图层叠加方法。
在上述基础上，本实施例还提供一种存储介质，所述存储介质中存储有计算机程序，所述计算机程序被执行时实现前述实施方式中任意一项所述的视频图层叠加方法。
所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的电子设备和存储介质的具体工作过程，可以参考前述方法中的对应过程，在此不再过多赘述。
综上所述，本发明实施例提供了一种视频图层叠加方法、装置、电子设备和存储介质，在加载HTML页面后，只需确定HTML页面中所要叠加的HTML元素，然后将HTML元素共享至直播端的视频预览界面，即可将HTML元素与直播端的视频预览界面进行叠加，灵活度较高且无需插件，操作简便。
以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以所述权利要求的保护范围为准。

Claims (10)

1.一种视频图层叠加方法，其特征在于，应用于视频直播的直播端，所述方法包括：
加载HTML页面，确定所述HTML页面中所要叠加的HTML元素，并将所述HTML元素共享至所述直播端的视频预览界面；
将所述HTML元素与所述直播端的视频预览界面进行叠加。
2.根据权利要求1所述的视频图层叠加方法，其特征在于，所述确定所述HTML页面中所要叠加的HTML元素的步骤包括：
响应用户的操作，获取所要叠加的HTML元素在所述HTML页面中的位置信息；
根据所述位置信息，在所述HTML页面中确定所述所要叠加的HTML元素。
3.根据权利要求2所述的视频图层叠加方法，其特征在于，所述将所述HTML元素共享至所述直播端的视频预览界面的步骤包括：
获取所述HTML元素的属性信息；其中，所述属性信息包括所述HTML元素的图像纹理信息、大小信息以及位置信息；
将所述HTML元素的属性信息共享至所述直播端的视频预览界面。
4.根据权利要求1所述的视频图层叠加方法，其特征在于，所述直播端包括至少一个直播软件，各所述直播软件中集成有浏览器内核，所述加载HTML页面的步骤包括：
在所述直播软件内，调用所述浏览器内核，加载所述HTML页面。
5.根据权利要求1所述的视频图层叠加方法，其特征在于，所述将所述HTML元素共享至所述直播端的视频预览界面后，所述方法还包括：
响应用户对所述HTML元素的编辑操作，根据所述编辑操作，对所述HTML元素进行编辑；所述编辑操作包括放大操作、缩小操作、移动操作以及颜色编辑操作中的至少一种；
所述将所述HTML元素与所述视频预览界面进行叠加的步骤，包括：
将编辑后的HTML元素与所述视频预览界面进行叠加。
6.根据权利要求1所述的视频图层叠加方法，所述将所述HTML元素与所述视频预览界面进行叠加的步骤包括：
基于图形编程套件将所述HTML元素与所述视频预览界面进行叠加。
7.一种视频图层叠加装置，其特征在于，应用于视频直播的直播端，所述视频图层叠加装置包括加载模块以及叠加模块；
所述加载模块用于加载HTML页面，确定所述HTML页面中所要叠加的HTML元素，并将所述HTML元素共享至所述直播端的视频预览界面；
所述叠加模块用于将所述HTML元素与所述直播端的视频预览界面进行叠加。
8.根据权利要求7所述的视频图层叠加装置，其特征在于，所述加载模块用于响应用户的操作，获取所要叠加的HTML元素在所述HTML页面中的位置信息，并根据所述位置信息，在所述HTML页面中确定所述所要叠加的HTML元素。
9.一种电子设备，其特征在于，包括处理器及存储有计算机指令的非易失性存储器，所述计算机指令被所述处理器执行时，所述电子设备执行权利要求1-6中任意一项所述的视频图层叠加方法。
10.一种存储介质，其特征在于，所述存储介质中存储有计算机程序，所述计算机程序被执行时实现权利要求1-6中任意一项所述的视频图层叠加方法。
CN201911162377.6A 2019-11-22 2019-11-22 视频图层叠加方法、装置、电子设备和存储介质 Pending CN110996151A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201911162377.6A CN110996151A (zh) 2019-11-22 2019-11-22 视频图层叠加方法、装置、电子设备和存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201911162377.6A CN110996151A (zh) 2019-11-22 2019-11-22 视频图层叠加方法、装置、电子设备和存储介质

Publications (1)

Publication Number Publication Date
CN110996151A true CN110996151A (zh) 2020-04-10

Family

ID=70086281

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201911162377.6A Pending CN110996151A (zh) 2019-11-22 2019-11-22 视频图层叠加方法、装置、电子设备和存储介质

Country Status (1)

Country Link
CN (1) CN110996151A (zh)

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113315982A (zh) * 2021-05-07 2021-08-27 广州虎牙科技有限公司 一种直播方法、计算机存储介质及设备
CN113727164A (zh) * 2020-05-26 2021-11-30 百度在线网络技术（北京）有限公司 直播间入口显示方法、装置、电子设备和存储介质
CN113946246A (zh) * 2021-10-08 2022-01-18 北京达佳互联信息技术有限公司 页面处理方法、装置、电子设备及计算机可读存储介质
WO2023061057A1 (zh) * 2021-10-11 2023-04-20 北京字跳网络技术有限公司 直播内容展示方法、装置、电子设备及可读存储介质
CN113727164B (zh) * 2020-05-26 2024-04-26 百度在线网络技术（北京）有限公司 直播间入口显示方法、装置、电子设备和存储介质

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103686450A (zh) * 2013-12-31 2014-03-26 广州华多网络科技有限公司 视频处理方法及系统
CN104540028A (zh) * 2014-12-24 2015-04-22 上海影卓信息科技有限公司 一种基于移动平台的视频美化交互体验系统
CN106161992A (zh) * 2016-08-30 2016-11-23 厦门视诚科技有限公司 桌面式视频处理控台的窗口异形显示装置及显示方法
CN107402985A (zh) * 2017-07-14 2017-11-28 广州爱拍网络科技有限公司 视频特效输出控制方法、装置及计算机可读存储介质
CN109495790A (zh) * 2018-11-30 2019-03-19 北京字节跳动网络技术有限公司 基于编辑器的贴纸添加方法、装置、电子设备及可读介质
CN109640173A (zh) * 2019-01-11 2019-04-16 腾讯科技（深圳）有限公司 一种视频播放方法、装置、设备及介质
CN110457624A (zh) * 2019-06-26 2019-11-15 网宿科技股份有限公司 视频生成方法、装置、服务器及存储介质

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103686450A (zh) * 2013-12-31 2014-03-26 广州华多网络科技有限公司 视频处理方法及系统
CN104540028A (zh) * 2014-12-24 2015-04-22 上海影卓信息科技有限公司 一种基于移动平台的视频美化交互体验系统
CN106161992A (zh) * 2016-08-30 2016-11-23 厦门视诚科技有限公司 桌面式视频处理控台的窗口异形显示装置及显示方法
CN107402985A (zh) * 2017-07-14 2017-11-28 广州爱拍网络科技有限公司 视频特效输出控制方法、装置及计算机可读存储介质
CN109495790A (zh) * 2018-11-30 2019-03-19 北京字节跳动网络技术有限公司 基于编辑器的贴纸添加方法、装置、电子设备及可读介质
CN109640173A (zh) * 2019-01-11 2019-04-16 腾讯科技（深圳）有限公司 一种视频播放方法、装置、设备及介质
CN110457624A (zh) * 2019-06-26 2019-11-15 网宿科技股份有限公司 视频生成方法、装置、服务器及存储介质

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113727164A (zh) * 2020-05-26 2021-11-30 百度在线网络技术（北京）有限公司 直播间入口显示方法、装置、电子设备和存储介质
CN113727164B (zh) * 2020-05-26 2024-04-26 百度在线网络技术（北京）有限公司 直播间入口显示方法、装置、电子设备和存储介质
CN113315982A (zh) * 2021-05-07 2021-08-27 广州虎牙科技有限公司 一种直播方法、计算机存储介质及设备
CN113315982B (zh) * 2021-05-07 2023-06-27 广州虎牙科技有限公司 一种直播方法、计算机存储介质及设备
CN113946246A (zh) * 2021-10-08 2022-01-18 北京达佳互联信息技术有限公司 页面处理方法、装置、电子设备及计算机可读存储介质
WO2023061057A1 (zh) * 2021-10-11 2023-04-20 北京字跳网络技术有限公司 直播内容展示方法、装置、电子设备及可读存储介质

Similar Documents

Publication Publication Date Title
US11422779B2 (en) Application support for network devices
US9459825B2 (en) Systems and methods for high-resolution image viewing
US9478006B2 (en) Content aware cropping
EP1914640B1 (en) Multiple screen size render-engine
US11537280B2 (en) Display method and display apparatus
CN110996151A (zh) 视频图层叠加方法、装置、电子设备和存储介质
US20120210205A1 (en) System and method for using an application on a mobile device to transfer internet media content
CN111541930B (zh) 直播画面的显示方法、装置、终端及存储介质
CN112969084A (zh) 一种用户界面展示方法、存储介质及显示设备
US20140285437A1 (en) Method of internet browser-based remote user interface virtual mouse cursor positioning
US20160364086A1 (en) Content sharing broadcast zone
CN113360066B (zh) 一种显示设备及文件展示方法
CN112486921B (zh) 一种文件同步方法、显示设备及移动终端
CN104053035A (zh) 用于增强多媒体内容的显示的系统及方法
JP5303534B2 (ja) 体裁情報処理装置及び方法
CN115836528A (zh) 一种显示设备及投屏方法
WO2021120419A1 (zh) 用户界面显示方法及设备
CN113556593B (zh) 一种显示设备及投屏方法
JP2017527872A (ja) クラウドストリーミングサービス提供方法、そのための装置及びシステム、並びにそのためのクラウドストリーミング用スクリプトコードを記録したコンピュータ読み取り可能な記録媒体
CN113163228B (zh) 媒资播放类型标记方法及服务器
CN112711459A (zh) 多媒体数据处理方法、装置、设备及计算机可读存储介质
CN113556590A (zh) 一种投屏视频流有效分辨率检测方法及显示设备
US20170230440A1 (en) Transcoding and Control of Distribution of Assets as part of a Shared Workspace
KR101262493B1 (ko) Ｕｘ 특성을 갖춘 웹 기반 프레임워크를 제공하는 시스템 및 방법
US20200329281A1 (en) Method for displaying gui for providing menu items and display device

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20200410