CN112995711B - 一种web前端视频的分帧与图片处理合成方法及系统 - Google Patents

一种web前端视频的分帧与图片处理合成方法及系统 Download PDF

Info

Publication number
CN112995711B
CN112995711B CN202110164163.3A CN202110164163A CN112995711B CN 112995711 B CN112995711 B CN 112995711B CN 202110164163 A CN202110164163 A CN 202110164163A CN 112995711 B CN112995711 B CN 112995711B
Authority
CN
China
Prior art keywords
canvas
frame
video
picture
result
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
CN202110164163.3A
Other languages
English (en)
Other versions
CN112995711A (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.)
Ropt Technology Group Co ltd
Ropt Xiamen Big Data Group Co ltd
Original Assignee
Lop Xiamen System Integration Co ltd
Ropt Technology Group 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 Lop Xiamen System Integration Co ltd, Ropt Technology Group Co ltd filed Critical Lop Xiamen System Integration Co ltd
Priority to CN202110164163.3A priority Critical patent/CN112995711B/zh
Publication of CN112995711A publication Critical patent/CN112995711A/zh
Application granted granted Critical
Publication of CN112995711B publication Critical patent/CN112995711B/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/20—Servers specifically adapted for the distribution of content, e.g. VOD servers; Operations thereof
    • H04N21/23—Processing of content or additional data; Elementary server operations; Server middleware
    • H04N21/234—Processing of video elementary streams, e.g. splicing of video streams or manipulating encoded video stream scene graphs
    • H04N21/23412—Processing of video elementary streams, e.g. splicing of video streams or manipulating encoded video stream scene graphs for generating or manipulating the scene composition of objects, e.g. MPEG-4 objects
    • 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/23—Processing of content or additional data; Elementary server operations; Server middleware
    • H04N21/234—Processing of video elementary streams, e.g. splicing of video streams or manipulating encoded video stream scene graphs
    • H04N21/2343—Processing of video elementary streams, e.g. splicing of video streams or manipulating encoded video stream scene graphs involving reformatting operations of video signals for distribution or compliance with end-user requests or end-user device requirements
    • H04N21/234345—Processing of video elementary streams, e.g. splicing of video streams or manipulating encoded video stream scene graphs involving reformatting operations of video signals for distribution or compliance with end-user requests or end-user device requirements the reformatting operation being performed only on part of the stream, e.g. a region of the image or a time segment
    • 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/23—Processing of content or additional data; Elementary server operations; Server middleware
    • H04N21/234—Processing of video elementary streams, e.g. splicing of video streams or manipulating encoded video stream scene graphs
    • H04N21/2343—Processing of video elementary streams, e.g. splicing of video streams or manipulating encoded video stream scene graphs involving reformatting operations of video signals for distribution or compliance with end-user requests or end-user device requirements
    • H04N21/234381—Processing of video elementary streams, e.g. splicing of video streams or manipulating encoded video stream scene graphs involving reformatting operations of video signals for distribution or compliance with end-user requests or end-user device requirements by altering the temporal resolution, e.g. decreasing the frame rate by frame skipping
    • 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 or rendering scenes according to encoded video stream scene graphs
    • H04N21/44012—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream or rendering scenes according to encoded video stream scene graphs involving rendering scenes according to scene graphs, e.g. 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/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 or rendering scenes according to encoded video stream scene graphs
    • H04N21/4402—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream or rendering scenes according to encoded video stream scene graphs involving reformatting operations of video signals for household redistribution, storage or real-time display
    • H04N21/440245—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream or rendering scenes according to encoded video stream scene graphs involving reformatting operations of video signals for household redistribution, storage or real-time display the reformatting operation being performed only on part of the stream, e.g. a region of the image or a time segment
    • 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 or rendering scenes according to encoded video stream scene graphs
    • H04N21/4402—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream or rendering scenes according to encoded video stream scene graphs involving reformatting operations of video signals for household redistribution, storage or real-time display
    • H04N21/440281—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream or rendering scenes according to encoded video stream scene graphs involving reformatting operations of video signals for household redistribution, storage or real-time display by altering the temporal resolution, e.g. by frame skipping
    • 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
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Multimedia (AREA)
  • Signal Processing (AREA)
  • Databases & Information Systems (AREA)
  • Human Computer Interaction (AREA)
  • Processing Or Creating Images (AREA)
  • Two-Way Televisions, Distribution Of Moving Picture Or The Like (AREA)

Abstract

本发明给出了一种web前端视频的分帧与图片处理合成方法及系统，包括通过使用video对象接收在线或者上传的视频文件或者视频流，实现了在线或实时的视频流分帧，同时利用HTML5的canvas画布，在web前端实现对video画面的处理，针对得到的帧图片基于离屏canvas算法，在离屏画布中进行渲染，提高了渲染性能，在web前端实现了对分帧得到的帧图片的处理以及合成，同时可实现字幕添加，其字幕背景可根据图片色调自动识别与设置。并且，以上实现过程采用web方式，无需下载安装软件，可以直接双击本地index.html打开，或者在线服务器部署。

Description

一种web前端视频的分帧与图片处理合成方法及系统
技术领域
本发明涉及视频分帧技术领域，尤其是一种web前端视频的分帧与图片处理合成方法及系统。
背景技术
交警在查看视频时，希望将视频分帧获取视频的各帧图片，选择某一张，框选出图片的片段置于图片任意位置，然后添加一行带背景的任意文字，最后合成并生成一张图片。
市面上的分帧软件，基于离线视频文件进行分帧，缺乏对在线或实时视频流的支持，缺乏对分帧后的后续图片处理的能力。市面上的分帧软件基本是桌面程序的形式，需要进行下载安装，较为繁琐，且存在分帧解析时间长的问题。
发明内容
本发明提出了一种web前端视频的分帧与图片处理合成方法及系统，以解决上文提到的现有技术的缺陷。
在一个方面，本发明提出了一种web前端视频的分帧方法，该方法包括以下步骤：
S1：使用video对象接收视频文件或视频流，基于预设的采样频率在预设的分帧范围内设置若干跳帧节点，通过对所述视频文件或视频流进行跳帧依次获取每个跳帧节点对应的video画面，将当前获取到的所述video画面写入canvas画布中生成对应的帧图片，获取所述帧图片的帧数据并存入数组；
S2：将所述数组中的帧数据按照时间从先到后的顺序进行反转，并将各个帧数据利用其对应的img标签进行展示。
以上方法通过使用video对象接收在线或者上传的视频文件或者视频流，实现了在线或实时的视频流分帧，同时利用HTML5的canvas画布，在web前端实现对video画面的处理，实现过程无需下载安装软件，可以直接双击本地index.html打开，或者在线服务器部署。
在具体的实施例中，所述使用video对象接收视频文件或视频流包括：
通过视频流协议或通过本地上传视频文件的方式获取到视频文件或视频流，将所述视频文件或视频流加载到video对象中。
在具体的实施例中，所述通过对所述视频文件或视频流进行跳帧依次获取每个跳帧节点对应的video画面，具体包括：
将所述视频文件或视频流截成多段，每次同时将所述多段中的若干段读取到线程中，利用多线程对所述若干段同步进行跳帧。采用分段分帧的方法，提高了分帧效率和速度。
在具体的实施例中，所述将当前获取到的所述video画面写入canvas画布中生成对应的帧图片，获取所述帧图片的帧数据并存入数组具体包括：
通过canvas画布的drawImage api将所述video画面在canvas画布中绘制出对应的帧图片；
通过toDataURL获取所述帧图片的base64位数据，存储到堆栈thumbnails中。
在具体的实施例中，所述S2具体包括：
基于Vue.js的双向绑定，将所述数组中的帧数据与img标签进行绑定；
通过reverse方法将所述数组中的帧数据按照时间从先到后的顺序进行反转。
根据本发明的第二方面，本发明提出了一种web前端视频的帧图片处理合成方法，该方法包括以下步骤：
A1：通过离屏canvas算法设置展示画布、离屏画布、缓存画布和结果画布，并设置展示画布与结果画布之间的分辨率换算；
A2：利用如S1-S2所述的方法在canvas画布中生成视频的帧图片，通过在所述展示画布中加载用于图片框选的截图框，截取出所述帧图片中的一部分，在所述离屏画布中进行渲染，并将渲染结果存储到所述结果画布中，同时将渲染过程中所述帧图片的某部分中间状态存储到所述缓存画布中，利用所述展示画布在用户界面中向用户展示渲染结果；
A3：基于图片色调识别算法设置适用于所述渲染结果的文字背景和文字颜色，根据所述文字颜色加载文字并添加所述文字背景获得带背景的文字，再将所述带背景的文字与所述渲染结果进行合成并将合成结果输入所述结果画布；
A4：获取所述结果画布中的所述合成结果存储为图片文件并下载。
以上方法基于离屏canvas算法，在离屏画布中进行渲染，提高了渲染性能，在web前端实现了对分帧得到的帧图片的处理以及合成，同时可实现字幕添加，其字幕背景可根据图片色调自动识别与设置。并且，以上实现过程采用web方式，无需下载安装软件，可以直接双击本地index.html打开，或者在线服务器部署。
在具体的实施例中，所述通过离屏canvas算法设置展示画布、离屏画布、缓存画布和结果画布具体包括：
设置所述展示画布、所述离屏画布和所述缓存画布中的所有画布的宽高及展示效果保持一致；
设置所述结果画布的宽高和所述帧图片保持一致；
设置利用所述缓存画布中的所述帧图片的某部分中间状态对所述离屏画布进行还原。
利用以上方法，在一系列对画布的操作后，可以根据缓存画布中的内容快速还原离屏画布或者结果画布。
在具体的实施例中，所述设置展示画布与结果画布之间的分辨率换算具体步骤包括：
设置换算比率rate为所述结果画布的宽度与所述展示画布的宽度的比值；
对于所述展示画布上的一个点[x,y]，所述结果画布上与所述点[x,y]对应的点的坐标为[x*rate,y*rate]；
对于所述展示画布上的长度为L的线段A，所述结果画布上与所述线段A对应的线段长度为L*rate。
由于结果画布与展示画布存在分辨率的差异，且结果画布的大小与上传图片的大小一致。展示画布的分辨率与屏幕大小相关，但二者的宽高比率都是一致的。
在具体的实施例中，所述通过在所述展示画布中加载用于图片框选的截图框，截取出所述帧图片中的一部分，具体步骤包括：
在所述展示画布中加载用于图片框选的截图框，设置所述截图框的初始范围；
点击所述帧图片时，若点击位置在所述截图框中，则表示当前操作为移动所述截图框；
若点击位置在所述截图框的边框上，则表示当前操作为改变所述截图框的大小。
在具体的实施例中，所述图片色调识别算法具体包括：
获取所述渲染结果中要插入文字的位置附近最多的那个色调作为文字背景的颜色，取出与所述文字背景的颜色对比强烈的颜色作为字体颜色。
根据本发明的第三方面，提出了一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被计算机处理器执行时实施上述方法。
根据本发明的第四方面，提出一种web前端视频的分帧系统，该系统包括：
视频分帧模块：配置用于使用video对象接收视频文件或视频流，基于预设的采样频率在预设的分帧范围内设置若干跳帧节点，通过对所述视频文件或视频流进行跳帧依次获取每个跳帧节点对应的video画面，将当前获取到的所述video画面写入canvas画布中生成对应的帧图片，获取所述帧图片的帧数据并存入数组；
帧数据标签展示模块：配置用于将所述数组中的帧数据按照时间从先到后的顺序进行反转，并将各个帧数据利用其对应的img标签进行展示。
根据本发明的第五方面，提出一种web前端视频的帧图片处理合成系统，该系统包括：
canvas画布设置模块：配置用于通过离屏canvas算法设置展示画布、离屏画布、缓存画布和结果画布，并设置展示画布与结果画布之间的分辨率换算；
帧图片处理模块：配置用于利用上述提到的web前端视频的分帧系统在canvas画布中生成视频的帧图片，通过在所述展示画布中加载用于图片框选的截图框，截取出所述帧图片中的一部分，在所述离屏画布中进行渲染，并将渲染结果存储到所述结果画布中，同时将渲染过程中所述帧图片的某部分中间状态存储到所述缓存画布中，利用所述展示画布在用户界面中向用户展示渲染结果；
帧图片合成模块：配置用于基于图片色调识别算法设置适用于所述渲染结果的文字背景和文字颜色，根据所述文字颜色加载文字并添加所述文字背景获得带背景的文字，再将所述带背景的文字与所述渲染结果进行合成并将合成结果输入所述结果画布；
合成图片导出模块：配置用于获取所述结果画布中的所述合成结果存储为图片文件并下载。
本发明通过使用video对象接收在线或者上传的视频文件或者视频流，实现了在线或实时的视频流分帧，同时利用HTML5的canvas画布，在web前端实现对video画面的处理，针对得到的帧图片基于离屏canvas算法，在离屏画布中进行渲染，提高了渲染性能，在web前端实现了对分帧得到的帧图片的处理以及合成，同时可实现字幕添加，其字幕背景可根据图片色调自动识别与设置。并且，以上实现过程采用web方式，无需下载安装软件，可以直接双击本地index.html打开，或者在线服务器部署。
附图说明
包括附图以提供对实施例的进一步理解并且附图被并入本说明书中并且构成本说明书的一部分。附图图示了实施例并且与描述一起用于解释本发明的原理。将容易认识到其它实施例和实施例的很多预期优点，因为通过引用以下详细描述，它们变得被更好地理解。通过阅读参照以下附图所作的对非限制性实施例所作的详细描述，本申请的其它特征、目的和优点将会变得更明显：
图1是本申请可以应用于其中的示例性系统架构图；
图2是本发明的一个实施例的一种web前端视频的分帧方法的流程图；
图3是本发明的一个实施例的一种web前端视频的帧图片处理合成方法的流程图；
图4是本发明的一个实施例的一种web前端视频的分帧系统的框架图；
图5是本发明的一个实施例的一种web前端视频的帧图片处理合成系统的框架图；
图6是适于用来实现本申请实施例的电子设备的计算机系统的结构示意图。
具体实施方式
下面结合附图和实施例对本申请作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释相关发明，而非对该发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与有关发明相关的部分。
需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。
图1示出了可以应用本申请实施例的一种web前端视频的分帧与图片处理合成方法的示例性系统架构100。
如图1所示，系统架构100可以包括终端设备101、102、103，网络104和服务器105。网络104用以在终端设备101、102、103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。
用户可以使用终端设备101、102、103通过网络104与服务器105交互，以接收或发送消息等。终端设备101、102、103上可以安装有各种应用，例如数据处理类应用、数据可视化类应用、网页浏览器应用等。
终端设备101、102、103可以是硬件，也可以是软件。当终端设备101、102、103为硬件时，可以是各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。当终端设备101、102、103为软件时，可以安装在上述所列举的电子设备中。其可以实现成多个软件或软件模块(例如用来提供分布式服务的软件或软件模块)，也可以实现成单个软件或软件模块。在此不做具体限定。
服务器105可以是提供各种服务的服务器，例如对终端设备101、102、103上展示的帧图片提供支持的后台信息处理服务器。后台信息处理服务器可以对获取的帧图片进行处理，并生成处理结果(例如合成图片)。
需要说明的是，本申请实施例所提供的方法可以由服务器105执行，也可以由终端设备101、102、103执行，相应的装置一般设置于服务器105中，也可以设置于终端设备101、102、103中。
需要说明的是，服务器可以是硬件，也可以是软件。当服务器为硬件时，可以实现成多个服务器组成的分布式服务器集群，也可以实现成单个服务器。当服务器为软件时，可以实现成多个软件或软件模块(例如用来提供分布式服务的软件或软件模块)，也可以实现成单个软件或软件模块。在此不做具体限定。
应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。
根据本发明的一个实施例的一种web前端视频的分帧方法，图2示出了根据本发明的实施例的一种web前端视频的分帧方法的流程图。如图2所示，该方法包括以下步骤：
S201：使用video对象接收视频文件或视频流，基于预设的采样频率在预设的分帧范围内设置若干跳帧节点，通过对所述视频文件或视频流进行跳帧依次获取每个跳帧节点对应的video画面，将当前获取到的所述video画面写入canvas画布中生成对应的帧图片，获取所述帧图片的帧数据并存入数组。
在具体的实施例中，所述使用video对象接收视频文件或视频流包括：
通过视频流协议或通过本地上传视频文件的方式获取到视频文件或视频流，将所述视频文件或视频流加载到video对象中。
在具体的实施例中，通过视频流协议HLS、RTMP、WebRTC等方式，或者通过本地上传视频文件的方式获取到视频流，加载到video中。
在具体的实施例中，所述通过对所述视频文件或视频流进行跳帧依次获取每个跳帧节点对应的video画面，具体包括：
将所述视频文件或视频流截成多段，每次同时将所述多段中的若干段读取到线程中，利用多线程对所述若干段同步进行跳帧。
在具体的实施例中，S201中的分帧步骤具体为：
用户设置分帧的范围[start,end]以及采样频率interval；
通过设置video.currentTime进行跳帧；
通过canplay事件实现循环跳帧，总共循环count次；
其中，分帧次数count＝(end-start)/interval；
初始化时，currentTime＝start；
当前跳帧的节点为：video.currentTime＝currentTime+interval；
本实施例简略代码如下：
Figure BDA0002936965650000081
在具体的实施例中，所述将当前获取到的所述video画面写入canvas画布中生成对应的帧图片，获取所述帧图片的帧数据并存入数组具体包括：
通过canvas画布的drawImage api将所述video画面在canvas画布中绘制出对应的帧图片；
通过toDataURL获取所述帧图片的base64位数据，存储到堆栈thumbnails中。
在具体的实施例中，实现所述将当前获取到的所述video画面写入canvas画布中生成对应的帧图片，获取所述帧图片的帧数据并存入数组的简略代码如下：
Figure BDA0002936965650000091
S202：将所述数组中的帧数据按照时间从先到后的顺序进行反转，并将各个帧数据利用其对应的img标签进行展示。
在具体的实施例中，所述S202具体包括：
基于Vue.js的双向绑定，将所述数组中的帧数据与img标签进行绑定；
通过reverse方法将所述数组中的帧数据按照时间从先到后的顺序进行反转。
在具体的实施例中，实现所述S202的简略代码如下：
<img
v-for＝"(item,key)in thumbnails.reverse()"
:key＝"key"
:src＝"item.blob"/>
根据本发明的一个实施例的一种web前端视频的帧图片处理合成方法，图3示出了根据本发明的实施例的一种web前端视频的帧图片处理合成方法的流程图。如图3所示，该方法包括以下步骤：
S301：通过离屏canvas算法设置展示画布、离屏画布、缓存画布和结果画布，并设置展示画布与结果画布之间的分辨率换算。
在具体的实施例中，所述通过离屏canvas算法设置展示画布、离屏画布、缓存画布和结果画布具体包括：
设置所述展示画布、所述离屏画布和所述缓存画布中的所有画布的宽高及展示效果保持一致；
设置所述结果画布的宽高和所述帧图片保持一致；
设置利用所述缓存画布中的所述帧图片的某部分中间状态对所述离屏画布进行还原。
在具体的实施例中，S301中的设置如下：
1)展示画布：
设置为用户界面可见，用于界面中展示用户可见的图片。
图片宽高比imgRate＝图片宽度imgWidth/图片高度imgHeight；
展示画布所在界面的宽高比wrapperRate＝界面的宽width/界面的高height；
当imgRate>wrapperRate时，展示画布宽canvasWidth＝width；
展示画布高canvasHeight＝canvasWidth*(imgHeight/imgWidth)。
2)离屏画布：
设置为用户界面不可见，宽高及展示效果跟展示画布一致，左右的操作都在离屏画布中渲染。当渲染完成后，将离屏画布的数据写入展示画布。
离屏画布宽offCanvas.width＝canvasWidth；
离屏画布高offCanvas.height＝this.canvasHeight。
3)缓存画布：
用于存储画布的某个状态，用于在对画布进行一系列操作后，可以根据缓存画布中的内容快速还原离屏画布或者结果画布。
缓存画布包含以下系列画布：
离线无边框画布noBoxOffCanvas：宽高及展示效果跟展示画布一致；
离线无字画布noTextOffCanvas：宽高及展示效果跟展示画布一致；
离线无字无边框画布noTextNoBoxOffCanvas：宽高及展示效果跟展示画布一致；
无字结果画布resultNoTextCanvas：宽高及展示效果跟结果画布一致；
原比例干净无边框画布cleanCanvas：宽高及展示效果跟结果画布一致。
4)结果画布：
用于存储渲染结果，宽高跟帧图片一致。最终导出下载图片的数据是从结果画布中获取；
宽this.resultCanvas.width＝this.imgWidth；
高this.resultCanvas.height＝this.imgHeight。
在具体的实施例中，所述设置展示画布与结果画布之间的分辨率换算具体步骤包括：
设置换算比率rate为所述结果画布的宽度与所述展示画布的宽度的比值；
对于所述展示画布上的一个点[x,y]，所述结果画布上与所述点[x,y]对应的点的坐标为[x*rate,y*rate]；
对于所述展示画布上的长度为L的线段A，所述结果画布上与所述线段A对应的线段长度为L*rate。
S302：利用如S201-S202所述的方法在canvas画布中生成视频的帧图片，通过在所述展示画布中加载用于图片框选的截图框，截取出所述帧图片中的一部分，在所述离屏画布中进行渲染，并将渲染结果存储到所述结果画布中，同时将渲染过程中所述帧图片的某部分中间状态存储到所述缓存画布中，利用所述展示画布在用户界面中向用户展示渲染结果。
在具体的实施例中，所述通过在所述展示画布中加载用于图片框选的截图框，截取出所述帧图片中的一部分，具体步骤包括：
在所述展示画布中加载用于图片框选的截图框，设置所述截图框的初始范围；
点击所述帧图片时，若点击位置在所述截图框中，则表示当前操作为移动所述截图框；
若点击位置在所述截图框的边框上，则表示当前操作为改变所述截图框的大小。
在具体的实施例中，S302的具体实现方法如下：
在展示画布中默认加载一个图片框选的截图框，截图框的初始范围rectPosition[0,0,100,100]，点击图片，如果点击位置在截图框中上，则代表当前状态是移动截图框；
如果点击位置在截图框的边框上，则代表当前状态是改变截图框大小，判断的算法如下：
1)判断点击位置在截图框中的算法：
Figure BDA0002936965650000121
2)判断点击位置在截图框的边框上的算法：
Figure BDA0002936965650000122
Figure BDA0002936965650000131
Figure BDA0002936965650000141
/>
Figure BDA0002936965650000151
3)拖动截图框的算法
截图框的位置rectPosition＝鼠标位置相对于画布左上角的位置offset-鼠标位置相对于截图框左上角的位置distance
Figure BDA0002936965650000152
4)改变截图框大小的算法
当鼠标点击截图框边框时，进行各个方向拖动，根据鼠标点击位置与拖动的位移，计算出截图框的最后位置与大小；
算法代码如下：
Figure BDA0002936965650000153
/>
Figure BDA0002936965650000161
/>
Figure BDA0002936965650000171
S303：基于图片色调识别算法设置适用于所述渲染结果的文字背景和文字颜色，根据所述文字颜色加载文字并添加所述文字背景获得带背景的文字，再将所述带背景的文字与所述渲染结果进行合成并将合成结果输入所述结果画布。
在具体的实施例中，所述图片色调识别算法具体包括：
获取所述渲染结果中要插入文字的位置附近最多的那个色调作为文字背景的颜色，取出与所述文字背景的颜色对比强烈的颜色作为字体颜色。
在具体的实施例中，S303的具体实现代码如下：
Figure BDA0002936965650000172
/>
Figure BDA0002936965650000181
/>
Figure BDA0002936965650000191
S304：获取所述结果画布中的所述合成结果存储为图片文件并下载。
在具体的实施例中，S304的具体实现方案包括：
1)对结果画布进行保存前的相关处理：比如当没有字幕时，不截取字幕；字被拖动到字幕以外，即拖动图片上时，也不截取字幕等。
2)通过toBlob获取到结果画布数据，通过file-saver的saveAs方法将图片数据保存为文件并下载，具体实现代码如下：
Figure BDA0002936965650000201
图4示出了本发明的一个实施例的一种web前端视频的分帧系统的框架图。该系统包括视频分帧模块401和帧数据标签展示模块402。
在具体的实施例中，视频分帧模块401被配置用于使用video对象接收视频文件或视频流，基于预设的采样频率在预设的分帧范围内设置若干跳帧节点，通过对所述视频文件或视频流进行跳帧依次获取每个跳帧节点对应的video画面，将当前获取到的所述video画面写入canvas画布中生成对应的帧图片，获取所述帧图片的帧数据并存入数组；
帧数据标签展示模块402被配置用于将所述数组中的帧数据按照时间从先到后的顺序进行反转，并将各个帧数据利用其对应的img标签进行展示。
本系统通过使用video对象接收在线或者上传的视频文件或者视频流，实现了在线或实时的视频流分帧，同时利用HTML5的canvas画布，在web前端实现对video画面的处理，实现过程无需下载安装软件，可以直接双击本地index.html打开，或者在线服务器部署。
图5示出了本发明的一个实施例的一种web前端视频的帧图片处理合成系统的框架图。该系统包括canvas画布设置模块501、帧图片处理模块502、帧图片合成模块503和合成图片导出模块504。
在具体的实施例中，canvas画布设置模块501被配置用于通过离屏canvas算法设置展示画布、离屏画布、缓存画布和结果画布，并设置展示画布与结果画布之间的分辨率换算；
帧图片处理模块502被配置用于利用上述提到的web前端视频的分帧系统在canvas画布中生成视频的帧图片，通过在所述展示画布中加载用于图片框选的截图框，截取出所述帧图片中的一部分，在所述离屏画布中进行渲染，并将渲染结果存储到所述结果画布中，同时将渲染过程中所述帧图片的某部分中间状态存储到所述缓存画布中，利用所述展示画布在用户界面中向用户展示渲染结果；
帧图片合成模块503被配置用于基于图片色调识别算法设置适用于所述渲染结果的文字背景和文字颜色，根据所述文字颜色加载文字并添加所述文字背景获得带背景的文字，再将所述带背景的文字与所述渲染结果进行合成并将合成结果输入所述结果画布；
合成图片导出模块504被配置用于获取所述结果画布中的所述合成结果存储为图片文件并下载。
本系统基于离屏canvas算法，在离屏画布中进行渲染，提高了渲染性能，在web前端实现了对分帧得到的帧图片的处理以及合成，同时可实现字幕添加，其字幕背景可根据图片色调自动识别与设置。并且，以上实现过程采用web方式，无需下载安装软件，可以直接双击本地index.html打开，或者在线服务器部署。
下面参考图6，其示出了适于用来实现本申请实施例的电子设备的计算机系统600的结构示意图。图6示出的电子设备仅仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。
如图6所示，计算机系统600包括中央处理单元(CPU)601，其可以根据存储在只读存储器(ROM)602中的程序或者从存储部分608加载到随机访问存储器(RAM)603中的程序而执行各种适当的动作和处理。在RAM 603中，还存储有系统600操作所需的各种程序和数据。CPU 601、ROM 602以及RAM 603通过总线604彼此相连。输入/输出(I/O)接口605也连接至总线604。
以下部件连接至I/O接口605：包括键盘、鼠标等的输入部分606；包括诸如液晶显示器(LCD)等以及扬声器等的输出部分607；包括硬盘等的存储部分608；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分609。通信部分609经由诸如因特网的网络执行通信处理。驱动器610也根据需要连接至I/O接口605。可拆卸介质611，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器610上，以便于从其上读出的计算机程序根据需要被安装入存储部分608。
特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读存储介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分609从网络上被下载和安装，和/或从可拆卸介质611被安装。在该计算机程序被中央处理单元(CPU)601执行时，执行本申请的方法中限定的上述功能。需要说明的是，本申请所述的计算机可读存储介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本申请中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本申请中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读存储介质，该计算机可读存储介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读存储介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。
可以以一种或多种程序设计语言或其组合来编写用于执行本申请的操作的计算机程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。
附图中的流程图和框图，图示了按照本申请各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
描述于本申请实施例中所涉及到的模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的单元也可以设置在处理器中，并且这些单元的名称在某种情况下并不构成对该单元本身的限定。
本发明的实施例还涉及一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被计算机处理器执行时实施上文中的方法。该计算机程序包含用于执行流程图所示的方法的程序代码。需要说明的是，本申请的计算机可读介质可以是计算机可读信号介质或者计算机可读介质或者是上述两者的任意组合。
本发明通过使用video对象接收在线或者上传的视频文件或者视频流，实现了在线或实时的视频流分帧，同时利用HTML5的canvas画布，在web前端实现对video画面的处理，针对得到的帧图片基于离屏canvas算法，在离屏画布中进行渲染，提高了渲染性能，在web前端实现了对分帧得到的帧图片的处理以及合成，同时可实现字幕添加，其字幕背景可根据图片色调自动识别与设置。并且，以上实现过程采用web方式，无需下载安装软件，可以直接双击本地index.html打开，或者在线服务器部署。
以上描述仅为本申请的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解，本申请中所涉及的发明范围，并不限于上述技术特征的特定组合而成的技术方案，同时也应涵盖在不脱离上述发明构思的情况下，由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本申请中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。

Claims (12)

1.一种web前端视频的分帧方法，其特征在于，包括以下步骤：
S1：使用video对象接收视频文件或视频流，基于预设的采样频率在预设的分帧范围内设置若干跳帧节点，通过对所述视频文件或视频流进行跳帧依次获取每个跳帧节点对应的video画面，将当前获取到的所述video画面写入canvas画布中生成对应的帧图片，获取所述帧图片的帧数据并存入数组；
S2：将所述数组中的帧数据按照时间从先到后的顺序进行反转，并将各个帧数据利用其对应的img标签进行展示；
其中，所述将当前获取到的所述video画面写入canvas画布中生成对应的帧图片，获取所述帧图片的帧数据并存入数组具体包括：
通过canvas画布的drawImage api将所述video画面在canvas画布中绘制出对应的帧图片；
通过toDataURL获取所述帧图片的base64位数据，存储到堆栈thumbnails中。
2.根据权利要求1所述的方法，其特征在于，所述使用video对象接收视频文件或视频流包括：
通过视频流协议或通过本地上传视频文件的方式获取到视频文件或视频流，将所述视频文件或视频流加载到video对象中。
3.根据权利要求1所述的方法，其特征在于，所述通过对所述视频文件或视频流进行跳帧依次获取每个跳帧节点对应的video画面，具体包括：
将所述视频文件或视频流截成多段，每次同时将所述多段中的若干段读取到线程中，利用多线程对所述若干段同步进行跳帧。
4.根据权利要求1所述的方法，其特征在于，所述S2具体包括：
基于Vue.js的双向绑定，将所述数组中的帧数据与img标签进行绑定；
通过reverse方法将所述数组中的帧数据按照时间从先到后的顺序进行反转。
5.一种web前端视频的帧图片处理合成方法，其特征在于，包括以下步骤：
A1：通过离屏canvas算法设置展示画布、离屏画布、缓存画布和结果画布，并设置展示画布与结果画布之间的分辨率换算；
A2：利用如权利要求1-4中任一项所述的方法在canvas画布中生成视频的帧图片，通过在所述展示画布中加载用于图片框选的截图框，截取出所述帧图片中的一部分，在所述离屏画布中进行渲染，并将渲染结果存储到所述结果画布中，同时将渲染过程中所述帧图片的某部分中间状态存储到所述缓存画布中，利用所述展示画布在用户界面中向用户展示渲染结果；
A3：基于图片色调识别算法设置适用于所述渲染结果的文字背景和文字颜色，根据所述文字颜色加载文字并添加所述文字背景获得带背景的文字，再将所述带背景的文字与所述渲染结果进行合成并将合成结果输入所述结果画布；
A4：获取所述结果画布中的所述合成结果存储为图片文件并下载。
6.根据权利要求5所述的方法，其特征在于，所述通过离屏canvas算法设置展示画布、离屏画布、缓存画布和结果画布具体包括：
设置所述展示画布、所述离屏画布和所述缓存画布中的所有画布的宽高及展示效果保持一致；
设置所述结果画布的宽高和所述帧图片保持一致；
设置利用所述缓存画布中的所述帧图片的某部分中间状态对所述离屏画布进行还原。
7.根据权利要求5所述的方法，其特征在于，所述设置展示画布与结果画布之间的分辨率换算具体步骤包括：
设置换算比率rate为所述结果画布的宽度与所述展示画布的宽度的比值；
对于所述展示画布上的一个点[x,y]，所述结果画布上与所述点[x,y]对应的点的坐标为[x*rate,y*rate]；
对于所述展示画布上的长度为L的线段A，所述结果画布上与所述线段A对应的线段长度为L*rate。
8.根据权利要求5所述的方法，其特征在于，所述通过在所述展示画布中加载用于图片框选的截图框，截取出所述帧图片中的一部分，具体步骤包括：
在所述展示画布中加载用于图片框选的截图框，设置所述截图框的初始范围；
点击所述帧图片时，若点击位置在所述截图框中，则表示当前操作为移动所述截图框；
若点击位置在所述截图框的边框上，则表示当前操作为改变所述截图框的大小。
9.根据权利要求5所述的方法，其特征在于，所述图片色调识别算法具体包括：
获取所述渲染结果中要插入文字的位置附近最多的那个色调作为文字背景的颜色，取出与所述文字背景的颜色对比强烈的颜色作为字体颜色。
10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该计算机程序被计算机处理器执行时实施权利要求1至9中任一项所述的方法。
11.一种web前端视频的分帧系统，其特征在于，包括：
视频分帧模块：配置用于使用video对象接收视频文件或视频流，基于预设的采样频率在预设的分帧范围内设置若干跳帧节点，通过对所述视频文件或视频流进行跳帧依次获取每个跳帧节点对应的video画面，将当前获取到的所述video画面写入canvas画布中生成对应的帧图片，获取所述帧图片的帧数据并存入数组；
帧数据标签展示模块：配置用于将所述数组中的帧数据按照时间从先到后的顺序进行反转，并将各个帧数据利用其对应的img标签进行展示；
其中，所述将当前获取到的所述video画面写入canvas画布中生成对应的帧图片，获取所述帧图片的帧数据并存入数组具体包括：
通过canvas画布的drawImage api将所述video画面在canvas画布中绘制出对应的帧图片；
通过toDataURL获取所述帧图片的base64位数据，存储到堆栈thumbnails中。
12.一种web前端视频的帧图片处理合成系统，其特征在于，包括：
canvas画布设置模块：配置用于通过离屏canvas算法设置展示画布、离屏画布、缓存画布和结果画布，并设置展示画布与结果画布之间的分辨率换算；
帧图片处理模块：配置用于利用如权利要求11所述的系统在canvas画布中生成视频的帧图片，通过在所述展示画布中加载用于图片框选的截图框，截取出所述帧图片中的一部分，在所述离屏画布中进行渲染，并将渲染结果存储到所述结果画布中，同时将渲染过程中所述帧图片的某部分中间状态存储到所述缓存画布中，利用所述展示画布在用户界面中向用户展示渲染结果；
帧图片合成模块：配置用于基于图片色调识别算法设置适用于所述渲染结果的文字背景和文字颜色，根据所述文字颜色加载文字并添加所述文字背景获得带背景的文字，再将所述带背景的文字与所述渲染结果进行合成并将合成结果输入所述结果画布；
合成图片导出模块：配置用于获取所述结果画布中的所述合成结果存储为图片文件并下载。
CN202110164163.3A 2021-02-05 2021-02-05 一种web前端视频的分帧与图片处理合成方法及系统 Active CN112995711B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110164163.3A CN112995711B (zh) 2021-02-05 2021-02-05 一种web前端视频的分帧与图片处理合成方法及系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110164163.3A CN112995711B (zh) 2021-02-05 2021-02-05 一种web前端视频的分帧与图片处理合成方法及系统

Publications (2)

Publication Number Publication Date
CN112995711A CN112995711A (zh) 2021-06-18
CN112995711B true CN112995711B (zh) 2023-06-30

Family

ID=76348380

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110164163.3A Active CN112995711B (zh) 2021-02-05 2021-02-05 一种web前端视频的分帧与图片处理合成方法及系统

Country Status (1)

Country Link
CN (1) CN112995711B (zh)

Family Cites Families (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2006325082A (ja) * 2005-05-20 2006-11-30 Canopus Co Ltd 動画データ編集装置および方法
CN111563396A (zh) * 2019-01-25 2020-08-21 北京嘀嘀无限科技发展有限公司 在线识别异常行为的方法、装置、电子设备及可读存储介质
CN112118397B (zh) * 2020-09-23 2021-06-22 腾讯科技（深圳）有限公司 一种视频合成的方法、相关装置、设备以及存储介质

Also Published As

Publication number Publication date
CN112995711A (zh) 2021-06-18

Similar Documents

Publication Publication Date Title
EP1914640B1 (en) Multiple screen size render-engine
AU2011264509B2 (en) Adaptive image rendering and use of imposter
CN110784754A (zh) 视频显示方法、装置和电子设备
US20240062443A1 (en) Video sharing method and apparatus, device, and medium
WO2020007113A1 (zh) 用于加载图像的方法和装置
WO2022111569A1 (zh) 页面切换显示方法、装置、存储介质及电子设备
US20220215192A1 (en) Two-dimensional code display method, apparatus, device, and medium
EP4131983A1 (en) Method and apparatus for processing three-dimensional video, readable storage medium, and electronic device
EP4113936A1 (en) Information switching and sharing method, device, electronic apparatus, and storage medium
CN111651966A (zh) 数据报告文件生成方法、装置与电子设备
CN114416261B (zh) 一种信息展示方法、装置、设备及介质
CN112866784A (zh) 一种大屏局部回显控制方法、控制系统、设备及存储介质
CN113688341B (zh) 动态图片分解方法、装置、电子设备及可读存储介质
JP7100940B2 (ja) 遠隔で視聴されるプレゼンテーションにおけるハイパーリンクの提供
CN112995711B (zh) 一种web前端视频的分帧与图片处理合成方法及系统
CN110569460B (zh) 推送信息展示方法、装置及存储介质
WO2023045858A1 (zh) 一种答复问题方法、装置、设备、介质及程序产品
CN112492399A (zh) 信息显示方法、装置及电子设备
WO2022213801A1 (zh) 视频处理方法、装置及设备
CN116089757A (zh) 页面展示方法及装置、电子设备、存储介质和程序产品
CN113961280B (zh) 视图的展示方法、装置、电子设备及计算机可读存储介质
CN116137662A (zh) 页面展示方法及装置、电子设备、存储介质和程序产品
CN112445478A (zh) 图形文件的处理方法、装置、设备及介质
CN112949252B (zh) 文本显示方法、设备和计算机可读介质
CN114564267B (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
CP03 Change of name, title or address

Address after: 361000 unit 102, No. 59, erhaihai Road, software park, Siming District, Xiamen City, Fujian Province

Patentee after: ROPT TECHNOLOGY GROUP Co.,Ltd.

Country or region after: China

Patentee after: ROPT (Xiamen) Big Data Group Co.,Ltd.

Address before: 361000 unit 102, No. 59, erhaihai Road, software park, Siming District, Xiamen City, Fujian Province

Patentee before: ROPT TECHNOLOGY GROUP Co.,Ltd.

Country or region before: China

Patentee before: Lop (Xiamen) system integration Co.,Ltd.