CN106506525A - 用于在浏览器上播放视频流的方法及装置 - Google Patents

Abstract

本发明实施例提供了一种用于在浏览器上播放视频流的方法，包括：获取视频流；将所述视频流进行解码，得到帧数据；将所述帧数据进行封装，得到封装后的帧数据；将所述封装后的帧数据发送至所述浏览器，以便于所述浏览器根据所述封装后的帧数据播放所述视频流而无需借助插件。可见，本发明实施例中，将视频流进行编码和封装之后再发送至浏览器，能够避免浏览器通过插件解码，从而该方法能够用于多种不同的浏览器，具有通用性。

Description

用于在浏览器上播放视频流的方法及装置

技术领域

本发明涉及视频播放领域，更具体地涉及一种用于在浏览器上播放视频流的方法及装置。

背景技术

随着技术的不断发展，浏览器的种类越来越多，并且浏览器的功能已经越来越丰富，例如浏览器可以播放各种格式的视频流。然而，目前浏览器播放视频通常是通过插件的方式来实现，一般地插件可以直接获取视频流在浏览器端进行编解码。但是由于不同浏览器的特性和接口不同，插件只能针对特定版本的浏览器开发，并且不同浏览器的插件相互之间也是不兼容的，例如ie的插件就不能在谷歌浏览器(chrome)、火狐浏览器(firefox)、苹果浏览器(safari)等其他的浏览器上运行。

发明内容

考虑到上述问题而提出了本发明。本发明提供了一种用于在浏览器上播放视频流的方法，能够通用地在各种浏览器上实现视频播放，而无需额外安装插件，具有通用性。

根据本发明的第一方面，提供了一种用于在浏览器上播放视频流的方法，包括：

获取视频流；

将所述视频流进行解码，得到帧数据；

将所述帧数据进行封装，得到封装后的帧数据；

将所述封装后的帧数据发送至所述浏览器，以便于所述浏览器根据所述封装后的帧数据播放所述视频流而无需借助插件。

示例性地，所述帧数据为二进制的帧数据，所述封装后的帧数据为websocket格式的数据帧。

示例性地，所述将所述帧数据进行封装，得到封装后的帧数据，包括：

将所述帧数据进行封装并进行压缩，得到所述封装后的帧数据。

示例性地，所述压缩的比例基于显示的分辨率和/或网络状况确定。

根据本发明的第二方面，提供了一种用于在浏览器上播放视频流的方法，包括：

接收封装后的帧数据；

利用javascript语言对所述封装后的帧数据进行编码，得到帧数据；

将所述帧数据利用网页图形库WebGL进行渲染以播放对应的视频。

示例性地，所述将所述帧数据利用WebGL进行渲染，包括：以固定频率利用所述WebGL渲染所述帧数据中的每一帧图像。

示例性地，所述将所述帧数据利用WebGL进行渲染，还包括：将所述帧数据中的每一帧图像渲染在canvas内。

示例性地，在所述接收封装后的帧数据的步骤中，所接收的封装后的帧数据为本发明第一方面所述的方法中发送至浏览器的封装后的帧数据。

根据本发明的第三方面，提供了一种用于在浏览器上播放视频流的装置，包括：

获取模块，用于获取视频流；

解码模块，用于将所述获取模块获取的所述视频流进行解码，得到帧数据；

封装模块，用于将所述解码模块得到的所述帧数据进行封装，得到封装后的帧数据；

发送模块，用于将所述封装模块得到的所述封装后的帧数据发送至所述浏览器，以便于所述浏览器根据所述封装后的帧数据播放所述视频流而无需借助插件。

该装置能够用于实现前述第一方面的用于在浏览器上播放视频流的方法。

根据本发明的第四方面，提供了一种用于在浏览器上播放视频流的装置，包括：

接收模块，用于接收封装后的帧数据；

解码模块，用于利用javascript语言对所述接收模块接收的所述封装后的帧数据进行编码，得到帧数据；

显示模块，用于将所述解码模块得到的所述帧数据利用网页图形库WebGL进行渲染以播放对应的视频。

该装置能够用于实现前述第二方面的用于在浏览器上播放视频流的方法。

根据本发明的第五方面，提供了一种计算机芯片，该计算机芯片包括处理器，当该处理器执行代码时，能够实现前述第一方面所述的方法。

根据本发明的第六方面，提供了一种计算机芯片，该计算机芯片包括处理器，当该处理器执行代码时，能够实现前述第二方面所述的方法。

可见，本发明实施例中，将视频流进行编码和封装之后再发送至浏览器，能够避免浏览器通过插件解码，从而该方法能够用于多种不同的浏览器，具有通用性。

附图说明

通过结合附图对本发明实施例进行更详细的描述，本发明的上述以及其它目的、特征和优势将变得更加明显。附图用来提供对本发明实施例的进一步理解，并且构成说明书的一部分，与本发明实施例一起用于解释本发明，并不构成对本发明的限制。在附图中，相同的参考标号通常代表相同部件或步骤。

图1是本发明实施例的电子设备的一个示意性框图；

图2是本发明实施例的用于在浏览器上播放视频流的方法的一个示意性流程图；

图3是本发明实施例的用于在浏览器上播放视频流的方法的另一个示意性流程图；

图4是本发明实施例的用于在浏览器上播放视频流的方法的交互的示意性流程图；

图5是本发明实施例的用于在浏览器上播放视频流的装置的一个示意性框图；

图6是本发明实施例的用于在浏览器上播放视频流的装置的另一个示意性框图。

具体实施方式

为了使得本发明的目的、技术方案和优点更为明显，下面将参照附图详细描述根据本发明的示例实施例。显然，所描述的实施例仅仅是本发明的一部分实施例，而不是本发明的全部实施例，应理解，本发明不受这里描述的示例实施例的限制。基于本发明中描述的本发明实施例，本领域技术人员在没有付出创造性劳动的情况下所得到的所有其它实施例都应落入本发明的保护范围之内。

在现有技术中，用户在使用浏览器的过程中，需要额外地安装插件才能通过浏览器播放网页视频。并且，对于多个浏览器，用于需要分别安装与浏览器对应的插件，这样造成用户体验低。

本发明提出了在浏览器上播放视频流的方法，采用浏览器通用的无插件渲染方式来播放视频，旨在解决浏览器播放视频的插件互不兼容的问题。

图1所示为本发明实施例的电子设备的一个示意性框图。图1所示的电子设备10包括一个或多个处理器102、一个或多个存储装置104、输入装置106、输出装置108、图像传感器110以及一个或多个非图像传感器114，这些组件通过总线系统112和/或其它形式互连。应当注意，图1所示的电子设备10的组件和结构只是示例性的，而非限制性的，根据需要，所述电子设备也可以具有其他组件和结构。

所述处理器102可以包括CPU 1021和GPU 1022或者具有数据处理能力和/或指令执行能力的其它形式的处理单元，并且可以控制所述电子设备10中的其它组件以执行期望的功能。

所述存储装置104可以包括一个或多个计算机程序产品，所述计算机程序产品可以包括各种形式的计算机可读存储介质，例如易失性存储器1041和/或非易失性存储器1042。所述易失性存储器1041例如可以包括随机存取存储器(Random Access Memory，RAM)和/或高速缓冲存储器(cache)等。所述非易失性存储器1042例如可以包括只读存储器(Read-Only Memory，ROM)、硬盘、闪存等。在所述计算机可读存储介质上可以存储一个或多个计算机程序指令，处理器102可以运行所述程序指令，以实现各种期望的功能。在所述计算机可读存储介质中还可以存储各种应用程序和各种数据，例如所述应用程序使用和/或产生的各种数据等。举例来说，应用程序可以包括浏览器。

所述输入装置106可以是用户用来输入指令的装置，并且可以包括键盘、鼠标、麦克风和触摸屏等中的一个或多个。

所述输出装置108可以向外部(例如用户)输出各种信息(例如图像或声音)，并且可以包括显示器、扬声器等中的一个或多个。

所述图像传感器110可以拍摄用户期望的图像(例如照片、视频等)，并且将所拍摄的图像存储在所述存储装置104中以供其它组件使用。

示例性地，该电子设备10可以被实现为诸如智能手机、平板电脑、门禁系统的图像采集端等。

如图2所示，是本发明实施例的用于在浏览器上播放视频流的方法的一个示意性流程图，图2所示的方法包括：

S101，获取视频流。

具体地，可以从视频源获取该视频流。其中，视频流也可以成为视频数据或视频源数据。其中，视频源可以是图像采集设备，例如，可以是安防领域用于监控的摄像头，可以是用于身份认证的图像采集器，可以是图1所示的设备10中的图像传感器110等等，本发明对此不限定。

以h264格式的实时流传输协议(Real Time Streaming Protocol，RTSP)视频流为例，S101可以包括：通过RTSP从视频源获取视频数据。

S102，将所述视频流进行解码，得到帧数据。

具体地，可以包括：将视频流进行解码和拆帧，从而得到帧数据。以h264格式的RTSP视频流为例，S102可以包括：将视频数据从RTSP格式解码为二进制的h264帧数据。h264格式的帧数据一般是一个I帧(关键帧)后面跟着一系列P帧(非关键帧)，每帧的数据都是一个二进制字节流。也就是说，帧数据为二进制的帧数据，即为一串二进制数据。

可选地，S102的过程可以理解为是解码服务或视频流解码服务，该解码服务负责视频流数据的解码和拆帧。那么，S102可以理解为是将视频流经过一个通用的解码服务。其中，该解码服务可以根据需要进行扩容。

S103，将所述帧数据进行封装，得到封装后的帧数据。

具体地，可以将帧数据封装成websocket格式的数据帧，也就是说，封装后的帧数据为websocket格式的数据帧。

可选地，作为一例，可以将所述帧数据进行封装并进行压缩，得到该封装后的帧数据。其中，压缩的比例与显示的分辨率和/或网络状况有关。具体地，压缩的比例可以基于显示的分辨率和/或网络状况确定。本发明实施例中，可以根据显示的分辨率和/或网络情况调整压缩比例。

S104，将所述封装后的帧数据发送至所述浏览器，以便于所述浏览器根据所述封装后的帧数据播放所述视频流而无需借助插件。

具体地，可以通过websocket将封装后的帧数据传输到浏览器端。可选地，S104中，可以将封装后的帧数据发送至一个或多个浏览器。其中，该浏览器可以为IE浏览器、谷歌浏览器(chrome)、火狐浏览器(firefox)、苹果浏览器(safari)等各种浏览器，在此并不进行限定。

可选地，S104的过程可以理解为是转发服务，该转发服务负责将封装后的帧数据进行一对多的转发。也就是说，转发服务的本质是一个websocket一对多广播，将封装后的帧数据发送给对应的浏览器客户端连接。其中，该转发服务可以根据需要进行扩容。

本发明实施例中，解码服务和转发服务可以部署在单独服务器或者服务器集群上，也就是说，图2所示的方法可以由服务器或服务器集群执行。

由于基本上所有主流浏览器都支持websocket方式接收数据，因此图2所示的方法将封装后的帧数据发送至浏览器，能够避免浏览器通过插件解码，从而该方法能够用于多种不同的浏览器，具有通用性。而且无需用户额外下载插件等，从而能够提高用户体验。

相应地，图3是本发明实施例的用于在浏览器上播放视频流的方法的另一个示意性流程图。图3所示的方法包括：

S201，接收封装后的帧数据。

可理解，S201中所接收的封装后的帧数据即前述图2所示的实施例中S104所发送的封装后的帧数据。可选地，该封装后的帧数据为websocket格式的数据帧。

其中，接收封装后的帧数据的为浏览器。该浏览器可以为IE浏览器、谷歌浏览器(chrome)、火狐浏览器(firefox)、苹果浏览器(safari)等各种浏览器，在此并不进行限定。示例性地，浏览器接收封装后的帧数据的方法为：通过websocket方式接收该封装后的帧数据。

S202，利用javascript语言对所述封装后的帧数据进行编码，得到帧数据。

具体地，可以利用javascript语言实现编码，得到每一帧的图像数据。也就是说，S202所得到的帧数据是每一帧的图像数据。

以h264格式为例，从h264的官方文档可以了解到每帧数据具体的编码方式，从而可以在S202中可以利用javascript语言实现解码，或者利用第三方开源软件实现解码，获得每一帧的图像数据。

S203，将所述帧数据利用网页图形库(Web Graphics Library，WebGL)进行渲染，以播放所述帧数据对应的视频。

具体地，将所述帧数据进行WebGL渲染，可以包括：以固定帧率，利用WebGL渲染帧数据的每一帧数据，得到连续播放的视频效果。其中，利用WebGL渲染帧数据一般渲染在canvas内。将帧数据中的每一帧图像渲染在canvas内，相对于其他渲染方式，可以更好地实现相应图像的展示。

其中，WebGL是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGLES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。

其中，canvas是网页例如HTML5中的图形容器，用于图形的绘制。绘制图形需通过脚本(通常是JavaScript)来完成。通过多种方法使用Canvas绘制路径，盒、圆、字符以及添加图像。

可见，在获得S202的每帧的图像之后，保持固定帧率利用WebGL渲染每一帧图像即可实现视频播放。并且，在本发明实施例中，WebGL可以利用硬件加速渲染，提高渲染效率。

本发明实施例中，图3所示的方法可以由浏览器执行。

图3所示的方法中，浏览器无需通过插件进行解码，只需要利用javascript语言进行解码，并利用WebGL渲染来播放视频即可，具有通用性。

如图4所示，为本发明实施例的用于在浏览器上播放视频流的方法的交互的流程图。可理解，图4中同样序号的步骤可以参见前述图2和图3中相同序号的描述，为避免重复，这里不再赘述。

图5是本发明实施例的用于在浏览器上播放视频流的装置的一个示意性框图。图5所示的装置50包括：获取模块501、解码模块502、封装模块503和发送模块504。

获取模块501，用于获取视频流。解码模块502，用于将所述获取模块501获取的所述视频流进行解码，得到帧数据。封装模块503，用于将所述解码模块502得到的所述帧数据进行封装，得到封装后的帧数据。发送模块504，用于将所述封装模块503得到的所述封装后的帧数据发送至所述浏览器，以便于所述浏览器根据所述封装后的帧数据播放所述视频流而无需借助插件。

示意性地，所述帧数据为二进制的帧数据，所述封装后的帧数据为websocket格式的数据帧。

可选地，作为一例，封装模块503具体用于：将所述帧数据进行封装并进行压缩，得到所述封装后的帧数据。其中，所述压缩的比例基于显示的分辨率和/或网络状况确定。

图5所示的装置50能够用于实现前述图2所示的方法。

图6是本发明实施例的用于在浏览器上播放视频流的装置的另一示意性框图。图6所示的装置60包括：接收模块601、解码模块602和显示模块603。

接收模块601，用于接收封装后的帧数据。解码模块602，用于利用javascript语言对所述接收模块601接收的所述封装后的帧数据进行编码，得到帧数据。显示模块603，用于将所述解码模块602得到的所述帧数据利用网页图形库WebGL渲染以播放对应的视频。示例性地，该WebGL渲染可以渲染在canvas中。

可选地，作为一例，显示模块603具体用于：以固定频率利用所述WebGL渲染所述帧数据中的每一帧图像。进一步地，显示模块603还可以用于：将所述帧数据中的每一帧图像渲染在canvas内。

图6所示的装置60能够用于实现前述图3所示的方法。

另外，本发明实施例还提供了一种电子设备，该电子设备包括装置50和装置60。

可选地，该装置50可以包括处理器和存储器，其中，存储器用于存储指令，处理器执行该指令时，可以实现前述图2所示的方法。

可选地，该装置60可以包括处理器和存储器，其中，存储器用于存储指令，处理器执行该指令时，可以实现前述图3所示的方法。

这样，本发明实施例所提供的用于在浏览器上播放视频流的方法，无需再浏览器上安装插件，能够解决浏览器播放视频的插件互不兼容的问题，具有通用性。

尽管这里已经参考附图描述了示例实施例，应理解上述示例实施例仅仅是示例性的，并且不意图将本发明的范围限制于此。本领域普通技术人员可以在其中进行各种改变和修改，而不偏离本发明的范围和精神。所有这些改变和修改意在被包括在所附权利要求所要求的本发明的范围之内。

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

在本申请所提供的几个实施例中，应该理解到，所揭露的设备和方法，可以通过其它的方式实现。例如，以上所描述的设备实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个设备，或一些特征可以忽略，或不执行。

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

类似地，应当理解，为了精简本发明并帮助理解各个发明方面中的一个或多个，在对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该本发明的的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如相应的权利要求书所反映的那样，其发明点在于可以用少于某个公开的单个实施例的所有特征的特征来解决相应的技术问题。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。

本领域的技术人员可以理解，除了特征之间相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。

此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。

本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本发明实施例的物品分析设备中的一些模块的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的装置程序(例如，计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。

应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。

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

Claims (16)

1.一种用于在浏览器上播放视频流的方法，其特征在于，包括：

获取视频流；

将所述视频流进行解码，得到帧数据；

将所述帧数据进行封装，得到封装后的帧数据；

将所述封装后的帧数据发送至所述浏览器，以便于所述浏览器根据所述封装后的帧数据播放所述视频流而无需借助插件。

2.如权利要求1所述的方法，其特征在于，所述帧数据为二进制的帧数据，所述封装后的帧数据为websocket格式的数据帧。

3.如权利要求1或2所述的方法，其特征在于，所述将所述帧数据进行封装，得到封装后的帧数据，包括：

将所述帧数据进行封装并进行压缩，得到所述封装后的帧数据。

4.如权利要求3所述的方法，其特征在于，所述压缩的比例基于显示的分辨率和/或网络状况确定。

5.一种用于在浏览器上播放视频流的方法，其特征在于，包括：

接收封装后的帧数据；

利用javascript语言对所述封装后的帧数据进行编码，得到帧数据；

将所述帧数据利用网页图形库WebGL进行渲染以播放对应的视频。

6.如权利要求5所述的方法，其特征在于，所述将所述帧数据利用WebGL进行渲染，包括：

以固定频率利用所述WebGL渲染所述帧数据中的每一帧图像。

7.如权利要求6所述的方法，其特征在于，所述将所述帧数据利用WebGL进行渲染，还包括：

将所述帧数据中的每一帧图像渲染在canvas内。

8.如权利要求5至7任一项所述的方法，其特征在于，在所述接收封装后的帧数据的步骤中，所接收的封装后的帧数据为权利要求1至5任一项所述的方法中发送至浏览器的封装后的帧数据。

9.一种用于在浏览器上播放视频流的装置，其特征在于，包括：

获取模块，用于获取视频流；

解码模块，用于将所述获取模块获取的所述视频流进行解码，得到帧数据；

封装模块，用于将所述解码模块得到的所述帧数据进行封装，得到封装后的帧数据；

发送模块，用于将所述封装模块得到的所述封装后的帧数据发送至所述浏览器，以便于所述浏览器根据所述封装后的帧数据播放所述视频流而无需借助插件。

10.如权利要求9所述的装置，其特征在于，所述帧数据为二进制的帧数据，所述封装后的帧数据为websocket格式的数据帧。

11.如权利要求9或10所述的装置，其特征在于，所述封装模块，具体用于：

将所述帧数据进行封装并进行压缩，得到所述封装后的帧数据。

12.如权利要求11述的装置，其特征在于，所述压缩的比例基于显示的分辨率和/或网络状况确定。

13.一种用于在浏览器上播放视频流的装置，其特征在于，包括：

接收模块，用于接收封装后的帧数据；

解码模块，用于利用javascript语言对所述接收模块接收的所述封装后的帧数据进行编码，得到帧数据；

显示模块，用于将所述解码模块得到的所述帧数据利用网页图形库WebGL进行渲染以播放对应的视频。

14.如权利要求13所述的装置，其特征在于，所述显示模块，具体用于：

以固定频率利用所述WebGL渲染所述帧数据中的每一帧图像。

15.如权利要求14所述的装置，其特征在于，所述显示模块，还用于：

将所述帧数据中的每一帧图像渲染在canvas内。

16.如权利要求13至15任一项所述的装置，其特征在于，所述接收模块所接收的封装后的帧数据为权利要求9至12任一项所述的装置中的发送模块所发送的封装后的帧数据。