CN111541930B - 直播画面的显示方法、装置、终端及存储介质 - Google Patents

直播画面的显示方法、装置、终端及存储介质 Download PDF

Info

Publication number
CN111541930B
CN111541930B CN202010343337.8A CN202010343337A CN111541930B CN 111541930 B CN111541930 B CN 111541930B CN 202010343337 A CN202010343337 A CN 202010343337A CN 111541930 B CN111541930 B CN 111541930B
Authority
CN
China
Prior art keywords
picture
target
live broadcast
picture element
adjustment
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.)
Active
Application number
CN202010343337.8A
Other languages
English (en)
Other versions
CN111541930A (zh
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 Kugou Computer Technology Co Ltd
Original Assignee
Guangzhou Kugou Computer 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 Kugou Computer Technology Co Ltd filed Critical Guangzhou Kugou Computer Technology Co Ltd
Priority to CN202010343337.8A priority Critical patent/CN111541930B/zh
Publication of CN111541930A publication Critical patent/CN111541930A/zh
Application granted granted Critical
Publication of CN111541930B publication Critical patent/CN111541930B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

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/20—Servers specifically adapted for the distribution of content, e.g. VOD servers; Operations thereof
    • H04N21/21—Server components or server architectures
    • H04N21/218—Source of audio or video content, e.g. local disk arrays
    • H04N21/2187—Live feed
    • 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
    • H04N21/4316—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 for displaying supplemental content in a region of the screen, e.g. an advertisement in a separate window
    • 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
    • H04N21/4402—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 involving reformatting operations of video signals for household redistribution, storage or real-time display
    • 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/443—OS processes, e.g. booting an STB, implementing a Java virtual machine in an STB or power management in an STB
    • H04N21/4438—Window management, e.g. event handling following interaction with the user interface
    • 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/4788—Supplemental services, e.g. displaying phone caller identification, shopping application communicating with other users, e.g. chatting

Abstract

本申请实施例公开了一种直播画面的显示方法、装置、终端及存储介质，属于计算机技术领域。该方法包括：显示直播画面，直播画面包括第一画面元素和第二画面元素；接收对目标画面元素的元素调整指令，目标画面元素属于第二画面元素；根据元素调整指令所指示的调整方式，调整目标画面元素在直播画面中的布局。本申请实施例中，通过两路视频流分别对直播画面中不同的画面元素进行传输，其中一路视频流用于传输主播画面中的可调画面元素，从而使用户在观看直播时，可以根据自己的需求对直播画面的布局进行自定义调整，提高了直播画面布局的灵活性。

Description

直播画面的显示方法、装置、终端及存储介质
技术领域
本申请实施例涉及计算机技术领域，特别涉及一种直播画面的显示方法、装置、终端及存储介质。
背景技术
随着互联网技术的快速发展，网络直播已经成为重要的休闲娱乐方式之一。用户可以选择进入感兴趣的直播间，观看主播的直播视频，并通过直播间的评论区与主播进行互动。
相关技术中，主播在直播过程中通常会设置小窗口、固定图片或文字等元素，方便为观众展示信息，主播可以根据自己的意愿调整各个元素在直播画面中的位置，观众通过终端观看到的直播画面为主播调整后的画面。
然而，采用相关技术中的画面显示方法，只能由主播决定直播画面的布局，观众无法决定各个元素是否展示，也无法调整各个元素在画面中的位置。
发明内容
本申请实施例提供了一种直播画面的显示方法、装置、终端及存储介质。
所述技术方案如下：
一方面，本申请实施例提供了一种直播画面的显示方法，所述方法包括：
显示直播画面，所述直播画面包括第一画面元素和第二画面元素，所述第一画面元素通过对第一视频流中的视频帧渲染得到，所述第二画面元素通过对第二视频流中的视频帧渲染得到，且所述第二画面元素为可调画面元素，所述第一视频流与所述第二视频流对应同一推流端；
接收对目标画面元素的元素调整指令，所述目标画面元素属于所述第二画面元素；
根据所述元素调整指令所指示的调整方式，调整所述目标画面元素在所述直播画面中的布局。
在一种可能的实施方式中，所述显示直播画面之前，所述方法包括：
拉取所述第一视频流和所述第二视频流；
获取所述第一视频流中的第一视频帧，以及所述第二视频流中的第二视频帧，所述第一视频帧和所述第二视频帧对应同一时刻；
根据所述第一视频帧在所述直播画面中渲染所述第一画面元素；
根据所述第二视频帧中所述第二画面元素的原始布局，在所述直播画面中渲染所述第二画面元素。
在一种可能的实施方式中，所述根据所述第二视频帧中所述第二画面元素的原始布局，在所述直播画面中渲染所述第二画面元素，包括：
从所述第二视频流中获取补充增强信息(Supplemental EnhancementInformation，SEI)，所述SEI用于指示所述第二画面元素在所述第二视频帧中的第一位置，以及所述第二画面元素在所述直播画面中的第二位置；
根据所述第一位置从所述第二视频帧中提取所述第二画面元素；
在所述直播画面中的所述第二位置渲染所述第二画面元素。
在一种可能的实施方式中，所述调整方式包括位置调整和尺寸调整中的至少一种；
所述根据所述元素调整指令所指示的调整方式，调整所述目标画面元素在所述直播画面中的布局，包括：
获取所述元素调整指令所指示的目标位置和/或目标尺寸，所述目标位置用于指示所述目标画面元素经过布局调整后在所述直播画面中的位置，所述目标尺寸用于指示所述目标画面元素经过布局调整后的尺寸；
根据所述目标位置和/或所述目标尺寸，在所述直播画面中渲染所述目标画面元素。
在一种可能的实施方式中，所述接收对目标画面元素的元素调整指令之后，所述方法还包括：
存储所述目标画面元素对应的目标布局，所述目标布局包括所述目标位置和所述目标尺寸中的至少一种；
所述方法还包括：
响应于存储有所述目标布局，根据所述目标布局显示所述直播画面。
在一种可能的实施方式中，所述接收对目标画面元素的元素调整指令之前，所述方法还包括：
接收对直播界面中元素调整控件的触发操作；
对所述直播画面中的所述第二画面元素增加预设显示效果。
在一种可能的实施方式中，所述方法还包括：
响应于接收到对所述目标画面元素的拖拽操作，且所述拖拽操作的拖拽终点位于预设区域，停止显示所述目标画面元素；
或，
显示各个第二画面元素对应的元素关闭控件；响应于接收到对所述目标画面元素对应的所述元素关闭控件的触发操作，停止显示所述目标画面元素。
另一方面，本申请实施例提供了一种直播画面的显示装置，所述装置包括：
第一显示模块，用于显示直播画面，所述直播画面包括第一画面元素和第二画面元素，所述第一画面元素通过对第一视频流中的视频帧渲染得到，所述第二画面元素通过对第二视频流中的视频帧渲染得到，且所述第二画面元素为可调画面元素，所述第一视频流与所述第二视频流对应同一推流端；
第一接收模块，用于接收对目标画面元素的元素调整指令，所述目标画面元素属于所述第二画面元素；
调整模块，用于根据所述元素调整指令所指示的调整方式，调整所述目标画面元素在所述直播画面中的布局。
另一方面，本申请实施例提供了一种终端，所述终端包括处理器和存储器；所述存储器存储有至少一条指令，所述至少一条指令用于被所述处理器执行以实现上述方面所述的直播画面的显示方法。
另一方面，本申请实施例提供了一种计算机可读存储介质，所述存储介质存储有至少一条指令，所述至少一条指令用于被处理器执行以实现上述方面所述的直播画面的显示方法。
本申请实施例提供的技术方案的有益效果至少包括：
本申请实施例中，通过两路视频流分别对直播画面中不同的画面元素进行传输，其中一路视频流用于传输直播画面中的可调画面元素，从而使用户在观看直播时，可以根据自己的需求对直播画面的布局进行自定义调整，提高了直播画面布局的灵活性。
附图说明
图1是根据本申请一示例性实施例提供的实施环境的示意图；
图2是根据本申请一示例性实施例示出的直播画面的显示方法的流程图；
图3是根据本申请一示例性实施例示出的调整目标画面元素的示意图；
图4是根据本申请另一示例性实施例示出的直播画面的显示方法的流程图；
图5是根据本申请一示例性实施例示出的直播画面的示意图；
图6是根据本申请一示例性实施例示出的对第二画面元素增加预设显示效果的示意图；
图7是根据本申请一示例性实施例示出的预设区域的示意图；
图8是根据本申请一示例性实施例示出的元素关闭控件的示意图；
图9是根据本申请一示例性实施例示出的直播画面的显示装置的结构框图；
图10是根据本申请另一示例性实施例示出的直播画面的显示装置的结构框图；
图11是根据本申请一示例性实施例示出的终端的结构框图。
具体实施方式
为使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请实施方式作进一步地详细描述。
在本文中提及的“多个”是指两个或两个以上。“和/或”，描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。
请参考图1，其示出了本申请一个实施例提供的实施环境的示意图。该实施环境可以包括：第一终端110、服务器120和第二终端130。
第一终端110安装和运行有具有直播观看功能的应用程序111，第一终端110是第一用户112使用的终端，第一用户112使用第一终端110观看第二用户132的直播间，在一种可能的实施方式中，第一用户112可以在第一终端110的直播画面中调整第二用户132设置的视频小窗、固定图片或文字以及消息弹窗等元素的显示状态和显示位置，并与第二用户132进行互动。
第二终端130安装和运行有具有直播推流功能的应用程序131，第二终端130是第二用户132使用的终端，第二用户132使用第二终端130开设直播间并进行直播，在一种可能的实施方式中，第二用户132可以在第二终端130的直播画面中开启视频小窗、固定图片或文字以及消息弹窗等元素，并调整各个元素在直播画面的布局，第一用户112在观看第二用户132的直播间时，若未对第一终端110显示的直播画面进行布局调整，则第一终端110的直播画面的布局与第二用户132在第二终端130设置的直播画面的布局相同。
可选地，第一终端110和第二终端130上安装的应用程序是不同的，第一终端110可以泛指多个终端中的一个，第二终端130可以泛指多个终端中的另一个，本实施例仅以第一终端110和第二终端130来举例说明。第一终端110和第二终端130的设备类型相同或不同，该设备类型包括：智能手机、平板电脑、电子书阅读器、MP3播放器、MP4播放器、膝上型便携计算机和台式计算机中的至少一种。
图1中仅示出了两个终端，但在不同实施例中存在多个其它终端可以接入服务器120。第一终端110、第二终端130以及其它终端通过无线网络或有线网络与服务器120相连。
服务器120包括一台服务器、多台服务器组成的服务器集群、云计算平台和虚拟化中心中的至少一种。服务器120用于接收第二终端130发送的经过编码和封装处理的直播推流，并将转码后的直播视频流转发至通过拉流权限认证的第一终端110。
请参考图2，其示出了本申请的一个实施例示出的直播画面的显示方法的流程图。本实施例以直播画面的显示方法用于图1所示实施环境中的第一终端110为例进行说明，该方法包括：
步骤201，显示直播画面，直播画面包括第一画面元素和第二画面元素，第一画面元素通过对第一视频流中的视频帧渲染得到，第二画面元素通过对第二视频流中的视频帧渲染得到，且第二画面元素为可调画面元素，第一视频流与第二视频流对应同一推流端。
在一种可能的实施方式中，终端显示的直播画面中包含第一画面元素和第二画面元素，其中，第二画面元素是用户可以进行调整的画面元素，而第一画面元素是用户无法调整的画面元素。例如，当前直播画面中包括主播通过摄像头拍摄的主画面、主播设置的视频小窗、叠加在主画面上方或位于主画面四周的图片、文字等画面元素，其中主画面为第一画面元素，视频小窗、图片和文字等为第二画面元素。第一画面元素和第二画面元素的推流端都对应为该直播间的主播所使用的终端，即第一画面元素和第二画面元素的推流端为同一个第二终端130。
可选地，第一画面元素和第二画面元素的划分可以由直播间的主播设置，例如，若主播设置上述画面元素中的视频小窗为不可调，则该视频小窗属于第一画面元素。
在一种可能的实施方式中，为了使用户能够调整第二画面元素的布局，推流端通过不同的视频流发送第一画面元素和第二画面元素。
步骤202，接收对目标画面元素的元素调整指令，目标画面元素属于第二画面元素。
在一种可能的实施方式中，直播画面中包含至少一个第二画面元素，用户可以在直播画面中对第二画面元素进行调整，终端基于用户的调整操作接收元素调整指令，并确定出目标画面元素。
可选地，不同类型的终端接收元素调整指令的方式可能不同。示意性的，若终端为智能手机，则用户可以通过长按选择目标画面元素，使终端接收元素调整指令；若终端为台式计算机，则用户可以点击元素调整控件，使终端进入元素调整模式，再选择目标画面元素并进行调整，使终端接收元素调整指令，本申请实施例对此不作限定。
步骤203，根据元素调整指令所指示的调整方式，调整目标画面元素在直播画面中的布局。
在一种可能的实施方式中，对第二画面元素的调整方式包括位置调整、尺寸调整、显示状态调整等，本申请实施例对此不作限定。终端基于用户对目标画面元素的调整操作确定调整方式。
示意性的，请参考图3，其示出了一种通过智能手机调整直播画面布局的示意图。如图所示，终端300正在播放某一游戏类直播间的直播视频，该直播间的直播画面中包含第一画面元素301，即主播的游戏界面，以及第二画面元素302，即主播设置的便于用户观看主播形象的视频小窗。用户通过拖拽第二画面元素302可以调整其在直播画面中的位置。如图3下方所示，用户利用手指按住第二画面元素302并进行拖拽，将原本位于直播画面左下角的第二画面元素302拖拽至直播画面的右上角，从而改变了第二画面元素302的显示位置。
综上所述，本申请实施例中，通过两路视频流分别对直播画面中不同的画面元素进行传输，其中一路视频流用于传输直播画面中的可调画面元素，从而使用户在观看直播时，可以根据自己的需求对直播画面的布局进行自定义调整，提高了直播画面布局的灵活性。
请参考图4，其示出了本申请的另一个实施例示出的直播画面的显示方法的流程图。本实施例以直播画面的显示方法用于图1所示实施环境中的第一终端110为例进行说明，该方法包括：
步骤401，拉取第一视频流和第二视频流。
在一种可能的实施方式中，为了方便观众能够调整直播画面的第二画面元素，图1所示实施环境中的第二终端130向服务器推流时，将第一画面元素和第二画面元素分流发送，第一画面元素采用第一视频流，第二画面元素采用第二视频流。观众的终端接收到用户对目标直播间的选择操作时，向服务器发送直播观看请求，当接受到服务器发送的允许进入直播间的消息时，同时从服务器处拉取第一视频流和第二视频流。
可选地，主播可以设置不可调整的画面元素，第二终端130将该画面元素作为第一画面元素，通过第一视频流向服务器推流。
示意性的，观众的终端从服务器处拉取到的第一视频流中包含直播主画面和主播开设的视频小窗，第二视频流中包含直播主画面四周的图片和文字，则观众可以调整图片和文字的画面布局。
步骤402，获取第一视频流中的第一视频帧，以及第二视频流中的第二视频帧，第一视频帧和第二视频帧对应同一时刻。
在一种可能的实施方式中，为了保证第一画面元素和第二画面元素同步播放，第二终端130在推流时，以同样的频率采集两路视频流的视频帧。相应地，观众侧的终端拉取第一视频流和第二视频流后，根据两路视频流中视频帧的时间戳获取第一视频帧和第二视频帧，使得同时获取的第一视频帧和第二视频帧对应同一时刻。
步骤403，根据第一视频帧在直播画面中渲染第一画面元素。
在一种可能的实施方式中，由于第一画面元素为不可调整的画面元素，因此终端首先根据第一视频帧渲染第一画面元素。如图5所示，直播画面中包含第一画面元素501和第二画面元素中的字幕502、图片503，第一画面元素501为展示主播形象的画面，终端首先根据第一视频帧渲染该第一画面元素501。
步骤404，根据第二视频帧中第二画面元素的原始布局，在直播画面中渲染第二画面元素。
在一种可能的实施方式中，终端对第一画面元素渲染完成后，根据同一时刻的第二视频帧渲染第二画面元素。
可选地，当用户未调整第二画面元素的布局时，终端所显示的直播画面为主播设置的直播画面，即第二画面元素采用其原始布局。
可选地，为了减小终端与服务器之间的数据传输量，同时降低服务器的数据处理量，第二终端130在进行推流前对第二视频帧进行等比例压缩处理，即第二视频帧对应的画面与第一视频帧的对应的画面的宽高比相同，且第二视频帧对应的画面尺寸小于第一视频帧的对应的画面尺寸。因此观众侧的终端需要根据第二画面元素在第一视频帧和第二视频帧中的位置进行渲染。
在一种可能的实施方式中，步骤404包括如下步骤一至三：
步骤一，从第二视频流中获取SEI，SEI用于指示第二画面元素在第二视频帧中的第一位置，以及第二画面元素在直播画面中的第二位置。
在一种可能的实施方式中，第二终端130在对视频进行压缩、转码、封装等处理时，在第二视频帧的帧尾增加SEI，用于指示第二画面元素的第一位置和第二位置。观众的终端在渲染第二画面元素前，通过读取帧尾的SEI获取第二画面元素的位置信息。
可选地，一帧第二视频帧中包含至少一个第二画面元素，SEI用于指示第二视频帧中所有第二画面元素的第一位置和第二位置。
示意性的，请参考图5，第二视频帧中包含的第二画面元素有字幕502和图片503。
步骤二，根据第一位置从第二视频帧中提取第二画面元素。
在一种可能的实施方式中，第二视频帧还携带有各个第二画面元素的尺寸信息，终端根据第二画面元素的第一位置和尺寸信息提取第二画面元素。
可选地，SEI所指示的第一位置为第二画面元素的中心点或预设顶点在第二视频帧中的坐标，终端根据该坐标和尺寸信息提取第二画面元素。
步骤三，在直播画面中的第二位置渲染第二画面元素。
在一种可能的实施方式中，终端在直播画面中的第二位置渲染对应的第二画面元素。
可选地，若第二视频帧的尺寸小于第一视频帧，则终端首先根据第一视频帧与第二视频帧的尺寸比例对第二画面元素进行放大处理，再对放大处理后的第二画面元素进行渲染。
示意性的，请参考图6左侧，其示出了一种渲染完成后的直播画面，其中包含第一画面元素501以及第二画面元素中的字幕502和图片503。
步骤405，显示直播画面，直播画面包括第一画面元素和第二画面元素。
步骤405的实施方式可以参考上述步骤201，本申请实施例在此不再赘述。
步骤406，接收对直播界面中元素调整控件的触发操作。
在一种可能的实施方式中，为了使用户了解当前直播画面中存在的第二画面元素，直播界面中显示有元素调整控件。用户通过触发元素调整控件，可以使直播界面进入布局调整状态。
可选地，若终端为台式计算机，则该元素调整控件可以是一种用户界面(UserInterface，UI)控件，用户通过鼠标点击或利用快捷键触发元素调整控件；若终端为智能手机，则用户可以直接通过触摸元素调整控件，或长按直播界面的任意一处使直播界面进入布局调整状态，本申请实施例对此不作限定。
步骤407，对直播画面中的第二画面元素增加预设显示效果。
在一种可能的实施方式中，为了使用户直观地了解当前直播画面中存在的所有第二画面元素，终端在接收到对元素调整控件的触发操作后，对直播画面中的所有第二画面元素增加预设显示效果。例如，为第二画面元素的四周增加高亮显示的边框，或者使第二画面元素处于抖动状态，本申请实施例对此不作限定。
示意性的，请参考图6，左侧为直播画面，其中包括第一画面元素501、第二画面元素中的字幕502和图片503，用户触发元素调整控件后，终端为字幕502和图片503增加预设显示效果，如图6右侧所示，字幕502和图片503的四周增加了高亮显示的边框，使用户可以得知当前直播画面中的第二画面元素包含字幕502和图片503。
步骤408，接收对目标画面元素的元素调整指令，目标画面元素属于第二画面元素。
步骤408的实施方式可以参考上述步骤202，本申请实施例在此不再赘述。
步骤409，获取元素调整指令所指示的目标位置和/或目标尺寸，目标位置用于指示目标画面元素经过布局调整后在直播画面中的位置，目标尺寸用于指示目标画面元素经过布局调整后的尺寸。
在一种可能的实施方式中，调整方式包括尺寸调整和位置调整中的至少一种。例如，用户可以通过拖动目标画面元素的边框调整其尺寸，当用户调整完成后，终端获取调整操作指示的目标尺寸；或者用户可以通过拖拽目标画面元素改变其在直播画面中的位置，当用户调整完成后，终端获取调整操作指示的目标位置；或者，用户也可以同时调整目标画面元素的尺寸和位置。
步骤410，根据目标位置和/或目标尺寸，在直播画面中渲染目标画面元素。
在一种可能的实施方式中，当终端接收到元素调整指令后，在根据下一帧第二视频帧渲染第二画面元素时，先根据目标位置和/或目标尺寸，以及目标画面元素的第二位置，调整目标画面元素在直播画面中的位置和/或尺寸，再在直播画面中渲染包含目标画面元素的第二画面元素。
本申请实施例中，主播所使用的终端在推流时将第一画面元素和第二画面元素进行分流，使得观众侧的终端可以基于第二视频帧调整第二画面元素的布局，不必对第一画面元素进行额外的处理；终端接收到对元素调整控件的触发操作时，对第二画面元素增加预设显示效果，可以使用户直观地了解到直播画面中的所有第二画面元素，方便用户对直播画面的布局进行调整。
在一种可能的实施方式中，用户未对第二画面元素进行调整时，直播画面中第二画面元素采用的布局方式为主播设置的初始布局，当用户对目标画面元素进行调整后，终端将根据用户最近一次的调整方式显示直播画面。基于图4所示的实施例，在步骤408之后，上述直播画面的显示方法还包括如下步骤：
步骤一，存储目标画面元素对应的目标布局，目标布局包括目标位置和目标尺寸中的至少一种。
在一种可能的实施方式中，终端接收到元素调整指令后，先保存目标画面元素的目标布局，包括目标位置和目标尺寸中的至少一种参数。当终端再次接收到元素调整指令时，将此前保存的目标布局的参数更新为当前目标布局的参数。
步骤二，响应于存储有目标布局，根据目标布局显示直播画面。
在一种可能的实施方式中，若终端存储有目标布局，则根据该目标布局显示直播画面。即在获取到新的第二视频帧时，先根据目标布局调整目标画面元素的第二位置和/或尺寸，再根据调整后的第二画面元素的布局，在直播画面中渲染第二画面元素。
综上所述，本申请实施例中，通过存储元素调整指令所指示的目标布局，可以在后续渲染第二画面元素时直接根据存储的目标布局参数调整目标画面元素，从而使得目标画面元素在直播画面中的布局持续为用户调整后的布局。
在一种可能的实施方式中，用户除了可以调整第二画面元素的布局之外，还可以关闭第二画面元素。基于图4所示的实施例，在步骤405之后，上述直播画面的显示方法还包括如下步骤一，或步骤二和三：
步骤一，响应于接收到对目标画面元素的拖拽操作，且拖拽操作的拖拽终点位于预设区域，停止显示目标画面元素。
在一种可能的实施方式中，当终端接收到用户对目标画面元素的选择操作(例如触摸时长或点击时长大于阈值)时，在直播画面中显示预设区域，并在该区域显示删除标识。用户可以将目标画面元素拖拽至该预设区域关闭目标画面元素。即终端接收到拖拽终点位于预设区域的拖拽操作时，后续渲染第二画面元素时，不再渲染目标画面元素。
可选地，直播画面中显示有布局恢复控件，当接收到用户对布局恢复控件的触发操作时，重新显示目标画面元素，将第二画面元素的布局恢复至初始布局。
示意性的，请参考图7，其示出了一种直播画面。该直播画面中包括第一画面元素801、第二画面元素中的字幕702和图片703，当用户选中字幕702和图片703中的一个时，直播画面显示预设区域704，用户可以拖动字幕702和/或图片703至预设区域704，使终端停止显示字幕702和/或图片703。
步骤二，显示各个第二画面元素对应的元素关闭控件。
在一种可能的实施方式中，当终端接收到用户对目标画面元素的选择操作时，进入布局调整状态，在各个第二画面元素的预定位置显示元素关闭控件。
可选地，终端直接将用户选中的第二画面元素作为目标画面元素，并且只在目标画面元素的预定位置处显示元素关闭控件。
示意性的，请参考图8，其示出了一种布局调整状态下的直播画面，其中第一画面元素801的显示方式不变，第二画面元素中的字幕802和图片803的右上角都显示有元素关闭控件804。
步骤三，响应于接收到对目标画面元素对应的元素关闭控件的触发操作，停止显示目标画面元素。
在一种可能的实施方式中，终端接收到对某一元素关闭控件的触发操作时，停止显示该元素关闭控件对应的目标画面元素。
示意性的，如图8所示，当用户点击图片803右上角的元素关闭控件804时，终端停止显示图片803。
综上所述，本申请实施例中，通过设置元素关闭操作的预设区域，或者元素关闭控件，使得用户可以关闭直播画面中的目标画面元素，满足了用户对于直播画面布局调整的需求。
请参考图9，其示出了本申请一个示例性实施例提供的直播画面的显示装置的结构框图。该装置可以通过软件、硬件或者两者的结合实现成为第一终端110的全部或一部分。该装置包括：
第一显示模块901，用于显示直播画面，所述直播画面包括第一画面元素和第二画面元素，所述第一画面元素通过对第一视频流中的视频帧渲染得到，所述第二画面元素通过对第二视频流中的视频帧渲染得到，且所述第二画面元素为可调画面元素，所述第一视频流与所述第二视频流对应同一推流端；
第一接收模块902，用于接收对目标画面元素的元素调整指令，所述目标画面元素属于所述第二画面元素；
调整模块903，用于根据所述元素调整指令所指示的调整方式，调整所述目标画面元素在所述直播画面中的布局。
在图9的基础上，请参考图10，其示出了本申请另一个示例性实施例提供的直播画面的显示装置的结构框图。该装置可以通过软件、硬件或者两者的结合实现成为第一终端110的全部或一部分，所述装置还包括：
拉取模块904，用于拉取所述第一视频流和所述第二视频流；
获取模块905，用于获取所述第一视频流中的第一视频帧，以及所述第二视频流中的第二视频帧，所述第一视频帧和所述第二视频帧对应同一时刻；
第一渲染模块906，用于根据所述第一视频帧在所述直播画面中渲染所述第一画面元素；
第二渲染模块907，用于根据所述第二视频帧中所述第二画面元素的原始布局，在所述直播画面中渲染所述第二画面元素。
可选地，所述第二渲染模块907，包括：
第一获取单元，用于从所述第二视频流中获取SEI，所述SEI用于指示所述第二画面元素在所述第二视频帧中的第一位置，以及所述第二画面元素在所述直播画面中的第二位置；
提取单元，用于根据所述第一位置从所述第二视频帧中提取所述第二画面元素；
第一渲染单元，用于在所述直播画面中的所述第二位置渲染所述第二画面元素。
可选地，所述调整方式包括位置调整和尺寸调整中的至少一种；
所述调整模块903，包括：
第二获取单元，用于获取所述元素调整指令所指示的目标位置和/或目标尺寸，所述目标位置用于指示所述目标画面元素经过布局调整后在所述直播画面中的位置，所述目标尺寸用于指示所述目标画面元素经过布局调整后的尺寸；
第二渲染单元，用于根据所述目标位置和/或所述目标尺寸，在所述直播画面中渲染所述目标画面元素。
可选地，所述装置还包括：
存储模块908，用于存储所述目标画面元素对应的目标布局，所述目标布局包括所述目标位置和所述目标尺寸中的至少一种；
所述装置还包括：
第二显示模块909，用于响应于存储有所述目标布局，根据所述目标布局显示所述直播画面。
可选地，所述装置还包括：
第二接收模块910，用于接收对直播界面中元素调整控件的触发操作；
第三显示模块911，用于对所述直播画面中的所述第二画面元素增加预设显示效果。
可选地，所述装置还包括：
第四显示模块912，用于响应于接收到对所述目标画面元素的拖拽操作，且所述拖拽操作的拖拽终点位于预设区域，停止显示所述目标画面元素；
或，
第五显示模块913，用于显示各个第二画面元素对应的元素关闭控件；响应于接收到对所述目标画面元素对应的所述元素关闭控件的触发操作，停止显示所述目标画面元素。
请参考图11，其示出了本申请一个示例性实施例提供的第一终端110的结构方框图。该终端可以是智能手机、平板电脑、电子书、便携式个人计算机等安装并运行有应用程序的电子设备。本申请中的终端可以包括一个或多个如下部件：处理器1120、存储器1110和屏幕1130。
处理器1120可以包括一个或者多个处理核心。处理器1120利用各种接口和线路连接整个终端内的各个部分，通过运行或执行存储在存储器1110内的指令、程序、代码集或指令集，以及调用存储在存储器1110内的数据，执行终端的各种功能和处理数据。可选地，处理器1120可以采用数字信号处理(Digital Signal Processing，DSP)、现场可编程门阵列(Field－Programmable Gate Array，FPGA)、可编程逻辑阵列(Programmable LogicArray，PLA)中的至少一种硬件形式来实现。处理器1120可集成中央处理器(CentralProcessing Unit，CPU)、图像处理器(Graphics Processing Unit，GPU)和调制解调器等中的一种或几种的组合。其中，CPU主要处理操作系统、用户界面和应用程序等；GPU用于负责屏幕1130所需要显示的内容的渲染和绘制；调制解调器用于处理无线通信。可以理解的是，上述调制解调器也可以不集成到处理器1120中，单独通过一块通信芯片进行实现。
存储器1110可以包括随机存储器(Random Access Memory，RAM)，也可以包括只读存储器(Read-Only Memory，ROM)。可选地，该存储器1110包括非瞬时性计算机可读介质(non-transitory computer-readable storage medium)。存储器1110可用于存储指令、程序、代码、代码集或指令集。存储器1110可包括存储程序区和存储数据区，其中，存储程序区可存储用于实现操作系统的指令、用于实现至少一个功能的指令(比如触控功能、声音播放功能、图像播放功能等)、用于实现上述各个方法实施例的指令等，该操作系统可以是安卓(Android)系统(包括基于Android系统深度开发的系统)、苹果公司开发的IOS系统(包括基于IOS系统深度开发的系统)或其它系统。存储数据区还可以存储终端在使用中所创建的数据(比如电话本、音视频数据、聊天记录数据)等。
屏幕1130可以为电容式触摸显示屏，该电容式触摸显示屏用于接收用户使用手指、触摸笔等任何适合的物体在其上或附近的触摸操作，以及显示各个应用程序的用户界面。触摸显示屏通常设置在终端的前面板。触摸显示屏可被设计成为全面屏、曲面屏或异型屏。触摸显示屏还可被设计成为全面屏与曲面屏的结合，异型屏与曲面屏的结合，本申请实施例对此不加以限定。
除此之外，本领域技术人员可以理解，上述附图所示出的终端的结构并不构成对终端的限定，终端可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。比如，终端中还包括射频电路、拍摄组件、传感器、音频电路、无线保真(WirelessFidelity，WiFi)组件、电源、蓝牙组件等部件，在此不再赘述。
本申请实施例还提供了一种计算机可读存储介质，该计算机可读存储介质存储有至少一条指令，所述至少一条指令由所述处理器加载并执行以实现如上各个实施例所述的直播画面的显示方法。
本申请实施例还提供了一种计算机程序产品，该计算机程序产品存储有至少一条指令，所述至少一条指令由所述处理器加载并执行以实现如上各个实施例所述的直播画面的显示方法。
本领域技术人员应该可以意识到，在上述一个或多个示例中，本申请实施例所描述的功能可以用硬件、软件、固件或它们的任意组合来实现。当使用软件实现时，可以将这些功能存储在计算机可读存储介质中或者作为计算机可读存储介质上的一个或多个指令或代码进行传输。计算机可读存储介质包括计算机存储介质和通信介质，其中通信介质包括便于从一个地方向另一个地方传送计算机程序的任何介质。存储介质可以是通用或专用计算机能够存取的任何可用介质。
以上所述仅为本申请的可选实施例，并不用以限制本申请，凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

Claims (9)

1.一种直播画面的显示方法，其特征在于，所述方法包括：
拉取第一视频流和第二视频流，所述第一视频流与所述第二视频流对应同一推流端，所述第一视频流中的视频帧用于渲染得到第一画面元素，所述第二视频流用于渲染得到多个第二画面元素，且所述第二画面元素为可调画面元素；
从所述第二视频流中的第二视频帧中获取补充增强信息SEI；其中，所述SEI用于指示所述多个第二画面元素在所述第二视频帧中的第一位置和第二位置；所述第二视频帧对应的画面与所述第一视频帧的对应的画面的宽高比相同；
根据所述第一位置从所述第二视频帧中提取所述多个第二画面元素；
在直播画面中的所述第二位置渲染所述第二画面元素；
显示所述直播画面，所述直播画面包括所述第一画面元素和所述多个第二画面元素；
接收对直播界面中元素调整控件的触发操作；
对所述直播画面中的所述第二画面元素增加预设显示效果；
响应于针对所述多个第二画面元素中的目标画面元素的调整操作，生成所述目标画面元素对应的元素调整指令；其中，所述目标画面元素是根据所述调整操作对应的操作位置确定的；
根据所述元素调整指令所指示的调整方式，调整所述目标画面元素在所述直播画面中的布局；
响应于针对所述直播画面中的布局恢复控件的触发操作，恢复显示所述多个第二画面元素在所述直播画面中的初始布局。
2.根据权利要求1所述的方法，其特征在于，所述显示直播画面之前，所述方法包括：
获取所述第一视频流中的第一视频帧，以及所述第二视频流中的第二视频帧，所述第一视频帧和所述第二视频帧对应同一时刻；
根据所述第一视频帧在所述直播画面中渲染所述第一画面元素；
根据所述第二视频帧中所述第二画面元素的原始布局，在所述直播画面中渲染所述第二画面元素。
3.根据权利要求2所述的方法，其特征在于，所述调整方式包括位置调整和尺寸调整中的至少一种；
所述根据所述元素调整指令所指示的调整方式，调整所述目标画面元素在所述直播画面中的布局，包括：
获取所述元素调整指令所指示的目标位置和/或目标尺寸，所述目标位置用于指示所述目标画面元素经过布局调整后在所述直播画面中的位置，所述目标尺寸用于指示所述目标画面元素经过布局调整后的尺寸；
根据所述目标位置和/或所述目标尺寸，在所述直播画面中渲染所述目标画面元素。
4.根据权利要求3所述的方法，其特征在于，所述生成所述目标画面元素对应的元素调整指令之后，所述方法还包括：
存储所述目标画面元素对应的目标布局，所述目标布局包括所述目标位置和所述目标尺寸中的至少一种；
所述方法还包括：
响应于存储有所述目标布局，根据所述目标布局显示所述直播画面。
5.根据权利要求1至4任一所述的方法，其特征在于，所述方法还包括：
响应于接收到对所述目标画面元素的拖拽操作，且所述拖拽操作的拖拽终点位于预设区域，停止显示所述目标画面元素；
或，
显示各个第二画面元素对应的元素关闭控件；响应于接收到对所述目标画面元素对应的所述元素关闭控件的触发操作，停止显示所述目标画面元素。
6.一种直播画面的显示装置，其特征在于，所述装置包括：
拉取模块，用于拉取第一视频流和第二视频流，所述第一视频流与所述第二视频流对应同一推流端，所述第一视频流中的视频帧用于渲染得到第一画面元素，所述第二视频流用于渲染得到多个第二画面元素，且所述第二画面元素为可调画面元素；
第二渲染模块，用于从所述第二视频流中的第二视频帧中获取补充增强信息SEI；其中，所述SEI用于指示所述多个第二画面元素在所述第二视频帧中的第一位置和第二位置；所述第二视频帧对应的画面与所述第一视频帧的对应的画面的宽高比相同；根据所述第一位置从所述第二视频帧中提取所述多个第二画面元素；在直播画面中的所述第二位置渲染所述第二画面元素；
第一显示模块，用于显示所述直播画面，所述直播画面包括所述第一画面元素和所述多个第二画面元素；
第二接收模块，用于接收对直播界面中元素调整控件的触发操作；
第三显示模块，用于对所述直播画面中的所述第二画面元素增加预设显示效果；
第一接收模块，用于响应于针对所述多个第二画面元素中的目标画面元素的调整操作，生成所述目标画面元素对应的元素调整指令；其中，所述目标画面元素是根据所述调整操作对应的操作位置确定的；
调整模块，用于根据所述元素调整指令所指示的调整方式，调整所述目标画面元素在所述直播画面中的布局；响应于针对所述直播画面中的布局恢复控件的触发操作，恢复显示所述多个第二画面元素在所述直播画面中的初始布局。
7.根据权利要求6所述的装置，其特征在于，所述装置还包括：
获取模块，用于获取所述第一视频流中的第一视频帧，以及所述第二视频流中的第二视频帧，所述第一视频帧和所述第二视频帧对应同一时刻；
第一渲染模块，用于根据所述第一视频帧在所述直播画面中渲染所述第一画面元素；
第二渲染模块，用于根据所述第二视频帧中所述第二画面元素的原始布局，在所述直播画面中渲染所述第二画面元素。
8.一种终端，其特征在于，所述终端包括处理器和存储器；所述存储器存储有至少一条指令，所述至少一条指令用于被所述处理器执行以实现如权利要求1至5任一所述的直播画面的显示方法。
9.一种计算机可读存储介质，其特征在于，所述存储介质存储有至少一条指令，所述至少一条指令用于被处理器执行以实现如权利要求1至5任一所述的直播画面的显示方法。
CN202010343337.8A 2020-04-27 2020-04-27 直播画面的显示方法、装置、终端及存储介质 Active CN111541930B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010343337.8A CN111541930B (zh) 2020-04-27 2020-04-27 直播画面的显示方法、装置、终端及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010343337.8A CN111541930B (zh) 2020-04-27 2020-04-27 直播画面的显示方法、装置、终端及存储介质

Publications (2)

Publication Number Publication Date
CN111541930A CN111541930A (zh) 2020-08-14
CN111541930B true CN111541930B (zh) 2023-04-25

Family

ID=71977308

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010343337.8A Active CN111541930B (zh) 2020-04-27 2020-04-27 直播画面的显示方法、装置、终端及存储介质

Country Status (1)

Country Link
CN (1) CN111541930B (zh)

Families Citing this family (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112637624B (zh) * 2020-12-14 2023-07-18 广州繁星互娱信息科技有限公司 直播流处理方法、装置、设备及存储介质
CN114765691A (zh) * 2021-01-13 2022-07-19 北京字节跳动网络技术有限公司 视频直播的功能组件加载方法、数据处理方法及设备
WO2022165664A1 (zh) * 2021-02-03 2022-08-11 百果园技术(新加坡)有限公司 直播界面的显示方法、装置、终端、服务器及存储介质
CN113286165B (zh) * 2021-05-29 2023-05-02 五八到家有限公司 一体化直播管理平台及方法、电子设备及可读介质
CN113596561B (zh) * 2021-07-29 2023-06-27 北京达佳互联信息技术有限公司 视频流播放方法、装置、电子设备和计算机可读存储介质
CN113992928A (zh) * 2021-10-25 2022-01-28 北京达佳互联信息技术有限公司 直播间展示方法、装置、电子设备及存储介质
CN115334353B (zh) * 2022-08-11 2024-03-12 北京达佳互联信息技术有限公司 信息显示的方法、装置、电子设备以及存储介质

Family Cites Families (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2014080879A1 (ja) * 2012-11-26 2014-05-30 ソニー株式会社 送信装置、送信方法、受信装置、受信方法および受信表示方法
CN106303586A (zh) * 2016-08-18 2017-01-04 北京奇虎科技有限公司 一种网络直播的方法、主播端设备、观众端设备
CN107092417A (zh) * 2017-03-30 2017-08-25 北京潘达互娱科技有限公司 网络直播方法及装置
CN108024123A (zh) * 2017-11-08 2018-05-11 北京密境和风科技有限公司 一种直播视频处理方法、装置、终端设备及服务器

Also Published As

Publication number Publication date
CN111541930A (zh) 2020-08-14

Similar Documents

Publication Publication Date Title
CN111541930B (zh) 直播画面的显示方法、装置、终端及存储介质
US11632576B2 (en) Live video broadcast method, live broadcast device and storage medium
CN113157906B (zh) 推荐信息展示方法、装置、设备及存储介质
US10068364B2 (en) Method and apparatus for making personalized dynamic emoticon
WO2017016339A1 (zh) 视频分享方法和装置、视频播放方法和装置
CN110636353B (zh) 一种显示设备
WO2018113140A1 (zh) 一种视频直播中虚拟礼物显示方法和系统
WO2020103218A1 (zh) 一种WebRTC中的直播流处理方法及推流客户端
US10271105B2 (en) Method for playing video, client, and computer storage medium
US20110001758A1 (en) Apparatus and method for manipulating an object inserted to video content
WO2016150281A1 (zh) 一种预览视频文件的展示方法及移动终端和系统
US11425466B2 (en) Data transmission method and device
CN111510788B (zh) 一种双屏双系统屏幕切换动画的显示方法及显示设备
CN113840154A (zh) 基于虚拟礼物的直播互动方法、系统及计算机设备
WO2023104102A1 (zh) 一种直播评论展示方法、装置、设备、程序产品及介质
CN113573090A (zh) 游戏直播中的内容显示方法、装置、系统和存储介质
CN111279687A (zh) 视频的字幕处理方法和导播系统
WO2020248697A1 (zh) 显示设备及视频通讯数据处理方法
WO2019119643A1 (zh) 移动直播的互动终端、方法及计算机可读存储介质
CN103959208A (zh) 基于互联网浏览器远程用户界面虚拟鼠标光标定位的方法
CN114845152B (zh) 播放控件的显示方法、装置、电子设备及存储介质
KR101915792B1 (ko) 얼굴인식을 이용한 광고 삽입 시스템 및 방법
CN111667313A (zh) 广告展示方法、装置、客户端设备及存储介质
CN110798743A (zh) 视频播放方法、装置及计算机可读存储介质
CN113490060B (zh) 一种显示设备及确定常用联系人的方法

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
GR01 Patent grant
GR01 Patent grant