H5直播RTSP摄像头视频流解决方案_html5 rtsp

视频直播是借助流媒体及通信技术，通过采集、编码、发布和播放等过程实现实时播放。近年来，随着移动互联网的发展，企业的移动端应用日渐增长，手机直播需求也应运而生。根据业务需求，需在App端和H5端调用摄像头视频流，来达到现场生产作业直播的目的。

1 需求分析

我厂安装的摄像头，主要由海康威视、大华和英飞拓三个品牌构成，输出协议均为RTSP。App端支持直接播放RTSP协议的视频流，但无法直接在H5端显示。故欲达到在H5端直播的目的，需要将RTSP协议转换成RTMP或HLS协议。

常见流媒体协议：

1、RTSP协议：英文全称 Real Time Streaming Protocol，RFC2326，实时流传输协议，是TCP/IP协议体系中的一个应用层协议！协议主要规定定了一对多应用程序如何有效地通过IP网络传送多媒体数据。RTSP体系结位于RTP和RTCP之上（RTCP用于控制传输，RTP用于数据传输），使用TCP或UDP完成数据传输！

2、RTMP协议：RTMP协议是Real Time Message Protocol(实时信息传输协议)的缩写，它是由Adobe公司提出的一种应用层的协议，用来解决多媒体数据传输流的多路复用（Multiplexing）和分包（packetizing）的问题。

3、HLS协议：HTTP Live Streaming，是Apple的开放标准，基于HTTP流，它最初是苹果公司针对苹果移动设备而开发的流，由于是基于HTTP的，因此很多HTTP的优点都得到了继承。

RTMP协议支持在Html播放，但是它依赖flash播放器，所以在移动端H5不能采用RTMP协议。HLS协议基于HTTP流，支持IOS、Android、HTML5，故采取将RTSP拉流并转码为HLS协议输出的方式，下图是HLS的工作原理：

2 架构设计

考虑到内网带宽限制及多用户并发以及便于管理，我们采用流媒体服务器（内外网映射、拉流/转码）+web服务器+手机App+H5的方案，其中流媒体服务器负责拉取摄像头RTSP视频流，并压缩编码成HLS，等待来自手机App+H5的request请求；WEB服务器用于管理摄像头信息；H5端通过video.js开源插件实现播放，架构图如下：
 

3 具体实现

为了保证系统稳定性及管理便捷性，我们使用了EasyNVR流媒体服务器软件，EasyNVR集成了可视化web管理服务，能够通过简单的网络摄像机通道配置，将传统监控行业里面的高清网络摄像机IP Camera、NVR等具有RTSP协议输出的设备接入到EasyNVR，EasyNVR能够将这些视频源的音视频数据进行拉取，转换为RTMP或HLS，进行全平台终端H5直播（Web、Android、iOS）
 

1、安装流媒体服务器软件EasyNVR

在EasyNVR官网下载安装包，解压后运行ServiceInstall-EasyNVR.exe进行安装，成功将启动web管理界面。

2 获取摄像机的RTSP流

我们以海康威视摄像头为例，首先在摄像头机web管理界面（默认入口是摄像头ip地址），在网络菜单配置里了，开通UPnP端口，以及RTSP视频流的映射。

开通映射以后，UPnP状态显示生效。

根据海康威视摄像头的视频流格式，拼出该摄像头的RTSP地址，如：rtsp://账号:密码@http://172.16.xxx.xxx:554/h264/ch35/main/av_stream

可使用VLC media player软件对摄像头视频流进行测试，看看是否正常输出。

3、添加摄像头信息

将摄像头rtsp视频流，配置到easyNvr的通道后，点击预览查看视频能否正确输出。

4、HLS转码

在预览界面，其他设置一栏中，可以查看HLS的.m3u8地址。

5、demo测试

采用video.js开源的视频插件编码，调用.m3u8地址,在H5端成功展示视频。

通过项目中实际的应用，HLS直播在无论是在实时性、连续性还是多用户并发控制方面都达到了我们预期的目标。

原文 H5直播RTSP摄像头视频流解决方案 - 掘金

★文末名片可以免费领取音视频开发学习资料，内容包括（FFmpeg ，webRTC ，rtmp ，hls ，rtsp ，ffplay ，srs）以及音视频学习路线图等等。

见下方!↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓