HTTP-FLV直播初探 - 冒雨ing - 博客园

标签: | 发表时间:2019-05-28 22:07 | 作者:
出处:https://www.cnblogs.com

两个flv.js的扩展版本:

https://github.com/saysmy/flvjs-pr354

https://github.com/virgoone/vplyr



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

协议

httpflv

rtmp

hls

dash

传输方式

http流

tcp流

http

http

视频封装格式

flv

flv tag

Ts文件

Mp4 3gp webm

延时

数据分段

连续流

连续流

切片文件

切片文件

Html5播放

可通过html5解封包播放(flv.js)

不支持

可通过html5解封包播放(hls.js)

如果dash文件列表是mp4webm文件,可直接播放

 

  • 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:

<!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>

 

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

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

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

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

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

目前测试结果:

ios :均不支持,包括微信和safari

安卓:微信均不支持;其他浏览器部分支持点播,全部不支持直播

 

完整版demo: https://github.com/saysmy/http-flv

 

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

2019-01-05更新

经过多天的测试,对数十位主播分别用flvjs的master分支、 #136#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并合并到master,造福全人类!

相关 [http flv 直播] 推荐:

HTTP-FLV直播初探 - 冒雨ing - 博客园

- -
两个flv.js的扩展版本:. 目前几种视频流的简单对比:. 可通过html5解封包播放(flv.js). 可通过html5解封包播放(hls.js). 如果dash文件列表是mp4webm文件,可直接播放. RTMP(Real Time Messaging Protocol)是基于TCP的,由Adobe公司为Flash播放器和服务器之间音频、视频传输开发的开放协议.

GitHub - winshining/nginx-http-flv-module: Media streaming server based on nginx-rtmp-module. In addtion to the features nginx-rtmp-module supplies, HTTP-FLV, GOP cache and VHOST are supported now.

- -
MUSTbe enclosed by quotation marks, or arguments in url will be discarded (some shells not so smart will interpret "&" as "run in background").. ngx_rtmp_stat_modulemay not get statistics from a specified worker process in multi-processes mode, for HTTP requests are randomly distributed to worker processes.

用nginx搭建基于rtmp或者http的flv、mp4流媒体服务器

- - 开源软件 - ITeye博客
这种方式要下载FLV视频文件到本地播放,一旦FLV视频文件下载完成,就不会消耗服务器的资源和带宽,但是拖动功能没有RTMP/RTMP流媒体方式强大,很多视频网站都是用HTTP方式实现的,如:YouTube,土豆,酷6等. 2、  RTMP/RTMP流媒体方式. 这种方式不用下载FLV视频文件到本地,可以实时的播放flv文件,可以任意拖拽播放进度条,但是比较消耗服务器的资源.

FLV Extract:轻松从FLV文件中分离音频/视频

- 十年恋一人! - 软件志
一、FLV Extract简介: 这款小工具能帮助我们快速地从FLV文件中分离音频/视频,而且官方宣称是无损分离,能将FLV、F4V、PFV以AVI(H.263/FLV1)(VP6/VP6F)(H.264/AVC)视频格式以及MP3,AAC(ADTS标头),WAV(PCM)的音频格式分离输出. 二、FLV Extract安装及简单使用: 1、下载及安装:下载后解压文件到任意文件夹,因为是绿色软件,所以无须安装,直接运行文件夹内的主程序就能启动该软件; 2、从FLV文件中分离音频/视频: 软件操作十分简单,运行软件后,只需要将FLV视频文件拖拽到软件窗口内,对应该文件的视频文件、timecodes文件以及音频文件就会被单独分离出来.

HTTP Headers 入门

- johnny - Time Machine
非常感谢 @ytzong 同学在twitter上推荐这篇文章,原文在此. 本文系统的对HTTP Headers进行了简明易懂的阐述,我仅稍作笔记. 什么是HTTP Headers. HTTP是“Hypertext Transfer Protocol”的所写,整个万维网都在使用这种协议,几乎你在浏览器里看到的大部分内容都是通过http协议来传输的,比如这篇文章.

HTTP基础

- - ITeye博客
HTTP的结构主要包括下面几个要点:. HTTP的版本主要有1.0,1.1 和更高版本.    1.1 及以上版本允许在一个TCP连接上传送多个HTTP协议,1.0能 .    1.1 及以上版本多个请求和响应可以重叠,1.0不能.    1.1 增加了很多的请求头和响应头.     一个请求行,若干小心头,以及实体内容,其中的一些消息头和实体内容是可选的,消息头和实体内容需要空行隔开.

HTTP Header 详解

- - 博客园_Ruby's Louvre
HTTP(HyperTextTransferProtocol)即超文本传输协议,目前网页传输的的通用协议. HTTP协议采用了请求/响应模型,浏览器或其他客户端发出请求,服务器给与响应. 就整个网络资源传输而言,包括message-header和message-body两部分. 首先传递message- header,即 http header消息.

HTTP/2 in Netty

- -
Here, we created a context for the server with a JDK SSL provider, added a couple of ciphers, and configured the Application-Layer Protocol Negotiation for HTTP/2..

nginx+jwplayer配置flv/MP4点播系统, 视频拖动支持 - 一 水

- - 博客园_首页
下载 nginx 最新版 http://nginx.org/. 安装依赖库, 以ubuntu为例. 编译nginx, 增加flv和MP4的支持.    编译时可以指定安装目录 --prefix=/path/to/install.    然后make install. 测试是否支持seek(拖动, 快进).

HTTP负载测试

- - 博客 - 伯乐在线
英文原文: ON HTTP LOAD TESTING 来源: oschina. 有很多人在谈论HTTP服务器软件的性能测试,也许是因为现在有太多的服务器选择. 这很好,但是我看到有人很多基本相同的问题,使得测试结果的推论值得怀疑. 在日常工作中花费了很多时间在高性能代理缓存和源站性能测试方面之后,这里有我认为比较重要的一些方面来分享.