CN117241090A - 一种视频流中目标区域的信息生成方法和装置 - Google Patents

Abstract

本公开提供一种视频流中目标区域的信息生成方法和装置，涉及视频处理技术领域。该方法的具体实施方式包括：方法应用于前端，包括：响应于用户触发的流标识，向后端发起包括流标识的地址获取请求；接收后端返回的视频流地址，访问视频流地址，获取待处理视频流；在待处理视频流上创建多层画布，监听用户的绘制操作，对用户绘制的目标画框进行填充，得到目标区域；根据画布的画布坐标系和视频流坐标系的对应关系，将画布坐标系上的目标区域的坐标信息转换为与视频流坐标系对应的区域信息并发送给后端。该实施方式能够提升绘制的实时性，减少数据传输成本，降低后端资源消耗和计算负担，提高检测效率和检测精度的技术效果。

Description

一种视频流中目标区域的信息生成方法和装置

技术领域

本公开涉及视频处理技术领域，尤其涉及一种视频流中目标区域的信息生成方法和装置。

背景技术

实时视频流可以用于比赛观看、教学、监控、娱乐、直播剪辑、会议、证据固定等各种生活场景。现有的实时视频流用于监控场景下的人形检测时，通常由后端按帧对实时视频流的视频图像进行人形检测，提取检测到的全部人形信息后返回前端进行展示，实现实时视频流的全区域的人形检测。

然而，人形检测的利用通常仅需要视频图像中的特定区域，全域图像的人形检测实质是对后端计算资源的过度消耗，给后端带来极大负担。随着视频数据的激增，实时视频的海量图像全域人形检测消耗的计算成本极高，不仅检测效率低下，而且为了全面覆盖，图像中各个人形特征的检测精度必然随之下降，使得检测的准确度较低，检测效果较差，无法满足实际使用需求。

发明内容

有鉴于此，本公开实施例提供一种视频流中目标区域的信息生成方法和装置，能够解决后端计算资源过度消耗，负担较大、计算成本高、检测效率低下、检测精度和准确度较低、检测效果较差，无法满足实际使用需求的问题。

为实现上述目的，根据本公开的一方面，提供了一种视频流中目标区域的信息生成方法，所述方法应用于前端，包括：

响应于用户触发的流标识，向后端发起包括流标识的地址获取请求；

接收所述后端返回的视频流地址，访问所述视频流地址，获取待处理视频流；

在所述待处理视频流上创建多层画布，监听用户的绘制操作，对用户绘制的目标画框进行填充，得到所述目标区域；

根据所述画布的画布坐标系和视频流坐标系的对应关系，将所述画布坐标系上的目标区域的坐标信息转换为与所述视频流坐标系对应的区域信息并发送给后端，使得所述后端利用所述区域信息对所述目标区域进行人形检测。

根据本公开的另一方面，提供了一种视频流中目标区域的信息生成装置，所述装置应用于前端，包括：

请求模块，用于响应于用户触发的流标识，向后端发起包括流标识的地址获取请求；

访问模块，用于接收所述后端返回的视频流地址，访问所述视频流地址，获取待处理视频流；

绘制模块，用于在所述待处理视频流上创建多层画布，监听用户的绘制操作，对用户绘制的目标画框进行填充，得到所述目标区域；

转换模块，用于根据所述画布的画布坐标系和视频流坐标系的对应关系，将所述画布坐标系上的目标区域的坐标信息转换为与所述视频流坐标系对应的区域信息并发送给后端，使得所述后端利用所述区域信息对所述目标区域进行人形检测。

根据本公开的再一方面，提供了一种电子设备，包括：

处理器；以及

存储程序的存储器，

其中，所述程序包括指令，所述指令在由所述处理器执行时使所述处理器执行所述视频流中目标区域的信息生成方法。

根据本公开实施例的还一个方面，提供了一种存储有计算机指令的非瞬时计算机可读存储介质，其中，所述计算机指令用于使所述计算机执行所述视频流中目标区域的信息生成方法。

本申请实施例中提供的一个或多个技术方案，通过前端的视频提取组件获取实时视频流，绘制组件绘制实时视频流中的填充区域，供用户全屏显示放大查看后进行边界确认，得到最终用户选定的目标区域并保存区域信息，可以实现在线浏览的同时绘制放大展示的目标区域，提升绘制的实时性，减少前后端数据传输的时间和资源成本，大大降低后端资源消耗和计算负担，提高检测效率和检测精度的技术效果。

附图说明

在下面结合附图对于示例性实施例的描述中，本公开的更多细节、特征和优点被公开，在附图中：

图1示出了根据本公开示例性实施例的视频流中目标区域的信息生成方法的流程图；

图2示出了根据本公开示例性实施例的前端的示意图；

图3示出了根据本公开示例性实施例的填充区域的绘制方法的流程图；

图4示出了根据本公开第一示例性实施例的绘制操作的处理方法的流程图；

图5示出了根据本公开第二示例性实施例的绘制操作的处理方法的流程图；

图6示出了根据本公开示例性实施例的目标区域的确定方法的流程图；

图7示出了根据本公开示例性实施例的填充区域的展示尺寸的确定方法的流程图；

图8示出了根据本公开示例性实施例的目标区域在不同坐标系下的信息转换方法的流程图；

图9示出了根据本公开示例性实施例的视频流中目标区域的信息生成装置的示意性框图；

图10示出了能够用于实现本公开的实施例的示例性电子设备的结构框图。

具体实施方式

下面将参照附图更详细地描述本公开的实施例。虽然附图中显示了本公开的某些实施例，然而应当理解的是，本公开可以通过各种形式来实现，而且不应该被解释为限于这里阐述的实施例，相反提供这些实施例是为了更加透彻和完整地理解本公开。应当理解的是，本公开的附图及实施例仅用于示例性作用，并非用于限制本公开的保护范围。

应当理解，本公开的方法实施方式中记载的各个步骤可以按照不同的顺序执行，和/或并行执行。此外，方法实施方式可以包括附加的步骤和/或省略执行示出的步骤。本公开的范围在此方面不受限制。

本文使用的术语“包括”及其变形是开放性包括，即“包括但不限于”。术语“基于”是“至少部分地基于”。术语“在本公开实施例中”表示“至少一个实施例”；术语“另一实施例”表示“至少一个另外的实施例”。其他术语的相关定义将在下文描述中给出。需要注意，本公开中提及的“第一”、“第二”等概念仅用于对不同的装置、模块或单元进行区分，并非用于限定这些装置、模块或单元所执行的功能的顺序或者相互依存关系。

需要注意，本公开中提及的“一个”、“多个”的修饰是示意性而非限制性的，本领域技术人员应当理解，除非在上下文另有明确指出，否则应该理解为“一个或多个”。

本公开实施方式中的多个装置之间所交互的消息或者信息的名称仅用于说明性的目的，而并不是用于对这些消息或信息的范围进行限制。

HTML5：HyperText Markup Language 5，属于构建以及呈现web内容的HTML语言规范，可以将HTML格式的内容转换为用户可识别的形式呈现。

video元素：HTML5中的一种标签，用于在HTML页面中嵌入视频。

canvas元素：HTML5中的一种标签，用于在HTML页面中进行图形操作、绘制图形，可以控制页面中的任一像素，包括路径、矩形、字符等各种绘制方式。

CSS：Cascading Style Sheets，即层叠样式表，一种用于表现HTML格式内容的计算机语言，可以静态修饰网页，或者配合各种脚本语言动态地对各网页元素进行样式设置，排版精度控制至像素级，支持多种字体字号样式。

z-index：是指网页显示中的层叠属性，用于表示网页元素在立体上下层之间的层叠关系。

用户在查看摄像头监控视频时，锁定目标通常是其中的极少数人形特征，而后端的检测算法检测的通常是视频图像中的全部人形特征，在消耗计算资源极大的同时检测精度低下，使得后端性能面临崩溃风险。

通过本公开的视频流中目标区域的信息生成方法，利用前端对实时视频流的视频图像中的目标区域进行框选并放大，并保存区域信息，使得后端算法可以根据区域信息进行特定区域的人形检测，检测到特定区域有人出现时自动生成相关告警信息进行报警，其余区域则不进行检测，大大降低了计算资源的消耗，同时提高了人形特征的检测精度，可以满足各式各样的精准检测需求。

以下参照附图描述本公开的方案。

图1示出了根据本公开示例性实施例的视频流中目标区域的信息生成方法的流程图，如图1所示，本公开的视频流中目标区域的信息生成方法包括如下步骤：

在本公开实施例中，本公开的视频流中目标区域的信息生成方法应用于前端，如图2所示，前端包括视频提取组件、绘制组件、展示组件等，各个组件之间可以互相交互，视频提取组件提取的待处理视频流可以通过展示组件进行展示，以便于用户查看；绘制组件可以在提取的待处理视频流上创建画布，以便于用户在画布上进行绘制；展示组件与绘制组件双向绑定，可以实时展示用户的绘制过程，或者将填充区域全屏放大，以便于用户调整。比如，前端为使用HTML5标准的web前端，视频提取组件为video元素，绘制组件为canvas元素。

步骤S101，响应于用户触发的流标识，向后端发起包括流标识的地址获取请求。

在本公开实施例中，前端存储有各种实时视频流的流标识，用户通过前端触发需要查看的视频流的流标识，前端响应于用户的触发，生成包括流标识的地址获取请求，发送给后端，以获取用户需要查看的视频流的流地址。

步骤S102，接收所述后端返回的视频流地址，访问所述视频流地址，提取待处理视频流。

在本公开实施例中，前端接收到后端响应地址获取请求返回的视频流地址后，将视频流地址加载至视频提取组件，调用视频提取组件访问视频流地址，提取对应的待处理视频流。比如，web前端接收视频流地址后，将视频流地址加载至video元素，调用video元素提取视频流地址对应的待处理视频流。

步骤S103，在所述待处理视频流上创建多层画布，监听用户的绘制操作，对用户绘制的目标画框进行填充，得到所述目标区域。

在本公开实施例中，视频提取组件提取待处理视频流后，前端监听待处理视频流，并根据用户的请求创建多层画布响应用户的绘制操作，绘制用户需要查看的目标视频帧中的填充区域，经过用户查看调整后确定最终的目标区域，以便于后期后端跟踪目标区域进行人形检测，实现目标人脸的活动视频，满足实际使用需求的同时降低后端的资源消耗，提升检测精度和检测效率。

进一步地，如图3所示，本公开的填充区域的绘制方法包括如下步骤：

步骤S301，监听所述待处理视频流的播放事件。

在本公开实施例中，前端监听视频提取组件提取的待处理视频流的播放事件的属性值，判断待处理视频流是否开始播放，比如，web前端监听video元素的play事件。

步骤S302，判断所述播放事件的属性值是否为第一变量，如果是，转至步骤S303；如果否，转至步骤S301。

在本公开实施例中，播放事件的属性值包括第一变量和第二变量，第一变量表示播放，可以用“1”表示；第二变量表示未播放，可以用“0”表示。

进一步地，在待处理视频流的播放事件为第二变量的情况下，前端返回步骤S301继续监听。

步骤S303，监听所述用户触发的绘制请求；其中，所述绘制请求包括目标视频帧。

在本公开实施例中，待处理视频流开始播放后，前端监听用户的绘制请求，接收到绘制请求后，调用绘制组件在目标视频帧上创建画布用于实现目标区域的框选，绘制请求还包括目标视频帧的帧高度、帧宽度、层级属性的属性值等。比如，web前端的canvas元素监听用户的绘制请求。

进一步地，目标区域的绘制过程是在绘制组件创建的画布上进行的，画布又是覆盖于视频帧上的，为了表达画布和视频帧之间的层级关系，引入z-index作为层级属性，通过z-index的属性值确定画布和视频帧之间的层叠关系，用于表示各层之间垂直于二维平面的z轴属性。比如，canvas元素监听的绘制请求包括目标视频帧的z-index的属性值，z-index的属性值为1。

步骤S304，响应于所述绘制请求，在所述待处理视频流上创建投射画布和绘制画布，设置所述投射画布的层级属性的属性值大于所述目标视频帧、且所述绘制画布的层级属性的属性值大于所述投射画布。

在本公开实施例中，绘制组件可以绘制多个画布，一个画布对应一个canvas元素，画布的参数属性包括画布高度、画布宽度、层级属性等，各种参数属性的属性值可以存储于画布对应的画布容器。

进一步地，响应于用户触发的绘制请求，前端调用绘制组件先在目标视频帧上创建投射画布，投射画布的画布高度和画布宽度可以根据实际需要进行选择性设置。投射画布用于复制目标视频帧的画面，投射画布的层级属性的属性值大于目标视频帧的层级属性的属性值，属性值越大代表层级越高、越靠近用户。比如，web前端的canvas元素在待处理视频流之上创建投射画布，设置投射画布的z-index的属性值为2。

更进一步地，在绘制过程中，绘制画布用于接收用户针对目标视频帧的绘制操作以生成对应的目标区域，因此，绘制画布在投射画布之上、更靠近用户，故而前端再调用绘制组件在投射画布之上创建绘制画布，同样地，绘制画布的画布高度和画布宽度可以根据实际需要进行选择性设置，且绘制画布的层级属性的属性值大于投射画布的层级属性的属性值。比如，web前端的canvas元素在投射画布之上创建绘制画布，设置绘制画布的z-index的属性值为3。

步骤S305，将所述目标视频帧复制至所述投射画布。

在本公开实施例中，创建完投射画布和绘制画布后，前端调用绘制组件的拖制函数将目标视频帧复制至投射画布上，利用投射画布的画布容器存储目标视频帧的像素信息，实现目标视频帧在投射画布上的映射。比如，拖制函数为drawImage()，web前端调用canvas元素的drawImage()将目标视频帧映射至投射画布上。

进一步地，随着待处理视频流的播放，前端可以不间断地调用拖制函数复制待处理视频流的视频帧至投射画布，由实现待处理视频流在投射画布上的播放。比如，前端利用动画帧请求函数requestAnimationFrame()不断调用drawImage函数以进行视频画面的不断复制，从而实现视频流在视频投射画布上的播放功能。

步骤S306，调用路径启动函数，在所述绘制画布的画布容器中创建点数组和快照数组。

在本公开实施例中，点数组用于存储绘制操作的各个操作点的点信息，包括点的x坐标、y坐标、半径、颜色、拖拽标志、绘制时间等。将目标视频帧复制至投射画布后，前端调用绘制画布的路径启动函数，用于记录用户的整个绘制操作过程，同时，响应于用户的绘制操作，前端在绘制画布的画布容器中创建点数组，用于存储用户绘制的点信息。比如，web前端调用canvas元素的beginPath()函数，开始记录用户的绘制操作，同时，在绘制画布的画布容器中创建点类Point，用于记录用户绘制的点信息。

进一步地，快照数组用于存储绘制操作的各个操作点的绘制快照的快照数据，绘制快照可以是截图生成的。比如，web前端在绘制画布的画布容器中创建快照数组Arr。

步骤S307，监听所述用户在所述绘制画布上触发的绘制操作，根据所述绘制操作的操作类型，利用所述点数组或者所述快照数组，生成所述目标画框。

步骤S3071，判断所述绘制操作的操作类型是否为撤销事件，如果是，转至步骤S3072；如果否，转至步骤S3073。

在本公开实施例中，绘制操作的操作类型包括鼠标点击事件、鼠标移动事件、鼠标抬起事件、撤销事件和确认事件，根据鼠标点击事件、鼠标移动事件、鼠标抬起事件绘制用户需要查看的目标画框；对于用户画错或者存在撤销绘制操作需求等情况，提供不同的容错处理方法供用户选择，对画错的点进行容错处理。其中，各种事件的监听可以利用钩子函数实现。

进一步地，绘制画布包括撤销按钮，撤销按钮可以设置于绘制画布的左上角、左下角、右上角、右下角等不影响用户进行绘制操作的位置。撤销事件可以是用户通过触控绘制画布的撤销按钮发起的。

在本公开实施例中，在绘制操作的操作类型为鼠标移动事件、鼠标抬起事件的情况下，继续对用户的绘制操作进行监听。或者，

在鼠标点击事件的操作点与点数组中的任一操作点的距离差值大于差值阈值的情况下，表示用户在绘制新的操作点，继续对用户的绘制操作进行监听。

步骤S3072，响应于所述撤销事件，查找并删除所述绘制画布的快照数组中最近一次保存的绘制快照。

在本公开实施例中，由于绘制画布会对用户每一次的鼠标点击事件绘制的画点进行快照拍摄和保存，因此，在绘制操作的操作类型为撤销事件的情况下，表示用户存在撤销上一次绘制操作的需求，响应于用户触发的撤销事件，前端调用绘制画布的释放函数，从画布容器的快照数组中查找最近一次保存的绘制快照并释放，将存在撤销需求的绘制操作的绘制快照删除，实现存在撤销需求的容错处理。比如，释放函数为putImageData()，响应于用户触发的撤销事件，前端调用绘制画布的putImageData()函数，从画布容器的快照数组Arr中查找最近一次保存的绘制快照，并将最近一次保存的绘制快照从快照数组Arr中释放。

进一步地，利用释放函数响应用户的撤销事件，将最近一次保存的绘制快照删除，即可实现存在撤销需求的容错处理，保证目标区域的准确性，提高目标区域绘制的灵活性。

更进一步地，还包括：将所述点数组中与所述撤销事件对应的操作点的点信息删除。

步骤S3073，判断所述绘制操作的操作类型是否为鼠标点击事件，如果是，转至步骤S3074；如果否，转至步骤S3071。

在本公开实施例中，在绘制操作的操作类型非撤销事件的情况下，前端继续对鼠标点击事件是否是用户画错的情况进行判断。

步骤S3074，将所述鼠标点击事件的操作点的点信息存储至所述点数组，并调用快照获取函数生成所述绘制画布的绘制快照，将所述绘制快照存储至所述快照数组。

在本公开实施例中，针对每一个鼠标点击事件，前端存储对应的操作点的点信息和绘制画布的绘制快照。比如，web前端调用canvas元素的点获取函数getPointData()和快照获取函数getImageData()，获取与鼠标点击事件对应的操作点的点信息和绘制画布的绘制快照，并分别存储至点数组和快照数组，其中，绘制快照中包括了鼠标点击事件绘制的操作点。

步骤S3075，遍历所述点数组，判断所述鼠标点击事件的操作点与所述点数组中的任一操作点的距离差值是否小于等于预设的差值阈值，如果是，转至步骤S3076；如果否，转至步骤S3071。

在本公开实施例中，在绘制操作的操作类型为鼠标点击事件的情况下，前端将鼠标点击事件的操作点与点数组中已有的操作点进行逐个对比，判断鼠标点击事件的操作点是否与已有的操作点相同，从而确定是否存在用户画错的情况，实现用户画错的容错处理。其中，距离差值的确定方式可以利用操作点之间的坐标差，根据勾股定理确定。

步骤S3076，将所述点数组中与所述鼠标点击事件的操作点对应的拖拽标志修改为可拖拽，并删除所述快照数组中、与所述鼠标点击事件的操作点的距离差值小于等于所述差值阈值的操作点对应的绘制快照。

在本公开实施例中，拖拽标志的属性值包括可拖拽和不可拖拽，默认值为不可拖拽。在鼠标点击事件的操作点与点数组中的任一操作点的距离差值小于等于差值阈值的情况下，表示用户在对已有的操作点进行操作，也即，用户画错且需要对画错的操作点进行纠正，故而将点数组中已有的、与鼠标点击事件的操作点的距离差值小于等于差值阈值的操作点的拖拽标志的属性值修改为可拖拽，使得用户可以将画错的操作点拖拽至新的位置。

进一步地，将点数组中已有的、与鼠标点击事件的操作点的距离差值小于等于差值阈值的操作点的x坐标、y坐标、颜色、半径、创建时间修改为鼠标点击事件的操作点对应的x坐标、y坐标、颜色、半径、创建时间。

在本公开实施例中，由于鼠标点击事件的操作点已被拖拽至新的位置，故而需要将绘制快照中的旧快照删除，防止错误数据干扰目标画框生成的准确性，也即，在鼠标点击事件的操作点与点数组中的任一操作点的距离差值小于等于差值阈值的情况下，删除快照数组中已有的、与鼠标点击事件的操作点的距离差值小于等于差值阈值的操作点的绘制快照。

步骤S3077，响应于用户的确认事件，根据更新后的点数组或者快照数组，利用绘制函数对所述绘制操作进行处理，生成所述目标画框。

在本公开实施例中，绘制画布还包括确认按钮，确认按钮可以设置于绘制画布的左上角、左下角、右上角、右下角等不影响用户进行绘制操作的位置。确认请求可以是用户通过触控绘制画布的确认按钮发起的。其中，目标画框的形状可以是规则的正方形、长方形、多边形等规则形状，也可以是随机的不规则形状。在用户确认绘制完成后，根据确认后的点数组或者快照数组，绘制用户需要查看的目标画框。

进一步地，如图4所示，本公开第一实施例的绘制操作的处理方法包括如下步骤：

在本公开实施例中，本公开第一实施例的绘制操作的处理方法用于点数组的目标画框的生成。

步骤S401，调用移动函数，追踪点数组的各个操作点的事件顺序。

在本公开实施例中，比如，web前端调用canvas元素的移动函数moveTo()追踪各个操作点发生的事件顺序。

步骤S402，按照所述事件顺序，调用连线函数将每连续两个操作点自动连线。

在本公开实施例中，比如，web前端调用canvas元素的连线函数lineTo()，按照操作点发生的事件顺序，将操作点之间自动连线。

步骤S403，响应于所述确认事件，由各条所述自动连线得到所述目标画框。

步骤S4031，判断在所述确认事件之前的绘制画布上的最后一个操作点的拖拽标志是否为可拖拽，如果是，转至步骤S4032；如果否，转至步骤S4033。

步骤S4032，得到由所述确认事件之前的全部自动连线围成的所述目标画框。

步骤S4033，调用所述连线函数将所述最后一个操作点与所述第一个操作点自动连线，与所述确认事件之前的自动连线组合围成所述目标画框。

在本公开实施例中，通过本公开第一实施例的绘制操作的处理方法，根据点数组中的各个操作点的点信息，按照事件顺序，利用绘制画布的移动、连线等函数将用户绘制的操作点自动连线后围成目标画框，得到用户需要查看的框选区域，从而后续可以降低后端的检测成本，提高检测精度。

或者，如图5所示，本公开第二实施例的绘制操作的处理方法包括如下步骤：

在本公开实施例中，本公开第二实施例的绘制操作的处理方法用于快照数组的目标画框的生成。

步骤S501，调用移动函数，定位所述快照数组中各张绘制快照中的操作点的坐标。

在本公开实施例中，比如，web前端调用canvas元素的移动函数moveTo()定位各张绘制快照中的操作点的x坐标和y坐标。

步骤S502，根据所述绘制快照的生成时间和所述绘制快照中操作点的坐标，调用连线函数将每连续两张绘制快照中的操作点自动连线。

在本公开实施例中，比如，web前端调用canvas元素的连线函数lineTo()，根据绘制快照的生成事件，将每连续两张绘制快照中的操作点自动连线。

步骤S503，响应于所述确认事件，由各条所述自动连线得到所述目标画框。

步骤S5031，判断所述绘制快照的各个操作点的自动连线是否封闭，如果是，转至步骤S5032；如果否，转至步骤S5033。

步骤S5032，将封闭的自动连线围成的线框作为所述目标画框。

步骤S5033，调用所述连线函数将所述最后一个操作点与所述第一个操作点自动连线，与其余的操作点之间的自动连线组合围成所述目标画框。

在本公开实施例中，通过本公开第二实施例的绘制操作的处理方法，定位快照数组中的各张绘制快照中的操作点，按照事件顺序，利用绘制画布的移动、连线等函数将用户绘制的操作点自动连线后围成目标画框，得到用户需要查看的框选区域，从而后续可以降低后端的检测成本，提高检测精度。

步骤S308，填充所述目标画框，得到填充区域并渲染。

在本公开实施例中，前端调用绘制组件的填充函数，将目标画框填充为目标颜色，形成封闭的填充区域，目标颜色可以根据展示需要进行选择性设置，比如，目标颜色为半透明颜色，web前端调用canvas元素的填充函数fill()将目标画框填充为半透明颜色并渲染。

在本公开实施例中，确定填充区域后，由用户核实，判断是否需要扩充、缩小或者调整填充区域的形状，以确定最终的目标区域，实现精准满足使用需求的同时不浪费后端的计算资源，提升绘制精度和用户满意度，如图6所示，本公开的目标区域的确定方法包括如下步骤：

步骤S601，调用全屏函数，展示所述填充区域。

步骤S6011，修改所述投射画布和所述绘制画布的层级属性，设置所述投射画布的层级属性的属性值大于所述绘制画布的层级属性的属性值。

在本公开实施例中，为了方便查看，需要对投射画布和绘制画布的层级关系进行调整，将投射画布覆盖于绘制画布之上，使得绘制画布的层级属性的属性值大于投射画布的层级属性的属性值，投射画布的层级属性的属性值大于待处理视频流的层级属性的属性值。比如，web前端设置投射画布的z-index的属性值为3、绘制画布的z-index的属性值为2。

步骤S6012，根据所述填充区域的各个边界点坐标的上下限，计算所述填充区域的展示尺寸。

在本公开实施例中，由于不规则的填充区域在全屏展示时可能出现比例不协调、拉伸变形等情况，因此，为了防止不规则形状的直接展示对视觉观感效果的限制，根据填充区域各个操作点的坐标范围，对填充区域进行适应投射画布尺寸的等比例放大，以保证目标区域的观看效果，如图7所示，本公开的填充区域的展示尺寸的确定方法包括如下步骤：

步骤S701，根据所述绘制画布的画布宽度和画布高度，计算所述绘制画布的宽高比。

在本公开实施例中，根据绘制画布的画布宽度和画布高度之比，确定绘制画布的宽高比。比如，绘制画布的宽高比为canvasRatio。

步骤S702，遍历所述填充区域的各个边界点，根据所述边界点的坐标的上下限围成的矩形，确定界限标定框。

在本公开实施例中，利用前端数据框架的展示页面和各个页面元素的数据值之间的数据双向绑定原理，前端获取填充区域各个边界点的x坐标和y坐标，根据x坐标的最大值、x坐标的最小值、y坐标的最大值和y坐标的最小值，生成对应的矩形的界限标定框。

进一步地，边界点坐标的上下限采集函数可以是reduce()函数，比如，web前端调用reduce()函数遍历填充区域的各个边界点，得到x坐标的最大值、x坐标的最小值、y坐标的最大值和y坐标的最小值。

步骤S703，根据所述上下限的差值之比，计算所述界限标定框的宽高比。

在本公开实施例中，根据x坐标的最大值和最小值的第一差值与y坐标的最大值和最小值的第二差值之比，确定界限标定框的宽高比。比如，界限标定框的宽高比为boxRatio。

步骤S704，判断所述界限标定框的宽高比是否大于所述绘制画布的宽高比，如果是，转至步骤S705；如果否，转至步骤S706。

步骤S705，将所述画布宽度作为所述展示尺寸的宽度，利用所述画布宽度与所述界限标定框的宽高比的比值，确定所述展示尺寸的高度。

在本公开实施例中，在界限标定框的宽高比大于绘制画布的宽高比的情况下，以绘制画布的画布宽度为基准，确定绘制画布的画布宽度为展示尺寸的宽度；并且，计算画布宽度与界限标定框的宽高比的比值，得到展示尺寸的高度。

步骤S706，将所述画布高度作为所述展示尺寸的高度，利用所述画布高度和所述界限标定框的宽高比的乘积，确定所述展示尺寸的宽度。

在本公开实施例中，在界限标定框的宽高比不大于绘制画布的宽高比的情况下，以绘制画布的画布高度为基准，确定绘制画布的画布高度为展示尺寸的高度；并且，计算画布高度和界限标定框的宽高比的乘积，确定展示尺寸的宽度。

在本公开实施例中，通过本公开的填充区域的展示尺寸的确定方法，按照填充区域的坐标上下限，形成对应的矩形的界限标定框，与绘制画布的宽高比进行对比以确定全屏展示的填充区域的展示尺寸，以提升填充区域的观看效果，进而使得用户更准确地调整目标区域，实现目标区域的精准标定，提升检测效率和检测精确度。

步骤S6013，按照所述展示尺寸，通过所述投射画布对所述填充区域进行全屏展示。

在本公开实施例中，前端调用全屏函数，按照展示尺寸将填充区域在投射画布上进行全屏展示，用户可以观看框选的填充区域的视频画面，对填充区域是否满足查看需求进行调整。比如，web前端调用全屏函数requestFullscreen()，按照展示尺寸展示填充区域。需要说明的是，由于不规则形状的限制，填充区域按展示尺寸展示时，可能无法填充整个投射画布，使得投射画布存在纯色背景的空白区，纯色背景的颜色可以根据需要进行选择性设置。

步骤S602，响应于用户触发的关闭事件，关闭所述全屏展示，复原所述投射画布和所述绘制画布的层级属性。

在本公开实施例中，投射画布包括关闭按钮，关闭按钮可以设置于绘制画布的左上角、左下角、右上角、右下角等不影响用户进行绘制操作的位置。关闭事件可以是用户通过触控投射画布的撤销按钮发起的，响应于关闭事件，前端调用关闭函数退出全屏。比如，web前端调用关闭函数exitFullscreen()退出全屏展示。

或者，关闭事件可以是用户敲击键盘左上角的“Esc”键触发的。

或者，关闭事件可以是用户点击鼠标右键触发的。

退出全屏时，页面也需要进行监听该退出全屏的操作，在页面中监听fullscreenchange事件，识别到退出全屏的操作时，重新恢复最开始的层级逻辑，即视频流<视频投射画布CA1<绘制画布CA2，使得用户可以再次在绘制画布CA1上进行画面绘制；

进一步地，全屏展示关闭后，前端复原投射画布和绘制画布的层级属性，将绘制画布覆盖于投射画布之上，以接收用户的调整操作。

步骤S603，判断用户是否发起调整请求，如果是，转至步骤S605；如果否，转至步骤S604。

步骤S604，确定所述填充区域为所述目标区域。

在本公开实施例中，在用户未发起调整请求的情况下，表示全屏展示满足用户的查看需求，直接将填充区域作为目标区域即可。

步骤S605，按照所述用户的调整操作，重生成所述目标区域。

在本公开实施例中，在用户发起调整请求的情况下，表示全屏展示不满足用户的查看需求，需要对填充区域进行调整，故而根据用户的调整操作，按照本公开的填充区域的绘制方法更新点数组和快照数组，进而更新填充区域；再根据步骤S601-步骤S603，通过全屏展示填充区域使得用户进行区域边界确认，如此反复，直至确定最终的目标区域为止。

在本公开实施例中，通过本公开的目标区域的确定方法，根据填充区域的边界点坐标的上下限确定展示尺寸，按照展示尺寸全屏展示后，判断是否满足用户需求，并根据用户的调整请求确定最终的目标区域，以实现用户需求的精准划定，进而提升后端的检测效率和检测精度。

步骤S104，根据所述画布的画布坐标系和视频流坐标系的对应关系，将所述画布坐标系上的目标区域的坐标信息转换为与所述视频流坐标系对应的区域信息并发送给后端，使得所述后端利用所述区域信息对所述目标区域进行人形检测。

在本公开实施例中，根据绘制画布的绘制画布坐标系和视频流坐标系的对应关系，将绘制画布的目标区域转换至视频流坐标系下，得到视频流坐标系下的目标区域的区域信息，后端利用区域信息确定对应的检测区域，即可进行人形检测。其中，区域信息的格式可以是html格式，从而后续利用过程中后端可以直接双击打开，实现视频流中人形的实时追踪。

进一步地，如图8所示，本公开的目标区域在不同坐标系下的信息转换方法包括如下步骤：

步骤S801，根据所述待处理视频流的视频帧的帧高度与所述绘制画布的画布高度的比值，计算高度换算比。

步骤S802，根据所述待处理视频流的视频帧的帧宽度与所述绘制画布的画布宽度的比值，计算宽度换算比。

步骤S803，将所述绘制画布中目标区域的各个画布点的y坐标与所述高度换算比的乘积，作为所述待处理视频流的区域信息中对应区域点的y坐标。

步骤S804，将所述绘制画布中目标区域的各个画布点的x坐标与所述宽度换算比的乘积，作为所述待处理视频流的区域信息中对应区域点的x坐标。

步骤S805，组合所述区域点的y坐标和x坐标，得到所述目标区域在所述视频流坐标系下的区域信息。

在本公开实施例中，通过本公开的目标区域在不同坐标系下的信息转换方法，将绘制画布上目标区域的各个画布点转换为视频流坐标系下对应的区域点，得到视频流坐标系下目标区域的各个区域点对应的坐标等信息，发送给后端保存后，后端即可提取区域信息进行精准检测，提高检测效率和检测精度。

在本公开实施例中，通过本公开的视频流中目标区域的信息生成方法，利用前端直接进行实时视频流的目标区域框选绘制，并全屏放大展示供用户进行边界确定，且支持容错处理，可以在有效减少前后端之间数据网络传输耗时的同时，满足实际生产中的视频流利用需求，降低后端的计算和资源负担，使用便利，直接双击打开或者利用在线服务器即可部署查看，提升检测效率和检测精度。

图9是根据本公开实施例的视频流中目标区域的信息生成装置的主要模块的示意图，如图9所示，本公开的视频流中目标区域的信息生成装置900包括：

请求模块901，用于响应于用户触发的流标识，向后端发起包括流标识的地址获取请求。

访问模块902，用于接收所述后端返回的视频流地址，访问所述视频流地址，获取待处理视频流。

绘制模块903，用于在所述待处理视频流上创建多层画布，监听用户的绘制操作，对用户绘制的目标画框进行填充，得到所述目标区域。

转换模块904，用于根据所述画布的画布坐标系和视频流坐标系的对应关系，将所述画布坐标系上的目标区域的坐标信息转换为与所述视频流坐标系对应的区域信息并发送给后端，使得所述后端利用所述区域信息对所述目标区域进行人形检测。

本公开示例性实施例还提供一种电子设备，包括：至少一个处理器；以及与至少一个处理器通信连接的存储器。所述存储器存储有能够被所述至少一个处理器执行的计算机程序，所述计算机程序在被所述至少一个处理器执行时用于使所述电子设备执行根据本公开实施例的方法。

本公开示例性实施例还提供一种存储有计算机程序的非瞬时计算机可读存储介质，其中，所述计算机程序在被计算机的处理器执行时用于使所述计算机执行根据本公开实施例的方法。

本公开示例性实施例还提供一种计算机程序产品，包括计算机程序，其中，所述计算机程序在被计算机的处理器执行时用于使所述计算机执行根据本公开实施例的方法。

参考图10，现将描述可以作为本公开的服务器或客户端的电子设备1000的结构框图，其是可以应用于本公开的各方面的硬件设备的示例。电子设备旨在表示各种形式的数字电子的计算机设备，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本公开的实现。

如图10所示，电子设备1000包括计算单元1001，其可以根据存储在只读存储器（ROM）1002中的计算机程序或者从存储单元1008加载到随机访问存储器（RAM）1003中的计算机程序，来执行各种适当的动作和处理。在RAM1003中，还可存储设备1000操作所需的各种程序和数据。计算单元1001、ROM1002以及RAM1003通过总线1004彼此相连。输入/输出（I/O）接口1005也连接至总线1004。

电子设备1000中的多个部件连接至I/O接口1005，包括：输入单元1006、输出单元1007、存储单元1008以及通信单元1009。输入单元1006可以是能向电子设备1000输入信息的任何类型的设备，输入单元1006可以接收输入的数字或字符信息，以及产生与电子设备的用户设置和/或功能控制有关的键信号输入。输出单元1007可以是能呈现信息的任何类型的设备，并且可以包括但不限于显示器、扬声器、视频/音频输出终端、振动器和/或打印机。存储单元1004可以包括但不限于磁盘、光盘。通信单元1009允许电子设备1000通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据，并且可以包括但不限于调制解调器、网卡、红外通信设备、无线通信收发机和/或芯片组，例如蓝牙TM设备、WiFi设备、WiMa10设备、蜂窝通信设备和/或类似物。

计算单元1001可以是各种具有处理和计算能力的通用和/或专用处理组件。计算单元1001的一些示例包括但不限于中央处理单元（CPU）、图形处理单元（GPU）、各种专用的人工智能（AI）计算芯片、各种运行机器学习模型算法的计算单元、数字信号处理器（DSP）、以及任何适当的处理器、控制器、微控制器等。计算单元1001执行上文所描述的各个方法和处理。例如，在一些实施例中，图1、图3至图8的方法可被实现为计算机软件程序，其被有形地包含于机器可读介质，例如存储单元1008。在一些实施例中，计算机程序的部分或者全部可以经由ROM1002和/或通信单元1009而被载入和/或安装到电子设备1000上。在一些实施例中，计算单元1001可以通过其他任何适当的方式（例如，借助于固件）而被配置为执行图1、图3至图8的方法。

用于实施本公开的方法的程序代码可以采用一个或多个编程语言的任何组合来编写。这些程序代码可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器或控制器，使得程序代码当由处理器或控制器执行时使流程图和/或框图中所规定的功能/操作被实施。程序代码可以完全在机器上执行、部分地在机器上执行，作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。

在本公开的上下文中，机器可读介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器（RAM）、只读存储器（ROM）、可擦除可编程只读存储器（EPROM或快闪存储器）、光纤、便捷式紧凑盘只读存储器（CD-ROM）、光学储存设备、磁储存设备、或上述内容的任何合适组合。

如本公开使用的，术语“机器可读介质”和“计算机可读介质”指的是用于将机器指令和/或数据提供给可编程处理器的任何计算机程序产品、设备、和/或装置（例如，磁盘、光盘、存储器、可编程逻辑装置（PLD）），包括，接收作为机器可读信号的机器指令的机器可读介质。术语“机器可读信号”指的是用于将机器指令和/或数据提供给可编程处理器的任何信号。

为了提供与用户的交互，可以在计算机上实施此处描述的系统和技术，该计算机具有：用于向用户显示信息的显示装置（例如，CRT（阴极射线管）或者LCD（液晶显示器）监视器）；以及键盘和指向装置（例如，鼠标或者轨迹球），用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈（例如，视觉反馈、听觉反馈、或者触觉反馈）；并且可以用任何形式（包括声输入、语音输入或者、触觉输入）来接收来自用户的输入。

可以将此处描述的系统和技术实施在包括后台部件的计算系统（例如，作为数据服务器）、或者包括中间件部件的计算系统（例如，应用服务器）、或者包括前端部件的计算系统（例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互）、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信（例如，通信网络）来将系统的部件相互连接。通信网络的示例包括：局域网（LAN）、广域网（WAN）和互联网。

计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。

Claims (12)

1.一种视频流中目标区域的信息生成方法，其特征在于，所述方法应用于前端，包括：

响应于用户触发的流标识，向后端发起包括流标识的地址获取请求；

接收所述后端返回的视频流地址，访问所述视频流地址，获取待处理视频流；

在所述待处理视频流上创建多层画布，监听用户的绘制操作，对用户绘制的目标画框进行填充，得到所述目标区域；

根据所述画布的画布坐标系和视频流坐标系的对应关系，将所述画布坐标系上的目标区域的坐标信息转换为与所述视频流坐标系对应的区域信息并发送给后端，使得所述后端利用所述区域信息对所述目标区域进行人形检测。

2.如权利要求1所述的信息生成方法，其特征在于，所述在所述待处理视频流上创建多层画布，监听用户的绘制操作，对用户绘制的目标画框进行填充，包括：

监听用户触发的绘制请求；其中，所述绘制请求包括目标视频帧；

响应于所述绘制请求，在所述待处理视频流上创建投射画布和绘制画布，设置所述投射画布的层级属性的属性值大于所述目标视频帧、且所述绘制画布的层级属性的属性值大于所述投射画布，将所述目标视频帧复制至所述投射画布；

调用路径启动函数，在所述绘制画布的画布容器中创建点数组和快照数组；

监听所述用户在所述绘制画布上触发的绘制操作，根据所述绘制操作的操作类型，利用所述点数组或者所述快照数组，生成所述目标画框。

3.如权利要求2所述的信息生成方法，其特征在于，所述绘制操作的操作类型包括鼠标点击事件、撤销事件和确认事件；所述根据所述绘制操作的操作类型，利用所述点数组或者所述快照数组，生成所述目标画框，包括：

在所述绘制操作的操作类型为鼠标点击事件的情况下，将所述鼠标点击事件的操作点的点信息存储至所述点数组，并调用快照获取函数生成所述绘制画布的绘制快照，将所述绘制快照存储至所述快照数组；

遍历所述点数组，判断所述鼠标点击事件的操作点与所述点数组中的任一操作点的距离差值是否小于等于预设的差值阈值；

在所述距离差值小于等于所述差值阈值的情况下，将所述点数组中与所述鼠标点击事件的操作点对应的拖拽标志修改为可拖拽，并删除所述快照数组中、与所述鼠标点击事件的操作点的距离差值小于等于所述差值阈值的操作点对应的绘制快照；

响应于用户的确认事件，根据更新后的点数组或者快照数组，利用绘制函数对所述绘制操作进行处理，生成所述目标画框。

4.如权利要求3所述的信息生成方法，其特征在于，还包括：

判断所述绘制操作的操作类型是否为撤销事件，在所述绘制操作的操作类型为撤销事件的情况下，响应于所述撤销事件，查找并删除所述绘制画布的快照数组中最近一次保存的绘制快照。

5.如权利要求3或4所述的信息生成方法，其特征在于，所述根据更新后的点数组或者快照数组，利用绘制函数对所述绘制操作进行处理，生成所述目标画框，包括：

调用移动函数，追踪点数组的各个操作点的事件顺序；

按照所述事件顺序，调用连线函数将每连续两个操作点自动连线；

响应于所述确认事件，由各条所述自动连线得到所述目标画框；

或者，

调用移动函数，定位所述快照数组中各张绘制快照中的操作点的坐标；

根据所述绘制快照的生成时间和所述绘制快照中操作点的坐标，调用连线函数将每连续两张绘制快照中的操作点自动连线；

响应于所述确认事件，由各条所述自动连线得到所述目标画框。

6.如权利要求5所述的信息生成方法，其特征在于，所述由各条所述自动连线得到所述目标画框，包括：

判断在所述确认事件之前的绘制画布上的最后一个操作点的拖拽标志是否为可拖拽；

在所述最后一个操作点的拖拽标志为可拖拽的情况下，得到由所述确认事件之前的全部自动连线围成的所述目标画框；在所述最后一个操作点的拖拽标志非可拖拽的情况下，调用所述连线函数将所述最后一个操作点与第一个操作点自动连线，与所述确认事件之前的自动连线组合围成所述目标画框；

或者，

判断所述绘制快照的各个操作点的自动连线是否封闭；

在所述绘制快照的各个操作点的自动连线封闭的情况下，将封闭的自动连线围成的线框作为所述目标画框；在所述绘制快照的各个操作点的自动连线未封闭的情况下，调用所述连线函数将所述最后一个操作点与所述第一个操作点自动连线，与其余的操作点之间的自动连线组合围成所述目标画框。

7.如权利要求2所述的信息生成方法，其特征在于，所述对用户绘制的目标画框进行填充，得到所述目标区域，包括：

填充所述目标画框，得到填充区域，并调用全屏函数，展示所述填充区域；

响应于用户触发的关闭事件，关闭全屏展示，复原所述投射画布和所述绘制画布的层级属性；

判断用户是否发起调整请求，在未发起调整请求的情况下，确定所述填充区域为所述目标区域；在发起调整请求的情况下，按照所述用户的调整操作，重生成所述目标区域。

8.如权利要求7所述的信息生成方法，其特征在于，所述调用全屏函数，展示所述填充区域，包括：

修改所述投射画布和所述绘制画布的层级属性，设置所述投射画布的层级属性的属性值大于所述绘制画布的层级属性的属性值；

根据所述填充区域的各个边界点坐标的上下限，计算所述填充区域的展示尺寸；

按照所述展示尺寸，通过所述投射画布对所述填充区域进行全屏展示。

9.如权利要求8所述的信息生成方法，其特征在于，所述根据所述填充区域的各个边界点坐标的上下限，计算所述填充区域的展示尺寸，包括：

根据所述绘制画布的画布宽度和画布高度，计算所述绘制画布的宽高比；

遍历所述填充区域的各个边界点，根据所述边界点的坐标的上下限围成的矩形，确定界限标定框；

根据所述上下限的差值之比，计算所述界限标定框的宽高比；

在界限标定框的宽高比大于所述绘制画布的宽高比的情况下，将所述画布宽度作为所述展示尺寸的宽度，利用所述画布宽度与所述界限标定框的宽高比的比值，确定所述展示尺寸的高度；在界限标定框的宽高比不大于所述绘制画布的宽高比的情况下，将所述画布高度作为所述展示尺寸的高度，利用所述画布高度和所述界限标定框的宽高比的乘积，确定所述展示尺寸的宽度。

10.一种视频流中目标区域的信息生成装置，其特征在于，所述装置应用于前端，包括：

请求模块，用于响应于用户触发的流标识，向后端发起包括流标识的地址获取请求；

访问模块，用于接收所述后端返回的视频流地址，访问所述视频流地址，获取待处理视频流；

绘制模块，用于在所述待处理视频流上创建多层画布，监听用户的绘制操作，对用户绘制的目标画框进行填充，得到所述目标区域；

转换模块，用于根据所述画布的画布坐标系和视频流坐标系的对应关系，将所述画布坐标系上的目标区域的坐标信息转换为与所述视频流坐标系对应的区域信息并发送给后端，使得所述后端利用所述区域信息对所述目标区域进行人形检测。

11. 一种电子设备，包括：

处理器；以及

存储程序的存储器，

其中，所述程序包括指令，所述指令在由所述处理器执行时使所述处理器执行根据权利要求1-9中任一项所述的视频流中目标区域的信息生成方法。

12.一种存储有计算机指令的非瞬时计算机可读存储介质，其中，所述计算机指令用于使所述计算机执行根据权利要求1-9中任一项所述的视频流中目标区域的信息生成方法。