CN107888932A - 一种基于浏览器的跨平台视频直播的系统及方法 - Google Patents

Abstract

本发明公开了一种基于浏览器的跨平台视频直播的系统及方法，包括视频原始码流解复用模块、视频段混合模块、转换控制模块、播放控制模块、媒体源扩展控制模块、IO模块，其中播放控制模块是用户操作的接口，负责协调转换控制模块和媒体源扩展控制模块之间的数据流和控制流；本发明通过提供了通过分析视频数据包中的视频描述信息和码流数据，并将分析出来的视频描述信息和码流数据组装成标准的视频文件格式，再调用基于浏览器的原生接口实现视频直播，不仅实现了跨平台的视频直播，而且支持所有主流流媒体协议接入，也可以支持用户私有流媒体协议接入，并且具有低延迟、可靠性高、通用性好、灵活性高等优点。

Description

一种基于浏览器的跨平台视频直播的系统及方法

技术领域

本发明涉及一种较大范围，具体是一种基于浏览器的跨平台视频直播的系统及方法。

背景技术

随着光纤、3G和4G网络的建设，网络的速度越来越快、带宽也越来越大，通过有线和移动电信网络传输视频流媒体信息已经非常普遍，人们早已经习惯通过互联网看在线电影、学习在线视频教程等。最近几年，视频直播正悄然兴起，视频直播因为其实时性、低延迟、交互性强等独特的优势，越来越受人们的欢迎，例如通过视频直播来社交相对于文字、图片等方式来说，具有不可比拟的优势；老师可以通过视频直播完成在线教学；视频直播功能也是安防领域的基础功能之一；另外，现在非常流行的家庭安防，核心功能就是通过手机的视频直播，人们可以实时查看家里正在发生的情况、家长可以实时看到孩子在校情况等等。由此可以预见，未来视频直播应用的领域将越来越广泛。

视频直播是指利用既有的互联网实现对音视频信号的实时采集、实时传输，并且能够在远端实现流畅的实时播放。视频直播由于其处理数据量大、实时采集、实时传输、实时播放、低延迟等特点，具有较高的技术门槛，一直以来都是限制行业应用开展的难点之一，尤其在视频播放端，由于不同用户使用的视频播放设备各式各样，有PC，平板电脑、手机等，而且不同型号的播放设备，硬件配置、操作系统也各不相同，要实现一致的播放效果，需要开发者为不同设备、不同配置、不同操作系统、不同开发语言的平台开发出相应的播放器；因此为了支持市面上常见的视频播放设备，至少要实现对Windows、Mac OS、IOS,Android、Linux等多个平台的支持，而这些平台的开发语言又涉及:Object C++,java,VC++等，工作量可想而知；为了满足跨平台视频直播的需要，公司需要为不同平台成立相应的开发小组来开发和维护，对公司来说，同时维护多个平台不仅意味着需要巨大的开支，而且还会严重影响产品开发的进度。因此一个成熟的跨平台的视频直播方案将会显著提高开发商的经济效益。一个跨平台视频直播方案应当能够同时在Windows、Mac OS、IOS,Android、Linux等多个平台上稳定运行。

由于所有设备平台上都安装了浏览器，大部分浏览器都遵循W3C标准规范，并且W3C标准尤其是最新的html5规范对于视频流媒体的支持越来越丰富；浏览器还具有开发语言一致、跨平台、通讯协议简单、B/S架构、无需安装客户端等优点；正因为浏览器有以上诸多优点，因此许多公司尝试通过使用浏览器的方式实现视频直播，从而解决需要维护多个平台的难题。但是由于视频直播的技术特殊性，浏览器并没有现成的方案实现视频直播，需要开发者根据各自的协议、格式和业务要求形成各自的方案。市面上浏览器视频直播，主流方案有：基于flash的跨平台视频直播方案，基于插件的跨平台视频直播方案，基于HTTPLive Streaming(HLS)的跨平台视频直播方案等。由于基于flash的视频直播方案和基于插件的跨平台视频直播方案，由于安全性低、稳定性差、资源消耗高等诸多问题，越来越多的主流浏览器厂商将不再支持这两种视频直播方案，面临淘汰；前基于HTTP Live Streaming(HLS)的方案成为跨平台视频直播的最佳方案；HTTP Live Streaming实现是基于http的流媒体传输协议，通过将连续的直播视频数据流分解为一个个连续的、时间很短的小媒体文件(MPEG-TS格式)，并存储在服务器端，然后客户端不断从服务器下载和播放这些小文件来实现直播。HTTP Live Streaming的缺点是1)播放延迟高，根据情况一般在5s-30s不等；2)会在服务器端形成大量的碎片文件，频繁硬盘IO操作会降低系统的性能和吞吐量；3)实现直播前必须先下载索引文件，缺乏灵活性，4)数据流的分解、格式转换、文件打包、硬盘操作以及索引文件生成使得服务器端的处理较复杂，通用性差。5)只能通过http协议传输文件，现有流媒体服务器必须进行二次开发。

发明内容

本发明的目的在于提供一种基于浏览器的跨平台视频直播的系统及方法，以解决上述背景技术中提出的问题。

为实现上述目的，本发明提供如下技术方案：

一种基于浏览器的跨平台视频直播的系统，包括视频原始码流解复用模块、视频段混合模块、转换控制模块、播放控制模块、媒体源扩展控制模块、IO模块，其中播放控制模块是用户操作的接口，为用户提供H264视频码流和Acc音频码流的直播、暂停、继续、停止、抓图等功能，并且负责协调转换控制模块和媒体源扩展控制模块之间的数据流和控制流；媒体源扩展控制模块负责和浏览器的API打交道，通过创建MeidaSource、sourceBuffer等对象、以及建立和videoElement的关联从而实现视频的渲染控制，同时，可以接收来自播放控制模块的控制命令和流媒体数据，并且当浏览器对象状态改变时，通知上层的播放控制模块来控制流媒体数据源的启停；转换控制模块负责接收来自下层的流媒体数据，根据流媒体数据类型，将流媒体数据包装成不同的事件，上报到上层播放控制模块，并根据接收到的播放控制模块命令，控制IO模块的启动和关闭，实现流媒体数据源的打开、暂停、继续和关闭；IO模块:负责和流媒体服务器建立连接，并从流媒体服务器接收和发送流媒体数据协议包；IO模块的启停是受转换控制模块控制的；视频原始码流解复用模块:负责从视频原始码流的数据包中分离出一个个单独的视频网络抽象层单元，并根据视频网络抽象层单元解析出视频元信息对象和视频帧数据对象；视频段混合模块：负责将视频元信息对象根据ISO-BMFF协议格式包装成符合fmp4格式的视频元信息初始化段对象，再将视频帧数据对象根据ISO-BMFF协议格式包装成符合fmp4格式的视频帧数据媒体段对象。

一种基于浏览器的跨平台视频直播的方法，包括如下步骤：

1)播放控制模块根据启动参数启动视频直播，启动参数包括流媒体服务器地址、前端视频采集设备ID，前端视频采集设备的通道号(根据情况可选)，前端视频采集设备的视频清晰度(分为高、中、低三个等级)；

2)播放控制模块接收到视频直播命令后，首先触发媒体源扩展控制模块初始化，媒体源扩展控制模块初始化过程包括：创建浏览器MediaSource对象，并将浏览器的videoElement对象src属性指向刚创建的MediaSource对象，然后为MediaSource对象绑定事件响应函数；

3)媒体源扩展控制模块完成初始化后，MediaSource对象的‘sourceopen’事件被触发，在对应的事件响应函数中，向播放控制模块发送‘SOURCEOPEN’事件，通知播放控制模块媒体源扩展模块处于已经打开状态，可以接收流媒体数据；

4)播放控制模块收到媒体源扩展模块的‘SOURCEOPEN’事件后，创建转换控制模块对象，并为转换控制模块绑定事件响应函数，为从转换控制模块接收流媒体数据做准备，转换控制模块对象创建完成后，执行转换控制模块的启动接口；

5)转换控制模块的启动接口被执行时，首先分别创建视频原始码流解复用模块对象、视频段混合模块对象和IO模块对象；并为四个对象建立数据传输管道，即IO模块对象处理完成的数据发送到视频原始码流解复用模块对象处理，由视频原始码流解复用模块对象处理完成后再发送到视频段混合模块对象中处理，视频段混合模块对象处理完成后，再将处理后的数据发送到转换控制模块中处理，这样就形成了数据处理的管道，具体参考图1；上述工作完成之后，触发IO模块对象的打开视频直播接口；

6)IO模块的打开视频直播接口被执行时，首先创建websocket对象，作为播放器和流媒体服务器之间的的通讯通道，websocket通道连接建立后，IO模块对象通过websocket通道将视频直播的请求发送到流媒体服务器，并等待流媒体服务器的反馈数据；当IO模块接收到流媒体服务器发送的包含视频数据的传输协议包后，通过视频原始码流解复用模块提供的接口，将协议包发送给视频原始码流解复用模块进行协议包分析和处理；

7)视频原始码流解复用模块将原始视频码流从传输协议包中分离出来；服务器发送过来的原始视频码流的格式是，每秒发送一条包含IDR NALU的关键视频帧，后面紧跟着若干条包含NDR NALU的非关键视频帧，每一帧数据都由一个独立的传输协议包发送；因此视频数据包中的要么是一条完整的IDR帧，要么是一条完整的NDR帧；

8)视频原始码流解复用模块根据原始视频码流中的属性判断接收到的视频帧是否是关键帧，如果是关键帧，则将关键帧分解成单独的视频参数集网络抽象层单元(SPSnalu),图像参数集网络抽象层单元(PPS nalu),补充增强信息单元(SEI nalu),以及IDR(即时解码刷新)NALU，再判断是否已经完成了视频流元信息的初始化；如果未初始化视频流元信息，则根据SPS，PPS，SEI解析出视频流元信息；并将视频流元信息发送到视频段混合模块；如果已经完成了视频流元信息的初始化，则从IDR NALU中解析出视频采样帧对象，并将视频采样帧对象发送到视频段混合模块中处理；

9)如果视频帧不是关键帧，则从非关键帧中分解出NDR(非即时解码刷新)NALU，并且从NDR NALU中解析出视频采样帧对象，并将视频采样帧对象发送到视频段混合模块中处理；

10)视频段混合模块如果接收到的是视频流元信息，则根据视频流元信息里面的参数生成ISO BIMM格式的ftyp(file type)box+moov(movie metadata)box字节流；并将生成字节流包装成initSegment对象发送到转换控制模块处理；

11)视频段混合模块如果接收到的是视频采样帧对象，则根据视频采样帧对象里面的数据生成ISO BIMM格式的moof(movie fregment)box+mdat(media data)box；并将生成的字节流包装成mediaSegment对象发送到转换控制模块处理；

12)转换控制模块接收到initSegment对象后，触发已经注册到播放控制模块对象上的的’INIT_SEGMENT’事件，并通过该事件将initSegment对象发送到播放控制模块；

13)转换控制模块接收到mediaSegment对象后，触发已经注册到播放控制模块对象上的的’MEDIA_SEGMENT’事件，并通过该事件将mediaSegment对象发送到播放控制模块；

14)当播放控制模块收到’INIT_SEGMENT’事件后，在绑定的事件处理函数中，调用媒体源扩展控制模块的添加initSegment方法，该方法调用mediaSource对象的addSourceBuffer方法；

15)当mediaSource完成addSourceBuffer方法后，触发updateend事件，这时，mediaSource可以接收mediaSegment对象，实现视频播放；

16)当播放控制模块收到媒体初始化事件后，调用媒体源扩展控制模块的添加mediaSegment方法，该方法调用mediaSource对象的appendBuffer方法。

作为本发明进一步的方案：所述媒体扩展控制模块执行步骤如下：

1)首先创建浏览器MediaSource对象；由于MediaSource对象加载是异步的，所以为MediaSource对象绑定事件响应函数；

2)再将MediaSource对象绑定到videoElement控件上；

3)等待MediaSource对象加载完成，MediaSource对象加载完成后，触发‘SOURCE_OPEN’事件，媒体扩展控制模块收到该事件后，也触发一个‘SOURCE_OPEN’事件给播放控制模块，通知上层模块准备好接收流媒体数据；媒体扩展控制模块提供2个接口接收上层发送来的流媒体数据，分别是appendInitSegment和appendMediaSegment，其中appendInitSegment接口负责接收initSegment对象，appendMediaSegment接口负责接收mediaSegment对象；appendInitSegment接口执行时，首先判断mediaSource对象的状态，如果不是‘open’状态，就暂时添加到流媒体数据pending队列中，然后返回；否则，从initSegment对象中分析出媒体类型，媒体类型由容器类型+编码算法组成，本例容器类型为fmp4，编码算法为h264；接着，根据媒体类型创建SourceBuffer对象，并为SourceBuffer对象绑定事件响应函数；再将initSegment对象添加到流媒体数据pending队列中；appendMediaSegment接口执行时，首先根据mediaSegment对象的type属性，获取媒体类型；再根据媒体类型找到对应的SourceBuffer对象，该SourceBuffer对象是在appendInitSegment接口执行时创建的；判断SourceBuffer对象的状态，如果处于’updating’状态，则添加到流媒体数据pending队列中，稍后执行；否则，循环遍历流媒体数据pending队列，将每一个mediaSegment对象的data属性中的媒体字节流通过SourceBuffer对象的appendBuffer方法添加进去；

4)完成了流媒体播放的初始化过程。

作为本发明再进一步的方案：所述转换控制模块执行步骤如下

1)初始化私有成员变量，包括摄像机ID，码流类型和流媒体地址；

2)创建视频原始码流解复用模块对象、视频段混合模块对象和IO模块对象；

3)依次将IO模块对象、视频原始码流解复用模块对象、视频段混合模块对象和转换控制模块对象对接，形成一个管道；

4)转换控制模块提供启动接口供上层调用，执行获取流媒体数据流的功能，当该接口被调用时，为新创建的IO模块对象绑定事件响应函数；

5)调用IO模块的打开视频通道接口。

作为本发明再进一步的方案：所述IO模块获取流媒体数据流的执行步骤如下：

1)根据流媒体服务器地址，创建websocket对象；

2)模块就收到流媒体服务器的响应后，触发onmessage事件；

3)在onmessage事件响应函数中判断。

作为本发明再进一步的方案：所述视频原始码流解复用模块执行步骤如下：

1)解析原始码流成一系列独立的视频网络抽象层单元

2)生成视频元信息对象。

作为本发明再进一步的方案：所述视频原始码流解复用模块执行步骤如下：

1)判断从视频原始码流解复用模块接收到的对象类型；

2)根据对象中的参数信息按照ISO BIMM规范格式生成meta box字节流。

与现有技术相比，本发明的有益效果是：

本发明通过提供了通过分析视频数据包中的视频描述信息和码流数据，并将分析出来的视频描述信息和码流数据组装成标准的视频文件格式，再调用基于浏览器的原生接口实现视频直播，不仅实现了跨平台的视频直播，而且支持所有主流流媒体协议接入，也可以支持用户私有流媒体协议接入，并且具有低延迟、可靠性高、通用性好、灵活性高等优点。

附图说明

图1为一种基于浏览器的跨平台视频直播的系统及方法的总体框架结构示意图。

图2为一种基于浏览器的跨平台视频直播的系统及方法中数据类型转换示意图。

图3为一种基于浏览器的跨平台视频直播的系统及方法中播放控制模块执行视频直播流程图。

图4为一种基于浏览器的跨平台视频直播的系统及方法中媒体扩展控制模块执行视频直播流程示意图。

图5为一种基于浏览器的跨平台视频直播的系统及方法中中转换控制模块执行视频直播流程示意图。

图6为一种基于浏览器的跨平台视频直播的系统及方法中IO模块执行视频直播流程图。

图7为一种基于浏览器的跨平台视频直播的系统及方法中视频原始码流解复用模块执行视频直播视频原始码流解复用模块执行视频直播示意图。

图8为一种基于浏览器的跨平台视频直播的系统及方法中视频段混合模块执行视频直播流程示意图。

具体实施方式

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

请参阅图1～8，本发明实施例中，一种基于浏览器的跨平台视频直播的系统，包括视频原始码流解复用模块、视频段混合模块、转换控制模块、播放控制模块、媒体源扩展控制模块、IO模块，其中播放控制模块是用户操作的接口，为用户提供H264视频码流和Acc音频码流的直播、暂停、继续、停止、抓图等功能，并且负责协调转换控制模块和媒体源扩展控制模块之间的数据流和控制流；媒体源扩展控制模块负责和浏览器的API打交道，通过创建MeidaSource、sourceBuffer等对象、以及建立和videoElement的关联从而实现视频的渲染控制，同时，可以接收来自播放控制模块的控制命令和流媒体数据，并且当浏览器对象状态改变时，通知上层的播放控制模块来控制流媒体数据源的启停；转换控制模块负责接收来自下层的流媒体数据，根据流媒体数据类型，将流媒体数据包装成不同的事件，上报到上层播放控制模块，并根据接收到的播放控制模块命令，控制IO模块的启动和关闭，实现流媒体数据源的打开、暂停、继续和关闭；IO模块:负责和流媒体服务器建立连接，并从流媒体服务器接收和发送流媒体数据协议包；IO模块的启停是受转换控制模块控制的；视频原始码流解复用模块:负责从视频原始码流的数据包中分离出一个个单独的视频网络抽象层单元，并根据视频网络抽象层单元解析出视频元信息对象和视频帧数据对象；视频段混合模块：负责将视频元信息对象根据ISO-BMFF协议格式包装成符合fmp4格式的视频元信息初始化段对象，再将视频帧数据对象根据ISO-BMFF协议格式包装成符合fmp4格式的视频帧数据媒体段对象。

一种基于浏览器的跨平台视频直播的方法，包括如下步骤：

1)播放控制模块根据启动参数启动视频直播，启动参数包括流媒体服务器地址、前端视频采集设备ID，前端视频采集设备的通道号(根据情况可选)，前端视频采集设备的视频清晰度(分为高、中、低三个等级)；

2)播放控制模块接收到视频直播命令后，首先触发媒体源扩展控制模块初始化，媒体源扩展控制模块初始化过程包括：创建浏览器MediaSource对象，并将浏览器的videoElement对象src属性指向刚创建的MediaSource对象，然后为MediaSource对象绑定事件响应函数；

3)媒体源扩展控制模块完成初始化后，MediaSource对象的‘sourceopen’事件被触发，在对应的事件响应函数中，向播放控制模块发送‘SOURCEOPEN’事件，通知播放控制模块媒体源扩展模块处于已经打开状态，可以接收流媒体数据；

4)播放控制模块收到媒体源扩展模块的‘SOURCEOPEN’事件后，创建转换控制模块对象，并为转换控制模块绑定事件响应函数，为从转换控制模块接收流媒体数据做准备，转换控制模块对象创建完成后，执行转换控制模块的启动接口；

5)转换控制模块的启动接口被执行时，首先分别创建视频原始码流解复用模块对象、视频段混合模块对象和IO模块对象；并为四个对象建立数据传输管道，即IO模块对象处理完成的数据发送到视频原始码流解复用模块对象处理，由视频原始码流解复用模块对象处理完成后再发送到视频段混合模块对象中处理，视频段混合模块对象处理完成后，再将处理后的数据发送到转换控制模块中处理，这样就形成了数据处理的管道，具体参考图1；上述工作完成之后，触发IO模块对象的打开视频直播接口；

6)IO模块的打开视频直播接口被执行时，首先创建websocket对象，作为播放器和流媒体服务器之间的的通讯通道，websocket通道连接建立后，IO模块对象通过websocket通道将视频直播的请求发送到流媒体服务器，并等待流媒体服务器的反馈数据；当IO模块接收到流媒体服务器发送的包含视频数据的传输协议包后，通过视频原始码流解复用模块提供的接口，将协议包发送给视频原始码流解复用模块进行协议包分析和处理；

7)视频原始码流解复用模块将原始视频码流从传输协议包中分离出来；服务器发送过来的原始视频码流的格式是，每秒发送一条包含IDR NALU的关键视频帧，后面紧跟着若干条包含NDR NALU的非关键视频帧，每一帧数据都由一个独立的传输协议包发送；因此视频数据包中的要么是一条完整的IDR帧，要么是一条完整的NDR帧；

8)视频原始码流解复用模块根据原始视频码流中的属性判断接收到的视频帧是否是关键帧，如果是关键帧，则将关键帧分解成单独的视频参数集网络抽象层单元(SPSnalu),图像参数集网络抽象层单元(PPS nalu),补充增强信息单元(SEI nalu),以及IDR(即时解码刷新)NALU，再判断是否已经完成了视频流元信息的初始化；如果未初始化视频流元信息，则根据SPS，PPS，SEI解析出视频流元信息；并将视频流元信息发送到视频段混合模块；如果已经完成了视频流元信息的初始化，则从IDR NALU中解析出视频采样帧对象，并将视频采样帧对象发送到视频段混合模块中处理；

9)如果视频帧不是关键帧，则从非关键帧中分解出NDR(非即时解码刷新)NALU，并且从NDR NALU中解析出视频采样帧对象，并将视频采样帧对象发送到视频段混合模块中处理；

10)视频段混合模块如果接收到的是视频流元信息，则根据视频流元信息里面的参数生成ISO BIMM格式的ftyp(file type)box+moov(movie metadata)box字节流；并将生成字节流包装成initSegment对象发送到转换控制模块处理；

11)视频段混合模块如果接收到的是视频采样帧对象，则根据视频采样帧对象里面的数据生成ISO BIMM格式的moof(movie fregment)box+mdat(media data)box；并将生成的字节流包装成mediaSegment对象发送到转换控制模块处理；

12)转换控制模块接收到initSegment对象后，触发已经注册到播放控制模块对象上的的’INIT_SEGMENT’事件，并通过该事件将initSegment对象发送到播放控制模块；

13)转换控制模块接收到mediaSegment对象后，触发已经注册到播放控制模块对象上的的’MEDIA_SEGMENT’事件，并通过该事件将mediaSegment对象发送到播放控制模块；

14)当播放控制模块收到’INIT_SEGMENT’事件后，在绑定的事件处理函数中，调用媒体源扩展控制模块的添加initSegment方法，该方法调用mediaSource对象的addSourceBuffer方法；

15)当mediaSource完成addSourceBuffer方法后，触发updateend事件，这时，mediaSource可以接收mediaSegment对象，实现视频播放；

16)当播放控制模块收到媒体初始化事件后，调用媒体源扩展控制模块的添加mediaSegment方法，该方法调用mediaSource对象的appendBuffer方法。

所述媒体扩展控制模块执行步骤如下：

1)首先创建浏览器MediaSource对象；由于MediaSource对象加载是异步的，所以为MediaSource对象绑定事件响应函数；

2)再将MediaSource对象绑定到videoElement控件上；

3)等待MediaSource对象加载完成，MediaSource对象加载完成后，触发‘SOURCE_OPEN’事件，媒体扩展控制模块收到该事件后，也触发一个‘SOURCE_OPEN’事件给播放控制模块，通知上层模块准备好接收流媒体数据；媒体扩展控制模块提供2个接口接收上层发送来的流媒体数据，分别是appendInitSegment和appendMediaSegment，其中appendInitSegment接口负责接收initSegment对象，appendMediaSegment接口负责接收mediaSegment对象；appendInitSegment接口执行时，首先判断mediaSource对象的状态，如果不是‘open’状态，就暂时添加到流媒体数据pending队列中，然后返回；否则，从initSegment对象中分析出媒体类型，媒体类型由容器类型+编码算法组成，本例容器类型为fmp4，编码算法为h264；接着，根据媒体类型创建SourceBuffer对象，并为SourceBuffer对象绑定事件响应函数；再将initSegment对象添加到流媒体数据pending队列中；appendMediaSegment接口执行时，首先根据mediaSegment对象的type属性，获取媒体类型；再根据媒体类型找到对应的SourceBuffer对象，该SourceBuffer对象是在appendInitSegment接口执行时创建的；判断SourceBuffer对象的状态，如果处于’updating’状态，则添加到流媒体数据pending队列中，稍后执行；否则，循环遍历流媒体数据pending队列，将每一个mediaSegment对象的data属性中的媒体字节流通过SourceBuffer对象的appendBuffer方法添加进去；

4)完成了流媒体播放的初始化过程。

所述转换控制模块执行步骤如下

1)初始化私有成员变量，包括摄像机ID，码流类型和流媒体地址；

2)创建视频原始码流解复用模块对象、视频段混合模块对象和IO模块对象；

3)依次将IO模块对象、视频原始码流解复用模块对象、视频段混合模块对象和转换控制模块对象对接，形成一个管道；

4)转换控制模块提供启动接口供上层调用，执行获取流媒体数据流的功能，当该接口被调用时，为新创建的IO模块对象绑定事件响应函数；

5)调用IO模块的打开视频通道接口。

所述IO模块获取流媒体数据流的执行步骤如下：

1)根据流媒体服务器地址，创建websocket对象；

2)模块就收到流媒体服务器的响应后，触发onmessage事件；

3)在onmessage事件响应函数中判断。

所述视频原始码流解复用模块执行步骤如下：

1)解析原始码流成一系列独立的视频网络抽象层单元

2)生成视频元信息对象。

所述视频原始码流解复用模块执行步骤如下：

1)判断从视频原始码流解复用模块接收到的对象类型；

2)根据对象中的参数信息按照ISO BIMM规范格式生成meta box字节流。

本发明的工作原理：本发明通过提供了通过分析视频数据包中的视频描述信息和码流数据，并将分析出来的视频描述信息和码流数据组装成标准的视频文件格式，再调用基于浏览器的原生接口实现视频直播，不仅实现了跨平台的视频直播，而且支持所有主流流媒体协议接入，也可以支持用户私有流媒体协议接入，并且具有低延迟、可靠性高、通用性好、灵活性高等优点。

对于本领域技术人员而言，显然本发明不限于上述示范性实施例的细节，而且在不背离本发明的精神或基本特征的情况下，能够以其他的具体形式实现本发明。因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本发明的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化囊括在本发明内。不应将权利要求中的任何附图标记视为限制所涉及的权利要求。

此外，应当理解，虽然本说明书按照实施方式加以描述，但并非每个实施方式仅包含一个独立的技术方案，说明书的这种叙述方式仅仅是为清楚起见，本领域技术人员应当将说明书作为一个整体，各实施例中的技术方案也可以经适当组合，形成本领域技术人员可以理解的其他实施方式。

Claims (7)

1.一种基于浏览器的跨平台视频直播的系统，其特征在于，包括视频原始码流解复用模块、视频段混合模块、转换控制模块、播放控制模块、媒体源扩展控制模块、IO模块，其中播放控制模块是用户操作的接口，为用户提供H264视频码流和Acc音频码流的直播、暂停、继续、停止、抓图等功能，并且负责协调转换控制模块和媒体源扩展控制模块之间的数据流和控制流；媒体源扩展控制模块负责和浏览器的API打交道，通过创建MeidaSource、sourceBuffer等对象、以及建立和videoElement的关联从而实现视频的渲染控制，同时，可以接收来自播放控制模块的控制命令和流媒体数据，并且当浏览器对象状态改变时，通知上层的播放控制模块来控制流媒体数据源的启停；转换控制模块负责接收来自下层的流媒体数据，根据流媒体数据类型，将流媒体数据包装成不同的事件，上报到上层播放控制模块，并根据接收到的播放控制模块命令，控制IO模块的启动和关闭，实现流媒体数据源的打开、暂停、继续和关闭；IO模块:负责和流媒体服务器建立连接，并从流媒体服务器接收和发送流媒体数据协议包；IO模块的启停是受转换控制模块控制的；视频原始码流解复用模块:负责从视频原始码流的数据包中分离出一个个单独的视频网络抽象层单元，并根据视频网络抽象层单元解析出视频元信息对象和视频帧数据对象；视频段混合模块：负责将视频元信息对象根据ISO-BMFF协议格式包装成符合fmp4格式的视频元信息初始化段对象，再将视频帧数据对象根据ISO-BMFF协议格式包装成符合fmp4格式的视频帧数据媒体段对象。

2.一种基于浏览器的跨平台视频直播的方法，其特征在于，包括如下步骤：

1)播放控制模块根据启动参数启动视频直播，启动参数包括流媒体服务器地址、前端视频采集设备ID，前端视频采集设备的通道号(根据情况可选)，前端视频采集设备的视频清晰度(分为高、中、低三个等级)；

2)播放控制模块接收到视频直播命令后，首先触发媒体源扩展控制模块初始化，媒体源扩展控制模块初始化过程包括：创建浏览器MediaSource对象，并将浏览器的videoElement对象src属性指向刚创建的MediaSource对象，然后为MediaSource对象绑定事件响应函数；

3)媒体源扩展控制模块完成初始化后，MediaSource对象的‘sourceopen’事件被触发，在对应的事件响应函数中，向播放控制模块发送‘SOURCEOPEN’事件，通知播放控制模块媒体源扩展模块处于已经打开状态，可以接收流媒体数据；

4)播放控制模块收到媒体源扩展模块的‘SOURCEOPEN’事件后，创建转换控制模块对象，并为转换控制模块绑定事件响应函数，为从转换控制模块接收流媒体数据做准备，转换控制模块对象创建完成后，执行转换控制模块的启动接口；

5)转换控制模块的启动接口被执行时，首先分别创建视频原始码流解复用模块对象、视频段混合模块对象和IO模块对象；并为四个对象建立数据传输管道，即IO模块对象处理完成的数据发送到视频原始码流解复用模块对象处理，由视频原始码流解复用模块对象处理完成后再发送到视频段混合模块对象中处理，视频段混合模块对象处理完成后，再将处理后的数据发送到转换控制模块中处理，这样就形成了数据处理的管道，具体参考图1；上述工作完成之后，触发IO模块对象的打开视频直播接口；

6)IO模块的打开视频直播接口被执行时，首先创建websocket对象，作为播放器和流媒体服务器之间的的通讯通道，websocket通道连接建立后，IO模块对象通过websocket通道将视频直播的请求发送到流媒体服务器，并等待流媒体服务器的反馈数据；当IO模块接收到流媒体服务器发送的包含视频数据的传输协议包后，通过视频原始码流解复用模块提供的接口，将协议包发送给视频原始码流解复用模块进行协议包分析和处理；

7)视频原始码流解复用模块将原始视频码流从传输协议包中分离出来；服务器发送过来的原始视频码流的格式是，每秒发送一条包含IDR NALU的关键视频帧，后面紧跟着若干条包含NDR NALU的非关键视频帧，每一帧数据都由一个独立的传输协议包发送；因此视频数据包中的要么是一条完整的IDR帧，要么是一条完整的NDR帧；

8)视频原始码流解复用模块根据原始视频码流中的属性判断接收到的视频帧是否是关键帧，如果是关键帧，则将关键帧分解成单独的视频参数集网络抽象层单元(SPS nalu),图像参数集网络抽象层单元(PPS nalu),补充增强信息单元(SEI nalu),以及IDR(即时解码刷新)NALU，再判断是否已经完成了视频流元信息的初始化；如果未初始化视频流元信息，则根据SPS，PPS，SEI解析出视频流元信息；并将视频流元信息发送到视频段混合模块；如果已经完成了视频流元信息的初始化，则从IDR NALU中解析出视频采样帧对象，并将视频采样帧对象发送到视频段混合模块中处理；

9)如果视频帧不是关键帧，则从非关键帧中分解出NDR(非即时解码刷新)NALU，并且从NDR NALU中解析出视频采样帧对象，并将视频采样帧对象发送到视频段混合模块中处理；

10)视频段混合模块如果接收到的是视频流元信息，则根据视频流元信息里面的参数生成ISO BIMM格式的ftyp(file type)box+moov(movie metadata)box字节流；并将生成字节流包装成initSegment对象发送到转换控制模块处理；

11)视频段混合模块如果接收到的是视频采样帧对象，则根据视频采样帧对象里面的数据生成ISO BIMM格式的moof(movie fregment)box+mdat(media data)box；并将生成的字节流包装成mediaSegment对象发送到转换控制模块处理；

12)转换控制模块接收到initSegment对象后，触发已经注册到播放控制模块对象上的的’INIT_SEGMENT’事件，并通过该事件将initSegment对象发送到播放控制模块；

13)转换控制模块接收到mediaSegment对象后，触发已经注册到播放控制模块对象上的的’MEDIA_SEGMENT’事件，并通过该事件将mediaSegment对象发送到播放控制模块；

14)当播放控制模块收到’INIT_SEGMENT’事件后，在绑定的事件处理函数中，调用媒体源扩展控制模块的添加initSegment方法，该方法调用mediaSource对象的addSourceBuffer方法；

15)当mediaSource完成addSourceBuffer方法后，触发updateend事件，这时，mediaSource可以接收mediaSegment对象，实现视频播放；

16)当播放控制模块收到媒体初始化事件后，调用媒体源扩展控制模块的添加mediaSegment方法，该方法调用mediaSource对象的appendBuffer方法。

3.根据权利要求1或2所述的一种基于浏览器的跨平台视频直播的系统及方法，其特征在于，所述媒体扩展控制模块执行步骤如下：

1)首先创建浏览器MediaSource对象；由于MediaSource对象加载是异步的，所以为MediaSource对象绑定事件响应函数；

2)再将MediaSource对象绑定到videoElement控件上；

3)等待MediaSource对象加载完成，MediaSource对象加载完成后，触发‘SOURCE_OPEN’事件，媒体扩展控制模块收到该事件后，也触发一个‘SOURCE_OPEN’事件给播放控制模块，通知上层模块准备好接收流媒体数据；媒体扩展控制模块提供2个接口接收上层发送来的流媒体数据，分别是appendInitSegment和appendMediaSegment，其中appendInitSegment接口负责接收initSegment对象，appendMediaSegment接口负责接收mediaSegment对象；appendInitSegment接口执行时，首先判断mediaSource对象的状态，如果不是‘open’状态，就暂时添加到流媒体数据pending队列中，然后返回；否则，从initSegment对象中分析出媒体类型，媒体类型由容器类型+编码算法组成，本例容器类型为fmp4，编码算法为h264；接着，根据媒体类型创建SourceBuffer对象，并为SourceBuffer对象绑定事件响应函数；再将initSegment对象添加到流媒体数据pending队列中；appendMediaSegment接口执行时，首先根据mediaSegment对象的type属性，获取媒体类型；再根据媒体类型找到对应的SourceBuffer对象，该SourceBuffer对象是在appendInitSegment接口执行时创建的；判断SourceBuffer对象的状态，如果处于’updating’状态，则添加到流媒体数据pending队列中，稍后执行；否则，循环遍历流媒体数据pending队列，将每一个mediaSegment对象的data属性中的媒体字节流通过SourceBuffer对象的appendBuffer方法添加进去；

4)完成了流媒体播放的初始化过程。

4.根据权利要求1或2所述的一种基于浏览器的跨平台视频直播的系统及方法，其特征在于，所述转换控制模块执行步骤如下

1)初始化私有成员变量，包括摄像机ID，码流类型和流媒体地址；

2)创建视频原始码流解复用模块对象、视频段混合模块对象和IO模块对象；

3)依次将IO模块对象、视频原始码流解复用模块对象、视频段混合模块对象和转换控制模块对象对接，形成一个管道；

4)转换控制模块提供启动接口供上层调用，执行获取流媒体数据流的功能，当该接口被调用时，为新创建的IO模块对象绑定事件响应函数；

5)调用IO模块的打开视频通道接口。

5.根据权利要求1或2所述的一种基于浏览器的跨平台视频直播的系统及方法，其特征在于，所述IO模块获取流媒体数据流的执行步骤如下：

1)根据流媒体服务器地址，创建websocket对象；

2)模块就收到流媒体服务器的响应后，触发onmessage事件；

3)在onmessage事件响应函数中判断。

6.根据权利要求1或2所述的一种基于浏览器的跨平台视频直播的系统及方法，其特征在于，所述视频原始码流解复用模块执行步骤如下：

1)解析原始码流成一系列独立的视频网络抽象层单元

2)生成视频元信息对象。

7.根据权利要求1或2所述的一种基于浏览器的跨平台视频直播的系统及方法，其特征在于，所述视频原始码流解复用模块执行步骤如下：

1)判断从视频原始码流解复用模块接收到的对象类型；

2)根据对象中的参数信息按照ISO BIMM规范格式生成meta box字节流。