HTTP-FLV直播初探

悠悠 2023-06-14 15:59 382阅读 0赞

[https://www.cnblogs.com/saysmy/p/7851911.html][https_www.cnblogs.com_saysmy_p_7851911.html]

**目前几种视频流的简单对比：**

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;"> 协议 </td> 
 <td style="vertical-align:top;"> httpflv </td> 
 <td style="vertical-align:top;"> rtmp </td> 
 <td style="vertical-align:top;"> hls </td> 
 <td style="vertical-align:top;"> dash </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> 传输方式 </td> 
 <td style="vertical-align:top;"> http流 </td> 
 <td style="vertical-align:top;"> tcp流 </td> 
 <td style="vertical-align:top;"> http </td> 
 <td style="vertical-align:top;"> http </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> 视频封装格式 </td> 
 <td style="vertical-align:top;"> flv </td> 
 <td style="vertical-align:top;"> flv tag </td> 
 <td style="vertical-align:top;"> Ts文件 </td> 
 <td style="vertical-align:top;"> Mp4 3gp webm </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> 延时 </td> 
 <td style="vertical-align:top;"> 低 </td> 
 <td style="vertical-align:top;"> 低 </td> 
 <td style="vertical-align:top;"> 高 </td> 
 <td style="vertical-align:top;"> 高 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> 数据分段 </td> 
 <td style="vertical-align:top;"> 连续流 </td> 
 <td style="vertical-align:top;"> 连续流 </td> 
 <td style="vertical-align:top;"> 切片文件 </td> 
 <td style="vertical-align:top;"> 切片文件 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> Html5播放 </td> 
 <td style="vertical-align:top;"> 可通过html5解封包播放(flv.js) </td> 
 <td style="vertical-align:top;"> 不支持 </td> 
 <td style="vertical-align:top;"> 可通过html5解封包播放(hls.js) </td> 
 <td style="vertical-align:top;"> 如果dash文件列表是mp4webm文件，可直接播放 </td> 
 </tr> 
 </tbody> 
</table>

*  RTMP（Real Time Messaging Protocol）是基于TCP的，由Adobe公司为Flash播放器和服务器之间音频、视频传输开发的开放协议。
 *  HLS（HTTP Live Streaming）是基于HTTP的，是Apple公司开放的音视频传输协议。
 *  HTTP FLV则是将RTMP封装在HTTP协议之上的，可以更好的穿透防火墙等。

**Http\_flv & RTMP**

这两个协议实际上传输数据是一样的，**数据都是flv文件的tag**。http\_flv是一个无限大的http流的文件，相比rtmp就只能直播，而rtmp还可以推流和更多的操作。但是http有个好处，就是是以80http通信的，穿透性强，而且rtmp是非开放协议。

这两个协议是如今直播平台主选的直播方式，主要原因就是延时极低。

将测试：RTMP延迟1s左右，HTTPFLV延迟1-2s左右，可用于对延迟要求比较苛刻的场景，但要注意兼容性，文章最后会说明HTTPFLV兼容性。

--------------------

**HTTP FLV直播Demo:**

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

<!DOCTYPE html>
 <html>
 
 <head>
 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 <title>flv.js demo</title>
 
 <style>
 .mainContainer {
 display: block;
 width: 1024px;
 margin-left: auto;
 margin-right: auto;
 }
 
 .urlInput {
 display: block;
 width: 100%;
 margin-left: auto;
 margin-right: auto;
 margin-top: 8px;
 margin-bottom: 8px;
 }
 
 .centeredVideo {
 display: block;
 width: 100%;
 height: 576px;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: auto;
 }
 
 .controls {
 display: block;
 width: 100%;
 text-align: left;
 margin-left: auto;
 margin-right: auto;
 margin-top: 8px;
 margin-bottom: 10px;
 }
 
 .logcatBox {
 border-color: #CCCCCC;
 font-size: 11px;
 font-family: Menlo, Consolas, monospace;
 display: block;
 width: 100%;
 text-align: left;
 margin-left: auto;
 margin-right: auto;
 }
 </style>
 </head>
 
 <body>
 
 <div class="mainContainer">
 <video name="videoElement" class="centeredVideo" id="videoElement" controls width="1024" height="576" autoplay>
 Your browser is too old which doesn't support HTML5 video.
 </video>
 
 </div>
 
 <script src="./flv.js?v=2"></script>
 
 <script>
 if (flvjs.isSupported()) {
 startVideo()
 }
 
 function startVideo(){
 var videoElement = document.getElementById('videoElement');
 var flvPlayer = flvjs.createPlayer({
 type: 'flv',
 isLive: true,
 hasAudio: true,
 hasVideo: true,
 enableStashBuffer: true,
 url: 'https://xl.live-play.acgvideo.com/live-xl/520658/live_12860646_332_c521e483.flv?wsSecret=778d91efcb22c588be28cb67ebe57082&wsTime=1510929009'
 });
 flvPlayer.attachMediaElement(videoElement);
 flvPlayer.load();
 flvPlayer.play();
 }
 
 videoElement.addEventListener('click', function(){
 alert( '是否支持点播视频：' + flvjs.getFeatureList().mseFlvPlayback + ' 是否支持httpflv直播流：' + flvjs.getFeatureList().mseLiveFlvPlayback )
 })
 
 function destoryVideo(){
 flvPlayer.pause();
 flvPlayer.unload();
 flvPlayer.detachMediaElement();
 flvPlayer.destroy();
 flvPlayer = null;
 }
 
 function reloadVideo(){
 destoryVideo()
 startVideo()
 }
 </script>
 
 </body>
 
 </html>

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

**flv.js问题：（暂时发现这几个）**

1. 播放一段时间后，音视频不同步

2. 播放一段时间后，音频模糊

3. 暂停后继续播放是接着暂停时的场景继续播，对于直播会产生延迟 =》 临时解决方案：暂停后继续播放时，手动销毁视频再重新加载播放

4. 手机端兼容性差

\--------------------------------------------

**1,2 问题解决方案：**

尝试设置 config.fixAudioTimestampGap = false

控制台将不会输出大量警告信息。

经检测，不同的推流客户端，会导致音视频同步问题有不一样的体现。

**LFLiveKit 的音频流时间戳问题，定期会有两帧之间存在两倍时间戳差，会导致严重音画不同步。**

目前在我们平台，ios客户端音视频均同步，安卓客户端音视频不同步，需要设置flvjs的config.fixAudioTimestampGap = false才会音视频同步。

github issue：[https://github.com/Bilibili/flv.js/issues/136][https_github.com_Bilibili_flv.js_issues_136]

\----------------------------------------------

**判断flv.js在手机端是否支持点播和httpflv直播：**

是否支持点播视频：flvjs.getFeatureList().mseFlvPlayback

是否支持httpflv直播流：flvjs.getFeatureList().mseLiveFlvPlayback

目前测试结果：

**ios** ：均不支持，包括微信和safari

**安卓**：微信均不支持；其他浏览器部分支持点播，全部不支持直播

## 完整版demo：[https://github.com/saysmy/http-flv][https_github.com_saysmy_http-flv] ##

\--------------------------------------------

# 2019-01-05更新 #

经过多天的测试，对数十位主播分别用flvjs的master分支、[\#136][https_github.com_Bilibili_flv.js_issues_136]、[\#354][354]进行10分钟到2小时的测试，总结一下结论：

1. master分支、issue 136 都会出现不同程度主播音画不同步的情况，master分支音画不同步情况尤其严重。

2. \#354 pr 可以正常播放所有主播的音视频，均同步。

3. 腾讯云TCPlayerLite和Web 直播播放器 1.0均使用flvjs库进行以html5方式播放flv（猜测使用master分支），经测试也是出现大面积音画不同步现象。

## 结论： ##

如果想在pc上使用flvjs播放flv格式直播，请选用 [flvjs的PR\#354][flvjs_PR_354]。

也期待flvjs作者可以尽早确认此PR并合并到master，造福全人类！

[https_www.cnblogs.com_saysmy_p_7851911.html]: https://www.cnblogs.com/saysmy/p/7851911.html
[aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg
[https_github.com_Bilibili_flv.js_issues_136]: https://github.com/Bilibili/flv.js/issues/136
[https_github.com_saysmy_http-flv]: https://github.com/saysmy/http-flv
[354]: https://github.com/Bilibili/flv.js/pull/354
[flvjs_PR_354]: https://github.com/saysmy/flvjs-pr354