Web 直播推流、推流服务器、拉流端实现的方案

2021年4月15日 0 条评论 8.7k 次阅读 0 人点赞

有幸接触到直播方向的开发,认识了几种直播协议。

首先先是几种推流工具:推流可以使用 ffmpeg 工具或者 OBS 推流工具

推流服务器可以直接使用腾讯云直播或者请参考开源项目进行搭建

live-go https://github.com/gwuhaolin/livego

ping-os https://github.com/pingostack/pingos

最后就是拉流端与协议,介绍以下代码的库都是直接基于CDN,因此你可以直接拷贝下来,修改拉流地址就可以进行直播了。(RTMP 拉流除外)

一、RTMP 协议拉流

划重点：RTMP 协议是 Adobe 公司开发的，基于 TCP 的应用层协议,也就是说RTMP实际上是使用TCP作为传输协议.....(PS:和 HTTP 协议做了个比较,这句话感觉说了和没说一样,)，用在 Flash 平台,;浏览器想要跑起来需要支持 flash 插件.....

默认端口号：1935

RTMP 优点：

  • 延迟低：1. 从采集推流端到流媒体服务器再到播放端是一条数据流，因此在服务器不会有落地文件。2. 基于 TCP 长连接，不需要多次建连

RTMP缺点：

  • 服务器兼容性差：使用非常规 80 端口，需要额外支持。
  • 播放端兼容性不好：需要 Flash 插件支持。

请注意......2021 年了 ,Chrome 浏览器已经不兼容 Flash 插件了,想看 RTMP 的代码请直接略过

二、HTTP FLV 拉流

浏览器不支持 flash 插件之后，h5 播放 rtmp 直播流的解决方案使用 http-flv

HTTP-FLV，即将音视频数据封装成 FLV，然后通过 HTTP 协议传输给客户端。

划重点：基于 HTTP 直接传输 FLV 流媒体格式。

端口号：80

握手流程：

参考 HTTP 协议

消息：

由于直接传 FLV，所以可以直接参考 FLV 格式

优点：

  • 服务器兼容性好：基于 HTTP 协议。
  • 低延迟：直接传输 FLV 流，而且基于 HTTP 长链接。

缺点：

  • 播放端兼容性不好：需要 Flash 支持，不支持多音视频流，不便于 Seek。

基于 flv.min.js 的代码示例

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.5.0/flv.min.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
​
<video id="videoElement"></video>
​
<button onclick="playFLV()">PLAY</button>
</body>
​
<script>
    var flvPlayer;
​
    if (flvjs.isSupported()) {
        var videoElement = document.getElementById('videoElement');
        var flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: 'http://pull-tencent.xhyonline.com/live/123123.flv'    // 请直接修改这个 flv 地址即可
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        // flvPlayer.play();
    }
    var playFLV=function(){
        flvPlayer.play();
    }
​
</script>
</html>

三、HTTP HLS 拉流

划重点：HLS 是 苹果 公司开发，基于 HTTP 流媒体网络传输协议，每次只下载一些数据，用 m3u8 文件来存储。

播放模式：

  • 点播 模式就是当前时间点可以获取到所有 index 文件和 TS 文件，二级 index 文件中记录了所有 TS 文件的地址。这种模式允许客户端访问全部内容。
  • 直播 模式就是实时生成 M3u8 和 TS 文件。它的索引文件一直处于动态变化的，播放的时候需要不断下载二级 index 文件，以获得最新生成的 TS 文件播放视频。如果一个二级 index 文件的末尾没有 #EXT-X-ENDLIST 标志，说明它是一个 Live 视频流。

客户端在播放点播模式的视频时其实只需要下载一次一级 index 文件和二级 index 文件就可以得到所有 TS 文件的下载地址，除非客户端进行比特率切换，否则无需再下载任何 index 文件，只需顺序下载 TS 文件并播放就可以了。但是直播模式下略有不同，因为播放的同时，新 TS 文件也在被生成中，所以客户端实际上是下载一次二级 index 文件，然后下载 TS 文件，再下载二级 index 文件（这个时候这个二级 index 文件已经被重写，记录了新生成的 TS 文件的下载地址）,再下载新 TS 文件，如此反复进行播放。

HTTP HLS优点：

  • 服务器兼容性好：HLS基于无状态协议（HTTP），客户端只是按照顺序使用下载存储在服务器的普通 TS 文件，做负责均衡如同普通的 HTTP 文件服务器的负载均衡一样简单。
  • 无缝切清晰度：由于 Index 文件已经有几个码率的 TS 文件地址，所以可以实现无缝切换清晰度。

HTTP HLS缺点：

  • 延迟高：1. 服务器端的编码器和流分割器生成 TS 文件的时常，HLS 协议应用于直播视频传输时，是将媒体文件切割成了对应于媒体分段的 TS 文件。2. 播放器取片的间隔时间，在客户端开始下载之前，必须等待服务器端的编码器和流分割器至少生成一个TS 文件。3. 客户端下载切片的时间及启动播放所需的切片个数，通常下载完两个媒体文件后才能保证不同分段音视频间的无缝连接。

基于 video.js 的代码示例

<html lang="zh-CN">
​
<head>
​
    <meta charset="UTF-8">
​
    <title>前端播放m3u8格式视频</title>
​
    <!--https://www.bootcdn.cn/video.js/-->
​
    <link href="https://cdn.bootcss.com/video.js/7.6.5/alt/video-js-cdn.min.css" rel="stylesheet">
​
    <script src="https://cdn.bootcss.com/video.js/6.6.2/video.js"></script>
​
    <!--https://www.bootcdn.cn/videojs-contrib-hls/-->
​
    <script src="https://cdn.bootcss.com/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>
​
</head>
​
<body>
​
<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="1080" height="708" data-setup='{}'>
    <!--请直接修改这个地址即可-->
    <source id="source" src="http://121.5.62.93:9090/out.m3u8" type="application/x-mpegURL">
​
</video>
​
</body>
​
<script>
​
    // videojs 简单使用
​
    var myVideo = videojs('myVideo',{
​
        bigPlayButton : true,
​
        textTrackDisplay : false,
​
        posterImage: false,
​
        errorDisplay : false,
​
    })
​
    myVideo.play() // 视频播放
​
    myVideo.pause() // 视频暂停
​
</script>
​
</html>

四、 小总结

RTMPHLSHTTP-FLV
协议RTMP应用协议 基于 TCP 长链接HTTP 短连接HTTP 长链接
原理每个时刻的数据收到后立即转发每隔一段时间生成 TS 文件，并更新 M3U8 文件每个时刻的数据收到后立即转发
延时1-3 秒4-20 秒（根据切片情况）1-3 秒
Web 兼容性需要插件直接兼容需要插件
其他跨平台支持较差，需要 Flash 支持播放时需要多次请求，网络质量要求高 video.js 库支持与RTMP相比只是传输协议变了。对于网页播放端，本来还是需要Flash才能播放，但「flv.js库」的出现又弥补了这个缺陷。

Web 直播[平台开发,优先使用 HTTP-FLV

HTTP-FLV 兼容方案

由于目前flv.js兼容性还不是很好，要用在产品中必要要兼顾到不支持flv.js的浏览器。兼容方案如下：

PC端

  1. 优先使用 HTTP-FLV，因为它延迟小，性能也不差1080P都很流畅。
  2. 不支持 flv.js 就使用 Flash播放器播 RTMP 流。Flash兼容性很好，但是性能差默认被很多浏览器禁用。
  3. 不想用Flash兼容也可以用HLS，但是PC端只有Safari支持HLS

移动端

  1. 优先使用 HTTP-FLV，因为它延迟小，支持HTTP-FLV的设备性能运行 flv.js 足够了。
  2. 不支持 flv.js 就使用 HLS，但是 HLS延迟非常大。
  3. HLS 也不支持就没法直播了，因为移动端都不支持Flash。

暂无
© 著作权归作者所有

兰陵美酒郁金香

大道至简 Simplicity is the ultimate form of sophistication.

文章评论（0）

你必须 登录 才能发表评论