WEB页面实时播放海康、大华等摄像头RTSP视频流完全方案

Dear 丶 2023-10-15 21:59 474阅读 0赞

一. 背景分析  
随着移动互联网时代的到来，安防监控领域为了适应互联网的发展要求，首先由国内安防监控龙头企业（海康、大华、宇视）带头先后开发了萤石云、乐橙云等互联网视频云服务，为广大个人或者企业监控用户提供的优质的视频互联网监控服务；而事实上，不管是海康大华等老牌监控厂商、还是新兴的视频云服务提供上，基本上都是通过转RTMP、HLS等适应互联网发展要求的协议，来实现互联网网页或者移动端APP的直播点播。然后我们常用的网络摄像机（IPC）或者硬盘录像机（NVR）等安防设备或者GB/T28181标准国标安防平台输出的流媒体格式多数是RTSP格式，RTSP协议以其标准化程度高、低延迟、协议兼容性强（直播点播回放都支持）等特点，以至于仍然是目前安防行业无可替代的最优的流媒体协议。

二、RTSP如何在浏览器网页（WEB）上无插件直播和点播  
首先，我们从网络摄像机可以获取到RTSP流，但是这个RTSP流不能直接在网页上播放，目前技术层面上，在浏览器上播放RTSP协议的解决方案有两种：

1. 通过浏览器插件的方式，安装插件播放RTSP流；  
2. 通过HTML5 js引擎视频解码播放RTSP流；  
  
目前，第一种方式除了部分安防监控设备厂商仍在使用外，基本以及被淘汰，主要是各大浏览器厂商纷纷禁止网页插件，而且网页插件存在安装麻烦，兼容性差等各种问题；  
第二种方案因为H5不支持RTSP协议，所以不能直接通过H5 JS引擎直接播放RTSP流；

三、如何通过html5播放RTSP直播点播流？  
首先，我们知道RTSP协议是通过TCP协议传输的流媒体文本协商协议，以及通过TCP或者UDP传输RTP流媒体报文，所以，我们需要通过Websocket将rtsp层文本协议代理发送出来，在WEB网页端通过Javascript引擎建立rtsp交互过程，建立RTP数据发送通道；

然后再通过http协议将RTP流媒体数据发送到WEB端，然后再通过js引擎组装RTP数据包并解析，解析出H264然后通过H5进行软解或者硬件解码，再通过网页进行渲染显示播放。

这个过程我们已经在网页H5无插件播放器livewebPlayer.js中已经进行实现，并且还支持HTTP-FLV/WS-FLV/HLS/RTMP等协议进行直播和点播。

配合liveweb流媒体服务，我们可以轻松的实现RTSP流通过Websocket协议在网页上通过H5进行无插件直播和点播方案。

关于liveweb流媒体平台  
liveweb综合安防视频云服务， 提供一站式私有化部署视频安防综合管理系统解决方案。我们秉持网络化、集成化、智能化的理念，采用先进的软硬件开发技术，解决了综合安防系统集中管理、多级联网、信息共享、互联互通、多业务融合等问题。

我们其独创的流媒体直播技术，兼容传统安防流媒体的同时，不需要安装浏览器插件，解决互联网接入安防监控延迟高、起播慢等问题；支持全平台终端H5直播点播（PC、Web、Android、iOS）。