三種視頻流瀏覽器播放解決方案

時間 2019-11-06

原文原文鏈接

背景

最近在項目中遇到須要視頻直播、視頻回放等需求，在實現過程當中也碰到了不少坑，所以在這裏記錄一下調研過程當中遇到的解決方案。
javascript

視頻流介紹

視頻流大體分爲三種：HLS,RTSP,RTMP，下面依次介紹下三種視頻流 css

HLS

HLS（Http Live Streaming) 是一個由蘋果公司提出的基於HTTP的流媒體網絡傳輸協議，直接把流媒體切片成一段段，信息保存到m3u列表文件中，能夠將不一樣速率的版本切成相應的片；播放器能夠直接使用http協議請求流數據。
優點：html

能夠在不一樣速率的版本間自由切換，實現無縫播放
省去使用其餘協議的煩惱

劣勢:前端

延遲大小受切片大小影響，不適合直播，適合視頻點播。
實時性差，延遲高。HLS 的延遲基本在 10s+ 以上
文件碎片。特性的雙刃劍，ts 切片較小，會形成海量小文件，對存儲和緩存都有必定的挑戰

RTMP

RTMP（Real Time Message Protocol）由 Adobe 公司提出流媒體協議，而且是私有協議，未徹底公開，用來解決多媒體數據傳輸流的多路複用（Multiplexing）和分包（packetizing）的問題，RTMP協議通常傳輸的是 flv，f4v 格式流。通常在 TCP 1個通道上傳輸命令和數據。
優點：html5

在於低延遲，穩定性高，支持全部攝像頭格式
專爲流媒體開發的協議，對底層的優化比其它協議更加優秀

劣勢：java

瀏覽器須要加載 flash插件才能播放。
RTMP 爲 Adobe 私有協議，不少設備沒法播放，特別是在 iOS 端，須要使用第三方解碼器才能播放
基於 TCP 傳輸，非公共端口，可能會被防火牆阻攔

RTSP

RTSP（Real-Time Stream Protocol）由Real Networks 和Netscape共同提出的流媒體協議，RTSP協議是共有協議，並有專門機構作維護。是TCP/IP協議體系中的一個應用層協議. RTSP協議通常傳輸的是 ts、mp4 格式的流，RTSP傳輸通常須要 2-3 個通道，命令和數據通道分離。基於文本的多媒體播放控制協議. RTSP定義流格式，流數據經由RTP傳輸；
優點:node

RTSP實時效果很是好，適合視頻聊天，視頻監控等方向。

劣勢：react

瀏覽器不能直接播放，只能經過插件或者轉碼

播放解決方案

HLS與RTMP的播放解決方案

1、使用原生video
若是僅須要在移動設備的WebView上播放，咱們能夠選擇使用html中嵌入hls播放。以下html可以在全部Safari或者安卓3.0以上的WebView上播放。這樣就不須要使用第三方的播放器。linux

<html lang="en">
    <head>
       <meta charset=utf-8/>
    </head>
    <body>
        <div id='player'>
           <video width="640" height="320" controls>
                <source src="http://10.10.5.119/live/livestream.m3u8" type="application/x-mpegURL">
           </video>
        </div>
    </body>
</html>
複製代碼

缺點：nginx

原生H5支持的媒體格式主要有MP四、OGG、WebM、M3U8
M3U8格式播放在pc端瀏覽器上支持兼容性差
沒法播放rtmp流的視頻，由於原生不支持flv

優勢：

使用原生video，不用安裝第三方插件

2、使用flv.js
flv.js是來自Bilibli的開源項目。它解析FLV文件餵給原生HTML5 Video標籤播放音視頻數據，使瀏覽器在不借助Flash的狀況下播放FLV成爲可能.

import React, { PureComponent } from 'react';
import Reflv from 'reflv';

export class HttpFlv extends PureComponent {
  render() {
    return (
      <Reflv url={`http://localhost:7001/live/test.flv`} type="flv" isLive cors /> ) } } 複製代碼

缺點：

錄播，依賴原生HTML5 Video標籤和 Media Source Extensions API
直播，依賴錄播所須要的播放技術，同時依賴 HTTP FLV 或者 WebSocket 中的一種協議來傳輸FLV。其中HTTP FLV需經過流式IO去拉取數據，支持流式IO的有fetch或者stream
因爲依賴Media Source Extensions，目前全部iOS和Android4.4.4如下里的瀏覽器都不支持，也就是說目前對於移動端flv.js基本是不能用的。

優勢：

因爲瀏覽器對原生Video標籤採用了硬件加速，性能很好，支持高清
同時支持錄播和直播
去掉對Flash的依賴

3、video.js
video.js能夠支持網頁在全部的瀏覽器播放，免費的使用不少高級功能。這兩種視頻流的播放可使用video.js，因爲前端使用react開發，所以須要安裝_video.js。_在進行兩種不一樣流播放時須要注意的是設置不一樣的type,播放rtmp時type是 rtmp/flv，播放hls時type是 application/x-mpegURL。兩種視頻流都是基於flash的，所以須要flash的支持。

class VideoPlayer extend Component {
      constructor(props) {
        super(props);
        this.VideoOptions = {
            autoplay: true,
            controls: false,
            sources: [{
                src: url,
                type: "application/x-mpegURL"
            }],
            fluid: 'true',
            playbackRates: [0.75, 1, 1.5, 2]
        }
    }
    componentDidMount() {
         this.player = videojs(this.videoNode, this.VideoOptions, function onPlayerReady() { })
    }
    componentWillUnmount() {
        if (this.player) {
            this.player.dispose()
        }
    }
  render(){
    return (
      <video ref={node => this.videoNode = node} className='video-js vjs-16-9' /> ) } } 複製代碼

html5的video標籤只支持mp四、webm、ogg三種格式，不支持flv格式， flv格式是flash專用的，rtmp流爲flv格式的，必須使用flash播放器，在video.js內部能夠檢測瀏覽器是否支持html5播放器直接播放，若是不支持內部會自動調用瀏覽器的flash播放器播放視頻。Edge、谷歌瀏覽器中網站默認是禁用flash的，手動設置爲容許flash便可

缺點：

依賴flash
不支持rtsp流的播放

優勢：

它是開源免費的，你能夠在github很容易的獲取它的最新代碼。
使用它很是的容易，只要花幾秒鐘就能夠架起一個視頻播放頁面。
它幾乎兼容全部的瀏覽器，而且優先使用html5，在不支持的瀏覽器中，會自動使用flash進行播放。
界面能夠定製，純javascript和css打造。說明文檔也很是的詳細

RTSP流播放解決方案

1、利用VLC插件轉流
瀏覽器安裝VLC插件進行服務器映射轉碼，獲得video標籤可以正常打開的ogg格式視頻而後播放

<object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false' width="720" height="410">
    <param name='mrl' value='rtsp://admin:12345@192.168.10.235:554/h264/ch1/main/av_stream' />
    <param name='volume' value='50' />
    <param name='autoplay' value='true' />
    <param name='loop' value='false' />
    <param name='fullscreen' value='false' />
    <param name='controls' value='false' />
</object>
複製代碼

優缺點

優勢：能夠直接播放RTSP，無需任何中介服務器的幫助
缺點：須要手動安裝插件；基於NPAPI，不被最新的 Chrome 和 Firefox 支持
若是你項目的其餘功能都能兼容客戶電腦上的 IE 瀏覽器，這個方案就是首選。

2、html5_rtsp_player+ websocket_rtsp_proxy 實現視頻流直播

實現步驟

服務器安裝streamedian服務器
客戶端經過video標籤播放

<video id="test_video" controls autoplay></video>
<script src="free.player.1.8.4.js"></script>
<script>
    if (window.Streamedian) {
        var errHandler = function(err){
            console.log('err', err.message);
        };
        var infHandler = function(inf) {
            console.log('info', inf)
        };
        var playerOptions = {
            socket: "ws://localhost:8088/ws/",
            redirectNativeMediaErrors : true,
            bufferDuration: 30,
            errorHandler: errHandler,
            infoHandler: infHandler
        };
        var html5Player  = document.getElementById("test_video");
        html5Player.src = "rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov";
        var player = Streamedian.player('test_video', playerOptions);
        
        window.onbeforeunload = function(){
            player && player.destroy();
            player = null;
            Request = null;
        }
    }
</script>
複製代碼

注意：測試時先從官網申請license key，不然socket 只能識別localhost和127.0.0.1
優缺點

優勢：實現比較簡單
缺點：收費的，免費版有不少限制

三：ffmpeg + nginx + video，rtsp轉rtmp播放
rtmp是adobe開發的協議，通常使用adobe media server 能夠方便的搭建起來；隨着開源時代的到來，有大神開發了nginx的rtmp插件，也能夠直接使用nginx實現rtmp
rtmp方式的最大的優勢在於低延時，通過測試延時廣泛在1-3秒，能夠說很實時了；缺點在於它是adobe開發的，rtmp的播放嚴重依賴flash，而因爲flash自己的安全，現代瀏覽器大多禁用flash
實現步驟

安裝ffmpeg工具
安裝nginx 注意：linux系統須要安裝 nginx-rtmp-module 模塊，Windows系統安裝包含rtmp的(如nginx 1.7.11.3 Gryphon)
更改nginx配置

rtmp{
    server{
    listen 1935;
        application live{
          live on;
          record off;
        }
        application hls{
          live on;
          hls on;
          hls_path nginx-rtmp-module/hls;
          hls_cleanup off;
        }
    }
}
複製代碼

ffmpeg轉碼

ffmpeg -i "rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov" -f flv -r 25 -s 1080*720 -an "rtmp://127.0.0.1:1935/hls/mystream"
複製代碼

video 播放

<html>
<head>
<title>video</title>
<!-- 引入css -->
<link rel="stylesheet" type="text/css" href="./videojs/video-js.min.css" />
</head>
<body>
<video id="test_video" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay>
    <source src='rtmp://127.0.0.1:1935/hls/mystream' type='rtmp/flv'/>
</video>
</body>
</html>
<!-- 引入js -->
<script type="text/javascript" src="./videojs/video.min.js"></script>
<script type="text/javascript" src="./videojs/videojs-flash.js"></script>
<script>
videojs.options.flash.swf = "./videojs/video-js.swf"
    var player = videojs('test_video', {"autoplay":true});
    player.play();
</script>
複製代碼

注意：使用谷歌瀏覽器播放時，須要開啓flash容許

四：ffmpeg + video，rtsp轉hls播放
HLS (HTTP Live Streaming) 直播是有蘋果提出的一個基於http的協議。其原理是把整個流切分紅一個個的小視頻文件，而後經過一個m3u8的文件列表來管理這些視頻文件
HTTP Live Streaming 並非一個真正實時的流媒體系統，這是由於對應於媒體分段的大小和持續時間有必定潛在的時間延時。在客戶端，至少在一個分段媒體文件被徹底下載後纔可以開始播放，而一般要求下載完兩個媒體文件以後纔開始播放以保證不一樣分段音視頻之間的無縫鏈接。
此外，在客戶端開始下載以前，必須等待服務器端的編碼器和流分割器至少生成一個TS文件，這也會帶來潛在的時延。
服務器軟件將接收到的流每緩存必定時間後包裝爲一個新的TS文件，而後更新m3u8文件。m3u8文件中只保留最新的幾個片斷的索引，以保證觀衆任什麼時候候鏈接進來都會看到較新的內容，實現近似直播的效果。
這種方式的理論最小延時爲一個ts文件的時長，通常爲2-3個ts文件的時長。
實現步驟

安裝ffmpeg工具
ffmpeg轉碼

ffmpeg -i "rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov" -c copy -f hls -hls_time 2.0 -hls_list_size 0 -hls_wrap 15 "D:/Program Files/html/hls/test.m3u8"
複製代碼

ffmpeg 關於hls方面的指令說明

-hls_time n: 設置每片的長度，默認值爲2。單位爲秒
-hls_list_size n:設置播放列表保存的最多條目，設置爲0會保存有所片信息，默認值爲5
-hls_wrap n:設置多少片以後開始覆蓋，若是設置爲0則不會覆蓋，默認值爲0.這個選項可以避免在磁盤上存儲過多的片，並且可以限制寫入磁盤的最多的片的數量
-hls_start_number n:設置播放列表中sequence number的值爲number，默認值爲0

video 播放

<html>
<head>
<title>video</title>
<!-- 引入css -->
<link rel="stylesheet" type="text/css" href="./videojs/video-js.min.css" />
</head>
<body>
<div class="videoBox">
    <video id="my_video_1" class="video-js vjs-default-skin" controls>
        <source src="http://localhost:8088/hls/test.m3u8" type="application/x-mpegURL"> 
    </video>
</div>
</body>
</html>
<script type="text/javascript" src="./videojs/video.min.js"></script>
<script type="text/javascript" src="./videojs/videojs-contrib-hls.min.js"></script>
<script>
videojs.options.flash.swf = "./videojs/video-js.swf"
    var player = videojs('my_video_1', {"autoplay":true});
    player.play();
</script>
複製代碼

5、jsmpeg + ffmpeg
JSMpeg是一個用JavaScript編寫的視頻播放器。它由MPEG-TS分路器，MPEG1視頻和MP2音頻解碼器，WebGL和Canvas2D渲染器以及WebAudio聲音輸出組成。JSMpeg能夠經過Ajax加載靜態視頻，並容許經過WebSockets發送MPEG，前端經過js解析MPEG不斷繪製canvas，包括音頻。JSMpeg能夠在iPhone 5S上以30fps解碼720p視頻，適用於任何現代瀏覽器（Chrome，Firefox，Safari，Edge）。
簡單示例：

<script src="jsmpeg.min.js"></script>
<div class="jsmpeg" data-url="video.ts"></div>
複製代碼

6、WebRTC
WebRTC 是支持網頁瀏覽器進行實時音視頻的一套API，例如：HTML5 經過 webRTC 直接調用攝像頭，可是若是要實現遠程視頻流的顯示，則須要將 RTSP 轉換爲 WebRTC 流，供 web 端顯示。

參考連接

RTMP、HTTP-FLV、HLS
簡述HLS,HTTP,RTSP,RTMP協議的區別
 瀏覽器播放rtsp視頻流解決方案
 Chrome瀏覽器直播 rtsp格式（Media Source Extensions + H5Stream）

最後

原文在這裏：gitHub 若有遺漏，還請指正！！

若是以爲對您有幫助！請別忘記點個贊或者關注哦！您的關注將是我前進的動力！！衝鴨！！！

「無畏前端」不定時更新社區優秀技術文章！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。