flv.js拉流實例的簡單介紹

本文目錄一覽：

• 1、flv.js自動全屏
• 2、海康攝像頭開發SRS+ffmpeg+http-flv+flv.js(二)
• 3、rtsp流瀏覽器播放方案
• 4、視頻直播軟體開發中常用的流媒體傳輸協議有哪些？
• 5、flv.js可以播放hls嗎
• 6、vue中播放flv格式視頻（b站flv.js的使用）

flv.js自動全屏

瀏覽器不支持自動全屏播放，全屏播放的操作需要用戶觸發。

Flv.js在JavaScript中流式解析flv文件流，並實時轉封裝為fmp4，通過MediaSourceExtensions餵給瀏覽器，實現了FLV格式視頻的播放。

Bilibili相信大家都不會陌生，而Flv.js就是由bilibili網站開源的HTML5Flash視頻(FLV)播放器，純原生JavaScript開發(ECMAScript6編寫)。

海康攝像頭開發SRS+ffmpeg+http-flv+flv.js(二)

接上篇文章。雖然部署好了網路，通過VLC能播放視屏，但是離簡單好用的道路還很遠，在這期間查了很多資料，對整個系統有了不掃了解。首先引用一下，關於實現web播放的幾種方法和優缺點(以下來自網路)：

開始的我也使用了網路的介紹，用ffmpeg轉成rmtp流，但最後發現如果要播放rmtp流是需要flash支持的，現在的flash的支持度很差，顯然不行，網上現在能找到的FFmpeg + nginx-rtmp-module方案並不是一個好方案。所以還是需要使用方案三。

以下的這個表寫的比較清楚，能支持html5播放器的就httpflv和hls，二選一選擇httpflv。

在本人實際操作中使用的流媒體伺服器並不是nginx-http-flv-module ，而是用了SRS(simple rmtp server)+FFMPEG方案，感覺更簡單。

搭建過程先省略。(詳細搭建SRS+ffmpeg單獨文檔)

遇到的問題：

搭建完成，推流後VLC能播放，但是用flv.js的播放器

總是無法播放，後來發現下面還是有提示錯誤的。

這裡主要是要注意轉換語句：

原來是這樣,參數-vcodec 和 -acodec 都用的copy，而實際攝像頭處理的視頻格式是h.264+pcma_u

後來改成這樣,將-acodec 改成aac

就能看到視頻了

視頻里是家中窗外風景。

實際使用中發現，如果視頻部分h264不轉碼，用copy的模式的話cpu性能不高，可以支持很多路數。

視頻和vlc播放的時候延時10s左右，感覺延時有點大。

接下來就是要把flv.js移植到工程中。然後現在的推流什麼的都是命令行執行的，這些肯定不行.

rtsp流瀏覽器播放方案

rtsp流在主流瀏覽器並不支持直接播放。比如大華的視頻流：rtsp://admin:123456@

192.168.10.129/cam/realmonitor?channel=1subtype=0，用vlc可以直接播放。但在瀏覽器會報ERR_UNKNOWN_URL_SCHEME。那如何在瀏覽器中播放呢。

以下列出幾種方案。

1、安裝插件（chrome最新版基本都不支持）

類如：kurento，vlc插件（谷歌瀏覽器版本41以下),vgx插件(不支持高版本，chrome72.0版本可用)等。

2、安裝軟體（中間件，基本都付費）

類如：Appemit（調用vlc插件播放rtsp），可以免安裝的，目前只能windows,免費版會有提示。

猿大師中間件（底層調用VLC的ActiveX控制項，實現在主流瀏覽器網頁中內嵌播放多路RTSP的實時視頻流），中間件收費的。

PluginOK(牛插)中間件。底層調用ActiveX控制項VlcOcx.dll。（商業用途需付費使用）

3、伺服器拉流轉發及協議轉換

示意圖如下所示：

推流————–伺服器轉發————–拉流

方法一覽：

a,vlc軟體串流到http協議 ，網頁顯示幾個視頻需啟動幾個vlc,只適合應急場景。

b,html5 + websocket_rtsp_proxy 實現視頻流直播 ，基於MSE（Media Source Extensions,W3C），擴展H5的功能。

步驟：伺服器安裝streamedian伺服器，客戶端通過video標籤播放。

原型圖：

價格：

c.基於nginx的rsmp轉發

基於nginx實現rtmp轉化，用flash實現播放。由於flash目前大多瀏覽器默認禁用，不推薦此方式。

步驟：安裝ffmpeg工具,安裝nginx。

另外nginx-rtmp-module也支持HLS協議,可以搭建基於hls的直播伺服器。

d.rtsp轉hls播放,通過ffmpeg轉碼

步驟：安裝ffmpeg工具，ffmpeg轉碼。

形如：

ffmpeg -i “rtsp://admin:123456@192.168.10.129/cam/realmonitor?channel=1subtype=0” -c copy -f hls -hls_time 2.0 -hls_list_size 0 -hls_wrap 15 “D:/hls/test.m3u8”

缺點是直播流延時很大，對實時要求比較高的不滿足要求。

案例：基於EasyDarwin拾建轉碼伺服器。參考地址:

通過存儲的m3u8去讀取。

e.websocket代理推送，FFMPEG轉碼

此方法與a，b類似。但更實用。

以下提供兩種方案：

（1）Gin+WebSocket+FFMPEG實現rtsp轉碼,參考：

通過FFMPEG把rstp轉成http，ginrtsp作為轉發伺服器，但需要自己寫相應介面，需要了解go語言。

（2）node + ffmpeg + websocket + flv.js，參考：

步驟：在node服務中建立websocket；通過fluent-ffmpeg轉碼，將RTSP 流轉為flv格式；通過flv.js連接websocket，並對獲取的flv格式視頻數據進行渲染播放。

import WebSocket from ‘ws’import webSocketStream from ‘websocket-stream/stream’import ffmpeg from ‘fluent-ffmpeg’// 建立WebSocket服務const wss = new WebSocket.Server({ port: 8888, perMessageDeflate: false })// 監聽連接wss.on(‘connection’, handleConnection)// 連接時觸發事件function handleConnection (ws, req) {  // 獲取前端請求的流地址（前端websocket連接時後面帶上流地址）  const url = req.url.slice(1)  // 傳入連接的ws客戶端 實例化一個流  const stream = webSocketStream(ws, { binary: true })  // 通過ffmpeg命令 對實時流進行格式轉換 輸出flv格式  const ffmpegCommand = ffmpeg(url)    .addInputOption(‘-analyzeduration’, ‘100000’, ‘-max_delay’, ‘1000000’)    .on(‘start’, function () { console.log(‘Stream started.’) })    .on(‘codecData’, function () { console.log(‘Stream codecData.’) })    .on(‘error’, function (err) {      console.log(‘An error occured: ‘, err.message)      stream.end()    })    .on(‘end’, function () {      console.log(‘Stream end!’)      stream.end()    })    .outputFormat(‘flv’).videoCodec(‘copy’).noAudio()  stream.on(‘close’, function () {    ffmpegCommand.kill(‘SIGKILL’)  })  try {    // 執行命令 傳輸到實例流中返回給客戶端    ffmpegCommand.pipe(stream)  } catch (error) {    console.log(error)  }}

優點全部基於js。前端即可搞定。

參考:

視頻直播軟體開發中常用的流媒體傳輸協議有哪些？

視頻直播軟體系統開發，常用的流媒體傳輸協議有RTMP,RTSP,HLS,HTTP-FLV

RTMP:(可用於推流端和拉流端) Real Time Messaging Protocol 實時消息傳輸協議，RTMP協議中，視頻必須是H264編碼，音頻必須是AAC或MP3編碼，且多以flv格式封包。因為RTMP協議傳輸的基本是FLV格式的流文件，必須使用flash播放器才能播放.

RTSP:(用於推流端) Real-Time Stream Protocol，RTSP 實時效果非常好，適合視頻聊天、視頻監控等方向

HLS(用於拉流端) Http Live Streaming，由Apple公司定義的基於HTTP的流媒體實時傳輸協議。傳輸內容包括兩部分：1.M3U8描述文件，2.TS媒體文件。TS媒體文件中的視頻必須是H264編碼，音頻必須是AAC或MP3編碼。數據通過HTTP協議傳輸。目前video.js庫支持該格式文件的播放

HTTP-FLV(用於拉流端) 本協議就是http+flv,將音視頻數據封裝成FLV格式,然後通過http協議傳輸到客戶端,這個協議大大方便了瀏覽器客戶端播放直播視頻流.目前flv.js庫支持該格式的文件播放

flv.js可以播放hls嗎

可以的。

flv.js就使用Flash播放器播RTMP流Flash兼容性很好，但是性能差默認被很多瀏覽器禁用，不想用Flash兼容也可以用HLS，但是PC端只有Safari支持HLS移動端。

Flv.js是HTML5Flash視頻（FLV）播放器，純原生JavaScript開發，沒有用到Flash。

vue中播放flv格式視頻（b站flv.js的使用）

flv.js 就是由 bilibili 網站開源的 HTML5 Flash 視頻（FLV）播放器，純原生 JavaScript 開發（ECMAScript 6 編寫） ，沒有用到 Flash。它的工作原理是 Flv.js 在 JavaScript 中流式解析 flv 文件流，並實時轉封裝為 fmp4 ，通過 Media Source Extensions 餵給瀏覽器，實現了 FLV 格式視頻的播放。

具有H.264 + AAC / MP3編解碼器播放功能的FLV容器

多段分段視頻播放

HTTP FLV低延遲實時流播放

通過WebSocket進行FLV實時流播放

與Chrome，FireFox，Safari 10，IE11和Edge兼容

極低的開銷，瀏覽器可以加速硬體！

1、準備一個flv格式的視頻

我的文件，關於分片上傳可參考 vue中使用Plupload分片上傳