以HTML5及其衍生技术为基础的B/S架构实时视频监控解决方案

安防类项目中通常都有视频监控方面的需求。视频监控客户端主要是Native应用的形式，在Web端需要利用 NPAPI、ActiveX 之类的插件技术实现。但是，IE式微，Chrome 也放弃了NPAPI，另一方面，监控设备硬件厂商的视频输出格式则逐渐标准化。这让基于开放、标准化接口的 Web 视频监控成为可能。

我们的研发团队做过很多次尝试，本文讨论以 HTML5 及其衍生技术为基础的 B/S 架构实时视频监控解决方案。主要包括两方面的内容：视频编码、流媒体基础知识，以及相关的库、框架的介绍，介绍可以用于视频监控的HTML5特性，例如媒体标签、MSE、WebRTC，以及相关的库、框架。

一、音视频编码

音频、视频的编码（Codec，压缩）算法有很多，不同浏览器对音视频的编码算法的支持有差异。H264 这样的监控设备常用的视频编码格式，主流浏览器都有某种程度的支持。常见的音频编码算法包括： MP3, Vorbis, AAC；常见的视频编码算法包括：H.264, HEVC, VP8, VP9。编码后的音频、视频通常被封装在一个比特流容器格式（container）中，这些格式中常见的有：MP4, FLV, WebM, ASF, ISMA 等。

二、流媒体技术

所谓流媒体，就是指源源不断的由提供者产生，并持续的被终端用户接收、展示的多媒体，就像水流一样。现实世界中的媒体，有些天生就是流式的，例如电视、广播，另外一些则不是，例如书籍、CD。流媒体技术（从传递媒体角度来看）可以作为文件下载的替代品。流媒体技术关注的是如何传递媒体，而不是如何编码媒体，具体的实现就是各种流媒体协议。封装后的媒体比特流（容器格式）由流媒体服务器递送到流媒体客户端。流媒体协议可能对底层容器格式、编码格式有要求，也可能没有任何要求。

三、直播

直播流（Live streaming）和静态文件播放的关键差异：点播的目标文件通常位于服务器上，具有一定的播放时长、文件大小。浏览器可以使用渐进式下载，一边下载一边播放，直播不存在播放起点、终点。它表现为一种流的形式，源源不断的从视频采集源通过服务器，传递到客户端直播流通常是自适应的（adaptive），其码率随着客户端可用带宽的变化，可能变大、变小，以尽可能消除延迟流媒体技术不但可以用于监控画面预览，也可以改善录像播放的用户体验，比起简单的静态文件回放，流式回放具有以下优势：延迟相对较低，播放能够尽快开始自适应流可以避免卡顿。