CN111741220A - 一种图像获取方法、系统、设备及介质 - Google Patents

Abstract

本发明提供一种图像获取方法、系统、设备及介质，包括：通过浏览器来调用图像拍摄装置，将图像拍摄装置拍摄的连续帧图像投射至目标区域；再从目标区域抓取图像拍摄装置拍摄的图像，并将抓取的图像绘制至图像辅助画布中进行记录。本发明通过浏览器来获取图像，不需要人脸识别认证设备同时具备采集图像或视频流的功能；同时，仅传输抓取的图像，所需要的带宽是传输视频流的几十分之一，能够比现有技术降低至少一个量级。并且本发明仅需要解析绘制后的图像，不需要额外部署实时解析视频流的业务，对资源消耗也比较少。而且本发明通过浏览器来获取图像，不仅在抓取图片的过程中对用户无感，并且抓取完成后也不会占用页面空间。

Description

一种图像获取方法、系统、设备及介质

技术领域

本发明涉及图像处理技术领域，特别是涉及一种图像获取方法、系统、设备及介质。

背景技术

随着人工智能的发展，人脸识别、人脸检测、体态识别等技术逐渐从实验室走出，并融入我们的日常生活。由于人脸识别验证在特定应用场景中具有很高的准确性，所以在楼宇门禁、社区管理、驾驶员身份认证等场景中得到了广泛应用，甚至近两年在高考考生认证、疑犯追踪领域也呈现出星火燎原之势。然而，目前人脸识别验证的应用还具有以下局限性：对人脸识别认证设备要求高，需要设备具有采集图像或视频流、人脸检测、人脸特征值提取的功能；需要额外部署视频流解析处理服务，对资源消耗较大；需要较高的网络带宽来传输实时视频流。

发明内容

鉴于以上所述现有技术的缺点，本发明的目的在于提供一种图像获取方法、系统、设备及介质，用于解决现有技术中存在的问题。

为实现上述目的及其他相关目的，本发明提供一种图像获取方法，包括有：

通过浏览器调用图像拍摄装置，获取所述图像拍摄装置拍摄的图像；

向目标区域投射所述图像拍摄装置拍摄的图像；

从所述目标区域中抓取所述图像拍摄装置拍摄的图像，并将抓取的图像绘制至图像辅助画布中进行记录。

可选地，所述图像拍摄装置拍摄的图像包括连续帧图像或间隔帧图像。

可选地，包括：从所述目标区域抓取当前时刻所述图像拍摄装置拍摄的图像；和/或，从所述目标区域抓取当前时刻之前所述图像拍摄装置拍摄的图像。

可选地，分析所述图像辅助画布记录的图像，确定所述图像辅助画布记录的图像是否包含人脸。

可选地，若所述图像辅助画布记录的图像包含有人脸，还包括确定所述人脸的质量分。

可选地，对所述图像辅助画布记录的图像进行编码，获取对应的编码信息；

将所述编码信息传输至服务端进行解码，获取解码信息；

所述服务端基于所述解码信息分析所述图像辅助画布记录的图像，确定所述图像辅助画布记录的图像是否包含人脸。

可选地，在通过所述浏览器调用所述图像拍摄装置前，还包括初始化所述图像拍摄装置，确定调用所述图像拍摄装置拍摄的连续帧图像的宽参数、高参数。

可选地，向目标区域投射所述图像拍摄装置拍摄的连续帧图像前，还包括创建所述目标区域，并确定所述目标区域的宽参数、高参数。

可选地，所述目标区域包括所述浏览器中的video元素。

可选地，所述video元素包括宽参数为0、高参数为0、overflow属性为hidden的容器包裹。

可选地，所述图像辅助画布包括所述浏览器中的canvas元素。

可选地，所述canvas元素包括宽参数为0、高参数为0、overflow属性为hidden的容器包裹。

可选地，所述图像拍摄装置包括通过浏览器能够访问的摄像头。

可选地，所述图像拍摄装置包括有以下至少之一：计算机自带的摄像头、手机自带的摄像头、与计算机连接的摄像头、与手机连接的摄像头。

本发明还提供一种图像获取系统，包括有：

采集模块，用于通过浏览器调用图像拍摄装置，获取所述图像拍摄装置拍摄的连续帧图像；

投射模块，用于向目标区域投射所述图像拍摄装置拍摄的连续帧图像；

绘制模块，用于从所述目标区域中抓取所述图像拍摄装置拍摄的图像，并将抓取的图像绘制至图像辅助画布中进行记录。

可选地，所述图像拍摄装置拍摄的图像包括连续帧图像或间隔帧图像。

可选地，包括：从所述目标区域抓取当前时刻所述图像拍摄装置拍摄的图像；和/或，从所述目标区域抓取当前时刻之前所述图像拍摄装置拍摄的图像。

可选地，分析所述图像辅助画布记录的图像，确定所述图像辅助画布记录的图像是否包含人脸。

可选地，若所述图像辅助画布记录的图像包含有人脸，还包括确定所述人脸的质量分。

可选地，对所述图像辅助画布记录的图像进行编码，获取对应的编码信息；

将所述编码信息传输至服务端进行解码，获取解码信息；

所述服务端基于所述解码信息分析所述图像辅助画布记录的图像，确定所述图像辅助画布记录的图像是否包含人脸。

可选地，在通过所述浏览器调用所述图像拍摄装置前，还包括初始化所述图像拍摄装置，确定调用所述图像拍摄装置拍摄的连续帧图像的宽参数、高参数。

可选地，向目标区域投射所述图像拍摄装置拍摄的连续帧图像前，还包括创建所述目标区域，并确定所述目标区域的宽参数、高参数。

可选地，所述目标区域包括所述浏览器中的video元素。

可选地，所述video元素包括宽参数为0、高参数为0、overflow属性为hidden的容器包裹。

可选地，所述图像辅助画布包括所述浏览器中的canvas元素。

可选地，所述canvas元素包括宽参数为0、高参数为0、overflow属性为hidden的容器包裹。

可选地，所述图像拍摄装置包括通过浏览器能够访问的摄像头。

可选地，所述图像拍摄装置包括有以下至少之一：计算机自带的摄像头、手机自带的摄像头、与计算机连接的摄像头、与手机连接的摄像头。

本发明还提供一种图像获取设备，包括有：

通过浏览器调用图像拍摄装置，获取所述图像拍摄装置拍摄的连续帧图像；

向目标区域投射所述图像拍摄装置拍摄的连续帧图像；

从所述目标区域中抓取所述图像拍摄装置拍摄的图像，并将抓取的图像绘制至图像辅助画布中进行记录。

本发明还提供一种设备，包括：

一个或多个处理器；和

存储有指令的一个或多个机器可读介质，当所述一个或多个处理器执行所述指令时，使得所述设备执行如上述中任意一项所述的方法。

本发明还提供一个或多个机器可读介质，其特征在于，其上存储有指令，当由一个或多个处理器执行所述指令时，使得设备执行如上述中任意一项所述的方法。

如上所述，本发明提供的一种图像获取方法、系统、设备及介质，具有以下有益效果：通过浏览器调用图像拍摄装置，获取所述图像拍摄装置拍摄的连续帧图像；向目标区域投射图像拍摄装置拍摄的连续帧图像；从目标区域中抓取图像拍摄装置拍摄的图像，并将抓取的图像绘制至图像辅助画布中进行记录。本发明通过浏览器来调用图像拍摄装置(例如计算机自带的摄像头、手机自带的摄像头、与计算机连接的摄像头、与手机连接的摄像头)，将图像拍摄装置拍摄的连续帧图像投射至目标区域；再从目标区域抓取图像拍摄装置拍摄的图像，并将抓取的图像绘制至图像辅助画布中进行记录。本发明通过浏览器来获取图像，不需要人脸识别认证设备同时具备采集图像或视频流的功能；解决了现有技术中对人脸识别设备要求高的问题。同时，本发明将图像拍摄装置拍摄的连续帧图像投射至目标区域中，并从目标区域中抓取图像拍摄装置拍摄的图像；与现有技术传输视频流相比，本发明仅需要传输抓取的图像，所需要的带宽仅仅是传输视频流的几十分之一，相当于在网络带宽要求方面，能够比现有技术降低至少一个量级。并且与现有技术相比，本发明将抓取的图像绘制至图像辅助画布中进行记录，仅需要解析绘制后的图像，不需要额外部署实时解析视频流的业务，对资源消耗也比较少。而且本发明通过浏览器来获取图像，不仅在抓取图片的过程中对用户无感，并且抓取完成后也不会占用页面空间。

附图说明

图1为一实施例提供的图形获取方法的流程示意图；

图2为另一实施例提供的图形获取方法的流程示意图；

图3为一实施例提供的图像获取系统的硬件结构示意图；

图4为一实施例提供的终端设备的硬件结构示意图；

图5为另一实施例提供的终端设备的硬件结构示意图。

元件标号说明

M10 采集模块

M20 投射模块

M30 绘制模块

1100 输入设备

1101 第一处理器

1102 输出设备

1103 第一存储器

1104 通信总线

1200 处理组件

1201 第二处理器

1202 第二存储器

1203 通信组件

1204 电源组件

1205 多媒体组件

1206 语音组件

1207 输入/输出接口

1208 传感器组件

具体实施方式

以下通过特定的具体实例说明本发明的实施方式，本领域技术人员可由本说明书所揭露的内容轻易地了解本发明的其他优点与功效。本发明还可以通过另外不同的具体实施方式加以实施或应用，本说明书中的各项细节也可以基于不同观点与应用，在没有背离本发明的精神下进行各种修饰或改变。需说明的是，在不冲突的情况下，以下实施例及实施例中的特征可以相互组合。

需要说明的是，以下实施例中所提供的图示仅以示意方式说明本发明的基本构想，遂图式中仅显示与本发明中有关的组件而非按照实际实施时的组件数目、形状及尺寸绘制，其实际实施时各组件的型态、数量及比例可为一种随意的改变，且其组件布局型态也可能更为复杂。

请参阅图1，本方法提供一种图像获取方法，其特征在于，包括有：

S100，通过浏览器调用图像拍摄装置，获取图像拍摄装置拍摄的图像；其中，所述图像为连续帧图像或间隔帧图像；

S200，向目标区域投射图像拍摄装置拍摄的图像；其中，所述图像为连续帧图像，或间隔帧图像；

S300，从目标区域中抓取图像拍摄装置拍摄的图像，并将抓取的图像绘制至图像辅助画布中进行记录。其中，抓取的图像可以是当前时刻图像拍摄装置拍摄的图像，也可以是当前时刻之前图像拍摄装置拍摄的图像。

本方法通过浏览器来调用图像拍摄装置(例如计算机自带的摄像头、手机自带的摄像头、与计算机连接的摄像头、与手机连接的摄像头)，将图像拍摄装置拍摄的连续帧图像(例如视频流)投射至目标区域(例如浏览器中的video元素)；再从目标区域抓取图像拍摄装置拍摄的图像，并将抓取的图像绘制至图像辅助画布(例如浏览器中的canvas元素)中进行记录。

在本方法中，通过浏览器来获取图像，不需要人脸识别认证设备同时具备采集图像或视频流的功能；解决了现有技术中对人脸识别设备要求高的问题。同时，本方法将图像拍摄装置拍摄的连续帧图像投射至目标区域中，并从目标区域中抓取图像拍摄装置拍摄的图像；与现有技术传输视频流相比，本方法仅需要传输抓取的图像，所需要的带宽仅仅是传输视频流的几十分之一，相当于在网络带宽要求方面，能够比现有技术降低至少一个量级。并且与现有技术相比，本方法将抓取的图像绘制至图像辅助画布中进行记录，仅需要解析绘制后的图像，不需要额外部署实时解析视频流的业务，对资源消耗也比较少。而且本方法通过浏览器来获取图像，不仅在抓取图片的过程中对用户无感，并且抓取完成后也不会占用页面空间。

在一示例性实施例中，还包括分析图像辅助画布中记录的图像，确定图像辅助画布记录图像是否包含有人脸。具体地，对图像辅助画布记录的图像进行编码，获取对应的编码信息；将编码信息传输至服务端进行解码，获取解码信息；服务端基于解码信息分析图像辅助画布记录的图像，确定图像辅助画布记录的图像是否包含人脸。本发明通过服务端来分析图像拍摄装置拍摄的连续帧图像是否包含有人脸，不需要现有的人脸识别验证设备具备人脸检测、人脸特征值提取的功能，只需要将服务端与浏览器连接，通过浏览器调用图像拍摄装置，然后在服务端进行人脸检测、人脸特征值提取等分析即可。作为示例，本发明中的图像辅助画布可以为浏览器中的canvas元素；其中，识别图像是否包含人脸的方法包括但不限于：STFD(Scale-invariant Tiny Face Detector)算法、卷积神经网络(Convolutional Neural Networks，简称CNN)算法。

根据上述记载，若图像辅助画布记录的图像包含有人脸，还包括确定人脸的质量分。例如，根据图像辅助画布记录的图像中每个部位的中心点以及标准正脸中对应部位的中心点确定该图像辅助画布记录的图像的人脸角度评分；以及，根据该图像辅助画布记录的图像中人脸关键点所占像素面积以及标准正脸所占像素面积确定该图像辅助画布记录的图像的人脸面积评分；对人脸角度评分以及人脸面积评分进行加权，获得该图像辅助画布记录的图像中的人脸质量分数。

在一示例性实施例中，在通过浏览器调用图像拍摄装置前，还包括初始化图像拍摄装置，确定调用图像拍摄装置拍摄的连续帧图像的宽参数、高参数。本申请实施例中，通过初始化图像拍摄装置来确定浏览器能够调用的图像拍摄装置拍摄的视频流。

在一示例性实施例中，向目标区域投射图像拍摄装置拍摄的连续帧图像前，还包括创建目标区域，并确定目标区域的宽参数、高参数。本申请实施例中，通过创建目标区域并确定其宽参数、高参数来确定连续帧图像的投射区域。作为示例，目标区域可以为浏览器中的video元素。

根据上述示例性实施例的记载，本方法中的图像拍摄装置包括通过浏览器能够访问的摄像头。作为示例，图像拍摄装置可以包括有以下至少之一：计算机自带的摄像头、手机自带的摄像头、与计算机连接的摄像头、与手机连接的摄像头。例如，摄像头为通过个人计算机或手机的浏览器能够访问到的USB摄像头、个人计算机自带的摄像头、通过USB与个人计算机连接的外接摄像头。

根据上述描述，如图2所示，在一实施例中，包括有：

S1，初始化摄像头，确定浏览器能够调用的图像拍摄装置拍摄的视频流。例如，可以通过以下代码实现：

通过上述初始化，可以获取200px*200px的实时视频流的摄像头，得到mediaStream对象。

S2，创建目标区域(或摄像头投射容器)，并对其进行初始化；本步骤中的目标区域或摄像头投射容器为浏览器中的video元素。例如，创建一个新的video元素，将该video元素作为投射摄像头拍摄的实时视频流的目标区域。例如，可以通过以下代码实现：

和

根据上述描述，video元素使用了一个宽参数为0、高参数为0、且overflow属性为hidden的容器包裹，从而可以实现静默式(隐藏使得用户无感)运行摄像头投射。其中，摄像头投射指的是把摄像头拍摄到的视频流输出给摄像头投射容器。如果摄像头投射容器是可见的，用户可以在浏览器端看到摄像头拍摄到的实时画面。

S3，启动摄像头投射，将摄像头拍摄的视频流实时输出至摄像头投射容器，使得摄像头投射容器可以读取并展示摄像头实时拍摄的视频流。由于是通过静默式运行摄像头投射，所以展示可以被隐藏。例如，可以通过以下代码实现：

let video＝this.$refs.camera

video.srcObject＝mediaStream；

video.play()；

根据上述描述，只需要将创建好的mediaStream指向摄像头投射容器video的srcObject，并运行play即可。同时使用vue框架并通过this.$refs.camera获取上面创建的video元素。

S4，创建图片辅助画布，并对其进行初始化。图片辅助画布是指用于绘制在某一时刻从视频流中抓取的一帧图像的画布，其在浏览器端一般是指canvas元素。例如，可以通过以下代码实现：

＜div class＝″container″＞

＜canvas ref＝″photo″＞＜/canvas＞

＜/div＞

和

根据上述描述，canvas元素使用了一个宽参数为0、高参数为0、且overflow属性为hidden的容器包裹，从而可以实现静默式(隐藏使得用户无感)运行临时帧绘制。其中，临时帧绘制是指将从摄像头投射容器中抓取的当前时刻摄像头拍摄的图像绘制到图片辅助画布。

S5，从摄像头投射容器中抓取图像拍摄装置拍摄的图像，并定时将抓取的图像绘制至图像辅助画布中，暂时记录当前时刻拍摄的图像。而通过定时记录，就可以获取一连串固定间隔的摄像头图片序列，且服务端可以根据这些图片序列信息来分析当前场景状态。例如，可以通过以下代码实现：

let video＝this.$refs.camera

let canvas＝this.$refs.canvas

let ctx＝canvas.getContext(′2d′)；

ctx.drawImage(video，0，0，200，200)；

根据上述描述，使用了vue框架通过this.$refs.camera获取到了上面创建的video元素(摄像头投射容器)，以及使用了vue框架通过this.$refs.canvas获取到了上面创建的canvas元素(图片辅助画布)。并且可以将从摄像头投射容器中抓取的图像绘制在图片辅助画布左上角对齐的200px*200px区域内。

根据上述步骤，则可以通过浏览器从摄像头拍摄的视频流中抓取出一帧或多帧图像。

为了对抓取的一帧或多帧图像进行其他分析(例如人脸检测、人脸质量分评估等)，还可以包括：

S6，将图像辅助画布记录的图像上传至服务端。具体地，通过调用canvas的原生方法，获取临时帧的base64编码；通过https请求将该base64编码传输到服务端。其中，临时帧是指从摄像头投射容器中抓取的当前时刻摄像头拍摄的视频帧，服务端可以通过浏览器的API接口接收图像及base64编码。例如，可以通过以下代码实现：

let canvas＝this.refs.canvas

const base64＝canvas.toDataURL()

根据上述描述，使用了vue框架通过this.$refs.canvas获取到了上面创建的canvas元素，并调用toDataURL转化成了base64编码。

S7，通过服务端分析临时帧图片信息；包括：服务端定时接收到临时帧base64编码信息，并对编码信息进行解码，基于所述解码信息分析图像辅助画布记录的图像。其中，本方法对图像辅助画布记录的图像进行的分析取决于业务需求，包括但不限于：是否有人、是否包含人脸、人脸质量分。同时，也可配合大屏幕用作互动小游戏交互动作分析，例如，在有人进入区域以及有完整人脸进入区域后，且人脸质量达到指定标准时，将会触发特定的交互。或者用来分析人员身份、进行跨境追踪等。

根据上述描述可知，本方法通过浏览器来调用图像拍摄装置(例如计算机自带的摄像头、手机自带的摄像头、与计算机连接的摄像头、与手机连接的摄像头)，将图像拍摄装置拍摄的连续帧图像(例如视频流)投射至目标区域(例如浏览器中的video元素)；再从目标区域抓取图像拍摄装置拍摄的图像，并将抓取的图像绘制至图像辅助画布(例如浏览器中的canvas元素)中进行记录。在本方法中，通过浏览器来获取图像，不需要人脸识别认证设备同时具备采集图像或视频流的功能；解决了现有技术中对人脸识别设备要求高的问题。同时，本方法将图像拍摄装置拍摄的连续帧图像投射至目标区域中，并从目标区域中抓取图像拍摄装置拍摄的图像；与现有技术传输视频流相比，本方法仅需要传输抓取的图像，所需要的带宽仅仅是传输视频流的几十分之一，相当于在网络带宽要求方面，能够比现有技术降低至少一个量级。并且与现有技术相比，本方法将抓取的图像绘制至图像辅助画布中进行记录，仅需要解析绘制后的图像，不需要额外部署实时解析视频流的业务，对资源消耗也比较少。而且本方法通过html的css hack方式，让抓取图片的过程对用户无感，不会占用页面空间。同时，根据图像辅助画布记录的图像，可配合大屏用作互动小游戏交互动作分析、人员身份分析、跨境追踪等。

如图3所示，本发明还可以提供一种图像获取系统，包括有：

采集模块M10，用于通过浏览器调用图像拍摄装置，获取图像拍摄装置拍摄的图像；其中，所述图像为连续帧图像或间隔帧图像；

投射模块M20，用于向目标区域投射图像拍摄装置拍摄的图像；其中，所述图像为连续帧图像或间隔帧图像；

绘制模块M30，用于从目标区域中抓取图像拍摄装置拍摄的图像，并将抓取的图像绘制至图像辅助画布中进行记录。其中，抓取的图像可以是当前时刻图像拍摄装置拍摄的图像，也可以是当前时刻之前图像拍摄装置拍摄的图像。

本系统通过浏览器来调用图像拍摄装置(例如计算机自带的摄像头、手机自带的摄像头、与计算机连接的摄像头、与手机连接的摄像头)，将图像拍摄装置拍摄的连续帧图像(例如视频流)投射至目标区域(例如浏览器中的video元素)；再从目标区域抓取图像拍摄装置拍摄的图像，并将抓取的图像绘制至图像辅助画布(例如浏览器中的canvas元素)中进行记录。在本系统中，通过浏览器来获取图像，不需要人脸识别认证设备同时具备采集图像或视频流的功能；解决了现有技术中对人脸识别设备要求高的问题。同时，本系统将图像拍摄装置拍摄的连续帧图像投射至目标区域中，并从目标区域中抓取图像拍摄装置拍摄的图像；与现有技术传输视频流相比，本系统仅需要传输抓取的图像，所需要的带宽仅仅是传输视频流的几十分之一，相当于在网络带宽要求方面，能够比现有技术降低至少一个量级。并且与现有技术相比，本系统将抓取的图像绘制至图像辅助画布中进行记录，仅需要解析绘制后的图像，不需要额外部署实时解析视频流的业务，对资源消耗也比较少。而且本系统通过浏览器来获取图像，不仅在抓取图片的过程中对用户无感，并且抓取完成后也不会占用页面空间。

在一示例性实施例中，还包括分析图像辅助画布中记录的图像，确定图像辅助画布记录图像是否包含有人脸。具体地，对图像辅助画布记录的图像进行编码，获取对应的编码信息；将编码信息传输至服务端进行解码，获取解码信息；服务端基于解码信息分析图像辅助画布记录的图像，确定图像辅助画布记录的图像是否包含人脸。本发明通过服务端来分析图像拍摄装置拍摄的连续帧图像是否包含有人脸，不需要现有的人脸识别验证设备具备人脸检测、人脸特征值提取的功能，只需要将服务端与浏览器连接，通过浏览器调用图像拍摄装置，然后在服务端进行人脸检测、人脸特征值提取等分析即可。作为示例，本发明中的图像辅助画布可以为浏览器中的canvas元素；其中，识别图像是否包含人脸的系统包括但不限于：STFD(Scale-invariant Tiny Face Detector)算法、卷积神经网络(Convolutional Neural Networks，简称CNN)算法。

根据上述记载，若图像辅助画布记录的图像包含有人脸，还包括确定人脸的质量分。例如，根据图像辅助画布记录的图像中每个部位的中心点以及标准正脸中对应部位的中心点确定该图像辅助画布记录的图像的人脸角度评分；以及，根据该图像辅助画布记录的图像中人脸关键点所占像素面积以及标准正脸所占像素面积确定该图像辅助画布记录的图像的人脸面积评分；对人脸角度评分以及人脸面积评分进行加权，获得该图像辅助画布记录的图像中的人脸质量分数。

在一示例性实施例中，在通过浏览器调用图像拍摄装置前，还包括初始化图像拍摄装置，确定调用图像拍摄装置拍摄的连续帧图像的宽参数、高参数。本申请实施例中，通过初始化图像拍摄装置来确定浏览器能够调用的图像拍摄装置拍摄的视频流。

在一示例性实施例中，向目标区域投射图像拍摄装置拍摄的连续帧图像前，还包括创建目标区域，并确定目标区域的宽参数、高参数。本申请实施例中，通过创建目标区域并确定其宽参数、高参数来确定连续帧图像的投射区域。作为示例，目标区域可以为浏览器中的video元素。

根据上述示例性实施例的记载，本系统中的图像拍摄装置包括通过浏览器能够访问的摄像头。作为示例，图像拍摄装置可以包括有以下至少之一：计算机自带的摄像头、手机自带的摄像头、与计算机连接的摄像头、与手机连接的摄像头。例如，摄像头为通过个人计算机或手机的浏览器能够访问到的USB摄像头、个人计算机自带的摄像头、通过USB与个人计算机连接的外接摄像头。

根据上述描述，如图2所示，在一实施例中，包括有：

S1，初始化摄像头，确定浏览器能够调用的图像拍摄装置拍摄的视频流。例如，可以通过以下代码实现：

通过上述初始化，可以获取200px*200px的实时视频流的摄像头，得到mediaStream对象。

S2，创建目标区域(或摄像头投射容器)，并对其进行初始化；本步骤中的目标区域或摄像头投射容器为浏览器中的video元素。例如，创建一个新的video元素，将该video元素作为投射摄像头拍摄的实时视频流的目标区域。例如，可以通过以下代码实现：

和

根据上述描述，video元素使用了一个宽参数为0、高参数为0、且overflow属性为hidden的容器包裹，从而可以实现静默式(隐藏使得用户无感)运行摄像头投射。其中，摄像头投射指的是把摄像头拍摄到的视频流输出给摄像头投射容器。如果摄像头投射容器是可见的，用户可以在浏览器端看到摄像头拍摄到的实时画面。

S3，启动摄像头投射，将摄像头拍摄的视频流实时输出至摄像头投射容器，使得摄像头投射容器可以读取并展示摄像头实时拍摄的视频流。由于是通过静默式运行摄像头投射，所以展示可以被隐藏。例如，可以通过以下代码实现：

let video＝this.$refs.camera

video.srcObject＝mediaStream；

video.play()；

根据上述描述，只需要将创建好的mediaStream指向摄像头投射容器video的srcObject，并运行play即可。同时使用vue框架并通过this.$refs.camera获取上面创建的video元素。

S4，创建图片辅助画布，并对其进行初始化。图片辅助画布是指用于绘制在某一时刻从视频流中抓取的一帧图像的画布，其在浏览器端一般是指canvas元素。例如，可以通过以下代码实现：

和

根据上述描述，canvas元素使用了一个宽参数为0、高参数为0、且overflow属性为hidden的容器包裹，从而可以实现静默式(隐藏使得用户无感)运行临时帧绘制。其中，临时帧绘制是指将从摄像头投射容器中抓取的当前时刻摄像头拍摄的图像绘制到图片辅助画布。

S5，从摄像头投射容器中抓取图像拍摄装置拍摄的图像，并定时将抓取的图像绘制至图像辅助画布中，暂时记录当前时刻拍摄的图像。而通过定时记录，就可以获取一连串固定间隔的摄像头图片序列，且服务端可以根据这些图片序列信息来分析当前场景状态。例如，可以通过以下代码实现：

let video＝this.$refs.camera

let canvas＝this.$refs.canvas

let ctx＝canvas.getContext(′2d′)；

ctx.drawImage(video，0，0，200，200)；

根据上述描述，使用了vue框架通过this.$refs.camera获取到了上面创建的video元素(摄像头投射容器)，以及使用了vue框架通过this.$refs.canvas获取到了上面创建的canvas元素(图片辅助画布)。并且可以将从摄像头投射容器中抓取的图像绘制在图片辅助画布左上角对齐的200px*200px区域内。

根据上述步骤，则可以通过浏览器从摄像头拍摄的视频流中抓取出一帧或多帧图像。

为了对抓取的一帧或多帧图像进行其他分析(例如人脸检测、人脸质量分评估等)，还可以包括：

S6，将图像辅助画布记录的图像上传至服务端。具体地，通过调用canvas的原生方法，获取临时帧的base64编码；通过https请求将该base64编码传输到服务端。其中，临时帧是指从摄像头投射容器中抓取的当前时刻摄像头拍摄的视频帧，服务端可以通过浏览器的API接口接收图像及base64编码。例如，可以通过以下代码实现：

let canvas＝this.refs.canvas

const base64＝canvas.toDataURL()

根据上述描述，使用了vue框架通过this.$refs.canvas获取到了上面创建的canvas元素，并调用toDataURL转化成了base64编码。

S7，通过服务端分析临时帧图片信息；包括：服务端定时接收到临时帧base64编码信息，并对编码信息进行解码，基于所述解码信息分析图像辅助画布记录的图像。其中，本系统对图像辅助画布记录的图像进行的分析取决于业务需求，包括但不限于：是否有人、是否包含人脸、人脸质量分。同时，也可配合大屏幕用作互动小游戏交互动作分析，例如，在有人进入区域以及有完整人脸进入区域后，且人脸质量达到指定标准时，将会触发特定的交互。或者用来分析人员身份、进行跨境追踪等。

根据上述描述可知，本系统通过浏览器来调用图像拍摄装置(例如计算机自带的摄像头、手机自带的摄像头、与计算机连接的摄像头、与手机连接的摄像头)，将图像拍摄装置拍摄的连续帧图像(例如视频流)投射至目标区域(例如浏览器中的video元素)；再从目标区域抓取图像拍摄装置拍摄的图像，并将抓取的图像绘制至图像辅助画布(例如浏览器中的canvas元素)中进行记录。在本系统中，通过浏览器来获取图像，不需要人脸识别认证设备同时具备采集图像或视频流的功能；解决了现有技术中对人脸识别设备要求高的问题。同时，本系统将图像拍摄装置拍摄的连续帧图像投射至目标区域中，并从目标区域中抓取图像拍摄装置拍摄的图像；与现有技术传输视频流相比，本系统仅需要传输抓取的图像，所需要的带宽仅仅是传输视频流的几十分之一，相当于在网络带宽要求方面，能够比现有技术降低至少一个量级。并且与现有技术相比，本系统将抓取的图像绘制至图像辅助画布中进行记录，仅需要解析绘制后的图像，不需要额外部署实时解析视频流的业务，对资源消耗也比较少。而且本系统通过html的css hack方式，让抓取图片的过程对用户无感，不会占用页面空间。同时，根据图像辅助画布记录的图像，可配合大屏用作互动小游戏交互动作分析、人员身份分析、跨境追踪等。

本申请实施例还提供了一种图像获取设备，包括有：

通过浏览器调用图像拍摄装置，获取图像拍摄装置拍摄的图像；

向目标区域投射图像拍摄装置拍摄的图像；

从目标区域中抓取图像拍摄装置拍摄的图像，并将抓取的图像绘制至图像辅助画布中进行记录。

在本实施例中，该图像获取设备执行上述系统或方法，具体功能和技术效果参照上述实施例即可，此处不再赘述。

本申请实施例还提供了一种设备，该设备可以包括：一个或多个处理器；和其上存储有指令的一个或多个机器可读介质，当由所述一个或多个处理器执行时，使得所述设备执行图1所述的方法。在实际应用中，该设备可以作为终端设备，也可以作为服务器，终端设备的例子可以包括：智能手机、平板电脑、电子书阅读器、MP3(动态影像专家压缩标准语音层面3，Moving Picture Experts Group Audio Layer III)播放器、MP4(动态影像专家压缩标准语音层面4，Moving Picture Experts Group Audio Layer IV)播放器、膝上型便携计算机、车载电脑、台式计算机、机顶盒、智能电视机、可穿戴设备等等，本申请实施例对于具体的设备不加以限制。

本申请实施例还提供了一种非易失性可读存储介质，该存储介质中存储有一个或多个模块(programs)，该一个或多个模块被应用在设备时，可以使得该设备执行本申请实施例的图1中所述方法所包含步骤的指令(instructions)。

图4为本申请一实施例提供的终端设备的硬件结构示意图。如图所示，该终端设备可以包括：输入设备1100、第一处理器1101、输出设备1102、第一存储器1103和至少一个通信总线1104。通信总线1104用于实现元件之间的通信连接。第一存储器1103可能包含高速RAM存储器，也可能还包括非易失性存储NVM，例如至少一个磁盘存储器，第一存储器1103中可以存储各种程序，用于完成各种处理功能以及实现本实施例的方法步骤。

可选的，上述第一处理器1101例如可以为中央处理器(Central ProcessingUnit，简称CPU)、应用专用集成电路(ASIC)、数字信号处理器(DSP)、数字信号处理设备(DSPD)、可编程逻辑器件(PLD)、现场可编程门阵列(FPGA)、控制器、微控制器、微处理器或其他电子元件实现，该第一处理器1101通过有线或无线连接耦合到上述输入设备1100和输出设备1102。

可选的，上述输入设备1100可以包括多种输入设备，例如可以包括面向用户的用户接口、面向设备的设备接口、软件的可编程接口、摄像头、传感器中至少一种。可选的，该面向设备的设备接口可以是用于设备与设备之间进行数据传输的有线接口、还可以是用于设备与设备之间进行数据传输的硬件插入接口(例如USB接口、串口等)；可选的，该面向用户的用户接口例如可以是面向用户的控制按键、用于接收语音输入的语音输入设备以及用户接收用户触摸输入的触摸感知设备(例如具有触摸感应功能的触摸屏、触控板等)；可选的，上述软件的可编程接口例如可以是供用户编辑或者修改程序的入口，例如芯片的输入引脚接口或者输入接口等；输出设备1102可以包括显示器、音响等输出设备。

在本实施例中，该终端设备的处理器包括用于执行各设备中语音识别装置各模块的功能，具体功能和技术效果参照上述实施例即可，此处不再赘述。

图5为本申请的一个实施例提供的终端设备的硬件结构示意图。图5是对图4在实现过程中的一个具体的实施例。如图所示，本实施例的终端设备可以包括第二处理器1201以及第二存储器1202。

第二处理器1201执行第二存储器1202所存放的计算机程序代码，实现上述实施例中图1所述方法。

第二存储器1202被配置为存储各种类型的数据以支持在终端设备的操作。这些数据的示例包括用于在终端设备上操作的任何应用程序或方法的指令，例如消息，图片，视频等。第二存储器1202可能包含随机存取存储器(random access memory，简称RAM)，也可能还包括非易失性存储器(non-volatile memory)，例如至少一个磁盘存储器。

可选地，第二处理器1201设置在处理组件1200中。该终端设备还可以包括：通信组件1203，电源组件1204，多媒体组件1205，语音组件1206，输入/输出接口1207和/或传感器组件1208。终端设备具体所包含的组件等依据实际需求设定，本实施例对此不作限定。

处理组件1200通常控制终端设备的整体操作。处理组件1200可以包括一个或多个第二处理器1201来执行指令，以完成上述数据处理方法中的全部或部分步骤。此外，处理组件1200可以包括一个或多个模块，便于处理组件1200和其他组件之间的交互。例如，处理组件1200可以包括多媒体模块，以方便多媒体组件1205和处理组件1200之间的交互。

电源组件1204为终端设备的各种组件提供电力。电源组件1204可以包括电源管理系统，一个或多个电源，及其他与为终端设备生成、管理和分配电力相关联的组件。

多媒体组件1205包括在终端设备和用户之间的提供一个输出接口的显示屏。在一些实施例中，显示屏可以包括液晶显示器(LCD)和触摸面板(TP)。如果显示屏包括触摸面板，显示屏可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与所述触摸或滑动操作相关的持续时间和压力。

语音组件1206被配置为输出和/或输入语音信号。例如，语音组件1206包括一个麦克风(MIC)，当终端设备处于操作模式，如语音识别模式时，麦克风被配置为接收外部语音信号。所接收的语音信号可以被进一步存储在第二存储器1202或经由通信组件1203发送。在一些实施例中，语音组件1206还包括一个扬声器，用于输出语音信号。

输入/输出接口1207为处理组件1200和外围接口模块之间提供接口，上述外围接口模块可以是点击轮，按钮等。这些按钮可包括但不限于：音量按钮、启动按钮和锁定按钮。

传感器组件1208包括一个或多个传感器，用于为终端设备提供各个方面的状态评估。例如，传感器组件1208可以检测到终端设备的打开/关闭状态，组件的相对定位，用户与终端设备接触的存在或不存在。传感器组件1208可以包括接近传感器，被配置用来在没有任何的物理接触时检测附近物体的存在，包括检测用户与终端设备间的距离。在一些实施例中，该传感器组件1208还可以包括摄像头等。

通信组件1203被配置为便于终端设备和其他设备之间有线或无线方式的通信。终端设备可以接入基于通信标准的无线网络，如WiFi，2G或3G，或它们的组合。在一个实施例中，该终端设备中可以包括SIM卡插槽，该SIM卡插槽用于插入SIM卡，使得终端设备可以登录GPRS网络，通过互联网与服务器建立通信。

由上可知，在图5实施例中所涉及的通信组件1203、语音组件1206以及输入/输出接口1207、传感器组件1208均可以作为图4实施例中的输入设备的实现方式。

上述实施例仅例示性说明本发明的原理及其功效，而非用于限制本发明。任何熟悉此技术的人士皆可在不违背本发明的精神及范畴下，对上述实施例进行修饰或改变。因此，举凡所属技术领域中具有通常知识者在未脱离本发明所揭示的精神与技术思想下所完成的一切等效修饰或改变，仍应由本发明的权利要求所涵盖。

Claims (31)

1.一种图像获取方法，其特征在于，包括有：

通过浏览器调用图像拍摄装置，获取所述图像拍摄装置拍摄的图像；

向目标区域投射所述图像拍摄装置拍摄的图像；

从所述目标区域中抓取所述图像拍摄装置拍摄的图像，并将抓取的图像绘制至图像辅助画布中进行记录。

2.根据权利要求1所述的图像获取方法，其特征在于，所述图像拍摄装置拍摄的图像包括连续帧图像或间隔帧图像。

3.根据权利要求1所述的图像获取方法，其特征在于，包括：从所述目标区域抓取当前时刻所述图像拍摄装置拍摄的图像；和/或，从所述目标区域抓取当前时刻之前所述图像拍摄装置拍摄的图像。

4.根据权利要求1所述的图像获取方法，其特征在于，分析所述图像辅助画布记录的图像，确定所述图像辅助画布记录的图像是否包含人脸。

5.根据权利要求4所述的图像获取方法，其特征在于，若所述图像辅助画布记录的图像包含有人脸，还包括确定所述人脸的质量分。

6.根据权利要求4所述的图像获取方法，其特征在于，对所述图像辅助画布记录的图像进行编码，获取对应的编码信息；

将所述编码信息传输至服务端进行解码，获取解码信息；

所述服务端基于所述解码信息分析所述图像辅助画布记录的图像，确定所述图像辅助画布记录的图像是否包含人脸。

7.根据权利要求2所述的图像获取方法，其特征在于，在通过所述浏览器调用所述图像拍摄装置前，还包括初始化所述图像拍摄装置，确定调用所述图像拍摄装置拍摄的连续帧图像的宽参数、高参数。

8.根据权利要求7所述的图像获取方法，其特征在于，向目标区域投射所述图像拍摄装置拍摄的连续帧图像前，还包括创建所述目标区域，并确定所述目标区域的宽参数、高参数。

9.根据权利要求1至8中任一所述的图像获取方法，其特征在于，所述目标区域包括所述浏览器中的video元素。

10.根据权利要求9所述的图像获取方法，其特征在于，所述video元素包括宽参数为0、高参数为0、overflow属性为hidden的容器包裹。

11.根据权利要求1至8中任一所述的图像获取方法，其特征在于，所述图像辅助画布包括所述浏览器中的canvas元素。

12.根据权利要求11所述的图像获取方法，其特征在于，所述canvas元素包括宽参数为0、高参数为0、overflow属性为hidden的容器包裹。

13.根据权利要求1至8中任一所述的图像获取方法，其特征在于，所述图像拍摄装置包括通过浏览器能够访问的摄像头。

14.根据权利要求13所述的图像获取方法，其特征在于，所述图像拍摄装置包括有以下至少之一：计算机自带的摄像头、手机自带的摄像头、与计算机连接的摄像头、与手机连接的摄像头。

15.一种图像获取系统，其特征在于，包括有：

采集模块，用于通过浏览器调用图像拍摄装置，获取所述图像拍摄装置拍摄的连续帧图像；

投射模块，用于向目标区域投射所述图像拍摄装置拍摄的连续帧图像；

绘制模块，用于从所述目标区域中抓取所述图像拍摄装置拍摄的图像，并将抓取的图像绘制至图像辅助画布中进行记录。

16.根据权利要求15所述的图像获取系统，其特征在于，所述图像拍摄装置拍摄的图像包括连续帧图像或间隔帧图像。

17.根据权利要求15所述的图像获取系统，其特征在于，包括：从所述目标区域抓取当前时刻所述图像拍摄装置拍摄的图像；和/或，从所述目标区域抓取当前时刻之前所述图像拍摄装置拍摄的图像。

18.根据权利要求15所述的图像获取系统，其特征在于，分析所述图像辅助画布记录的图像，确定所述图像辅助画布记录的图像是否包含人脸。

19.根据权利要求18所述的图像获取系统，其特征在于，若所述图像辅助画布记录的图像包含有人脸，还包括确定所述人脸的质量分。

20.根据权利要求18所述的图像获取系统，其特征在于，对所述图像辅助画布记录的图像进行编码，获取对应的编码信息；

将所述编码信息传输至服务端进行解码，获取解码信息；

所述服务端基于所述解码信息分析所述图像辅助画布记录的图像，确定所述图像辅助画布记录的图像是否包含人脸。

21.根据权利要求16所述的图像获取系统，其特征在于，在通过所述浏览器调用所述图像拍摄装置前，还包括初始化所述图像拍摄装置，确定调用所述图像拍摄装置拍摄的连续帧图像的宽参数、高参数。

22.根据权利要求21所述的图像获取系统，其特征在于，向目标区域投射所述图像拍摄装置拍摄的连续帧图像前，还包括创建所述目标区域，并确定所述目标区域的宽参数、高参数。

23.根据权利要求15至22中任一所述的图像获取系统，其特征在于，所述目标区域包括所述浏览器中的video元素。

24.根据权利要求23所述的图像获取系统，其特征在于，所述video元素包括宽参数为0、高参数为0、overflow属性为hidden的容器包裹。

25.根据权利要求15至22中任一所述的图像获取系统，其特征在于，所述图像辅助画布包括所述浏览器中的canvas元素。

26.根据权利要求25所述的图像获取系统，其特征在于，所述canvas元素包括宽参数为0、高参数为0、overflow属性为hidden的容器包裹。

27.根据权利要求15至22中任一所述的图像获取系统，其特征在于，所述图像拍摄装置包括通过浏览器能够访问的摄像头。

28.根据权利要求27所述的图像获取系统，其特征在于，所述图像拍摄装置包括有以下至少之一：计算机自带的摄像头、手机自带的摄像头、与计算机连接的摄像头、与手机连接的摄像头。

29.一种图像获取设备，其特征在于，包括有：

通过浏览器调用图像拍摄装置，获取所述图像拍摄装置拍摄的连续帧图像；

向目标区域投射所述图像拍摄装置拍摄的连续帧图像；

从所述目标区域中抓取所述图像拍摄装置拍摄的图像，并将抓取的图像绘制至图像辅助画布中进行记录。

30.一种设备，其特征在于，包括：

一个或多个处理器；和

存储有指令的一个或多个机器可读介质，当所述一个或多个处理器执行所述指令时，使得所述设备执行如权利要求1-14中任意一项所述的方法。

31.一个或多个机器可读介质，其特征在于，其上存储有指令，当由一个或多个处理器执行所述指令时，使得设备执行如权利要求1-14中任意一项所述的方法。

Images