频直播是借助流媒体及通信技术，通过采集、编码、发布和播放等过程实现实时播放。近年来，随着移动互联网的发展，企业的移动端应用日渐增长，手机直播需求也应运而生。根据业务需求，需在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）

相关学习资料推荐，点击下方链接免费报名，先码住不迷路~】

音视频免费学习地址：https://xxetb.xet.tech/s/2cGd0

【免费分享】音视频学习资料包、大厂面试题、技术视频和学习路线图，资料包括（C/C++，Linux，FFmpeg webRTC rtmp hls rtsp ffplay srs 等等）有需要的可以点击788280672加群免费领取~

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摄像头视频流解决方案 - 掘金

同学问道：需要实时播放摄像头rtsp视频流，而浏览器不能直接播放，怎样解决？

实现这个需求可以通过插件或者转码来实现。

要实现这个目的，可以采用的方案非常得多，有商业的也有开源的，这里主要列举一些开源的方案。这里的方案都是我尝试过了的，有些成功，有些没成功。但是因为每个项目情况不同，这次没成的方法，换个项目也许就能成。

C++音视频开发学习资料：点击莬费领取→音视频开发（资料文档+视频教程+面试题）（FFmpeg+WebRTC+RTMP+RTSP+HLS+RTP）

方案一: html5 + websocket_rtsp_proxy 实现视频流直播

实现原理

实现步骤

1. 服务器安装streamedian服务器
2. 客户端通过video标签播放

<video id="test_video" controls autoplay></video>

<script src="free.player.1.8.4.js"></script>
<script>

    if (window.Streamedian) {
        var errHandler=function(err){
            console.log('err', err.message);
        };

        var infHandler=function(inf) {
            console.log('info', inf)
        };

        var playerOptions={
            socket: "ws://localhost:8088/ws/",
            redirectNativeMediaErrors : true,
            bufferDuration: 30,
            errorHandler: errHandler,
            infoHandler: infHandler
        };

        var html5Player=document.getElementById("test_video");
        html5Player.src="rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov";

        var player=Streamedian.player('test_video', playerOptions);

        
        window.onbeforeunload=function(){
            player && player.destroy();
            player=null;
            Request=null;
        }
    }
</script>

注意：测试时先从官网申请license key，否则socket 只能识别localhost和127.0.0.1

优缺点

• 优点：实现比较简单
• 缺点：收费的，免费版有很多限制

C++音视频开发学习资料：点击莬费领取→音视频开发（资料文档+视频教程+面试题）（FFmpeg+WebRTC+RTMP+RTSP+HLS+RTP）

方案二：ffmpeg + nginx + video，rtsp转rtmp播放

rtmp是adobe开发的协议，一般使用adobe media server 可以方便的搭建起来；随着开源时代的到来，有大神开发了nginx的rtmp插件，也可以直接使用nginx实现rtmp

rtmp方式的最大的优点在于低延时，经过测试延时普遍在1-3秒，可以说很实时了；缺点在于它是adobe开发的，rtmp的播放严重依赖flash，而由于flash本身的安全，现代浏览器大多禁用flash

实现步骤

1. 安装ffmpeg工具
2. 安装nginx 注意：linux系统需要安装 nginx-rtmp-module 模块，Windows系统安装包含rtmp的(如nginx 1.7.11.3 Gryphon)
3. 更改nginx配置

rtmp{
    server{
    listen 1935;

        application live{
          live on;
          record off;
        }
        application hls{
          live on;
          hls on;
          hls_path nginx-rtmp-module/hls;
          hls_cleanup off;
        }
    }
}

4.ffmpeg转码

ffmpeg -i "rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov" -f flv -r 25 -s 1080*720 -an "rtmp://127.0.0.1:1935/hls/mystream"

5.video 播放

<html>
<head>
<title>video</title>
<!-- 引入css -->
<link rel="stylesheet" type="text/css" href="./videojs/video-js.min.css" />

</head>
<body>
<video id="test_video" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay>
    <source src='rtmp://127.0.0.1:1935/hls/mystream' type='rtmp/flv'/>
</video>

</body>
</html>
<!-- 引入js -->
<script type="text/javascript" src="./videojs/video.min.js"></script>
<script type="text/javascript" src="./videojs/videojs-flash.js"></script>

<script>
videojs.options.flash.swf="./videojs/video-js.swf"
    var player=videojs('test_video', {"autoplay":true});
    player.play();
</script>

注意：使用谷歌浏览器播放时，需要开启flash允许

C++音视频开发学习资料：点击莬费领取→音视频开发（资料文档+视频教程+面试题）（FFmpeg+WebRTC+RTMP+RTSP+HLS+RTP）

方案三：ffmpeg + video，rtsp转hls播放

HLS (HTTP Live Streaming) 直播 是有苹果提出的一个基于http的协议。其原理是把整个流切分成一个个的小视频文件，然后通过一个m3u8的文件列表来管理这些视频文件

HTTP Live Streaming 并不是一个真正实时的流媒体系统，这是因为对应于媒体分段的大小和持续时间有一定潜在的时间延时。在客户端，至少在一个分段媒体文件被完全下载后才能够开始播放，而通常要求下载完两个媒体文件之后才开始播放以保证不同分段音视频之间的无缝连接。

此外，在客户端开始下载之前，必须等待服务器端的编码器和流分割器至少生成一个TS文件，这也会带来潜在的时延。

服务器软件将接收到的流每缓存一定时间后包装为一个新的TS文件，然后更新m3u8文件。m3u8文件中只保留最新的几个片段的索引，以保证观众任何时候连接进来都会看到较新的内容，实现近似直播的效果。

这种方式的理论最小延时为一个ts文件的时长，一般为2-3个ts文件的时长。

实现步骤

1. 安装ffmpeg工具
2. ffmpeg转码

ffmpeg -i "rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov" -c copy -f hls -hls_time 2.0 -hls_list_size 0 -hls_wrap 15 "D:/Program Files/html/hls/test.m3u8"

ffmpeg 关于hls方面的指令说明

• -hls_time n: 设置每片的长度，默认值为2。单位为秒
• -hls_list_size n:设置播放列表保存的最多条目，设置为0会保存有所片信息，默认值为5
• -hls_wrap n:设置多少片之后开始覆盖，如果设置为0则不会覆盖，默认值为0.这个选项能够避免在磁盘上存储过多的片，而且能够限制写入磁盘的最多的片的数量
• -hls_start_number n:设置播放列表中sequence number的值为number，默认值为0

3.video 播放

<html>
<head>
<title>video</title>
<!-- 引入css -->
<link rel="stylesheet" type="text/css" href="./videojs/video-js.min.css" />

</head>
<body>
<div class="videoBox">
    <video id="my_video_1" class="video-js vjs-default-skin" controls>
        <source src="http://localhost:8088/hls/test.m3u8" type="application/x-mpegURL"> 
    </video>
</div>

</body>
</html>
<script type="text/javascript" src="./videojs/video.min.js"></script>
<script type="text/javascript" src="./videojs/videojs-contrib-hls.min.js"></script>
<script>
videojs.options.flash.swf="./videojs/video-js.swf"
    var player=videojs('my_video_1', {"autoplay":true});
    player.play();
</script>

C++音视频开发学习资料：点击莬费领取→音视频开发（资料文档+视频教程+面试题）（FFmpeg+WebRTC+RTMP+RTSP+HLS+RTP）

方案四：VLC插件播放

播放步骤

1. 下载安装vlc
2. 浏览器播放

<object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false' width="720" height="410">
    <param name='mrl' value='rtsp://admin:12345@192.168.10.235:554/h264/ch1/main/av_stream' />
    <param name='volume' value='50' />
    <param name='autoplay' value='true' />
    <param name='loop' value='false' />
    <param name='fullscreen' value='false' />
    <param name='controls' value='false' />
</object>

优缺点

• 优点： 可以直接播放RTSP，无需任何中介服务器的帮助
• 缺点： 需要手动安装插件； 基于NPAPI，不被最新的 Chrome 和 Firefox 支持
• 如果你项目的其他功能都能兼容客户电脑上的 IE 浏览器，这个方案就是首选。

其他方案

WebRTC

WebRTC 是支持网页浏览器进行实时音视频的一套API，例如：HTML5 通过 webRTC 直接调用摄像头，但是如果要实现远程视频流的显示，则需要将 RTSP 转换为 WebRTC 流，供 web 端显示。

h5stream

GB28181

jsmpeg.js + ffmpeg + websocket + node

如果你对音视频开发感兴趣，或者对本文的一些阐述有自己的看法，可以在下方的留言框，一起探讨。

者：竹之同学

转发链接：https://segmentfault.com/a/1190000022994032