HTTP-FLV直播初探

Posted 2020-10-14 saysmy

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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

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

以上是关于HTTP-FLV直播初探的主要内容，如果未能解决你的问题，请参考以下文章

基于nginx-rtmp-module模块实现的HTTP-FLV直播模块（nginx-http-flv-module）

JavaCV音视频开发宝典：无需流媒体服务也无需转码，使用JavaCV和springBoot实现http-flv转封装直播服务，浏览器网页flv.js直接播放rtprtsprtmp实时视频

JavaCV音视频开发宝典：使用JavaCV和springBoot实现http-flv直播服务,无需流媒体服务,浏览器网页flv.js转封装方式播放rtsp,rtmp和桌面投屏实时画面