CN111935459A - 一种基于浏览器的梯口机视频预览方法 - Google Patents

Abstract

本发明公开了一种基于浏览器的梯口机视频预览方法，包括如下步骤：摄像头数据转换，形成YUV数据；负责YUV到MJPEG的编码；负责YUV到H264、H265的编码；MJPEG数据编码提供预览方式；H264、H265数据编码提供标准的视频数据预览通道；私有信令定义的H264、H265数据编码建立通道；H264、H265数据编码提供给Web前端视屏预览；运行在web前端的html5脚本，负责预览摄像头数据；用于视屏数据预览；对视频数据进行前端渲染；解码成为HTML5 MP4片段；将HTML5 MP4片段进行渲染，等待MP4片段进行播放。本发明无需插件就能在浏览器上实时预览摄像头数据。

Description

一种基于浏览器的梯口机视频预览方法

技术领域

本发明涉及一种基于浏览器的梯口机视频预览方法。

背景技术

现有市场上的IPC、楼宇对讲产品，如果需要在网页上进行摄像头数据的预览，都需要通过使用ActiveX等浏览器插件的形式才能够在IE、Chrome浏览器上看到设备的摄像头数据，在用户体验方面不够友好，且对技术要求较高，对于chrome等现代浏览器也存在兼容性问题。

发明内容

本发明的目的在于提供一种基于浏览器的梯口机视频预览方法，本发明是一种无需插件的方式，在Chrome内核的浏览器（360浏览器、搜狐浏览器、谷歌浏览器）或者firefox浏览器上，就可以实时的预览摄像头的数据，解决预览摄像头数据还需要装插件的麻烦，也提供一种标准预览摄像头数据的方法。

为了达到上述目的，本发明的技术方案是：

一种基于浏览器的梯口机视频预览方法，包括如下步骤：

1）梯口机硬件设备中的摄像头组件以及硬件平台中的图像信号处理器（ISP）处理组件Camera，负责摄像头数据从模拟到数字的转换，摄像头数据的自动曝光处理，并形成颜色编码（YUV）数据；

2）当前电脑能通过本地局域网直接预览梯口机摄像头时，此时无需考虑带宽场景，通过在当前电脑安装的运动静止图像或逐帧压缩编码组件（MJPEG Encode）负责将步骤1）中的所述颜色编码数据（YUV）转换成运动静止图像或逐帧压缩数据（MJPEG）编码；

3）当前电脑与梯口机设备不在同一局域网时，此时需要考虑带宽场景，通过在当前电脑安装的标清数字图像高度压缩数字视频编码组件、普通高清音视频高度压缩数字视频编码组件（H264、H265 Encode）负责将步骤1）中所述颜色编码数据（YUV）转换成标清数字图像高度压缩数字视频数据的编码或转换成普通高清音视频高度压缩数字视频数据的编码；

4）基于超文本传输协议（HTTP）的JPEG图片服务器MJPEG Server，为所述步骤2）中MJPEG数据编码提供静态图片、动态图片两种预览方式；

5）超文本标记语言（html5）脚本模块，将所述步骤4）中的静态图片、动态图片，运行在web前端的html5脚本，负责摄像头中静态图片、动态图片数据预览；

6）当基于超文本传输协议的JPEG图片服务器无法满足当前带宽传输要求的时候且当前端支持标准的实时流传输协议的标清数字图像高度压缩数字视频、普通高清音视频高度压缩数字视频服务器的解析时，采用基于实时流传输协议（RTSP）的标清数字图像高度压缩数字视频H264、普通高清音视频高度压缩数字视频H265服务器RTSP Server，为所述步骤3）中H264、H265数据编码提供标准的视频数据预览。

7）当前端需要预览梯口机数据同时又需要控制摄像头参数时，所述的步骤3）中形成的标清数字图像高度压缩数字视频数据的编码（H264）或到普通高清音视频高度压缩数字视频数据的编码（H265）就利用视频帧发送指令、视频帧应答指令、视频帧重传指令、视频帧参数修改指令来定义私有信令；采用基于传输控制协议的一种实现了浏览器与服务器全双通信网络协议服务器WebSocket Server对所定义的私有信令提供数据传输通道，供网页端获取实时的标清数字图像高度压缩数字视频流数据、普通高清音视频高度压缩数字视频流数据，建立视屏数据传输的通道；

8）基于传输控制协议（TCP）的一种实现了浏览器与服务器全双通信网络协议（websocket）的视屏数据预览模块，将所述步骤7）的视屏数据传输的通道，运行在Web前端，形成websocket视屏数据传输通道；

9）前端渲染模块Decode Canvas，对所述步骤8）处理的视频数据传递给前端渲染模块进行前端渲染，用于视屏数据预览。

10）当前端需要采用标准FLV视频框架预览摄像头数据时，采用基于流媒体（FLV）格式的服务器FLV Server，为所述步骤3）中标清数字图像高度压缩数字视频流数据编码（H264）、普通高清音视频高度压缩数字视频流数据编码（H265）提供给Web前端视屏预览；

11）片段解码模块FLV JS，负责与所述步骤10）进行通信，获取渲染数据，解码成为HTML5 MP4片段；

12）原生超文本标记语言（HTML5）渲染模块video play，将所述步骤11）的HTML5 MP4片段进行渲染，等待MP4片段进行播放。

本发明的有益效果为：本发明在设备端搭建RTSP、MJPEG、WebSocket视频服务器，在网页前端利用HTML 5特性，用<img>元素预览MJPEG视频流，利用WebSocket处理H264、H265视屏流转换成Web前端可以渲染的格式。本发明提供了多套无需插件的视屏预览方案，解决同领域中现有的产品，依然停留在IE的插件预览方案的不便利。是一种无需插件的方式，在Chrome内核的浏览器（360浏览器、搜狐浏览器、谷歌浏览器）或者firefox浏览器上，就可以实时的预览摄像头的数据，解决预览摄像头数据还需要装插件的麻烦，也提供一种标准预览摄像头数据的方法。

附图说明

图1是本发明的工作流程图。

具体实施方式

现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的范例；相反，提供这些实施方式使得本申请将更加全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。

此外，所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施例中。在下面的描述中，提供许多具体细节从而给出对本申请的实施例的充分理解。然而，本领域技术人员将意识到，可以实践本申请的技术方案而没有特定细节中的一个或更多，或者可以采用其它的方法、组元、装置、步骤等。在其它情况下，不详细示出或描述公知方法、装置、实现或者操作以避免模糊本申请的各方面。

附图中所示的方框图仅仅是功能实体，不一定必须与物理上独立的实体相对应。即，可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。

附图中所示的流程图仅是示例性说明，不是必须包括所有的内容和操作/步骤，也不是必须按所描述的顺序执行。例如，有的操作/步骤还可以分解，而有的操作/步骤可以合并或部分合并，因此实际执行的顺序有可能根据实际情况改变。

本实施例的一种基于浏览器的梯口机视频预览方法，适用于所有需要在浏览器上实时预览摄像头数据的场景：摄像头,RAW(原始数据)数据通过硬件平台采集，经过ISP（图像信号）处理，3A算法校准(3A技术即自动对焦(AF)、自动曝光(AE)和自动白平衡(AWB)形成NV12数据，再通过编码器编码，在设备端搭建RTSP、MJPEG、WebSocket视频服务器，输出多路视屏流数据，H264、H265、MJPEG数据；在网页前端利用HTML 5特性，用<img>元素预览MJPEG视频流，利用WebSocket处理H264、H265视屏流转换成Web前端可以渲染的格式。

如图1所示，包括如下步骤：

1）硬件设备中的摄像头组件以及硬件平台中的ISP处理组件Camera 012，负责摄像头数据从模拟到数字的转换，摄像头数据的自动曝光处理，并形成YUV数据；

2）当前电脑能通过本地局域网直接预览梯口机摄像头时，此时无需考虑带宽场景，通过在当前电脑安装的运动静止图像或逐帧压缩编码组件（MJPEG Encode）001负责将步骤1）中的所述颜色编码数据（YUV）转换成运动静止图像或逐帧压缩数据（MJPEG）编码；MJPEGEncode编码组件001把运动的视频序列作为连续的静止图像来处理，这种压缩方式单独完整地压缩每一帧，编辑过程中可随机存储每一帧，可进行精确到帧的编辑。人眼视觉生理特性决定眼睛对构成图像的不同频率成分具有不同的敏感度。JPEG压缩是有损压缩，但损失的部分是人类视觉不容易察觉到的部分，利用眼睛对色彩域中的高频信息部分不敏感的特点，节省大量需要处理的数据信息。

3）当前电脑与梯口机设备不在同一局域网时，此时需要考虑带宽场景，通过在当前电脑安装的标清数字图像高度压缩数字视频编码组件、普通高清音视频高度压缩数字视频编码组件（H264、H265 Encode）002负责将步骤1）中所述颜色编码数据（YUV）转换成标清数字图像高度压缩数字视频数据的编码或转换成普通高清音视频高度压缩数字视频数据的编码；H264编码组件为高度压缩数字视频编解码组件，H265编码组件为高效视频编码；在有限带宽下传输更高质量的网络视频，仅需原先的一半带宽即可播放相同质量的视频。

4）基于HTTP协议的JPEG图片服务器MJPEG Server003，为所述步骤2）中MJPEG数据编码提供静态图片、动态图片两种预览方式；

5）html5脚本模块007，将所述步骤4）中的静态图片、动态图片，运行在web前端的html5脚本，负责摄像头中静态图片、动态图片数据预览；

6）当基于超文本传输协议的JPEG图片服务器无法满足当前带宽传输要求的时候且当前端支持标准的实时流传输协议的标清数字图像高度压缩数字视频、普通高清音视频高度压缩数字视频服务器的解析时，采用基于RTSP协议的H264、H265服务器RTSP Server004，为所述步骤3）中H264、H265数据编码提供标准的视频数据预览。

4）7）当前端需要预览梯口机数据同时又需要控制摄像头参数时，所述的步骤3）中形成的标清数字图像高度压缩数字视频数据的编码或到普通高清音视频高度压缩数字视频数据的编码就利用视频帧发送指令、视频帧应答指令、视频帧重传指令、视频帧参数修改指令来定义私有信令；采用WebSocket协议服务器 WebSocket Server005对所定义的私有信令提供数据传输通道，供网页端获取实时的H264、H265视频流数据，建立视屏数据传输的通道；

8）websocket模块008，将所述步骤7）视屏数据传输的通道，运行在Web前端，形成基于传输控制协议的一种实现了浏览器与服务器全双通信的网络协议的视屏数据传输通道；

9）前端渲染模块Decode Canvas009，对步骤8）处理的视频数据传递给前端渲染模块进行前端渲染，用于视屏数据预览。

10）当前端需要采用标准FLV视频框架预览摄像头数据时，采用基于FLV格式的服务器FLV Server006，为步骤3）中H264、H265数据编码提供给Web前端视屏预览；

11）片段解码模块FLV JS010，负责与步骤10）进行通信，获取渲染数据，解码成为HTML5MP4片段；

12）原生HTML5渲染模块video play011，将步骤11）的HTML5 MP4片段进行渲染，等待MP4片段进行播放。

本实施例中硬件设备中的摄像头组件以及硬件平台中的ISP处理组件012、MJPEGEncode编码组件001、H264、H265 Encode编码组件002、基于HTTP协议的JPEG图片服务器MJPEG Server003、基于RTSP协议的H264、H265服务器RTSP Server004、基于WebSocket协议服务器 WebSocket Server005、基于FLV格式的服务器FLV Server006工作在梯口机产品上。

html5脚本模块007、websocket模块008、前端渲染模块Decode Canvas009、片段解码模块FLV JS010、原生HTML5渲染模块video play011工作在浏览器（支持WebKit、HTML5标准）上。

本实施例举例步骤4、步骤5的MJPEG数据预览具体操作为：

首先，在梯口机产品上搭建一个MJPEG Server，支持静态、动态图片数据的预览。其中动态图片数据利用WebKit（开源的浏览器引擎）最新的“ContentType：multipart/x-mixed-replace”（支持解析多帧数据）的处理特性，可以达到同一个请求不断的发送连续时刻的摄像头数据,从而实现连续的摄像头数据的预览。

本实施例中标清数字图像高度压缩数字视频、普通高清音视频高度压缩数字视频视屏数据预览；

浏览器现有标准是无法直接支持H264、H265的流格式渲染，通常会把这些视屏流数据封装在容器里（MP4, FLV, WebM, ASF, ISMA ）等。利用此原理，我们需要在视屏预览的源头去解决问题，在此发明中，我们在设备有多个实现方案。

方法一（步骤7、8、9数据预览方法具体操作）：设备端实现WebSocket Server，定义私有协议（包含视频帧发送指令、视频帧应答指令、视频帧重传指令、视频帧参数修改指令），实现与Web前端 Socket的数据通信，在前端，WebSocket解析信令，把对应数据组织成MP4片段，提供给video元素使用，即可实现视屏流的H264、H265的预览。

方法二（步骤10、11、12数据预览方法具体操作）：设备端实现了FLV文件的Server，在Web前端，使用javascript脚本（直译式脚本语言），把flv数据进行分离，组织成MP4片段，然后提供覆给video元素使用，即可实现视屏流的H264、H265的预览。

通过本实施例的一种基于浏览器的梯口机视频预览方法，提供了多套无需插件的视屏预览方案，如下：1、基于HTTP协议的JPEG图片服务器，能预览摄像头中静态图片、动态图片数据；2、基于RTSP协议的H264、H265服务器提供标准的视频数据预览通道；3、利用websocket视屏数据传输通道对视屏数据进行前端渲染；4、HTML5 MP4片段进行渲染，等待MP4片段进行播放；上述4种预览方案解决同领域中现有的产品，依然停留在IE的插件预览方案的不便利；是一种无需插件的方式，在Chrome内核的浏览器（360浏览器、搜狐浏览器、谷歌浏览器）或者firefox浏览器上，就可以实时的预览摄像头的数据，解决预览摄像头数据还需要装插件的麻烦，也提供一种标准预览摄像头数据的方法。

本领域技术人员在考虑说明书及实践这里公开的实施方式后，将容易想到本申请的其它实施方案。本申请旨在涵盖本申请的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本申请的一般性原理并包括本申请未公开的本技术领域中的公知常识或惯用技术手段。

应当理解的是，本申请并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本申请的范围仅由所附的权利要求来限制。

Claims (3)

1.一种基于浏览器的梯口机视频预览方法，其特征在于，包括如下步骤：

1）梯口机硬件设备中的摄像头组件、硬件平台中的图像信号处理组件（012），负责摄像头数据从模拟到数字的转换，摄像头数据的自动曝光处理，并形成颜色编码数据；

2）当前电脑能通过本地局域网直接预览梯口机摄像头时，此时无需考虑带宽场景，通过在当前电脑安装的运动静止图像或逐帧压缩编码组件（001）负责将步骤1）中的所述颜色编码数据转换成运动静止图像或逐帧压缩数据编码；

3）当前电脑与梯口机设备不在同一局域网时，此时需要考虑带宽场景，通过在当前电脑安装的标清数字图像高度压缩数字视频编码组件、普通高清音视频高度压缩数字视频编码组件（002）负责将步骤1）中所述颜色编码数据转换成标清数字图像高度压缩数字视频数据的编码或转换成普通高清音视频高度压缩数字视频数据的编码；

4）基于超文本传输协议的JPEG图片服务器（003），为步骤2）中运动静止图像或逐帧压缩数据编码提供静态图片、动态图片两种预览方式；

5）超文本标记语言脚本模块（007），依赖于步骤4）中的静态图片、动态图片，运行在web前端的超文本标记语言脚本，负责预览摄像头中静态图片、动态图片数据；

6）当基于超文本传输协议的JPEG图片服务器无法满足当前带宽传输要求且当前端支持标准的实时流传输协议的标清数字图像高度压缩数字视频、普通高清音视频高度压缩数字视频服务器的解析时，采用基于实时流传输协议的标清数字图像高度压缩数字视频、普通高清音视频高度压缩数字视频服务器（004），为步骤3）中标清数字图像高度压缩数字视频数据编码、普通高清音视频高度压缩数字视频数据编码提供标准的视频数据预览。

2.根据权利要求1所述的一种基于浏览器的梯口机视频预览方法，其特征在于，还包括如下步骤：

7）当前端需要预览梯口机数据同时又需要控制摄像头参数时，所述的步骤3）中形成的标清数字图像高度压缩数字视频数据的编码或到普通高清音视频高度压缩数字视频数据的编码就利用视频帧发送指令、视频帧应答指令、视频帧重传指令、视频帧参数修改指令来定义私有信令；采用基于传输控制协议的一种实现了浏览器与服务器全双通信网络协议服务器（005）对所定义的私有信令提供数据传输通道，供网页端获取实时的标清数字图像高度压缩数字视频流数据、普通高清音视频高度压缩数字视频流数据，建立视屏数据传输的通道；

8）基于传输控制协议的一种实现了浏览器与服务器全双通信网络协议的视屏数据预览模块（008），将所述步骤7）的视屏数据传输的通道，运行在Web前端，形成基于传输控制协议的一种实现了浏览器与服务器全双通信的网络协议的视屏数据传输通道；

9）前端渲染模块（009），对所述步骤8）处理的视频数据传递给前端渲染模块进行前端渲染，用于视屏数据预览。

3.根据权利要求1所述的一种基于浏览器的梯口机视频预览方法，其特征在于，还包括如下步骤：

10）当前端需要采用标准FLV视频框架预览摄像头数据时，采用基于流媒体格式的服务器（006），为所述步骤3）中数据编码提供给Web前端视屏预览；

11）片段解码模块（010），负责与所述步骤10）进行通信，获取渲染数据，解码成为超文本标记语言 MP4片段；

12）原生超文本标记语言渲染模块（011），将所述步骤11）的超文本标记语言、MP4片段进行渲染，等待MP4片段进行播放。

Images