HTTP-FLV直播初探

時間 2019-11-09

標籤 http flv 直播初探欄目 HTTP/TCP 简体版

原文原文鏈接

目前幾種視頻流的簡單對比：html

協議html5	httpflvios	rtmpgit	hlsgithub	dashweb
傳輸方式瀏覽器	http流服務器	tcp流微信	httptcp	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>