CN112261377A - web版监控视频播放方法、电子设备及存储介质 - Google Patents

Abstract

本发明实施例公开了一种web版监控视频播放方法、电子设备及存储介质。方法包括：创建主进程及两个子进程；获取实时视频流，通过两个子进程及wasm模块对实时视频流进行处理以得到音频数据和视频数据；通过主进程接收子进程推送的音频数据和视频数据，并创建Audio队列和Video队列；对音频数据和视频数据进行处理后加入Audio队列和Video队列；确定音视频播放规则；在浏览器上播放时，基于音视频播放规则，借助Web Audiot API或WebGL获取所述Audio队列或Video队列中的音频数据或视频数据进行播放。实施本发明实施例，无需任何插件，可直接在浏览器的web页面播放监控视频。

Description

web版监控视频播放方法、电子设备及存储介质

技术领域

本发明涉及计算机软件技术领域，具体涉及一种web版监控视频播放方法、电子设备及存储介质。

背景技术

监控摄像机已经从传统的安防行业拓展到智慧城市、智能家居、智慧物流等各个行业。大多数网络摄像机都是通过RTSP协议传输视频流的，监控视频的播放也都是基于一些插件化技术和自研的播放器，单HTML并不标准支持RTSP流，这跟目前浏览器无插件播放严重不匹配，不仅兼容难而且使用很不方便。

随着互联网技术的发展及web应用的不断成熟，越来越多的软件系统开始使用B/S架构，在这种架构下，需要一种无须安装任何插件、直接基于Web页面观看监控画面的技术。

目前，在浏览器播放监控视频的方案有以下几种：

一种是使用使用中介服务器转码播放的方式，如将rtsp转成rtmp，浏览器端借助Flash播放rtmp视频，这种方案的监控视频播放严重中介服务器和Flash，而由于Flash本身的安全性，现代浏览器已经逐渐开始放弃对Flash的支持。

一种是在使用浏览器端的ActivX或NPAPI插件支持rtsp的播放，如vlc浏览器插件，这种方式可以直接播放rtsp，无需任何中介服务器的帮助，但是需要手动安装插件，基于NPAPI实现的流媒体视频插件存在着性能、崩溃等问题，且对用户存在潜在的安全隐患，随着web技术的迅猛发展，大部分浏览器已经停止了对NPAPI插件的支持。

一种是借助现代浏览器WebSocket技术，但这种技术同样需要通过服务器端开启一个websocket代理接收rtsp流，并通过中间件转播技术将接收到的RTP H264和AAC转为mp4媒体片段发送给浏览器客户端，客户端通过浏览器Video技术进行播放。

发明内容

针对现有技术中的技术缺陷，本发明实施例的目的在于提供一种web版监控视频播放方法、电子设备及存储介质。

为实现上述目的，第一方面，本发明实施例提供了一种web版监控视频播放方法，包括：

创建主进程及两个子进程；

获取来自于监控摄像机的实时视频流，通过两个子进程及wasm模块对所述实时视频流进行处理以得到音频数据和视频数据；其中，所述wasm模块为使用Emscrpten编译器进行编译所得；

通过所述主进程接收子进程推送的音频数据和视频数据，并创建Audio队列和Video队列；

对所述音频数据和视频数据进行处理后加入所述Audio队列和Video队列；

确定音视频播放规则；

在浏览器上播放时，基于所述音视频播放规则，借助Web Audiot API或WebGL获取所述Audio队列或Video队列中的音频数据或视频数据进行播放。

作为本申请一种具体的实施方式，两个子进程包括拉流子进程和解码子进程；

通过两个子进程及wasm模块对所述实时视频流进行处理以得到音频数据和视频数据，具体包括：

通过所述拉流子进程调用Streams API拉取所述实时视频流中的流数据；

获取Reader对象，通过所述Reader对象读取所述流数据中的多个Chunk，并进行缓存；

当完成一组流数据的获取后，通过Web消息传递方式将所述流数据存储至消息队列中，并将所述流数据发送至所述解码子进程；

通过所述解码子进程调用所述wasm模块进行解码，以得到音频数据和视频数据。

进一步地，对所述音频数据进行处理具体包括：对音频数据添加wav header。

其中，所述Audio队列用于存储未播放的音频，所述Video队列用于存储未播放的视频；确定音视频播放规则具体包括：

当所述主进程接收到音频数据时，遍历当前的Audio队列，将音频帧的时间戳与每个视频帧的时间戳进行比较；若音频帧的时间戳在视频帧的时间戳之前，则播放音频数据；

若音频的时间戳和视频的时间戳的差值在预设误差内，则同时播放音频数据和视频数据，并将视频数据从Video队列中删除；

若视频帧的时间戳在音频帧的时间戳之前，则播放视频数据，并将视频数据从Video队列中删除；

若视频数据播放完之后，仍未播放音频数据，则将音频数据放入Audio队列。

进一步地，所述音频数据的格式为PCM格式，所述视频数据的格式为YUV格式；所述方法还包括：

借助Web Audiot API获取并播放wav格式的音频数据于浏览器；

借助WebGL，将YUV数据坐标于WebGL系统坐标进行一一对应，以实现视频数据在浏览器上的播放。

第二方面，本发明实施例提供了一种Web版监控视频播放的电子设备，包括处理器、输入设备、输出设备和存储器，所述处理器、输入设备、输出设备和存储器相互连接，其中，所述存储器用于存储计算机程序，所述计算机程序包括程序指令，所述处理器被配置用于调用所述程序指令，执行上述第一方面的方法。

第三方面，本发明实施例提供了一种计算机可读存储介质，存储有计算机程序，所述计算机程序包括程序指令，所述程序指令当被处理器执行时使所述处理器执行上述第一方面的方法。

第四方面，本发明实施例提供了另一种用于Web版监控视频播放的电子设备，包括：

创建模块，用于创建主进程及两个子进程；

获取模块，用于获取来自于监控摄像机的实时视频流；

处理模块，用于通过两个子进程及wasm模块对所述实时视频流进行处理以得到音频数据和视频数据；其中，所述wasm模块为使用Emscrpten编译器进行编译所得；

接收模块，用于通过所述主进程接收子进程推送的音频数据和视频数据；

所述创建模块还用于创建Audio队列和Video队列；

所述处理模块还用于：

对所述音频数据和视频数据进行处理后加入所述Audio队列和Video队列；

确定音视频播放规则；

在浏览器上播放时，基于所述音视频播放规则，借助Web Audiot API或WebGL获取所述Audio队列或Video队列中的音频数据或视频数据进行播放。

实施本发明实施例，无需任何插件，可直接在浏览器的web页面播放监控视频。

附图说明

为了更清楚地说明本发明具体实施方式或现有技术中的技术方案，下面将对具体实施方式或现有技术描述中所需要使用的附图作简单地介绍。

图1是本发明实施例提供的web版监控视频播放方法的流程示意图；

图2是本发明实施例提供的用于web版监控视频播放的电子设备的一种结构示意图；

图3是本发明实施例提供的用于web版监控视频播放的电子设备的另一种结构示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

本发明实施例提供了一种web版监控视频播放方法，其可依赖于一系统。该系统包括wasm模块、容器封装解封模块和视频编解码模块。需要说明的是，本实施例中是使用Emscrpten编译器将流协议、容器和基本I/O访问和视频编解码等c代码编译为wasm模块，容器封装解封模块用来处理监控视频流并将得到的音视频缓存起来，视频编解码模块用于将缓存数据解码得到图像和音频数据。其中，c代码：视频编解码程序；Emscrpten编译器：将c代码编译为wasm模块，浏览器可以通过使用WebAssembly的JavaScript API加载并使用wasm模块；js代码：创建进程，调用wasm模块。

请参考图1，本发明实施例提供的web版监控视频播放方法包括：

S101，创建主进程及两个子进程。

具体地，通过js代码创建一个主进程及两个子进程。主进程用于事件响应及子进程的调度。两个子进程分别为拉流子进程和解码子进程，分别用于拉流和解码。

S102，获取来自于监控摄像机的实时视频流，通过两个子进程及wasm模块对所述实时视频流进行处理以得到音频数据和视频数据。

其中，所述wasm模块为使用Emscrpten编译器进行编译所得。

具体地，步骤S102包括：

通过拉流子进程调用Streams API拉取实时视频流中的流数据；

获取Reader对象，通过Reader对象读取所述流数据中的多个Chunk，并进行缓存；需要说明的是，接入的视频流是个实时流，程序做不到实时，有部分延迟，这里把数据都缓存起来，防止丢数据；

当完成一组流数据的获取后，通过Web消息传递方式将流数据存储至消息队列中，并将流数据发送至解码子进程；

通过解码子进程调用wasm模块进行解码，以得到音频数据和视频数据。得到解码数据(音频和视频)后，通过解码子进程的自定义方法分别将音频数据和视频数据通过消息传递方法推送给主进程。

S103，通过主进程接收子进程推送的音频数据和视频数据，并创建Audio队列和Video队列。

其中，所述Audio队列用于存储未播放的音频，所述Video队列用于存储未播放的视频。

S104，对音频数据和视频数据进行处理后加入Audio队列和Video队列。

主进程中接收到的解码的音频与视频数据分别为PCM格式和YUV格式。PCM是未经压缩的音频原始格式，格式文件中不包含头部信息，播放器无法知道采样率、声道数、采样位数、音频数据大小等信息，导致浏览器无法直播播放。因此，本方法中对获取的音频数据文件添加wav header。

S105，确定音视频播放规则。

具体地，在处理音频与视频数据时，专用进程中会创建两个队列，分别是Audio队列和Video队列。当接收到音频帧的时候，遍历此时的Video队列，将此音频帧的时间戳跟每个视频帧的时间戳进行比较，如果音频的时间在这个视频帧的前面，则播放该音频，如果音频跟视频的时间戳相差在某个可接受的误差内，则同时播放音频和视频，并将视频帧从Video队列中删除，如果视频时间在前，则播放视频帧饼将视频帧从Video队列中删除，如果视频帧播放完后，仍未播放音频帧，则将该音频放到Audio队列。接收视频帧的时候，做类似处理。

S106，在浏览器上播放时，基于所述音视频播放规则，借助Web Audiot API或WebGL获取所述Audio队列或Video队列中的音频数据或视频数据进行播放。

具体地，借助现代浏览器的Web Audiot API获取并播放wav格式的音频Buffer。YUV是一种颜色编码方式，浏览器无法直接加载，本方法借助WebGL，通过YUV数据坐标与WebGL系统坐标一一对应，将视频帧的图像绘制出来并展现在浏览器上。

从以上描述可以得知，实施本发明实施例的web版监控视频播放方法，无需任何插件，可直接在浏览器的web页面播放监控视频。

基于相同的发明构思，本发明实施例提供了一种用于Web版监控视频播放的电子设备，如图所示，包括：

创建模块10，用于创建主进程及两个子进程；

获取模块11，用于获取来自于监控摄像机的实时视频流；

处理模块12，用于通过两个子进程及wasm模块对所述实时视频流进行处理以得到音频数据和视频数据；其中，所述wasm模块为使用Emscrpten编译器进行编译所得；

接收模块13，用于通过所述主进程接收子进程推送的音频数据和视频数据；

所述创建模块10还用于创建Audio队列和Video队列；

所述处理模块12还用于：

对所述音频数据和视频数据进行处理后加入所述Audio队列和Video队列；

确定音视频播放规则；

在浏览器上播放时，基于所述音视频播放规则，借助Web Audiot API或WebGL获取所述Audio队列或Video队列中的音频数据或视频数据进行播放。

其中，两个子进程包括拉流子进程和解码子进程；处理模块12具体用于：

通过两个子进程及wasm模块对所述实时视频流进行处理以得到音频数据和视频数据，具体包括：

通过所述拉流子进程调用Streams API拉取所述实时视频流中的流数据；

获取Reader对象，通过所述Reader对象读取所述流数据中的多个Chunk，并进行缓存；

当完成一组流数据的获取后，通过Web消息传递方式将所述流数据存储至消息队列中，并将所述流数据发送至所述解码子进程；

通过解码子进程调用所述wasm模块进行解码，以得到音频数据和视频数据。

进一步地，所述处理模块12具体用于对音频数据添加wav header。

进一步地，Audio队列和Video队列分别用于存储未播放的音频和视频。所述处理模块12具体用于：

当所述主进程接收到音频数据时，遍历当前的Audio队列，将音频帧的时间戳与每个视频帧的时间戳进行比较；若音频帧的时间戳在视频帧的时间戳之前，则播放音频数据；

若音频的时间戳和视频的时间戳的差值在预设误差内，则同时播放音频数据和视频数据，并将视频数据从Video队列中删除；

若视频帧的时间戳在音频帧的时间戳之前，则播放视频数据，并将视频数据从Video队列中删除；

若视频数据播放完之后，仍未播放音频数据，则将音频数据放入Audio队列。

进一步地，所述处理模块12还用于：

借助Web Audiot API获取并播放wav格式的音频数据于浏览器；

借助WebGL，将YUV数据坐标于WebGL系统坐标进行一一对应，以实现视频数据在浏览器上的播放。

可选地，本发明实施例还提供了另一种用于Web版监控视频播放的电子设备。如图3所示，可以包括：一个或多个处理器101、一个或多个输入设备102、一个或多个输出设备103和存储器104，上述处理器101、输入设备102、输出设备103和存储器104通过总线105相互连接。存储器104用于存储计算机程序，所述计算机程序包括程序指令，所述处理器101被配置用于调用所述程序指令执行上述Web版监控视频播放方法实施例部分的方法。

应当理解，在本发明实施例中，所称处理器101可以是中央处理单元(CentralProcessing Unit，CPU)，该处理器还可以是其他通用处理器、数字信号处理器(DigitalSignal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现成可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

输入设备102可以包括键盘等，输出设备103可以包括显示器(LCD等)、扬声器等。

该存储器104可以包括只读存储器和随机存取存储器，并向处理器101提供指令和数据。存储器104的一部分还可以包括非易失性随机存取存储器。例如，存储器104还可以存储设备类型的信息。

具体实现中，本发明实施例中所描述的处理器101、输入设备102、输出设备103可执行本发明实施例提供的Web版监控视频播放方法的实施例中所描述的实现方式，在此不再赘述。

需要说明的是，关于电子设备更为详细的工作流程，请参考前述方法实施例部分，在此不再赘述。

进一步地，本发明实施例还提供了一种可读存储介质，存储有计算机程序，所述计算机程序包括程序指令，所述程序指令被处理器执行时实现：上述Web版监控视频播放方法。

所述计算机可读存储介质可以是前述实施例所述的电子设备的内部存储单元，例如系统的硬盘或内存。所述计算机可读存储介质也可以是所述系统的外部存储设备，例如所述系统上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(SecureDigital,SD)卡，闪存卡(Flash Card)等。进一步地，所述计算机可读存储介质还可以既包括所述系统的内部存储单元也包括外部存储设备。所述计算机可读存储介质用于存储所述计算机程序以及所述系统所需的其他程序和数据。所述计算机可读存储介质还可以用于暂时地存储已经输出或者将要输出的数据。

本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以是两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分，或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-OnlyMemory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到各种等效的修改或替换，这些修改或替换都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以权利要求的保护范围为准。

Claims (9)

1.一种web版监控视频播放方法，其特征在于，包括：

创建主进程及两个子进程；

获取来自于监控摄像机的实时视频流，通过两个子进程及wasm模块对所述实时视频流进行处理以得到音频数据和视频数据；其中，所述wasm模块为使用Emscrpten编译器进行编译所得；

通过所述主进程接收子进程推送的音频数据和视频数据，并创建Audio队列和Video队列；

对所述音频数据和视频数据进行处理后加入所述Audio队列和Video队列；

确定音视频播放规则；

在浏览器上播放时，基于所述音视频播放规则，借助Web Audiot API或WebGL获取所述Audio队列或Video队列中的音频数据或视频数据进行播放。

2.如权利要求1所述的web版监控视频播放方法，其特征在于，两个子进程包括拉流子进程和解码子进程；

通过两个子进程及wasm模块对所述实时视频流进行处理以得到音频数据和视频数据，具体包括：

通过所述拉流子进程调用Streams API拉取所述实时视频流中的流数据；

获取Reader对象，通过所述Reader对象读取所述流数据中的多个Chunk，并进行缓存；

当完成一组流数据的获取后，通过Web消息传递方式将所述流数据存储至消息队列中，并将所述流数据发送至所述解码子进程；

通过所述解码子进程调用所述wasm模块进行解码，以得到音频数据和视频数据。

3.如权利要求1所述的web版监控视频播放方法，其特征在于，对所述音频数据进行处理具体包括：

对所述音频数据添加wav header。

4.如权利要求2所述的web版监控视频播放方法，其特征在于，所述Audio队列用于存储未播放的音频，所述Video队列用于存储未播放的视频；确定音视频播放规则具体包括：

当所述主进程接收到音频数据时，遍历当前的Audio队列，将音频帧的时间戳与每个视频帧的时间戳进行比较；若音频帧的时间戳在视频帧的时间戳之前，则播放音频数据；

若音频的时间戳和视频的时间戳的差值在预设误差内，则同时播放音频数据和视频数据，并将视频数据从Video队列中删除；

若视频帧的时间戳在音频帧的时间戳之前，则播放视频数据，并将视频数据从Video队列中删除；

若视频数据播放完之后，仍未播放音频数据，则将音频数据放入Audio队列。

5.如权利要求4所述的web版监控视频播放方法，其特征在于，所述音频数据的格式为PCM格式，所述视频数据的格式为YUV格式；所述方法还包括：

借助Web Audiot API获取并播放wav格式的音频数据于浏览器；

借助WebGL，将YUV数据坐标于WebGL系统坐标进行一一对应，以实现视频数据在浏览器上的播放。

6.一种用于Web版监控视频播放的电子设备，其特征在于，包括处理器、输入设备、输出设备和存储器，所述处理器、输入设备、输出设备和存储器相互连接，其中，所述存储器用于存储计算机程序，所述计算机程序包括程序指令，所述处理器被配置用于调用所述程序指令，执行如权利要求1-5任一项所述的方法。

7.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机程序，所述计算机程序包括程序指令，所述程序指令当被处理器执行时使所述处理器执行如权利要求1-5任一项所述的方法。

8.一种用于web版监控视频播放的电子设备，其特征在于，包括：

创建模块，用于创建主进程及两个子进程；

获取模块，用于获取来自于监控摄像机的实时视频流；

处理模块，用于通过两个子进程及wasm模块对所述实时视频流进行处理以得到音频数据和视频数据；其中，所述wasm模块为使用Emscrpten编译器进行编译所得；

接收模块，用于通过所述主进程接收子进程推送的音频数据和视频数据；

所述创建模块还用于创建Audio队列和Video队列；

所述处理模块还用于：

对所述音频数据和视频数据进行处理后加入所述Audio队列和Video队列；

确定音视频播放规则；

在浏览器上播放时，基于所述音视频播放规则，借助Web Audiot API或WebGL获取所述Audio队列或Video队列中的音频数据或视频数据进行播放。

9.如权利要求8所述的用于web版监控视频播放的电子设备，其特征在于，两个子进程包括拉流子进程和解码子进程；所述处理模块具体用于：

通过两个子进程及wasm模块对所述实时视频流进行处理以得到音频数据和视频数据，具体包括：

通过所述拉流子进程调用Streams API拉取所述实时视频流中的流数据；

获取Reader对象，通过所述Reader对象读取所述流数据中的多个Chunk，并进行缓存；

当完成一组流数据的获取后，通过Web消息传递方式将所述流数据存储至消息队列中，并将所述流数据发送至所述解码子进程；

通过所述解码子进程调用所述wasm模块进行解码，以得到音频数据和视频数据。

Images