Nginx-http-flv-module流媒體服務(wù)器搭建+模擬推流+flv.js在前端html和Vue中播放HTTP-FLV視頻流

這篇具有很好參考價(jià)值的文章主要介紹了Nginx-http-flv-module流媒體服務(wù)器搭建+模擬推流+flv.js在前端html和Vue中播放HTTP-FLV視頻流。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

場(chǎng)景

Windows上搭建Nginx RTMP服務(wù)器并使用FFmpeg實(shí)現(xiàn)本地視頻推流：

Windows上搭建Nginx RTMP服務(wù)器并使用FFmpeg實(shí)現(xiàn)本地視頻推流_win nginx-rtmp最新版_霸道流氓氣質(zhì)的博客-CSDN博客

Vue中使用vue-video-player和videojs-flash插件實(shí)現(xiàn)播放rtmp視頻文件流：

Vue中使用vue-video-player和videojs-flash插件實(shí)現(xiàn)播放rtmp視頻文件流_videojs-flash vue_霸道流氓氣質(zhì)的博客-CSDN博客

前面使用Vue播放RTMP流時(shí)，需要借助于flash。這種方式對(duì)于flash插件的安裝

與后續(xù)瀏覽器支持等都不是很好?？梢圆捎脤tmp的視頻流轉(zhuǎn)換成HTTP-FLV的方式，

然后前端通過bilibili的flv.js實(shí)現(xiàn)播放。

nginx-http-flv-module

nginx-http-flv-module: 基于nginx-rtmp-module的流媒體服務(wù)器。具備nginx-rtmp-module的所有功能，增加了HTTP-FLV，GOP緩存和VHOST（一個(gè)IP對(duì)應(yīng)多個(gè)域名）的功能。Media streaming server based on nginx-rtmp-module. In addtion to the features nginx-rtmp-module provides, HTTP-FLV, GOP cache and VHOST (one IP for multi domain names) are supported now.

中文說明

nginx-http-flv-module/README.CN.md at master · winshining/nginx-http-flv-module · GitHub

一款基于 nginx-rtmp-module 的流媒體服務(wù)器。

nginx-http-flv-module 具備nginx-rtmp-module 的所有功能，并且對(duì)比如下：

nginx-http-flv-module,架構(gòu)之路,Vue,javascript,前端,nginx

支持的播放器

VLC (RTMP & HTTP-FLV) / OBS (RTMP & HTTP-FLV) / JW Player (RTMP) / flv.js (HTTP-FLV).

注意事項(xiàng)

1、Adobe 將在 2020 年 12 月 31 日之后停止對(duì) flash 播放器的官方支持，

主流瀏覽器隨后將移除 flash 播放器，使用 flash 播放器的插件將不再可用。

2、flv.js 只能運(yùn)行在支持 Media Source Extensions 的瀏覽器上。

3、nginx-http-flv-module 包含了 nginx-rtmp-module 所有的功能，

所以不要將 nginx-http-flv-module 和 nginx-rtmp-module 一起編譯。

4、如果使用 flv.js 播放流，那么請(qǐng)保證發(fā)布的流被正確編碼，

因?yàn)?flv.js 只支持 H.264 編碼的視頻和 AAC/MP3 編碼的音頻。

5、其中的 add_header ‘Access-Control-Allow-Origin’ ‘*’ 與 add_header ‘Access-Control-Allow-Credentials’ ‘true’ 很重要，

主要解決了前端通過HTTP方式拉流是的跨域問題。

其他注意事項(xiàng)和詳細(xì)細(xì)節(jié)可見官方github。

注：

博客：
霸道流氓氣質(zhì)的博客_CSDN博客-C#,架構(gòu)之路,SpringBoot領(lǐng)域博主

實(shí)現(xiàn)

1、官方示例以及推薦等都是在Linux服務(wù)器上。

nginx-http-flv-module,架構(gòu)之路,Vue,javascript,前端,nginx

但是如果需要在本地Windows電腦上進(jìn)行調(diào)試或者服務(wù)器就必須是Windows服務(wù)器的話，

需要編譯Windows版本，或者直接網(wǎng)絡(luò)上搜索下載已經(jīng)編譯好的Windows版本。

比如:

https://download.csdn.net/download/codebooks/12793877

nginx-http-flv-module,架構(gòu)之路,Vue,javascript,前端,nginx

但是是否可用需要自己下載驗(yàn)證。

以下載上面的為例，下載解壓后，自帶run.bat運(yùn)行腳本

nginx-http-flv-module,架構(gòu)之路,Vue,javascript,前端,nginx

腳本內(nèi)容為:

nginx.exe -c conf/http-flv.conf

這里是指定走配置文件conf/http-flv.conf

所以如果要修改的話也是修改http-flv.conf文件，而不是原來默認(rèn)的nginx.conf文件了。

雙擊啟動(dòng)腳本啟動(dòng)后，可以從任務(wù)管理器中驗(yàn)證是否啟動(dòng)成功，或者通過其他查看日志等方式驗(yàn)證。

2、配置文件

關(guān)注兩個(gè)地方，比如這里的官方例子

假設(shè)在 http 配置塊中的 listen 配置項(xiàng)是：

http {
??? ...
??? server {
??????? listen 8080; #不是默認(rèn)的 80 端口
??????? ...

??????? location /live {
??????????? flv_live on;
??????? }
??? }
}

在 rtmp 配置塊中的 listen 配置項(xiàng)是：

rtmp {
??? ...
??? server {
??????? listen 1985; #不是默認(rèn)的 1935 端口
??????? ...

??????? application myapp {
??????????? live on;
??????? }
??? }
}

并且發(fā)布的流的名稱是 mystream，那么基于 HTTP 的播放 url 是：

http://example.com:8080/live?port=1985&app=myapp&stream=mystream

下面附官方提示的配置文件示例

?
worker_processes? 1; #運(yùn)行在 Windows 上時(shí)，設(shè)置為 1，因?yàn)?Windows 不支持 Unix domain socket
#worker_processes? auto; #1.3.8 和 1.2.5 以及之后的版本

#worker_cpu_affinity? 0001 0010 0100 1000; #只能用于 FreeBSD 和 Linux
#worker_cpu_affinity? auto; #1.9.10 以及之后的版本

error_log logs/error.log error;

#如果此模塊被編譯為動(dòng)態(tài)模塊并且要使用與 RTMP 相關(guān)的功
#能時(shí)，必須指定下面的配置項(xiàng)并且它必須位于 events 配置
#項(xiàng)之前，否則 NGINX 啟動(dòng)時(shí)不會(huì)加載此模塊或者加載失敗

#load_module modules/ngx_http_flv_live_module.so;

events {
??? worker_connections? 4096;
}

http {
??? include?????? mime.types;
??? default_type? application/octet-stream;

??? keepalive_timeout? 65;

??? server {
??????? listen?????? 80;

??????? location / {
??????????? root?? /var/www;
??????????? index? index.html index.htm;
??????? }

??????? error_page?? 500 502 503 504? /50x.html;
??????? location = /50x.html {
??????????? root?? html;
??????? }

??????? location /live {
??????????? flv_live on; #打開 HTTP 播放 FLV 直播流功能
??????????? chunked_transfer_encoding on; #支持 'Transfer-Encoding: chunked' 方式回復(fù)

??????????? add_header 'Access-Control-Allow-Origin' '*'; #添加額外的 HTTP 頭
??????????? add_header 'Access-Control-Allow-Credentials' 'true'; #添加額外的 HTTP 頭
??????? }

??????? location /hls {
??????????? types {
??????????????? application/vnd.apple.mpegurl m3u8;
??????????????? video/mp2t ts;
??????????? }

??????????? root /tmp;
??????????? add_header 'Cache-Control' 'no-cache';
??????? }

??????? location /dash {
??????????? root /tmp;
??????????? add_header 'Cache-Control' 'no-cache';
??????? }

??????? location /stat {
??????????? #推流播放和錄制統(tǒng)計(jì)數(shù)據(jù)的配置

??????????? rtmp_stat all;
??????????? rtmp_stat_stylesheet stat.xsl;
??????? }

??????? location /stat.xsl {
??????????? root /var/www/rtmp; #指定 stat.xsl 的位置
??????? }

??????? #如果需要 JSON 風(fēng)格的 stat, 不用指定 stat.xsl
??????? #但是需要指定一個(gè)新的配置項(xiàng) rtmp_stat_format

??????? #location /stat {
??????? #??? rtmp_stat all;
??????? #??? rtmp_stat_format json;
??????? #}

??????? location /control {
??????????? rtmp_control all; #rtmp 控制模塊的配置
??????? }
??? }
}

rtmp_auto_push on;
rtmp_auto_push_reconnect 1s;
rtmp_socket_dir /tmp;

rtmp {
??? out_queue?????????? 4096;
??? out_cork??????????? 8;
??? max_streams???????? 128;
??? timeout???????????? 15s;
??? drop_idle_publisher 15s;

??? log_interval 5s; #log 模塊在 access.log 中記錄日志的間隔時(shí)間，對(duì)調(diào)試非常有用
??? log_size???? 1m; #log 模塊用來記錄日志的緩沖區(qū)大小

??? server {
??????? listen 1935;
??????? server_name www.test.*; #用于虛擬主機(jī)名后綴通配

??????? application myapp {
??????????? live on;
??????????? gop_cache on; #打開 GOP 緩存，減少首屏等待時(shí)間
??????? }

??????? application hls {
??????????? live on;
??????????? hls on;
??????????? hls_path /tmp/hls;
??????? }

??????? application dash {
??????????? live on;
??????????? dash on;
??????????? dash_path /tmp/dash;
??????? }
??? }

??? server {
??????? listen 1935;
??????? server_name *.test.com; #用于虛擬主機(jī)名前綴通配

??????? application myapp {
??????????? live on;
??????????? gop_cache on; #打開 GOP 緩存，減少首屏等待時(shí)間
??????? }
??? }

??? server {
??????? listen 1935;
??????? server_name www.test.com; #用于虛擬主機(jī)名完全匹配

??????? application myapp {
??????????? live on;
??????????? gop_cache on; #打開 GOP 緩存，減少首屏等待時(shí)間
??????? }
??? }
}

?

然后上面下載的Windows編譯版本的配置文件http-flv.conf的內(nèi)容為

?
worker_processes? 1;

error_log logs/error.log error;

events {
??? worker_connections? 4096;
}

http {
??? include?????? mime.types;
??? default_type? application/octet-stream;

??? keepalive_timeout? 65;

??? server {
??????? listen?????? 800;

??????? location / {
??????????? root?? www;
??????????? index? index.html index.htm;
??????? }

??????? error_page?? 500 502 503 504? /50x.html;
??????? location = /50x.html {
??????????? root?? html;
??????? }

??????? location /live {
??????????? flv_live on; #打開HTTP播放FLV直播流功能
??????????? chunked_transfer_encoding on; #支持'Transfer-Encoding: chunked'方式回復(fù)

??????????? add_header 'Access-Control-Allow-Origin' '*'; #添加額外的HTTP頭
??????????? add_header 'Access-Control-Allow-Credentials' 'true'; #添加額外的HTTP頭
??????? }

??????? location /hls {
??????????? types {
??????????????? application/vnd.apple.mpegurl m3u8;
??????????????? video/mp2t ts;
??????????? }

??????????? root temp;
??????????? add_header 'Cache-Control' 'no-cache';
??????? }

??????? location /dash {
??????????? root temp;
??????????? add_header 'Cache-Control' 'no-cache';
??????? }

??????? location /stat {
??????????? #推流播放和錄制統(tǒng)計(jì)數(shù)據(jù)的配置

??????????? rtmp_stat all;
??????????? rtmp_stat_stylesheet stat.xsl;
??????? }

??????? location /stat.xsl {
??????????? root www/rtmp; #指定stat.xsl的位置
??????? }

??????? #如果需要JSON風(fēng)格的stat, 不用指定stat.xsl
??????? #但是需要指定一個(gè)新的配置項(xiàng)rtmp_stat_format

??????? #location /stat {
??????? #??? rtmp_stat all;
??????? #??? rtmp_stat_format json;
??????? #}

??????? location /control {
??????????? rtmp_control all; #rtmp控制模塊的配置
??????? }
??? }
}

rtmp_auto_push on;
rtmp_auto_push_reconnect 1s;
rtmp_socket_dir temp;

rtmp {
??? out_queue?????????? 4096;
??? out_cork??????????? 8;
??? max_streams???????? 128;
??? timeout???????????? 15s;
??? drop_idle_publisher 15s;

??? log_interval 5s; #log模塊在access.log中記錄日志的間隔時(shí)間，對(duì)調(diào)試非常有用
??? log_size???? 1m; #log模塊用來記錄日志的緩沖區(qū)大小

??? server {
??????? listen 1935;
??????? #server_name www.test.*; #用于虛擬主機(jī)名后綴通配
??server_name 127.0.0.1;
??????? application myapp {
??????????? live on;
??????????? gop_cache on; #打開GOP緩存，減少首屏等待時(shí)間
??????? }

??????? application hls {
??????????? live on;
??????????? hls on;
??????????? hls_path temp/hls;
??????? }

??????? application dash {
??????????? live on;
??????????? dash on;
??????????? dash_path temp/dash;
??????? }
??? }
}

?

3、Windows上本地模擬推送RTMP視頻流到nginx-http-flv-module

參考上面使用FFMpeg推送的流程，修改模擬推流bat腳本為

ffmpeg.exe -re -i D:\WorkSpace\Other\FFmpegDemo\test\1.mp4 -vcodec libx264 -acodec aac -f flv rtmp://127.0.0.1:1935/myapp/badao
pause

推流成功之后，使用VLC進(jìn)行拉流測(cè)試，網(wǎng)絡(luò)串流地址為

http://127.0.0.1:800/live?port=1935&app=myapp&stream=badao

注意這里的

800對(duì)應(yīng)http配置的端口

live對(duì)應(yīng)http配置的location后面的/live

port=1935對(duì)應(yīng)rtmp中配置的端口

app=myapp對(duì)應(yīng)的myapp是rtmp中配置的application myapp

stream=badao的badao是對(duì)應(yīng)推流時(shí)的rtmp://127.0.0.1:1935/myapp/badao的badao

拉流推流效果。

nginx-http-flv-module,架構(gòu)之路,Vue,javascript,前端,nginx

為了模擬時(shí)間延遲效果，可以使用其他推流工具，截圖桌面時(shí)間顯示進(jìn)行推流，測(cè)試延遲效果。

Docker和docker-compose中部署nginx-rtmp實(shí)現(xiàn)流媒體服務(wù)與oob和ffmpeg推流測(cè)試：

Docker和docker-compose中部署nginx-rtmp實(shí)現(xiàn)流媒體服務(wù)與oob和ffmpeg推流測(cè)試_docker 推流_霸道流氓氣質(zhì)的博客-CSDN博客

這里可以參考使用oob進(jìn)行模擬推流測(cè)試效果

nginx-http-flv-module,架構(gòu)之路,Vue,javascript,前端,nginx

4、bilibili的flv.js

GitHub - bilibili/flv.js: HTML5 FLV Player

可以看到其特點(diǎn)是

HTTP FLV低延遲實(shí)時(shí)流播放

nginx-http-flv-module,架構(gòu)之路,Vue,javascript,前端,nginx

在html中使用flv.js播放http-flv

將flv.min.js下載到本地

https://github.com/bilibili/flv.js/releases/download/v1.5.0/flv.min.js

然后新建html

<!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: center;
??????????? margin-left: auto;
??????????? margin-right: auto;
??????? }
??? </style>
</head>

<body>

<p class="mainContainer">
??? <video name="videoElement" id="videoElement" class="centeredVideo" controls muted autoplay width="1024"
?????????? height="576">
??????? Your browser is too old which doesn't support HTML5 video.
??? </video>
</p>

<script src="js/flv.min.js"></script>

<script>

??? function start() {
??????? if (flvjs.isSupported()) {
??????????? var videoElement = document.getElementById('videoElement');
??????????? var flvPlayer = flvjs.createPlayer({
??????????????? type: 'flv',
???????????????url:'http://127.0.0.1:800/live?port=1935&app=myapp&stream=badao'
??????????? });
??????????? flvPlayer.attachMediaElement(videoElement);
??????????? flvPlayer.load();
??????????? flvPlayer.play();
??????? }
??? }

??? document.addEventListener('DOMContentLoaded', function () {
??????? start();
??? });
</script>

</body>

</html>

將url設(shè)置為上面的拉流地址，注意flv.min.js的路徑

瀏覽器中訪問該html看下效果

nginx-http-flv-module,架構(gòu)之路,Vue,javascript,前端,nginx

5、在Vue中使用flv.js播放http-flv

安裝依賴

npm install --save flv.js

新建頁面修改代碼

<template lang="html">
? <div id="app">
??? <video
????? id="videoLive"
????? crossorigin="anonymous"
????? controls
????? autoplay
????? width="100%"
????? height="100%"
????? style="object-fit: fill"
??? ></video>
? </div>
</template>

<script>
import flvjs from "flv.js";
export default {
? name: "flvPlayer",
? data() {
??? return {
????? flvPlayer: null,
??? };
? },
? mounted() {
???this.createVideo('http://127.0.0.1:800/liveport=1935&app=myapp&stream=badao',"videoLive")
? },
? methods: {
??? createVideo(url, elementId) {
????? if (flvjs.isSupported()) {
??????? let videoElement = document.getElementById(elementId);
??????? this.flvPlayer = flvjs.createPlayer({
????????? type: "flv",
????????? enableWorker: true, //瀏覽器端開啟flv.js的worker,多進(jìn)程運(yùn)行flv.js
????????? isLive: true, //直播模式
????????? hasAudio: false, //關(guān)閉音頻
????????? hasVideo: true,
????????? stashInitialSize: 128,
????????? enableStashBuffer: true, //播放flv時(shí)，設(shè)置是否啟用播放緩存，只在直播起作用。
????????? url: url,
??????? });
??????? this.flvPlayer.attachMediaElement(videoElement);
??????? this.flvPlayer.load();
??????? this.flvPlayer.play();
????? }
??? },
? },
};
</script>

<style lang="css">
</style>

運(yùn)行查看效果

nginx-http-flv-module,架構(gòu)之路,Vue,javascript,前端,nginx 文章來源地址http://www.zghlxwxcb.cn/news/detail-779920.html

到了這里，關(guān)于Nginx-http-flv-module流媒體服務(wù)器搭建+模擬推流+flv.js在前端html和Vue中播放HTTP-FLV視頻流的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！