CN108600821A - 直播视频广告遮蔽方法、装置、服务器及存储介质 - Google Patents

直播视频广告遮蔽方法、装置、服务器及存储介质 Download PDF

Info

Publication number
CN108600821A
CN108600821A CN201810487763.1A CN201810487763A CN108600821A CN 108600821 A CN108600821 A CN 108600821A CN 201810487763 A CN201810487763 A CN 201810487763A CN 108600821 A CN108600821 A CN 108600821A
Authority
CN
China
Prior art keywords
canvas
module
live video
shaded areas
elements
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
CN201810487763.1A
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.)
Wuhan Douyu Network Technology Co Ltd
Original Assignee
Wuhan Douyu Network 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 Wuhan Douyu Network Technology Co Ltd filed Critical Wuhan Douyu Network Technology Co Ltd
Priority to CN201810487763.1A priority Critical patent/CN108600821A/zh
Publication of CN108600821A publication Critical patent/CN108600821A/zh
Pending legal-status Critical Current

Links

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/4318—Generation of visual interfaces for content selection or interaction; Content or additional data rendering by altering the content in the rendering process, e.g. blanking, blurring or masking an image region
    • 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/47—End-user applications
    • H04N21/485—End-user interface for client configuration
    • H04N21/4858—End-user interface for client configuration for modifying screen layout parameters, e.g. fonts, size of the windows
    • 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/60—Network structure or processes for video distribution between server and client or between remote clients; Control signalling between clients, server and network components; Transmission of management data between server and client, e.g. sending from server to client commands for recording incoming content stream; Communication details between server and client 
    • H04N21/63—Control signaling related to video distribution between client, server and network components; Network processes for video distribution between server and clients or between remote clients, e.g. transmitting basic layer and enhancement layers over different transmission paths, setting up a peer-to-peer communication via Internet between remote STB's; Communication protocols; Addressing
    • H04N21/643—Communication protocols
    • 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/85—Assembly of content; Generation of multimedia applications
    • H04N21/854—Content authoring
    • H04N21/8543—Content authoring using a description language, e.g. Multimedia and Hypermedia information coding Expert Group [MHEG], eXtensible Markup Language [XML]

Landscapes

  • Engineering & Computer Science (AREA)
  • Multimedia (AREA)
  • Signal Processing (AREA)
  • Human Computer Interaction (AREA)
  • Computer Security & Cryptography (AREA)
  • Two-Way Televisions, Distribution Of Moving Picture Or The Like (AREA)

Abstract

本发明涉及一种直播视频广告遮蔽方法、装置、服务器及存储介质，所述方法是通过管理平台运用Canvas叠加的直播画面进行鼠标的移动拖拽操作，直接框选出需要遮蔽的广告区域，然后通过服务端推送遮蔽区域起始坐标与遮蔽区域宽度高度数据到直播视频播放器中，从而达到了视频播放正片的同时无感知遮蔽广告区域的目的。

Description

直播视频广告遮蔽方法、装置、服务器及存储介质
技术领域
本发明涉及在线直播视频领域，具体涉及一种直播视频广告遮蔽方法、装置、服务器及存储介质。
背景技术
随着互联网的高速发展，在线直播视频应用日益广泛，部分主播会在直播时，在直播画面中打各种广告，经审核人员提醒关闭后，效果并不好，但又达不到强制关闭直播的程度，需要一种能在直播画面中添加矩形遮罩(马赛克)来遮蔽广告的方案。
目前现有的技术是审核人员在管理平台中，通过预估广告相对直播画面的位置坐标点，坐标点的值规定是0到1的浮点数，然后填入管理平台的表单中，通过服务器推送这个坐标点，到直播视频流中达到遮蔽的目的，由于这个坐标点是审核人员预估，而且0到1的数值相对直播画面误差较大，并不能直观精准的进行广告的遮挡，而且对视频流的操作消耗服务器资源的同时，这种操作对视频流来说是不可逆的。
发明内容
鉴于现有技术存在的问题，本发明的目的是提供一种直播视频广告遮蔽方法、装置、服务器及存储介质，克服了当前技术方案的缺陷，具有无加载延时，无黑屏，无额外资源消耗，精准直接，应用普适性强。
为了实现上述目的，本发明采用的技术方案为一种直播视频广告遮蔽方法，所述方法包括以下步骤：
S1、在管理平台界面中新建遮蔽区域并输入直播间房间号，通过服务端截取直播间实时直播画面，生成图片；
S2、创建与步骤S1中图片同等宽高的Canvas画布元素，将Canvas画布元素进行初始化，并通过JavaScript脚本语言对Canvas画布元素进行绘图操作，得出遮蔽区域位置数据；
S3、将步骤S2中得到的遮蔽区域位置数据提交至服务端，服务端接收到数据后自动通过TCP协议与前端播放器通信，最终播放器获取遮蔽区域位置数据，并在目标直播间直播视频画面中添加马赛克矩形图案。
在上述技术方案中，所述步骤S2中所述Canvas画布元素进行的初始化分为以下步骤：
S21、将Canvas画布元素的宽高按照等比模式进行设置；
S22、将Canvas画布元素通过JavaScript拖拽事件完成矩形绘制，设置矩形边框的宽度及颜色，得出遮蔽区域的坐标数据，并创建确定取消按钮元素，作为获取遮蔽区域的触发节点；
S23、将获取的遮蔽的坐标数据与宽高按照等比模式进行设置，最后输出至服务端。
在上述技术方案中，所述步骤S22中所述JavaScript拖拽事件完成矩形绘制分为以下步骤：
S221、将Canvas画布元素添加Mousedown事件、Mousemove事件、Mouseup事件；
S222、所述Mousedown事件记录鼠标移动坐标起始点并命名为Origin，记录要绘制矩形的唯一ID；
S223、所述Mousemove事件记录鼠标移动过程中不断更新的坐标点，并计算得到矩形宽高WH，所述WH为所述Canvas画布元素的宽高，同时维护由Origin与WH构成的坐标数据队列；
S224、所述Mouseup事件绘制由Origin、WH、ID数据队列构成的矩形。
在上述技术方案中，所述步骤S3中Canvas画布元素获取遮蔽位置的数据保存于管理平台，当审核人员需要查看上次编辑的遮蔽坐标的时候，Canvas画布元素重新将此数据传输出来进行Canvas画布元素的初始化，对遮蔽区域实现增删改查的功能。
本发明还公开一种直播视频广告遮蔽装置，所述装置包括直播视频画面截取模块、绘制图形模块、整合模块；
所述直播视频画面截取模块，用于在管理平台界面中新建遮蔽区域并输入直播间房间号，截取直播间实时直播画面，生成图片；
所述绘制图形模块，用于创建与直播视频画面截取模块生成的图片同等宽高的Canvas画布元素，并将Canvas画布元素进行初始化，通过JavaScript脚本语言对Canvas画布元素进行绘图操作，得出遮蔽区域位置数据；
所述整合模块，用于将绘制图形模块中得到的遮蔽区域位置数据提交至服务端，服务端接收到数据后自动通过TCP协议与前端播放器通信，最终播放器获取遮蔽区域位置数据，并在目标直播间直播视频画面中添加马赛克矩形图案；
在上述技术方案中，所述绘制图形模块包括以下模块：
初始设置模块，用于将Canvas画布元素的宽高按照等比模式进行设置；
绘制矩形模块，用于将Canvas画布元素通过JavaScript拖拽事件完成矩形绘制，设置矩形边框的宽度及颜色，得出遮蔽区域的坐标数据，并创建确定取消按钮元素，用于获取遮蔽区域的触发节点；
调整输出模块，用于将获取的遮蔽的坐标数据与宽高按照等比模式进行设置，最后输出至服务端。
在上述技术方案中，所述绘制矩形模块包括以下模块：
添加事件模块，用于将Canvas画布元素添加Mousedown事件、Mousemove事件、Mouseup事件；
记录起始坐标模块，用于将所述Mousedown事件记录鼠标移动坐标起始点并命名为Origin，记录要绘制矩形的唯一ID；
记录移动坐标模块，用于将所述Mousemove事件记录鼠标移动过程中不断更新的坐标点，并计算得到矩形宽高WH，所述WH为所述Canvas画布元素的宽高，同时构建由Origin与WH组成的坐标数据队列；
构建矩形图形模块，用于将所述Mouseup事件绘制由Origin、WH、ID数据队列构成的矩形。
在上述技术方案中，所述整合模块中Canvas画布元素获取遮蔽位置的数据保存于管理平台，当审核人员需要查看上次编辑的遮蔽坐标的时候，Canvas画布元素重新将此数据传输出来进行Canvas画布元素的初始化，对遮蔽区域实现增删改查的功能。
本发明还公开一种直播视频广告遮蔽装置，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述任一项所述一种直播视频广告遮蔽方法的步骤。
本发明还公开一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述任一项所述一种直播视频广告遮蔽方法的步骤。
本发明一种直播视频广告遮蔽方法、装置、服务器及存储介质，具有以下有益效果：本发明运用Canvas画布元素进行绘图操作高效遮蔽广告，具有无加载延时，无黑屏，无额外资源消耗，精准直接和应用普适性强，并且此方法可推广至遮蔽直播画面中包含暴力色情引起不适的场景。
附图说明
图1为本发明实施例一提供的一种直播视频广告遮蔽方法的流程图；
图2本发明实施例二提供一种直播视频广告遮蔽方法的anvas画布元素进行的初始化的方法流程图；
图3本发明实施例三提供一种直播视频广告遮蔽方法的avaScri pt拖拽事件完成矩形绘制方法流程图；
图4为本发明实施例四提供一种直播视频广告遮蔽装置模块示意图；
图5为本发明实施例五提供的服务器的结构示意图。
具体实施方式
本发明提供一种直播视频广告遮蔽方法、装置、服务器及存储介质，无额外资源消耗，精准直接。
为使得本发明的发明目的、特征、优点能够更加的明显和易懂，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，下面所描述的实施例仅仅是本发明一部分实施例，而非全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本发明保护的范围。
本发明如图1所示实施例一提供一种直播视频广告遮蔽方法，所述方法包括以下步骤，如图1所示：
S1、在管理平台界面中新建遮蔽区域并输入直播间房间号，通过服务端截取直播间实时直播画面，生成图片；
可选的，所述生成的图片宽为960个像素，长为540个像素。
S2、创建与步骤S1中图片同等宽高的Canvas画布元素，将Canvas画布元素进行初始化，并通过JavaScript脚本语言对Canvas画布元素进行绘图操作，得出遮蔽区域位置数据；
可选的，所述Canvas元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在HTML网页上进行图形操作，具有极大的应用价值，该元素使用JavaScript脚本语言在网页上绘制图像。画布是一个矩形区域，可以控制其每一像素。Canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法，可以创建丰富的图形引用。
S3、将步骤S2中得到的遮蔽区域位置数据提交至服务端，服务端接收到数据后自动通过TCP协议与前端播放器通信，最终播放器获取遮蔽区域位置数据，并在目标直播间直播视频画面中添加马赛克矩形图案。
所述TCP协议为传输控制协议，是一种面向连接、可靠、基于字节流的传输通信协议。
可选的，服务端为后端控制程序。
本发明实施例二提供的步骤S2中所述Canvas画布元素进行的初始化，分为以下步骤，如图2所示：
S21、将Canvas画布元素的宽高按照等比模式进行设置；
可选的，所述Canvas画布元素的宽高与步骤S1中生成图片的宽高一致。
S22、将Canvas画布元素通过JavaScript拖拽事件完成矩形绘制，设置矩形边框的宽度及颜色，得出遮蔽区域的坐标数据，并创建确定取消按钮元素，作为获取遮蔽区域的触发节点；
可选的，通过设置矩形大小边框宽度颜色，用于区别Canvas画布元素的各项操作，如“新建图形”、“拖拽图形”、“调整图形大小”，避免使用的误差，使用更精准。
S23、将获取的遮蔽的坐标数据与宽高按照等比模式进行设置，最后输出至移动端。
可选的，所述的移动端为手机端、PC端或电视盒子，输出数据按照等比模式进行设备是为了满足不同的移动端的播放界面，实现各移动端遮蔽位置尽可能小的误差，实现各移动端能精准定位遮蔽区域。
本发明实施例三提供所述步骤S22中所述JavaScript拖拽事件完成矩形绘制，分为以下步骤，如图3所示：
S221、将Canvas画布元素添加Mousedown事件、Mousemove事件、Mouseup事件；
所述Mousedown事件是在每一个匹配元素的mousedown事件中绑定一个处理函数，当鼠标指针移动到元素上方，并按下鼠标按键时，会发生mousedown事件。
所述Mousemove事件是伴随鼠标指针在对象间移动时连续不断地产生。
所述Mouseup事件是在释放鼠标按钮时发生的操作。
S222、所述Mousedown事件记录鼠标移动坐标起始点并命名为Origin，记录要绘制矩形的唯一ID；
S223、所述Mousemove事件记录鼠标移动过程中不断更新的坐标点，并计算得到矩形宽高WH，所述WH为所述Canvas画布元素的宽高，同时维护由Origin与WH构成的坐标数据队列；
S224、所述Mouseup事件绘制由Origin、WH、ID数据队列构成的矩形。
可选的，所述步骤S3中Canvas画布元素获取遮蔽位置的数据保存于管理平台，当审核人员需要查看上次编辑的遮蔽坐标的时候，Canvas画布元素重新将此数据传输出来进行Canvas画布元素的初始化，对遮蔽区域实现增删改查的功能。
本发明实施例四提供一种直播视频广告遮蔽装置，所述装置包括直播视频画面截取模块、绘制图形模块、整合模块，如图4所示；
所述直播视频画面截取模块，用于在管理平台界面中新建遮蔽区域并输入直播间房间号，截取直播间实时直播画面，生成图片；
所述绘制图形模块，用于创建与直播视频画面截取模块生成的图片同等宽高的Canvas画布元素，并将Canvas画布元素进行初始化，通过JavaScript脚本语言对Canvas画布元素进行绘图操作，得出遮蔽区域位置数据；
所述整合模块，用于将绘制图形模块中得到的遮蔽区域位置数据提交至服务端，服务端接收到数据后自动通过TCP协议与前端播放器通信，最终播放器获取遮蔽区域位置数据，并在目标直播间直播视频画面中添加马赛克矩形图案；
可选的，所述绘制图形模块，包括以下模块：
初始设置模块，用于将Canvas画布元素的宽高按照等比模式进行设置；
绘制矩形模块，用于将Canvas画布元素通过JavaScript拖拽事件完成矩形绘制，设置矩形边框的宽度及颜色，得出遮蔽区域的坐标数据，并创建确定取消按钮元素，用于获取遮蔽区域的触发节点；
调整输出模块，用于将获取的遮蔽的坐标数据与宽高按照等比模式进行设置，最后输出至服务端。
可选的，所述绘制矩形模块，包括以下模块：
添加事件模块，用于将Canvas画布元素添加Mousedown事件、Mousemove事件、Mouseup事件；
记录起始坐标模块，用于将所述Mousedown事件记录鼠标移动坐标起始点并命名为Origin，记录要绘制矩形的唯一ID；
记录移动坐标模块，用于将所述Mousemove事件记录鼠标移动过程中不断更新的坐标点，并计算得到矩形宽高WH，所述WH为所述Canvas画布元素的宽高，同时构建由Origin与WH组成的坐标数据队列；
构建矩形图形模块，用于将所述Mouseup事件绘制由Origin、WH、ID数据队列构成的矩形。
可选的，所述整合模块中Canvas画布元素获取遮蔽位置的数据保存于管理平台，当审核人员需要查看上次编辑的遮蔽坐标的时候，Canvas画布元素重新将此数据传输出来进行Canvas画布元素的初始化，对遮蔽区域实现增删改查的功能。
如图5所示为本发明实施例五提供一种直播视频广告遮蔽装置的服务器结构示意图，所述实施例的服务器包括：处理器50、存储器51以及存储在所述存储器51中并可在所述处理器50上运行的计算机程序52。所述处理器50执行所述计算机程序52时实现上述各方法实施例中的步骤，所述处理器50执行所述计算机程序52时实现上述装置实施例中各模块的功能。
所述一种直播视频广告遮蔽装置的服务器可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备，所述一种直播视频广告遮蔽装置的服务器可包括，但不限于，处理器50、存储器51。图5仅仅是对此服务器的示例，并不构成对此服务器的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件，所述一种直播视频广告遮蔽装置的服务器还可以包括输入输出设备53、显示设备54和移动端55等。
所述处理器50可以是中央处理单元，还可以是其他通用处理器、数字信号处理器、专用集成电路、现成可编程门阵列或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。
所述存储器51可以是所述一种直播视频广告遮蔽装置的服务器的内部存储单元、硬盘或内存。所述存储器51也可以是所述服务器的外部存储设备，或配备的插接式硬盘，智能存储卡，安全数字卡，闪存卡等。
进一步地，所述存储器51还可以既包括所述服务器的内部存储单元也包括外部存储设备。所述存储器51用于存储所述计算机程序以及所述电子设备所需的其他程序和数据。所述存储器51还可以用于暂时地存储已经输出或者将要输出的数据。
所述的输入输出设备53可用于接收输入的数字或字符信息，具体的，输入输出设备53还可以包括但不限于键盘、鼠标、操作杆等中的一种和多种。
所述的显示设备54可用于显示由用户输入的信息或提供给用户信息以及终端的各种菜单，显示设备54可包括显示面板，可选的，可采用液晶显示器。
所述的移动端55可用于直播视频，移动端55可包括移动设备，PC设备，可选的，可采用手机端设备，平板电脑，电视盒子。
所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各实施例的模块、方法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。
所述集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明实现上述实施例方法中的全部或部分流程，也可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一计算机可读存储介质中，该计算机程序在被处理器执行时，可实现上述各个方法实施例的步骤。其中，所述计算机程序包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，RandomAccess Memory)、电载波信号、电信信号以及软件分发介质等。需要说明的是，所述计算机可读介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减，例如在某些司法管辖区，根据立法和专利实践，计算机可读介质不包括电载波信号和电信信号。
以上所述，以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (10)

1.一种直播视频广告遮蔽方法，其特征在于，所述方法包括以下步骤：
S1、在管理平台界面中新建遮蔽区域并输入直播间房间号，通过服务端截取直播间实时直播画面，生成图片；
S2、创建与步骤S1中图片同等宽高的Canvas画布元素，将Canvas画布元素进行初始化，并通过JavaScript脚本语言对Canvas画布元素进行绘图操作，得出遮蔽区域位置数据；
S3、将步骤S2中得到的遮蔽区域位置数据提交至服务端，服务端接收到数据后自动通过TCP协议与前端播放器通信，最终播放器获取遮蔽区域位置数据，并在目标直播间直播视频画面中添加马赛克矩形图案。
2.根据权利要求1所述一种直播视频广告遮蔽方法，其特征在于，所述步骤S2中所述Canvas画布元素进行的初始化分为以下步骤：
S21、将Canvas画布元素的宽高按照等比模式进行设置；
S22、将Canvas画布元素通过JavaScript拖拽事件完成矩形绘制，设置矩形边框的宽度及颜色，得出遮蔽区域的坐标数据，并创建确定取消按钮元素，作为获取遮蔽区域的触发节点；
S23、将获取的遮蔽的坐标数据与宽高按照等比模式进行设置，最后输出至服务端。
3.根据权利要求2所述一种直播视频广告遮蔽方法，其特征在于,所述步骤S22中所述JavaScript拖拽事件完成矩形绘制分为以下步骤：
S221、将Canvas画布元素添加Mousedown事件、Mousemove事件、Mouseup事件；
S222、所述Mousedown事件记录鼠标移动坐标起始点并命名为Origin，记录要绘制矩形的唯一ID；
S223、所述Mousemove事件记录鼠标移动过程中不断更新的坐标点，并计算得到矩形宽高WH，所述WH为所述Canvas画布元素的宽高，同时维护由Origin与WH构成的坐标数据队列；
S224、所述Mouseup事件绘制由Origin、WH、ID数据队列构成的矩形。
4.根据权利要求1所述一种直播视频广告遮蔽方法，其特征在于，所述步骤S3中Canvas画布元素获取遮蔽位置的数据保存于管理平台，当审核人员需要查看上次编辑的遮蔽坐标的时候，Canvas画布元素重新将此数据传输出来进行Canvas画布元素的初始化，对遮蔽区域实现增删改查的功能。
5.一种直播视频广告遮蔽装置，其特征在于，所述装置包括直播视频画面截取模块、绘制图形模块、整合模块；
所述直播视频画面截取模块，用于在管理平台界面中新建遮蔽区域并输入直播间房间号，截取直播间实时直播画面，生成图片；
所述绘制图形模块，用于创建与直播视频画面截取模块生成的图片同等宽高的Canvas画布元素，并将Canvas画布元素进行初始化，通过JavaScript脚本语言对Canvas画布元素进行绘图操作，得出遮蔽区域位置数据；
所述整合模块，用于将绘制图形模块中得到的遮蔽区域位置数据提交至服务端，服务端接收到数据后自动通过TCP协议与前端播放器通信，最终播放器获取遮蔽区域位置数据，并在目标直播间直播视频画面中添加马赛克矩形图案。
6.根据权利要求5所述一种直播视频广告遮蔽装置，其特征在于，所述绘制图形模块包括以下模块：
初始设置模块，用于将Canvas画布元素的宽高按照等比模式进行设置；
绘制矩形模块，用于将Canvas画布元素通过JavaScript拖拽事件完成矩形绘制，设置矩形边框的宽度及颜色，得出遮蔽区域的坐标数据，并创建确定取消按钮元素，用于获取遮蔽区域的触发节点；
调整输出模块，用于将获取的遮蔽的坐标数据与宽高按照等比模式进行设置，最后输出至服务端。
7.根据权利要求6所述一种直播视频广告遮蔽装置，其特征在于，所述绘制矩形模块包括以下模块：
添加事件模块，用于将Canvas画布元素添加Mousedown事件、Mousemove事件、Mouseup事件；
记录起始坐标模块，用于将所述Mousedown事件记录鼠标移动坐标起始点并命名为Origin，记录要绘制矩形的唯一ID；
记录移动坐标模块，用于将所述Mousemove事件记录鼠标移动过程中不断更新的坐标点，并计算得到矩形宽高WH，所述WH为所述Canvas画布元素的宽高，同时构建由Origin与WH组成的坐标数据队列；
构建矩形图形模块，用于将所述Mouseup事件绘制由Origin、WH、ID数据队列构成的矩形。
8.根据权利要求5所述一种直播视频广告遮蔽装置，其特征在于，所述整合模块中Canvas画布元素获取遮蔽位置的数据保存于管理平台，当审核人员需要查看上次编辑的遮蔽坐标的时候，Canvas画布元素重新将此数据传输出来进行Canvas画布元素的初始化，对遮蔽区域实现增删改查的功能。
9.一种直播视频广告遮蔽装置，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至4中任一项所述一种直播视频广告遮蔽方法的步骤。
10.一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至4中任一项所述一种直播视频广告遮蔽方法的步骤。
CN201810487763.1A 2018-05-21 2018-05-21 直播视频广告遮蔽方法、装置、服务器及存储介质 Pending CN108600821A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201810487763.1A CN108600821A (zh) 2018-05-21 2018-05-21 直播视频广告遮蔽方法、装置、服务器及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201810487763.1A CN108600821A (zh) 2018-05-21 2018-05-21 直播视频广告遮蔽方法、装置、服务器及存储介质

Publications (1)

Publication Number Publication Date
CN108600821A true CN108600821A (zh) 2018-09-28

Family

ID=63632253

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201810487763.1A Pending CN108600821A (zh) 2018-05-21 2018-05-21 直播视频广告遮蔽方法、装置、服务器及存储介质

Country Status (1)

Country Link
CN (1) CN108600821A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111309231A (zh) * 2020-02-20 2020-06-19 网易（杭州）网络有限公司 信息展示方法及装置、存储介质及电子设备

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20110310111A1 (en) * 2010-06-17 2011-12-22 Samsung Electronics Co., Ltd. Method for providing texture effect and display apparatus applying the same
CN104539977A (zh) * 2014-12-17 2015-04-22 广州酷狗计算机科技有限公司 直播预览方法及装置
CN106028089A (zh) * 2016-06-24 2016-10-12 武汉斗鱼网络科技有限公司 一种视频直播画面屏蔽投放广告的方法及装置
CN106131656A (zh) * 2016-06-28 2016-11-16 武汉斗鱼网络科技有限公司 一种用于视频直播间准实时截图的系统及方法
CN106358069A (zh) * 2016-10-31 2017-01-25 维沃移动通信有限公司 一种视频数据处理方法及移动终端
US20170180782A1 (en) * 2015-12-21 2017-06-22 Le Holdings (Beijing) Co., Ltd. Method and electronic device for displaying chat messages in live broadcasting application
CN107318044A (zh) * 2017-06-30 2017-11-03 武汉斗鱼网络科技有限公司 一种直播内容截取方法及系统

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20110310111A1 (en) * 2010-06-17 2011-12-22 Samsung Electronics Co., Ltd. Method for providing texture effect and display apparatus applying the same
CN104539977A (zh) * 2014-12-17 2015-04-22 广州酷狗计算机科技有限公司 直播预览方法及装置
US20170180782A1 (en) * 2015-12-21 2017-06-22 Le Holdings (Beijing) Co., Ltd. Method and electronic device for displaying chat messages in live broadcasting application
CN106028089A (zh) * 2016-06-24 2016-10-12 武汉斗鱼网络科技有限公司 一种视频直播画面屏蔽投放广告的方法及装置
CN106131656A (zh) * 2016-06-28 2016-11-16 武汉斗鱼网络科技有限公司 一种用于视频直播间准实时截图的系统及方法
CN106358069A (zh) * 2016-10-31 2017-01-25 维沃移动通信有限公司 一种视频数据处理方法及移动终端
CN107318044A (zh) * 2017-06-30 2017-11-03 武汉斗鱼网络科技有限公司 一种直播内容截取方法及系统

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
李念: "《基于HTML5的Web设计与前端开发研究分析》", 31 January 2017, 电子科技大学出版社 *

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111309231A (zh) * 2020-02-20 2020-06-19 网易（杭州）网络有限公司 信息展示方法及装置、存储介质及电子设备

Similar Documents

Publication Publication Date Title
US10536644B2 (en) Image capture component
WO2021052141A1 (zh) 列表流的实现方法、装置、电子设备及存储介质
US20110167336A1 (en) Gesture-based web site design
CN112860163B (zh) 图像编辑方法和装置
DE102014008038A1 (de) Anordnen von unaufdringlichen Oberlagerungen in einem Videocontent
WO2020024580A1 (zh) 图形绘制方法及装置、设备及存储介质
CN103971391A (zh) 一种动画生成方法及装置
CN107545057A (zh) 展示思维导图的方法、装置、设备及存储介质
DE102014010217A1 (de) Dynamische Informationsanpassung für ein Computergerät mit mehreren Leistungsmodi
CN111399729A (zh) 图像的绘制方法、装置、可读介质和电子设备
US20210406305A1 (en) Image deformation control method and device and hardware device
WO2018077201A1 (zh) 一种多媒体信息处理方法及装置、设备、存储介质
CN109121000A (zh) 一种视频处理方法及客户端
CN105096368A (zh) 三维对象处理方法和相关装置
WO2024077909A1 (zh) 基于视频的交互方法、装置、计算机设备和存储介质
CN107807777A (zh) 多核嵌入式电视跟踪器人机交互装置及方法
CN112235605A (zh) 视频处理系统和视频处理方法
CN117541331B (zh) 一种广告发布方法、系统、电子设备及介质
CN107071574A (zh) 智能电视页面跳转方法
CN108600821A (zh) 直播视频广告遮蔽方法、装置、服务器及存储介质
CN113316018B (zh) 时间信息在视频画面显示的叠加方法、设备及存储介质
CN106231209A (zh) 一种视频详情页背景图片实现方法
EP3940551A1 (en) Method and apparatus for generating weather forecast video, electronic device, and storage medium
CN104657805A (zh) 不动产信息分析管理系统及方法
WO2023142345A1 (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
RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20180928