CN115706819A - 网页视频播放方法、装置、电子设备及存储介质 - Google Patents

网页视频播放方法、装置、电子设备及存储介质 Download PDF

Info

Publication number
CN115706819A
CN115706819A CN202110945055.XA CN202110945055A CN115706819A CN 115706819 A CN115706819 A CN 115706819A CN 202110945055 A CN202110945055 A CN 202110945055A CN 115706819 A CN115706819 A CN 115706819A
Authority
CN
China
Prior art keywords
information
additional information
image
canvas
video
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
CN202110945055.XA
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.)
Hongfujin Precision Industry Shenzhen Co Ltd
Hon Hai Precision Industry Co Ltd
Original Assignee
Hongfujin Precision Industry Shenzhen Co Ltd
Hon Hai Precision Industry 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 Hongfujin Precision Industry Shenzhen Co Ltd, Hon Hai Precision Industry Co Ltd filed Critical Hongfujin Precision Industry Shenzhen Co Ltd
Priority to CN202110945055.XA priority Critical patent/CN115706819A/zh
Priority to US17/747,146 priority patent/US11776186B2/en
Publication of CN115706819A publication Critical patent/CN115706819A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G06T11/60—Editing figures and text; Combining figures or text
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/14—Tree-structured documents
    • G06F40/143—Markup, e.g. Standard Generalized Markup Language [SGML] or Document Type Definition [DTD]
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06V—IMAGE OR VIDEO RECOGNITION OR UNDERSTANDING
    • G06V20/00—Scenes; Scene-specific elements
    • G06V20/40—Scenes; Scene-specific elements in video content
    • G06V20/46—Extracting features or characteristics from the video content, e.g. video fingerprints, representative shots or key frames

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Artificial Intelligence (AREA)
  • Health & Medical Sciences (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • General Engineering & Computer Science (AREA)
  • Multimedia (AREA)
  • User Interface Of Digital Computer (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本申请实施方式提供一种网页视频播放方法、装置、电子设备及存储介质，所述方法包括获取图像信息，并根据所述图像信息创建画布元素，并根据所述图像信息绘制所述画布元素中的画布；获取附加信息，并根据所述附加信息创建块元素，并将所述附加信息写入所述块元素；对所述画布元素和所述块元素进行排版和堆叠；显示所述画布元素和所述块元素。采用本申请的实施例，直观地看到所述外部摄像系统拍摄到的视频，以及堆叠在其上的附加信息，从而可以对所述视频中的物件进行取样和瑕疵分析。

Description

网页视频播放方法、装置、电子设备及存储介质
技术领域
本申请涉及一种互联网页面处理技术领域，尤其涉及一种网页视频播放方法、装置、电子设备及存储介质。
背景技术
在集成电路芯片的生产过程中，对于不良品的瑕疵检测需要进行大量的产品取样和瑕疵标记，通常使用摄像系统对需要检测的集成电路芯片拍摄第一视频并导入辨识系统，所述辨识系统可以对所述第一视频进行数据分析与处理，导出包括集成电路芯片的大小范围框图和位置坐标的附加信息。同时，将所述第一视频和所述附加信息从服务器端传输到客户端，客户端对所述第一视频和所述附加信息进行合并绘制成第二视频，并呈现给用户，用户可以根据所述第二视频中拍摄的内容和所述附加信息对所述集成电路芯片进行取样或瑕疵标记。
在所述第一视频和所述附加信息从服务器端传输到客户端的过程中，服务器会基于动态比特率(Variable Bitrate，VBR)技术对所述第一视频和所述附加信息进行压缩，压缩后所述视频中的画质会有所损失，所述附加信息也会发生失真。由于附加信息可能包括文字或线条等具有识别性的精细内容，若在所述附加信息失真后直接将其叠加在所述第一视频上并绘制成第二视频进行显示，则可能会影响用户的辨别效果。
此外，由于所述辨识系统需要运行算法以对所述第一视频进行数据分析与处理，而所述算法具有一定的复杂性，因此所述辨识系统输出的所述附加信息可能迟于所述摄像系统输出的所述第一视频，导致所述辨识系统与所述摄像系统的输出不同步，若直接将所述附加信息叠加在所述第一视频上并绘制成第二视频进行显示，则可能导致用户辨识错误。若要保持所述摄像系统的帧率(Frame Rate)，则需要一个判决部件，用于判定在所述摄像系统的帧率下，所述辨识系统是否可以用于输出与所述第一视频不同步的附加信息，如此，增加了开发成本和传输复杂度。
发明内容
鉴于以上内容，有必要提供一种网页视频播放方法、装置、电子设备及存储介质，使用户可以直观地看到所述外部摄像系统拍摄到的视频，以及堆叠在其上的附加信息，从而可以对所述视频中的物件进行取样和瑕疵分析。
本申请的第一方面提供一种网页视频播放方法，包括：
获取图像信息，并根据所述图像信息创建画布元素，并根据所述图像信息绘制所述画布元素中的画布；
获取附加信息，并根据所述附加信息创建块元素，并将所述附加信息写入所述块元素；
对所述画布元素和所述块元素进行排版和堆叠；
显示所述画布元素和所述块元素。
其中，所述图像信息包括图像像素信息和图像尺寸信息。
所述方法还包括：
根据所述图像像素信息将所述图像信息由第一格式转换为第二格式，并根据所述图像尺寸信息将图像信息由所述第二格式转换为第三格式。
其中，所述第一格式为ArrayBuffer对象，所述第二格式为Uint8ClampedArray对象，所述第三格式为ImageData对象。
所述方法还包括：
解析附加信息；
选择一部分所述附加信息转换为可显示的所述附加信息。
本申请的第二方面提供一种网页视频播放装置，包括：
图像处理模块，用于获取图像信息，并根据所述图像信息创建画布元素，并根据所述图像信息绘制所述画布元素中的画布；
信息处理模块，用于获取附加信息，并根据所述附加信息创建块元素，并将所述附加信息写入所述块元素；
层叠样式模块，用于对所述画布元素和所述块元素进行排版和堆叠；
显示模块，用于显示所述画布元素和所述块元素。
其中，所述图像信息包括图像像素信息和图像尺寸信息。
本申请的第三方面提供一种电子设备，包括：
存储器，用于存储计算机程序；
处理器，用于执行所述存储器存储的所述计算机程序，当所述计算机程序被执行时，所述处理器用于执行网页视频播放方法。
本申请的第四方面提供一种计算机可读存储介质，所述计算机可读存储介质包括计算机指令，当所述计算机指令在电子设备上运行时，使得所述电子设备执行网页视频播放方法。
由此，采用本申请实施例提供的网页视频播放方法，用户可以直观地看到所述外部摄像系统拍摄到的视频，以及堆叠在其上的附加信息，从而可以对所述视频中的物件进行取样和瑕疵分析。此外，该方法不会降低视频帧率，也无需配置判决部件，用户可以流畅地看到视频的完整帧数，同时精细而不失真地观看堆叠在视频上的附加信息。
附图说明
图1为本申请一实施例提供的网页视频播放方法的流程图。
图2为图1中通过CSS对HTML中的元素堆叠的示意图。
图3a至图3d为本申请一实施例提供的画布元素显示在所述播放器外围内的示意图。
图4a至图4c为本申请一实施例提供的显示视频画面和附加信息的示意图。
图5为本申请一实施例提供的网页视频播放装置的示意图。
图6为本申请一实施例提供的电子设备的示意图。
主要元件符号说明
网页视频播放装置 100
图像处理模块 10
信息处理模块 40
层叠样式模块 102
显示模块 103
外部摄像系统 200
外部辨识系统 300
电子设备 400
存储器 401
处理器 402
通信总线 403
通信接口 404
控制按钮 501
播放器外围 502
画布元素 503
块元素 504
具体实施方式
如下具体实施方式将结合上述附图进一步说明本申请。
为了能够更清楚地理解本申请的上述目的、特征和优点，下面结合附图和具体实施例对本申请进行详细描述。需要说明的是，在不冲突的情况下，本申请的实施例及实施例中的特征可以相互组合。
在下面的描述中阐述了很多具体细节以便于充分理解本申请，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。
本申请实施例中，“第一”、“第二”等词汇，仅是用于区别不同的对象，不能理解为指示或暗示相对重要性，也不能理解为指示或暗示顺序。例如，第一应用、第二应用等是用于区别不同的应用，而不是用于描述应用的特定顺序，限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个该特征。
除非另有定义，本文所使用的所有的技术和科学术语与属于本申请的技术领域的技术人员通常理解的含义相同。本文中在本申请的说明书中所使用的术语只是为了描述具体的实施例的目的，不是旨在于限制本申请。
请参阅图1，图1所示为本申请一实施例提供的网页视频播放方法的流程图。
本实施例中，所述网页视频播放方法可以应用于电子设备400(图6中示出)。对于需要进行网页视频播放的电子设备，可以直接在电子设备400上集成本申请的方法所提供的网页视频播放的功能，或者以软件开发工具包(Software Development Kit，SDK)的形式运行在电子设备400中。
如图1所示，所述网页视频播放方法可以具体包括以下步骤：
步骤S101：获取图像尺寸。
本实施例中，所述图像为外部摄像系统200(图5中示出)拍摄的视频中的一帧图像，所述尺寸为所述图像的宽度和高度，其中，所述外部摄像系统200用于拍摄需要进行取样和瑕疵标记的物件。
在一实施方式中，所述外部摄像系统200可以是一个或多个摄像机，也可以是一个或多个其他的视频采集设备。
在一实施方式中，本申请的实施例可以通过应用程序接口(ApplicationProgramming Interface，API)从所述外部摄像系统200获取所述图像的所述尺寸。其中，API是一些预先定定义的函数，用于在无需访问源代码的情况下，提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力。举例说明，本申请实施例可以通过API获取所述外部摄像系统200的图像尺寸。
步骤S102：获取图像像素信息。
本实施例中，所述外部摄像系统200通过WebSocket连接方式传输所述图像的像素信息给电子设备400，其中，WebSocket是一种在单个传输控制协议(Transmission ControlProtocol，TCP)连接上进行全双工通信的协议。WebSocket允许服务器主动向客户端推送数据，客户端和服务器之间可以创建持久性的连接，并进行双向数据传输。所述图像的像素信息为所述图像中每个像素点的RGB值和透明度值的集合，其格式为ArrayBuffer对象。其中，ArrayBuffer对象是一段可以存放二进制数据的连续内存区域，其中的数据不能被直接读写，只能通过TypedArray视图或DataView视图对其中的数据进行读写操作。所述TypedArray为一个类型化数组，其定义了一个底层的二进制数据缓冲区(binary databuffer)的一个类数组视图，用于读写ArrayBuffer对象中的数据。DataView为一个底层接口，用于从ArrayBuffer对象中读写多种数值类型。
在一实施方式中，在电子设备400上可以包括一个或多个具有特定名称的控制按钮(图中未示出)，还可以包括一个或多个监控器(图中未示出)，其中，所述特定名称可以事先定义，以用于表示不同的控制功能，所述控制按钮用于控制所述电子设备400的工作状态，所述监控器用于监控所述电子设备400的工作状态。
可选地，本申请的实施例可以在用户点击具有“播放”名称的按钮时，建立与所述外部摄像系统200的WebSocket连接。
可选地，本申请的实施例可以在所述监控器监控到自动播放功能已开启时，建立与所述外部摄像系统200的WebSocket连接。
可选地，本申请的实施例可以在所述监控器监控到网页被切换时，暂停播放，并断开与所述外部摄像系统200的WebSocket连接。
可选地，本申请的实施例可以在所述监控器监控到没有画面显示时，暂停播放，并断开与所述外部摄像系统200的WebSocket连接。
步骤S103：将ArrayBuffer对象转换为Uint8ClampedArray对象。
本实施例中，所述Uint8ClampedArray对象为所述TypedArray视图中的其中一种，其定义了一个一维数组，并采用8位整型格式存储数据，因此，本申请的实施例可以将ArrayBuffer对象转换为Uint8ClampedArray对象，并进行读写操作。
步骤S104：将Uint8ClampedArray对象转换为ImageData对象。
本实施例中，所述ImageData对象用于在网页上绘制图像，其具有array、width、height三个参数，本申请的实施例可以根据array参数中的图像像素数据、width和height参数来确定要在网页上绘制图像的内容、宽度和高度。
将Uint8ClampedArray对象转换为ImageData对象时，array参数为Uint8ClampedArray对象，width和height参数分别为步骤S101中所获取到的所述图像的所述宽度和所述高度。
步骤S105：创建画布元素，并根据所述ImageData对象绘制画布元素中的画布。
在一些实施例中，所述网页视频播放方法还包括以下步骤：
步骤S106：发送连接请求和辨识参数。
本实施例中，所述连接请求为一超文本传输协议请求(HyperText TransferProtocol Request，HTTP Request)，用于建立电子设备400和外部辨识系统300(图5中示出)的网络连接。所述外部辨识系统300用于对步骤S101中的获取到的所述图像进行数据处理，并得到附加信息，所述附加信息为包括所述物件的大小框图和位置坐标的信息。所述辨识参数用于指示所述外部辨识系统300辨识的物件类别和大小。
步骤S107：获取图像附加信息。
本实施例中，所述外部辨识系统300通过服务器发送事件(Server-Sent Events，SSE)传输所述图像的所述附加信息。其中，SSE可以使得所述外部辨识系统300推送数据，并保持与电子设备400的连接，所述外部辨识系统300可以一直发送新的数据。所述附加信息为包括所述物件的大小框图和位置坐标的信息。
电子设备400通过SSE接收到的所述附加信息，其为JS对象简谱(JavaScriptObject Notation，JSON)格式。其中，JSON是一种与开发语言无关的、轻量级的数据存储格式。使用JSON格式传输附加信息，可以减少服务器和客户端的资源占用，降低服务器和客户端的存储数据量。
在一实施方式中，应用所述网页视频播放方式的电子设备400可以包括一个或多个具有特定名称的控制按钮，还可以包括一个或多个监控器，其中，所述特定名称可以事先定义，以用于表示不同的控制功能，所述控制按钮用于控制所述电子设备400的工作状态，所述监控器用于监控所述电子设备400的工作状态。
可选地，本申请的实施例可以在用户点击具有“播放”名称的按钮时，建立与所述外部摄像系统200的SSE连接。
可选地，本申请的实施例可以在所述监控器监控到自动播放功能已开启时，建立与所述外部摄像系统200的SSE连接。
可选地，本申请的实施例可以在所述监控器监控到网页被切换时，暂停播放，并断开与所述外部摄像系统200的SSE连接。
可选地，本申请的实施例可以在所述监控器监控到没有画面显示时，暂停播放，并断开与所述外部摄像系统200的SSE连接。
步骤S108：解析图像附加信息。
本实施例中，当电子设备400获取到包含所述附加信息的JSON时，需要对其进行解析，并转换为JSON对象，以获取其中包含的信息，并在网页上使用此信息。
在一实施方式中，本申请的实施例可以使用JSON解析器解析JSON，也可以调用函数来解析JSON。
步骤S109：选择解析后的一部分附加信息转换为可显示的附加信息。
本实施例中，本申请的实施例可以选择解析后一部分的所述附加信息转换为可显示的所述附加信息。其中，所述一部分的所述附加信息可以包括所述物件的大小框图和位置坐标的信息，所述可显示的所述附加信息为用于在网页上显示的所述附加信息。
在一实施方式中，应用所述网页视频播放方式的电子设备400可以包括一个或多个具有特定名称的控制按钮，其中，所述特定名称可以事先定义，以用于表示不同的控制功能，所述控制按钮用于选择解析后一部分的附加信息，并用于在网页上显示。
可选地，本申请的实施例可以在用户点击具有“显示大小”名称的按钮时，选择将包含所述物件大小框图的附加信息转换为可显示的附加信息，并用于在网页上显示。
可选地，本申请的实施例可以在用户点击具有“不显示”名称的按钮时，不将所述附加信息转换为可显示的附加信息。
步骤S110：创建块元素，并将可显示的附加信息写入块元素。
本实施例中，所述块元素为HTML中的div元素，用于在网页上设置一个区块(block)，并将数据写入所述区块。
步骤S111：对页面排版和元素堆叠。
本实施例中，层叠样式表(Cascading Style Sheets，CSS)可以用于对HTML中的元素进行排版，并用于对HTML中的元素进行堆叠，所述排版的方式可以包括但不限于显示、隐藏、旋转、放大、平移。
可以理解，CSS可以对所述画布元素和所述块元素进行排版和堆叠。所述CSS可以定义HTML元素在网页上的相对位置、大小和堆叠顺序。
HTML中的元素具有z-index属性，用于表示所述元素的堆叠顺序。可以理解，所述CSS可以通过所述z-index属性确定所述元素的堆叠顺序，元素的z-index属性值越大，该元素的堆叠顺序越在上层。举例说明，若要将所述画布元素堆叠在最底层，可以通过CSS在所述画布元素中定义属性z-index为0，而定义其他元素的属性z-index为正整数。
在一实施方式中，应用所述网页视频播放方式的电子设备400可以包括一个或多个具有特定名称的控制按钮、播放器外围和错误信息，其中，所述特定名称可以事先定义，以用于表示不同的控制功能，所述控制按钮用于控制所述CSS对所述HTML中的元素进行排版和堆叠的方式，所述播放器外围为网页视频播放区域的外框，所述错误信息为所述网页视频播放装置在连接错误时接收到的错误图像或错误附加信息。
优选地，所述CSS还可以对所述控制按钮、所述播放器外围和所述错误信息进行排版和堆叠。
步骤S112：显示视频画面和附加信息。
本实施例中，所述视频画面为所述画布元素中的图像，所述附加信息为所述块元素中的内容。
请参阅图2，图2所示为通过CSS对HTML中的元素堆叠的示意图。其中，所述HTML中的元素包括控制按钮501、播放器外围502、画布元素503和块元素504。
当通过CSS对HTML中的元素进行堆叠的顺序分别为：所述控制按钮501、所述播放器外围502，所述块元素504，所述画布元素503时，用户可以直观地看到所述外部摄像系统200拍摄到的视频，以及堆叠在其上的所述附加信息。
请参阅图3a至图3d，图3a至图3d所示为通过CSS对HTML中的元素排版的示意图。其中，所述HTML中的元素包括播放器外围502、画布元素503和块元素504。
如图3a所示，为所述画布元素503正常显示在所述播放器外围502内。
如图3b所示，当用户点击控制按钮501中具有“旋转”名称的按钮时，CSS可以定义所述画布元素503和所述块元素504在所述播放器外围502内旋转显示，旋转方向和角度可以事先定义，也可以使用其他的控制方式定义。
如图3c所示，当用户点击控制按钮501中的具有“放大”名称的按钮时，CSS可以定义所述画布元素503和所述块元素504在所述播放器外围502内放大显示，旋转方向和角度可以事先定义，也可以使用其他的控制方式定义。
如图3d所示，当用户点击控制按钮501中的具有“平移”名称的按钮时，CSS可以定义所述画布元素503和所述块元素504在所述播放器外围502内平移显示，平移的方向和距离可以事先定义，也可以使用其他的控制方式定义。
请参阅图4a至图4c，图4a至图4c为显示视频画面和附加信息的示意图。其中，所述网页视频播放方法被应用于对集成电路芯片的产品取样和瑕疵标记。
图4a所述为视频画面，此时，所述视频画面为所述外部摄像系统200拍摄的集成电路芯片的视频。
图4b所示为附加信息，此时，所述附加信息为所述集成电路芯片的大小外框和位置信息。
图4c所示为通过CSS将所述视频画面和所述附加信息堆叠后的显示示意图。由此，用户可以直观地看到所述外部摄像系统200拍摄到的视频，以及堆叠在其上的附加信息，从而可以对所述视频中的集成电路芯片图像进行裁切，取样和瑕疵分析。
可以理解，当所述视频画面不清晰时，可能需要检查所述外部摄像系统200的镜头是否正确且清晰对焦至所述集成电路芯片。因此，通过本申请提供的网页视频播放方法，可以协助生产人员校正所述外部摄像系统200的镜头。
请参阅图5，图5是本申请一实施例提供的网页视频播放装置100的示意图。
本实施例中，所述网页视频播放装置100可以包括多个由程序代码段所组成的功能模块。所述网页视频播放装置100中的各个程序段的程序代码可以存储于电子设备400的存储器中，并由所述至少一个处理器所执行，以执行网页视频播放的功能。
本实施例中，所述网页视频播放装置100根据其所执行的功能，可以被划分为多个功能模块。所述功能模块可以包括：图像处理模块10、信息处理模块40层叠样式模块102和显示模块103。
本申请中的模块是指一种能够被至少一个处理器所执行并且能够完成固定功能的一系列计算机程序段，其存储在存储器中。在本实施例中，关于各模块的功能将在后续的实施例中详述。
所述图像处理模块10用于获取图像信息，并根据所述图像信息创建画布元素，并根据所述图像信息绘制所述画布元素中的画布；其中，所述图像信息包括图像像素信息和图像尺寸信息。
所述图像处理模块10还用于根据所述图像像素信息将所述图像信息由ArrayBuffer格式转换为Uint8ClampedArray格式，并根据所述图像尺寸信息将图像信息由所述Uint8ClampedArray转换为ImageData格式。
本实施例中，所述图像为外部摄像系统200拍摄的视频中的一帧图像，所述尺寸为所述图像的宽度和高度，其中，所述外部摄像系统200用于拍摄需要进行取样和瑕疵标记的物件。
在一实施方式中，所述外部摄像系统200可以是一个或多个摄像机，也可以是一个或多个其他的视频采集设备。
在一实施方式中，所述图像处理模块10与所述外部摄像系统200通过网络连接，所述图像处理模块10可以通过应用程序接口(Application Programming Interface，API)从所述外部摄像系统200获取所述图像尺寸信息。其中，API是一些预先定定义的函数，用于在无需访问源代码的情况下，提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力。举例说明，可以通过API获取所述外部摄像系统200的所述图像尺寸信息。
本实施例中，所述外部摄像系统200通过WebSocket连接方式传输所述图像的所述像素信息，其中，WebSocket是一种在单个传输控制协议(Transmission ControlProtocol，TCP)连接上进行全双工通信的协议。WebSocket允许服务器主动向客户端推送数据，客户端和服务器之间可以创建持久性的连接，并进行双向数据传输。所述像素信息为所述图像中每个像素点的RGB值和透明度值的集合，其格式为ArrayBuffer对象。其中，ArrayBuffer对象是一段可以存放二进制数据的连续内存区域，其中的数据不能被直接读写，只能通过TypedArray视图或DataView视图对其中的数据进行读写操作。所述TypedArray为一个类型化数组，其定义了一个底层的二进制数据缓冲区(binary databuffer)的一个类数组视图，用于读写ArrayBuffer对象中的数据。DataView为一个底层接口，用于从ArrayBuffer对象中读写多种数值类型。
在一实施方式中，应用所述网页视频播放方式的电子设备400可以包括一个或多个具有特定名称的控制按钮(图中未示出)，还可以包括一个或多个监控器(图中未示出)，其中，所述特定名称可以事先定义，以用于表示不同的控制功能，所述控制按钮用于控制所述电子设备400的工作状态，所述监控器用于监控所述电子设备400的工作状态。举例说明，当用户点击播放按钮时，所述电子设备400可以开始网页视频播放。
可选地，在用户点击播放按钮时，图像处理模块10可以建立与所述外部摄像系统200的WebSocket连接。
可选地，在所述监控器监控到自动播放功能已开启时，图像处理模块10可以建立与所述外部摄像系统200的WebSocket连接。
可选地，在所述监控器监控到网页被切换时，图像处理模块10可以暂停播放，并断开视频同步模块30与所述外部摄像系统200的WebSocket连接。
可选地，在所述监控器监控到没有画面显示时，图像处理模块10可以暂停播放，并断开与所述外部摄像系统200的WebSocket连接。
本实施例中，所述Uint8ClampedArray对象为所述TypedArray视图中的其中一种，其定义了一个一维数组，并采用8位整型格式存储数据，因此，图像处理模块10可以将ArrayBuffer对象转换为Uint8ClampedArray对象，并进行读写操作。
本实施例中，所述ImageData对象用于在网页上绘制图像，其具有array、width、height三个参数，可以根据array参数中的图像像素数据、width和height参数来确定要在网页上绘制图像的内容、宽度和高度。
所述图像处理模块10将Uint8ClampedArray对象转换为ImageData对象时，array参数为Uint8ClampedArray对象，width和height参数分别为所述图像处理模块10所获取到的所述图像的所述宽度和所述高度。
本实施例中，所述画布元素为超文本标记语言(HyperText Markup Language，HTML)中的canvas元素，所述canvas元素用于读取ImageData对象中的图像像素数据，并将其绘制到所述canvas元素中的画布上。举例说明，若ImageData对象中包含一个宽度x高度为100x100像素的红色矩形的像素数据，则所述画布元素可以将一个宽度x高度为100x100像素的红色矩形绘制在画布上。
信息处理模块40，用于获取附加信息，并根据所述附加信息创建块元素，并将所述附加信息写入所述块元素；
所述信息处理模块40还用于解析附加信息，并选择一部分所述附加信息转换为可显示的所述附加信息。
本实施例中，信息处理模块40向所述外部辨识系统300发送一连接请求，所述连接请求为一超文本传输协议请求(HyperText Transfer Protocol Request，HTTP Request)，用于信息处理模块40与外部辨识系统300建立网络连接。所述外部辨识系统300用于对所述图像处理模块10得到的所述图像进行数据处理，并得到附加信息，所述附加信息为包括所述物件的大小框图和位置坐标的信息。所述辨识参数用于指示所述外部辨识系统300辨识的物件类别和大小。
本实施例中，所述外部辨识系统300通过服务器发送事件(Server-Sent Events，SSE)传输所述图像的所述附加信息到信息处理模块40。其中，SSE可以使得所述外部辨识系统300推送数据到信息处理模块40，并保持与信息处理模块40连接，所述外部辨识系统300可以一直发送新的数据到信息处理模块40。所述附加信息为包括所述物件的大小框图和位置坐标的信息。
信息处理模块40通过SSE接收到的所述附加信息，其为JS对象简谱(JavaScriptObject Notation，JSON)格式。其中，JSON是一种与开发语言无关的、轻量级的数据存储格式。使用JSON格式传输附加信息，可以减少服务器和客户端的资源占用，降低服务器和客户端的存储数据量。
在一实施方式中，应用所述网页视频播放方式的电子设备400可以包括一个或多个具有特定名称的控制按钮(图中未示出)，还可以包括一个或多个监控器(图中未示出)，其中，所述特定名称可以事先定义，以用于表示不同的控制功能，所述控制按钮用于控制所述电子设备400的工作状态，所述监控器用于监控所述电子设备400的工作状态。举例说明，当用户点击播放按钮时，所述电子设备400可以开始网页视频播放。
可选地，在用户点击具有“播放”名称的按钮时，信息处理模块40可以建立与所述外部辨识系统300的SSE连接。
可选地，在所述监控器监控到自动播放功能已开启时，信息处理模块40可以建立与所述外部辨识系统300的SSE连接。
可选地，在所述监控器监控到网页被切换时，信息处理模块40可以暂停播放，并断开与所述外部辨识系统300的SSE连接。
可选地，在所述监控器监控到没有画面显示时，信息处理模块40可以暂停播放，并断开与所述外部辨识系统300的SSE连接。
本实施例中，当所述信息处理模块40获取到包含所述附加信息的JSON时，信息处理模块40对其进行解析，并转换为JSON对象，以获取其中包含的信息，并在网页上使用此信息。
在一实施方式中，信息处理模块40可以使用JSON解析器解析JSON，也可以调用函数来解析JSON。
本实施例中，信息处理模块40可以选择解析后一部分的所述附加信息转换为可显示的所述附加信息。其中，所述一部分的所述附加信息可以包括所述物件的大小框图和位置坐标的信息，所述可显示的所述附加信息为用于在网页上显示的所述附加信息。
在一实施方式中，应用所述网页视频播放方式的电子设备400可以包括一个或多个具有特定名称的控制按钮(图中未示出)，其中，所述特定名称可以事先定义，以用于表示不同的控制功能，所述控制按钮用于信息处理模块40选择解析后一部分的附加信息，并用于在网页上显示。
可选地，在用户点击“显示大小”的按钮时，信息处理模块40可以选择将包含所述物件大小框图的附加信息转换为可显示的附加信息，并用于在网页上显示。
可选地，在用户点击“不显示”按钮时，信息处理模块40可以不将所述附加信息转换为可显示的附加信息。
本实施例中，所述块元素为HTML中的div元素，用于在网页上设置一个区块(block)，并将数据写入所述区块。
层叠样式模块102，用于页面排版和元素堆叠。
本实施例中，层叠样式表(Cascading Style Sheets，CSS)用于对HTML中的元素进行排版，并用于对HTML中的元素进行堆叠，所述排版的方式包括但不限于显示、隐藏、旋转、放大、平移。
可以理解，层叠样式模块102可以通过CSS对所述画布元素和所述块元素进行排版和堆叠。所述CSS可以定义HTML元素在网页上的相对位置、大小和堆叠顺序。
HTML中的元素具有z-index属性，用于表示所述元素的堆叠顺序。可以理解，CSS可以通过所述z-index属性确定所述元素的堆叠顺序，元素的z-index属性值越大，该元素的堆叠顺序越在上层。举例说明，若要将所述画布元素堆叠在最底层，可以通过CSS在所述画布元素中定义属性z-index为0，而定义其他元素的属性z-index为正整数。
在一实施方式中，在应用所述网页视频播放方式的网页视频播放装置上还可以包括一个或多个具有特定名称的控制按钮、播放器外围和错误信息(图中未示出)，其中，所述特定名称可以事先定义，以用于表示不同的控制功能，所述控制按钮用于控制所述层叠样式模块102对宿舍HTML中的元素进行排版和堆叠的方式，所述播放器外围为网页视频播放区域的外框，所述错误信息为所述网页视频播放装置在连接错误时接收到的错误图像或错误附加信息。
优选地，所述层叠样式模块102还可以对所述控制按钮、所述播放器外围和所述错误信息进行排版和堆叠。
显示模块103，用于显示视频画面和附加信息。
本实施例中，所述显示模块103显示经过所述层叠样式模块102排版和堆叠后的HTML中的元素。
请参阅图6，图6为本申请实施例提供的电子设备400的结构示意图。
在本申请较佳实施例中，所述电子设备400包括存储器401、至少一个处理器402、至少一条通信总线403及通信接口404。
本领域技术人员应该了解，图6示出的电子设备400的结构并不构成本申请实施例的限定，既可以是总线型结构，也可以是星形结构，所述电子设备400还可以包括比图示更多或更少的其他硬件或者软件，或者不同的部件布置。
在一些实施例中，所述电子设备400是一种能够按照事先设定或存储的指令，自动进行数值计算和/或信息处理的电子设备，其硬件包括但不限于微处理器、专用集成电路、可编程门阵列、数字处理器及嵌入式设备等。所述电子设备400还可包括客户设备，所述客户设备包括但不限于任何一种可与客户通过键盘、鼠标、遥控器、触摸板或声控设备等方式进行人机交互的电子产品，例如，个人计算机、平板电脑、智能手机、数码相机等。
需要说明的是，所述电子设备400仅为举例，其他现有的或今后可能出现的电子产品如可适应于本申请，也应包含在本申请的保护范围以内，并以引用方式包含于此。
在一些实施例中，所述存储器401用于存储程序代码和各种数据，例如安装在所述电子设备400中的网页视频播放装置100，并在电子设备400的运行过程中实现高速、自动地完成程序或数据的存取。所述存储器401包括只读存储器(Read-Only Memory，ROM)、可编程只读存储器(Programmable Read-Only Memory，PROM)、可擦除可编程只读存储器(Erasable Programmable Read-Only Memory，EPROM)、一次可编程只读存储器(One-timeProgrammable Read-Only Memory，OTPROM)、电子擦除式可复写只读存储器(Electrically-Erasable Programmable Read-Only Memory，EEPROM)、只读光盘(CompactDisc Read-Only Memory，CD-ROM)或其他光盘存储器、磁盘存储器、磁带存储器、或者能够用于携带或存储数据的计算机可读的任何其他介质。
在一些实施例中，所述至少一个处理器402可以由集成电路组成，例如可以由单个封装的集成电路所组成，也可以是由多个相同功能或不同功能封装的集成电路所组成，包括一个或者多个中央处理器(Central Processing unit，CPU)、微处理器、数字处理芯片、图形处理器及各种控制芯片的组合等。所述至少一个处理器402是所述电子设备400的控制核心(Control Unit)，利用各种接口和线路连接整个电子设备400的各个部件，通过运行或执行存储在所述存储器401内的程序或者模块，以及调用存储在所述存储器401内的数据，以执行电子设备400的各种功能和处理数据。
在一些实施例中，所述至少一条通信总线403被设置为实现所述存储器401以及所述至少一个处理器402等之间的连接通信。
在一些实施例中，所述通信接口404使用任何收发器一类的装置，用于与其它设备或通信网络通信，如以太网，无线接入网(RAN)，无线局域网(Wireless Local AreaNetworks，WLAN)等。
尽管未示出，所述电子设备400还可以包括给各个部件供电的电源(比如电池)，可选地，电源可以通过电源管理装置与所述至少一个处理器402逻辑相连，从而通过电源管理装置实现管理充电、放电、以及功耗管理等功能。电源还可以包括一个或一个以上的直流或交流电源、再充电装置、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。所述电子设备400还可以包括多种传感器、蓝牙模块等，在此不再赘述。
可以理解，所述实施例仅为说明之用，在专利申请范围上并不受此结构的限制。
上述以软件功能模块的形式实现的集成的单元，可以存储在一个计算机可读取存储介质中。上述软件功能模块存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，电子设备，或者网络设备等)或处理器(processor)执行本申请各个实施例所述方法的部分。
在进一步的实施例中，结合图5，所述至少一个处理器402可执行所述电子设备400的操作装置以及安装的各类应用程序(如所述的网页视频播放装置100)、程序代码等，例如，上述的各个模块。
所述存储器401中存储有程序代码，且所述至少一个处理器402可调用所述存储器401中存储的程序代码以执行相关的功能。例如，图5中所述的各个模块是存储在所述存储器401中的程序代码，并由所述至少一个处理器402所执行，从而实现所述各个模块的功能以达到网页视频播放的目的。
在本申请的一个实施例中，所述存储器401存储多个指令，所述多个指令被所述至少一个处理器402所执行以实现网页视频播放的功能。
具体地，所述至少一个处理器402对上述指令的具体实现方法可参考图1对应实施例中相关步骤的描述，在此不赘述。
在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。
进一步地，所述计算机可读存储介质可以是非易失性，也可以是易失性。
进一步地，所述计算机可读存储介质主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序等；存储数据区可存储根据区块链节点的使用所创建的数据等。
所述作为分离部件说明的模块可以是或者也可以不是物理上分开的，作为模块显示的部件可以是或者也可以不是物理单元，既可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。
另外，在本申请各个实施例中的各功能模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用硬件加软件功能模块的形式实现。
本技术领域的普通技术人员应当认识到，以上的实施方式仅是用来说明本申请，而并非用作为对本申请的限定，只要在本申请的实质精神范围之内，对以上实施例所作的适当改变和变化都落在本申请要求保护的范围之内。

Claims (10)

1.一种网页视频播放方法，其特征在于，包括：
获取图像信息，并根据所述图像信息创建画布元素，并根据所述图像信息绘制所述画布元素中的画布；
获取附加信息，并根据所述附加信息创建块元素，并将所述附加信息写入所述块元素；
对所述画布元素和所述块元素进行排版和堆叠；
显示所述画布元素和所述块元素。
2.如权利要求1所述的网页视频播放方法，其特征在于：
所述图像信息包括图像像素信息和图像尺寸信息。
3.如权利要求2所述的网页视频播放方法，其特征在于，所述方法还包括：
根据所述图像像素信息将所述图像信息由第一格式转换为第二格式。
4.如权利要求3所述的网页视频播放方法，其特征在于，所述方法还包括：
根据所述图像尺寸信息将图像信息由所述第二格式转换为第三格式。
5.如权利要求4所述的网页视频播放方法，其特征在于：
所述第一格式为ArrayBuffer对象，所述第二格式为Uint8ClampedArray对象，所述第三格式为ImageData对象。
6.如权利要求1所述的网页视频播放方法，其特征在于，所述方法还包括：
解析附加信息；
选择一部分所述附加信息转换为可显示的所述附加信息。
7.一种网页视频播放装置，其特征在于，包括：
图像处理模块，用于获取图像信息，并根据所述图像信息创建画布元素，并根据所述图像信息绘制所述画布元素中的画布；
信息处理模块，用于获取附加信息，并根据所述附加信息创建块元素，并将所述附加信息写入所述块元素；
层叠样式模块，用于对所述画布元素和所述块元素进行排版和堆叠；
显示模块，用于显示所述画布元素和所述块元素。
8.如权利要求7所述的网页视频播放装置，其特征在于：
所述图像信息包括图像像素信息和图像尺寸信息。
9.一种电子设备，其特征在于，包括：
存储器，用于存储计算机程序；
处理器，用于执行所述存储器存储的所述计算机程序，当所述计算机程序被执行时，所述处理器用于执行如权利要求1至6任意一项所述的方法。
10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质包括计算机指令，当所述计算机指令在电子设备上运行时，使得所述电子设备执行如权利要求1至6任意一项所述的方法。
CN202110945055.XA 2021-08-17 2021-08-17 网页视频播放方法、装置、电子设备及存储介质 Pending CN115706819A (zh)

Priority Applications (2)

Application Number Priority Date Filing Date Title
CN202110945055.XA CN115706819A (zh) 2021-08-17 2021-08-17 网页视频播放方法、装置、电子设备及存储介质
US17/747,146 US11776186B2 (en) 2021-08-17 2022-05-18 Method for optimizing the image processing of web videos, electronic device, and storage medium applying the method

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110945055.XA CN115706819A (zh) 2021-08-17 2021-08-17 网页视频播放方法、装置、电子设备及存储介质

Publications (1)

Publication Number Publication Date
CN115706819A true CN115706819A (zh) 2023-02-17

Family

ID=85180573

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110945055.XA Pending CN115706819A (zh) 2021-08-17 2021-08-17 网页视频播放方法、装置、电子设备及存储介质

Country Status (2)

Country Link
US (1) US11776186B2 (zh)
CN (1) CN115706819A (zh)

Family Cites Families (17)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6750466B2 (en) * 2001-02-09 2004-06-15 Wintriss Engineering Corporation Web inspection system
US8374383B2 (en) * 2007-03-08 2013-02-12 Microscan Systems, Inc. Systems, devices, and/or methods for managing images
EP2142977A4 (en) * 2007-05-02 2010-05-19 Google Inc USER INTERFACES FOR WEB-BASED VIDEO PLAYER
US8699073B2 (en) 2011-04-08 2014-04-15 Sundaram Natarajan Cloud and HTML based fax and document management system
US9900650B2 (en) * 2013-09-04 2018-02-20 Panasonic Intellectual Property Management Co., Ltd. Video reception device, video recognition method, and additional information display system
US9390506B1 (en) * 2015-05-07 2016-07-12 Aricent Holdings Luxembourg S.A.R.L. Selective object filtering and tracking
CN105204853A (zh) 2015-09-14 2015-12-30 新浪网技术(中国)有限公司 一种网页浏览器的Canvas绘图方法及装置
US20180211373A1 (en) * 2017-01-20 2018-07-26 Aquifi, Inc. Systems and methods for defect detection
US10140690B2 (en) * 2017-02-03 2018-11-27 Harman International Industries, Incorporated System and method for image presentation by a vehicle driver assist module
WO2019067641A1 (en) * 2017-09-26 2019-04-04 Aquifi, Inc. SYSTEMS AND METHODS FOR VISUAL INSPECTION BASED ON INCREASED REALITY
US10692220B2 (en) * 2017-10-18 2020-06-23 International Business Machines Corporation Object classification based on decoupling a background from a foreground of an image
WO2019232111A1 (en) * 2018-06-01 2019-12-05 Cryovac, Llc Image-data-based classification of vacuum seal packages
US20200005422A1 (en) * 2018-06-29 2020-01-02 Photogauge, Inc. System and method for using images for automatic visual inspection with machine learning
US20200349390A1 (en) * 2019-04-30 2020-11-05 General Electric Company Artificial intelligence based annotation framework with active learning for image analytics
US11361454B2 (en) * 2020-02-28 2022-06-14 Wolfspeed, Inc. Alignment for wafer images
US11379972B2 (en) * 2020-06-03 2022-07-05 Applied Materials Israel Ltd. Detecting defects in semiconductor specimens using weak labeling
CN115937059A (zh) * 2021-08-10 2023-04-07 泰连服务有限公司 具有生成式训练模型的零件检查系统

Also Published As

Publication number Publication date
US20230059020A1 (en) 2023-02-23
US11776186B2 (en) 2023-10-03

Similar Documents

Publication Publication Date Title
US20130335640A1 (en) Information processing apparatus and conference system
US20210240773A1 (en) Systems and methods for proactive information discovery with multiple senses
CN108090908B (zh) 图像分割方法、装置、终端及存储介质
JP2009169768A (ja) 情報処理装置及びプログラム
CN107105124A (zh) 用于平台和图像设备之间的通信的协议
CN113051435B (zh) 服务器及媒资打点方法
CN115706819A (zh) 网页视频播放方法、装置、电子设备及存储介质
CN111540443A (zh) 医学影像显示方法和通信终端
CN111326263A (zh) 标注轨迹显示方法、装置、设备及计算机可读存储介质
CN112269886B (zh) 共享图像采集方法、窗口共享方法和共享图像采集装置
CN112738629B (zh) 视频展示方法、装置、电子设备和存储介质
US20230037647A1 (en) Image processing device, image sensor, and image processing device control method
CN111626369B (zh) 一种人脸识别算法效果评估方法、装置、机器可读介质及设备
CN110865911B (zh) 图像测试方法、装置、存储介质、图像采集卡及上位机
US20140063240A1 (en) Systems, apparatuses, and methods for branding and/or advertising through immediate user interaction, social networking, and image sharing
JP2003331301A (ja) 画像処理端末、画像処理方法、画像処理プログラムおよび画像処理プログラムを記録したコンピュータ読取り可能な記録媒体
CN112199997A (zh) 一种终端及工具处理方法
TW202310635A (zh) 網頁視頻播放方法、裝置、電子設備及儲存介質
CN111914583B (zh) 图形码的识别方法、装置以及设备
CN114189741B (zh) 图像处理方法及相关装置
WO2022114180A1 (ja) 動的二次元コード群生成方法及びシステム
WO2021255892A1 (ja) 画像選択装置、携帯端末、画像選択方法、表示制御方法、及びプログラム
US20230386170A1 (en) System and Method to Detect LEDs and Their States in an AR Context
CN109672917B (zh) 视频文件读取分析方法
US20230028497A1 (en) Method for optimizing the image processing of web videos, image processing apparatus applying the method

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