基于WebSocket和MSE的视频监控Web页播放的实现方法

聚焦

运营商

·东方有线专栏·

专

栏

基于WebSocket和MSE的视频监控

Web页播放的实现方法

盛琦鑫 上海金山东方有线网络有限公司

摘要：随着用户对在Web页面上播放视频监控需求的提高，现有的开发方式在视频开流、浏览器兼容性、

时间延迟等方面尚存在不足之处，用户使用时的体验不佳。本文简单介绍了WebSocket协议及MSE技术，并通

过实际案例对视频监控PS流进行分析，获取播放所需的H.264裸码流及编解码信息，给出了一种在Web页面

上无插件、出流快、低时延播放视频监控的实现方法。

关键词：视频监控 WebSocket MSE H.264 PS流

1 引言

随着雪亮工程、社会面安防、智

慧城市的建设，政府掌握的视频监控

资源越来越多。目前各市、区、街镇

网格化、综治中心的大屏展示平台都以

Web方式开发，视频监控作为展示平

台上最直接、最具效果的应用模块，

要求在Web页面上播放视频时能够出

流迅速、画面基本无卡顿、时间基本

无延迟。

现阶段主流的摄像机、NVR、监

控平台提供的视频流都是RTSP流，

而RTSP流无法适应直接在Web页面

上播放，所需的播放插件又可能存在

一定的问题。例如，目前的Chrome版

本已经不支持NPAPI插件，VLC件由

于兼容性问题在Web页面上的可用性

大打折扣，Flash播放插件由于漏洞问

题正逐渐被弃用，IE的ActiveX插件

维护工作量大且存在安全设置的问题。

向客户端的浏览器返回最新的数据。

HLS流可以在Web页面上直接播放，

这种传统的方式有着很明显的缺点，

但是需要为转码服务付出昂贵的费用，

即浏览器需要不停地向服务器发出请

同时HLS流播放延时太高，一般达到

15~20s，虽然人们针对其延时不断提

出各种优化方案，但HLS流播放仍然

保持着10s级别的时间延迟，不利于

实时监控。本文通过网格化大屏展示

平台开发的实际案例，介绍了一种通

过WebSocket协议和MSE技术，实现

在Web页面上无插件、出流快、低时

延播放视频监控的方法。

求，而HTTP请求一般都包含很长的

头部信息，真正有效的数据可能只是

非常小的一部分，这样不但会浪费很

多的带宽资源，而且数据的实时性也

会大大降低。

W3C在新的HTML5规范中制定

了WebSocket协议和可编程的API，

该协议为Web应用提供了TCP协议

的网络功能，目的是实现下一代客户

端/服务器的异步通信。WebSocket使

用非安全的WS或安全的WSS协议，

2 主要技术简介

2.1 WebSocket协议简介

目前很多网页应用为了实现数

据的推送，采用的技术都是Ajax轮

询。轮询是按照特定的时间间隔（如

1s），由客户端的浏览器向服务器发

出HTTP请求，服务器接收到请求后，

可用于任意的客户端和服务器程序。

WebSocket的出现克服了传统轮询技术

在数据传输稳定性和数据传输量方面

的缺点。使用WebSocket协议的服务

器和客户端一旦建立起连接后，就可

以在任意时刻相互推送信息，客户端

62

《广播电视网络》 2020年第12期 总第372期

《广播电视网络》 2020年第12期 总第372期

聚焦

运营商

图1 MSE内部结构图

不再需要向服务器发送请求，使客户

端浏览器具备如同C/S架构下桌面系

统的实时通信能力。由于摆脱了传统

的Web的请求响应模式，只进行一次

请求响应即可完成客户端与服务器端

的连接，进而清除了每次请求与响应

中包含的头部信息，每次通信传输的

都是监控数据，有效减轻了网络的传

输负荷，加快了有效数据的传输速度，

Extensions”

，其也是一个新的W3C标

准。MSE目前还处于实验和提升阶段，

但是Chrome、Safari、IE、Edge等主流

浏览器已经能够很好地支持该标准。

MSE使我们可以把通常的单个媒体文

件的src值替换成引用MediaSource对

象（一个包含即将播放的媒体文件准

备状态等信息的容器），以及引用多

个SourceBuffer对象（代表多个组成整

图1所示。使用时，我们不必介入或

者干预现有的音视频解码和播放控制

的行为，只需要通过MediaSource对

象向

传递播放所需的数据即可进行解码播

放。同时，MSE提供了构建跨浏览

器播放器的核心技术，让浏览器通

过JavaScript API将音视频推到Media

Tags上。使用MSE技术，我们可以动

态地修改媒体流而不需要任何插件，

使前端可以使用JavaScript直接进行转

封装、处理，甚至转码，实现视频监

控在Web页面上的无插件播放。

提高了Web上视频监控播放的实时性。

个串流的不同媒体块）的元素。MSE

目前主流的浏览器均已支持WebSocket

协议。

WebSocket应用的服务器端的实

现技术较多，针对不同的开发需求可

以选择不同的产品，如Java Web平台、

微软NET平台和PHP平台的相关技

术。另外，还有专门为实时Web应用

开发而诞生的服务器端JavaScript平台

技术。在视频监控取流及传输

系统设计时，根据监控平台的实际情

况选择相应的技术即可，实现起来并

不复杂。

让我们能够根据内容获取的大小和频

率，或是内存占用详情，进行更加精

准的控制，它是基于自身可扩展的API

建立自适应比特率流客户端的基础。

HTML5的

签不支持流，不支持DRM和加密，

很难自定义控制和保证跨浏览器的

一致性，编解码和封装在不同浏览

器支持也不同。MSE很好地解决了

HTML5的流问题，它允许JavaScript

动态构建

流，通过定义SourceBuffer对象，允

许JavaScript传输媒体流片段到一个

HTMLMediaElement中去。整个过程如

3 实现方法简介

在网格化大屏展示平台的开发实

践中，我们使用Chrome浏览器通过

WebSocket通信协议及MSE技术实现

播放大华的视频监控流。WebSocket

通信协议保证监控视频从源到目的的

实时性传输，MSE技术实现监控视频

在Web页面上的无插件播放。为了减

轻服务器的处理压力，开发中服务器

端只负责将获取的PS流直接分发给客

2.2 MSE技术简介

MSE的全称为“Media Source

63

聚焦

·东方有线专栏·

运营商

户机，由客户机处理PS流的解封装运

3.1 获取视频监控的PS流

算并且播放视频流，具体过程如下。

《公共安全视频监控联网系统信

（1）WebSocket服务器通过SDK

息传输、交换、控制技术要求》（GB/

从大华DSS平台上获取视频监控的

T 28181—2016）规定了在联网系统

PS流。

中，视频等媒体数据存储封装格式为

（2）WebSocket服务器将获取的

PS格式，采用视频压缩编解码的标准

视频监控PS流直接传给WebSocket客

为H.264。视频源经过A/D转换后，

户机。

通过H.264压缩编码得到ES基本流。

（3）客户机对视频监控PS流进

ES基本流数据很大，并且只是I、P、

行分析拆解后，获取用于视频播放的

B这些视频帧或音频取样信息。ES流

H.264的裸码流。

通过PES打包器打包，并在每个帧中

（4）对H.264的裸码流进行分

插入标志，变成PES包。这样，原来

析，获取在MSE上播放时所需要的

流的格式变成了数据包的分割形式。

mimeCodec值。

PES包根据需要，打包成PS包进行

（5）将裸码流不断添加进MSE

存储（DVD）或传输(DVB)。在整个

的SourceBuffer对象中，利用分析得到

PS流的形成过程中，每路音频或视频

的mimeCodec值进行解码播放。

只包含一路的编码数据流，所以每路

图2 PS流片段解析

图3 典型视频关键帧的PS包结构

64

《广播电视网络》 2020年第12期 总第372期

PES流也只包含相应的数据流。

通过调用大华DPSDK接口即可获

取视频监控的PS流。PS流经过后续

解复用和解包过滤后就是标准的H.264

格式的码流，之后可以根据开发需求

自行解码播放。本案例中截取获得的

PS流片段解析如图2所示。

3.2 解析视频监控的PS包得到

H.264裸码流

经过WebSocket服务器端将视频

监控的PS流传输到客户机后，接下来

就是对PS包进行解析，获取H.264的

裸码流。

PS包的封装按照ISO/IEC 13818-1

标准执行。进行PS包封装时，将每个

视频帧封装为一个PS包。每个关键帧

的PS包中包含系统头（System Header）

和PSM（Program Stream Map），系统头

和PSM位于PS包头之后、第一个PES

包之前。PES包中包含PES Header和

H.264 Raw Data。

典型视频关键帧的PS包结构如

图3

所示，其中PES包分为PESV（视

频PES包）和PESA（音频PES包），

视频非关键帧的PS包结构中则不包含

系统头和PSM。由于本案例中的视频

监控未采集音频数据，故获取的PS包

中无音频数据PESA。

3.2.1 PS Header解析

PS Header的最小长度为14个字

节，其格式中，pack start code字段占

位32bit，用于标识PS包的开始，固

定为0x000001ba；stuffing length字段

占位第14个字节的后3位bit，用于

标识PS Header后续的填充长度。

本案例中，我们只要在截取的视

频流中查找000001ba，即可找到PS

包的开始，同时找到第14个字节为

f8，其后3位转换成十进制为0，表示

《广播电视网络》 2020年第12期 总第372期

聚焦

运营商

图4 PES Header结构

后续的填充长度为0字节，因此PS包

头的总长度共14个字节。

PS Map length字段占位16bit，用于标

识之后的长度。

本案例中，在截取的视频流中查

找000001bc，就可以找到PS Map头，

PS Map length字段的0012转换成十进

制为18个字节，表示之后的长度为

18个字节，因此PS Map的总长度共

24个字节。

3.2.5 获得 H.264 Raw Data

通过删除视频关键帧PS包的PS

Header、PS System Header、PS Map、

PES Header相关的字节，即可得到播

放所需要的原始的H.264裸码流。

3.2.2 PS System Header解析

节目流系统头PS System Header

当且仅当数据包为关键帧时才存在，

其格式中，System header strart code字

段占位32bit，用于标识System Header

的开始，固定为0x000001bb；之后紧

邻的header length字段占位16bit，用

于标识System Header之后的长度。

本案例中，在截取的视频流中查

找000001bb，即可以找到PS System

Header；header length字段000c转换成

十进制为12，之后的长度为12字节，

3.3 分析H.264裸码流获取视频

编解码Codec值

H.264的码流是由一个个的NALU

组成的，NALU由NALU头和RBSP数

据组成。

H.264码流的第一个NALU是SPS

（Sequence Parameter Set，序列参数

集），作用于一系列连续的编码图

像，其NALU Header为0x67、0x47、

0x27。它的第二个NALU是PPS（Picture

Parameter Set，图像参数集），作用于

编码视频序列中一个或多个独立的图

像，其NALU Header为0x68、0x48、

0x28。第三个NALU是SEI（补充增

强信息单元），没有用于预测图像，

在解码、显示或其他过程中起辅助作

用，其NALU Header为0x06。第四个

NALU是IDR（即时解码器刷新），

会导致DPB（Decoded Picture Buffer，

参考帧列表）清空，从IDR帧开始，

3.2.4 PES Header解析

PS Map之后就是PES包，它分为

两个部分，一部分是PES Header，另

一部分是PES Payload。PES Header用

于存储一些描述信息，而PES Payload

部分为其存储的原始数据H.264的

因此PS System Header长度共18个字节。

裸码流，PES可能有多个。ISO/IEC

3.2.3 PS Map解析

节目流映射PS Map同PS System

Header一样，当且仅当数据包为关键

帧时才存在，位于PS System Header

之后，packet start code prefix字段占位

24bit，作为数据包的分隔符，下一个

字节的bc，对照ISO/IEC 13818-1中

Stream ID参数分配可知其代表PSM，

因此前4个字节固定为0x000001bc，

指出了PS Map的开始；后面紧邻的

13818-1的Stream ID参数分配中，e0

代表视频流，c0代表音频流，其格式

如图4所示。

案例获取的数据中无音频数据，

在截取的视频流中查找000001e0，即

可找到PES Header的位置，跳过4个

字节后就是PES header data length的

值0a，0a转换成十进制为10个字节，

表示之后的长度为10个字节，因此

PES Header的总长度为19个字节。

65

聚焦

运营商

·东方有线专栏·

重新计算一个新的序列开始编码，其

NALU Header为0x65、0x45、0x25。

H.264码流帧结构如图5所示。

SPS和PPS包含初始化H.264解

码器所需要的信息参数。序列参数集

SPS包含的是针对一个连续编码视频

序列的参数，如标识符帧数及POC的

约束、参考帧数目、解码图像尺寸和

Level共3个字节的编解码信息。设置

这些不同的字段参数，可以得到对应

的不同取样速率、不同图像尺寸、不

同编码比特率等性能的编解码器。

本案例中，在截取的视频流中查

找，即可找到SPS帧。从

SPS帧中解析Avc Profile、Avc Level、

Avc Compatibility的视频编解码器信息，

台客户机，对经过NTP服务器校时后

的原始画面、采用WebSocket和MSE

方法播放的画面、采用HLS流播放的

画面进行采集。

通过对比发现，采用WebSocket和

MSE方法能够很好地保证在Web页面

上无插件地播放视频监控流，开流时间

为1s左右，画面延迟为1s左右，效果

帧场编码模式选择标识等。图像参数

可以得到该视频编解码Codec的值为

集PPS对应的是一个序列中某一幅图

avc1.64002a。

像或者某几幅图像，其参数如熵编码

模式选择标识、片组数目、初始量化

3.4 使用浏览器播放视频流

参数和去除块滤波系数调整标识等。

将分解出来的H.264裸码流不断

在H.264码流中没有PPS或SPS的情

添加进MSE的SourceBuffer对象中，使

况下，解码器是无法解析码流数据的。

用mimeCodec值实现无插件实时播放。

如表1所示，序列参数集SPS包

3.5 实际效果

含Avc Profile、Avc Compatibility、Avc

在同样的网络环境下，通过同一

图5 H.264码流帧结构

表1 序列参数集SPS部分字段

字段名Start-CodeNALU HeaderAvc ProfileAvc CompatibilityAvc Level

字段长度32bit8bit8bit8bit8bit

字段值0x000000010x670x640x000x2A

66

《广播电视网络》 2020年第12期 总第372期

明显优于HLS流播放延迟11s的效果。

4 结语

本文从WebSocket协议、MSE技

术出发，结合获取播放所需的H.264

裸码流及编解码信息的思路，提供了

一种基于WebSocket协议和MSE技术

的视频监控Web页面播放的实现方法，

并在网格化大屏展示平台的开发中得

到应用和验证。WebSocket协议保证

了视频监控从源到目的的实时性传输，

MSE技术保证了视频监控在Web页面

上的无插件播放。两者的结合使视频

监控在调阅的延迟、时间的同步、浏

览器的兼容方面较现有的播放方式都

有了巨大的提高，极大地提升了用户

的体验。此实现方法没有类似HLS转

码所需要的转码费用，是针对视频监

控Web页面播放的低成本选择，后续

还可以将其开发成API接口形式，提

高易用性。

参考文献

[1]包文祥.基于WebSocket协议的实时网

页通信的研究与实现[D].镇江:江苏科技大

学,2018.

[2]ISO/IEC ation technology-

Generic coding of moving pictures and associated

audio information: Systems[S].

[3]GB/T 28181—2016.安全防范视频监控联网

系统信息传输、交换、控制技术要求[S].

[4]路锦正.MPEG-4/H.264视频编解码工程实

践[M].北京:电子工业出版社,2011:176-210.

RTN