HTTP-FLV直播初探
目前几种视频流的简单对比：
|
协议 |
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直播初探的更多相关文章
- Car-eye-http-flv-module 实现nginx-rtmp-mudule HTTP方式的FLV直播功能
nginx-rtmp-mudule RTMP 是一款优秀的Car-eye-http-flv-module 是在nginx-rtmp-mudule RTMP基础上修改的流媒体服务器,除了支持flash播 ...
- hls&flv直播请求过程
hls&flv直播请求过程 直播类产品层出不穷,从各方面塑造了我们的生活方式.直播产品中,延时是决定用户体验的关键因素,它也将间接决定直播产品的成败.这其间,对延时影响较大的就是直播架构中选择 ...
- HLS视频点播&直播初探
前端可选的视频直播协议大致只有两种: RTMP(Real Time Messaging Protocol) HLS(HTTP Live Streaming) 其中RTMP是Adobe开发的协议,无法在 ...
- 【转】HLS视频点播&直播初探
特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...
- flv.js的追帧、断流重连及实时更新的直播优化方案
目录 1. 前言 2. 前端直播 2.1 常见直播协议 2.2 flv.js 的原理 2.3 flv.js 的简单使用 3. flv.js 的优化方案 3.1 追帧-解决延迟累积问题 3.2 断流重连 ...
- 从Html5直播到互动直播，看直播协议的选择
目前,国内主流的直播协议有HLS.RTMP.HTTP FLV,适用于不同的直播场景. 一.HLS.RTMP与HTTP FLV 1.HLS HLS 全称是 HTTP Live Streaming, 是一 ...
- 基于nginx-rtmp-module模块实现的HTTP-FLV直播模块（nginx-http-flv-module）
本文后续的内容将在这里更新:<基于nginx-rtmp-module模块实现的HTTP-FLV直播模块(nginx-http-flv-module)续>.注意:下文的配置很多已经不能用了, ...
- FLV提取AAC音频单独播放并实现可视化的频谱
如上图,要实现对FLV直播流中音频的识别,并展示成一个音频相关的动态频谱. 一. 首先了解下什么是声音? 能量波,有频率有振幅,频率高低就是音调,振幅大小就是音量:采样率是对频率采样,采样精度是对幅度 ...
- 阿里云 Aliplayer高级功能介绍(四)：直播时移
基本介绍 时移直播基于常规的HLS视频直播,直播推流被切分成TS分片,通过HLS协议向播放用户分发,用户请求的m3u8播放文件中包含不断刷新的TS分片地址:对于常规的HLS直播而言,TS分片地址及相应 ...
随机推荐
- zoj3953 Intervals 最大不重叠区间加强版 zoj排名第一~
Intervals Time Limit: 1 Second Memory Limit:65536 KB Special Judge Chiaki has n intervals ...
- Xp下麦克风设备及音量检测
从Vista开始,windows底层的音频架构发生了改变:原本是底层API的waveXXX.mixerXXX等都在Core Audio APIs的基础上进行了重构,上升为了高层API:底层API变为C ...
- 基于HTML5和WebGL的3D网络拓扑结构图
现在,3D模型已经用于各种不同的领域.在医疗行业使用它们制作器官的精确模型:电影行业将它们用于活动的人物.物体以及现实电影:视频游戏产业将它们作为计算机与视频游戏中的资源:在科学领域将它们作为化合物的 ...
- Django中添加富文本编辑器
使用的是CKeditor这个模块 1.安装: pip install django-ckeditor 2.将ckeditor注册到settings.py文件中, 并添加ckeditor的url到你项目 ...
- python的re正则表达
正则表达式,又称正规表示式.正规表示法.正规表达式.规则表达式.常规表示法(英语:Regular Expression,在代码中常简写为regex.regexp或RE),是计算机科学的一个概念.正则表 ...
- Nodejs.安装.非源码方式安装Node.js (Centos)
已验证的适用环境: Centos6.x 树莓派官方ROM(Raspbian) 先去官网下载已编译好的安装包 https://nodejs.org/en/download/current/ 以Cent ...
- Memcached理解
一.Memcached简介: 1. Memcached是一个自由开源的,高性能的,分布式内存对象缓存系统. 2. Memcached是一种基于内存的key-value存储,用来存储小块的任意数据(字符 ...
- Linux系统查找
1. which:在当前用户环境变量path指定的路径下查找可执行程序/文件. 特点:(1)只在当前用户环境变量指定的路径下查找: (2)只找出可执行程序/文件的位置: (3)查找速度非常快. 注:使 ...
- 基于容器微服务的PaaS云平台设计（二）通过kubernetes实现微服务容器管理
版权声明:本文为博主原创文章,欢迎转载,转载请注明作者.原文超链接 ,博主地址:http://www.cnblogs.com/SuperXJ/ 上一章描述了基于spring cloud的微服务实例(实 ...
- Spring MVC前后端的数据传输
本篇文章主要介绍了Spring MVC中如何在前后端传输数据. 后端 ➡ 前端 在Spring MVC中这主要通过Model将数据从后端传送到前端,一般的写法为: @RequestMapping(va ...