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
安卓：微信均不支持；其他浏览器部分支持点播，全部不支持直播