前言:
最近在學直播相關知識點,也看了好多博客,一開始總是拉流沒成功,所以做一下筆記,筆記包括參考網上其他博客和自己總結的地方😆
目錄
- **1.簡介和工具準備🤪**
- **2.工具安裝和配置😮**
- 3. nginx配置😥
- 4. nginx啟動😣
- **5.測驗推流和拉流😁**
- **舉栗子🌰🌰🌰😍**
- 5.網頁播放😏
- 相關工具🙃:
1.簡介和工具準備🤪
Nginx是一款輕量級的Web 服務器/反向代理服務器及電子郵件(IMAP/POP3)代理服務器, nginx-rmtp-module是Nginx服務器的流媒體插件,nginx通過rtmp模塊提供rtmp服務, ffmpeg推送一個rtmp流到nginx, 然后客戶端通過訪問nginx來收看實時視頻流,這里默認大家對rtmp,hls等協議有了解了,就不做介紹了,
工具:
(1) nginx:
nginx下載地址
版本:nginx 1.7.11.3 Gryphon.zip(網上大家都是用這個)
(2) nginx-rtmp-module :
下載地址:https://github.com/arut/nginx-rtmp-module
(3) ffmpg :
下載地址:https://ffmpeg.org/download.html
(4) vlc播放器
一個很強大的播放器,支持拉流播放視頻,我們用來測驗拉流
下載地址:https://www.videolan.org/vlc/index.zh_CN.html
(5) rtmp和mp4視頻檔案:
湖南衛視:rtmp://58.200.131.2:1935/livetv/hunantv(這個支持http連接,不支持tcp連接)
注: 以上檔案和配置和測驗代碼需要得可以直接從我網盤下載🙄
鏈接:https://pan.baidu.com/s/1XrL1IEMPMSXC0vjNjKpfIQ
提取碼:0723
或者csdn下載:
csdn下載
2.工具安裝和配置😮
如果要自己動手從頭安裝配置一篇也可以得哈哈( ̄︶ ̄)↗
(1) ffmpeg
進入官網,點擊 DownLoad后進到這個界面,然后滑鼠移動到 windows那個圖示,下面有兩個檔案,隨便下載一個,我這里下載的是第一個,

下載完就直接 解壓,我直接丟桌面了,進入bin檔案夾,復制檔案路徑

然后配置環境變數
找到我的電腦→右擊→屬性→選擇【高級系統設定】–>彈出框中選擇【環境變數-】→找到【path】雙擊→彈出框中選擇 【新建】→將復制的bin檔案夾的路徑粘貼進來點擊保存,

然后打開cmd(windows+R輸入cmd),輸入“ffmpeg –version”,檢查是否配置成功,如果出現如下說明配置成功

(2)nginx 安裝
將下載好的nginx-1.7.11.3-Gryphon 解壓,并將nginx-rtmp-module插件解壓復制到nginx-1.7.11.3-Gryphon目錄中,要注意nginx-rtmp-module名字不要有空格,

3. nginx配置😥
網上你會看到很多博客說在nginx的conf目錄下配置nginx-win-rtmp.conf檔案,但是你會發現,根本沒有這個檔案,這個我們自己創建一個就好,復制一份 nginx-win.conf 檔案,并命名為nginx-win-rtmp.conf

下面開始配置,找個編輯器打開 nginx-win-rtmp.conf ,配置如下
要配置兩個地方,一個是新增一個 rtmp 節點配置兩種協議, 還有就是 在http server節點下配置 視頻跨域處理, 不然在 頁面 播放會報跨域問題,具體看注釋哈,
#新增一個rtmp節點
rtmp {
server {
listen 1935;
chunk_size 4000;
#rtmp協議推流
application live {
live on;
record all;
record_path E:/tmp/rtmp; # 保存路徑
# record_max_size 1K;
# append current timestamp to each flv
record_unique on;
# # publish only from localhost
# allow publish 127.0.0.1;
# deny publish all;
}
# HLS協議流
application hls {
live on;
hls on;
hls_path E:/tmp/hls; # 檔案保存路徑,需要先創建,不然執行推流會報錯
hls_fragment 5s; #用來設定每一個塊的大小,默認是5秒,只能為整數
hls_playlist_length 30s; #設定播放串列的長度,單位是秒,聽說設定成3秒延遲低點
hls_nested on; #默認是off,打開后的作用是每條流自己有一個檔案夾
hls_cleanup off; #不清理ts , on|off 默認是開著的,是否洗掉串列中已經沒有的媒體塊
#hls_continuous: #on|off 設定連續模式,是從停止播放的點開始還是直接跳過
}
}
}
http server節點配置:
#修改
location / {
root html;
index index.html index.htm;
add_header Access-Control-Allow-Origin *; # 配置跨域
add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
}
# 這幾個原來檔案就有的,順便復制過來了,方便看
location /stat {
rtmp_stat all;
rtmp_stat_stylesheet stat.xsl;
}
location /stat.xsl {
root nginx-rtmp-module/;
}
location /control {
rtmp_control all;
}
location /rtmp-publisher {
root nginx-rtmp-module/test;
}
#加入hls支持
location /hls {
types {
application/vnd.apple.mpegurl m3u8;
#或 application/x-mpegURL
video/mp2t ts;
}
alias E:/tmp/hls; #視頻流檔案目錄(自己創建)
expires -1;
add_header Cache-Control no-cache; #跨域支持
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
}
我的完整檔案內容( 兩個地方標記了 start和end):
nginx-win-rtmp.conf
#user nobody;
# multiple workers works !
worker_processes 2;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 8192;
# max value 32768, nginx recycling connections+registry optimization =
# this.value * 20 = max concurrent connections currently tested with one worker
# C1000K should be possible depending there is enough ram/cpu power
# multi_accept on;
}
# 新增 start
rtmp {
server {
listen 1935;
chunk_size 4000;
#rtmp協議推流
application live {
live on;
record all;
record_path E:/tmp/rtmp; # 保存路徑
# record_max_size 1K;
# append current timestamp to each flv
record_unique on;
# # publish only from localhost
# allow publish 127.0.0.1;
# deny publish all;
}
# HLS直播流
application hls {
live on;
hls on;
hls_path E:/tmp/hls;
hls_fragment 1s; #用來設定每一個塊的大小,默認是5秒,只能為整數
hls_playlist_length 3s; #設定播放串列的長度,單位是秒
hls_nested on; #默認是off,打開后的作用是每條流自己有一個檔案夾
hls_cleanup off; #不清理ts , on|off 默認是開著的,是否洗掉串列中已經沒有的媒體塊
#hls_continuous: #on|off 設定連續模式,是從停止播放的點開始還是直接跳過
}
# hls on;
# hls_path E:/tmp/hls;
# hls_fragment 5s;#沒有生效
# hls_playlist_length 30s;
# hls_nested on; #默認是off,打開后的作用是每條流自己有一個檔案夾
# hls_cleanup off;#不清理ts
}
}
# 新增end
http {
#include /nginx/conf/naxsi_core.rules;
include mime.types;
default_type application/octet-stream;
#log_format main '$remote_addr:$remote_port - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';
#access_log logs/access.log main;
# # loadbalancing PHP
# upstream myLoadBalancer {
# server 127.0.0.1:9001 weight=1 fail_timeout=5;
# server 127.0.0.1:9002 weight=1 fail_timeout=5;
# server 127.0.0.1:9003 weight=1 fail_timeout=5;
# server 127.0.0.1:9004 weight=1 fail_timeout=5;
# server 127.0.0.1:9005 weight=1 fail_timeout=5;
# server 127.0.0.1:9006 weight=1 fail_timeout=5;
# server 127.0.0.1:9007 weight=1 fail_timeout=5;
# server 127.0.0.1:9008 weight=1 fail_timeout=5;
# server 127.0.0.1:9009 weight=1 fail_timeout=5;
# server 127.0.0.1:9010 weight=1 fail_timeout=5;
# least_conn;
# }
sendfile off;
#tcp_nopush on;
server_names_hash_bucket_size 128;
## Start: Timeouts ##
client_body_timeout 10;
client_header_timeout 10;
keepalive_timeout 30;
send_timeout 10;
keepalive_requests 10;
## End: Timeouts ##
#gzip on;
server {
listen 8088; # 埠我改成了 8088, 因為我的80埠被占用了
server_name localhost;
#修改start
location / {
root html;
index index.html index.htm;
add_header Access-Control-Allow-Origin *; # 配置跨域
add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
}
location /stat {
rtmp_stat all;
rtmp_stat_stylesheet stat.xsl;
}
location /stat.xsl {
root nginx-rtmp-module/;
}
location /control {
rtmp_control all;
}
location /rtmp-publisher {
root nginx-rtmp-module/test;
}
#加入hls支持(這是新增的哈)
location /hls {
types {
application/vnd.apple.mpegurl m3u8;
#或 application/x-mpegURL
video/mp2t ts;
}
alias E:/tmp/hls; #視頻流檔案目錄(自己創建)
expires -1;
add_header Cache-Control no-cache; #跨域支持,不然網頁播放不了
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
}
#修改end
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000; # single backend process
# fastcgi_pass myLoadBalancer; # or multiple, see example above
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
# another virtual host using mix of IP-, name-, and port-based configuration
#
#server {
# listen 8000;
# listen somename:8080;
# server_name somename alias another.alias;
# location / {
# root html;
# index index.html index.htm;
# }
#}
# HTTPS server
#
#server {
# listen 443 ssl spdy;
# server_name localhost;
# ssl on;
# ssl_certificate cert.pem;
# ssl_certificate_key cert.key;
# ssl_session_timeout 5m;
# ssl_prefer_server_ciphers On;
# ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
# ssl_ciphers ECDH+AESGCM:ECDH+AES256:ECDH+AES128:ECDH+3DES:RSA+AESGCM:RSA+AES:RSA+3DES:!aNULL:!eNULL:!MD5:!DSS:!EXP:!ADH:!LOW:!MEDIUM;
# location / {
# root html;
# index index.html index.htm;
# }
#}
}
4. nginx啟動😣
進入nginx目錄打開命令列或powershell執行:
啟動:nginx -c conf\nginx-win-rtmp.conf
停止:nginx -s stop -c conf\nginx-win-rtmp.conf
多載:nginx -s reload -c conf\nginx-win-rtmp.conf
強制結束:taskkill /fi “imagename eq nginx.EXE” /f
這里要注意,啟動要通過cmd啟動,我一開始直接在檔案夾下通過powershell進入就不行,一度懷疑自己做錯了什么~~
cmd進入 nginx-1.7.11.3-Gryphon 檔案下,輸入nginx -c conf\nginx-win-rtmp.conf啟動,然后會一直有個點閃動,就行了,不要關掉哦

然后在瀏覽器打開localhost:8088 (埠我組態檔改了,默認80,但是我80 被占用了,所以我換了一個哈),看到這個首頁就代表成功了

5.測驗推流和拉流😁
視頻檔案推流命令:
//RTMP 協議流
ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -acodec aac -f flv rtmp://192.168.89.220:1935/live/home
//HLS 協議流
ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://192.168.89.220:1935/hls/home
相關命令解釋🤔:
/Users/gao/Desktop/video/test.mp4 ------ 是你的視頻檔案地址
rtmp://192.168.89.220:1935/live(hls)/home -------是推流拉流地址,中間是你的ip
/live/xx和/hls/xx中的live對應組態檔的live和hls名稱,當然也可以取其他的名字, 而后面的 xx (這里是home),你自己命名的哦,對于rtmp流, 這個home就是生成的檔案名,如home-xxx.flv,對于hls流,對應的是檔案夾名,然后這個檔案下存放ts和m3u8檔案,
對于ffmpeg命令引數,大家要自己去學習了哈,因為我也不是很懂哈哈哈…😂我也要去學
/live/xx和/hls/xx中的live對應組態檔的live和hls名稱
#rtmp協議推流
application live {
...
}
#HLS協議推流
application hls {
...
}
舉栗子🌰🌰🌰😍
(1)用網路地址測驗,就是那個湖南衛視的地址(這是hls協議流,不支持rtmp的tcp連接)
打開cmd,打開vlc播放器,先在cmd輸入下面推流命令,把rtmp://127.0.0.1:1935/live/home1拷貝到vlc,然后在cmd 回車執行命令開始推流, vlc點擊播放就可以拉流播放了,
ffmpeg -re -i rtmp://58.200.131.2:1935/livetv/hunantv -acodec aac -vcodec libx264 -vprofile baseline -ar 44100 -ac 1 -f flv rtmp://127.0.0.1:1935/hls/home1
先復制命令到cmd

vlc打開方式(這里 hunantv我后面改成了home1,都可以的名字,你們知道就行):

回車執行命令后會看到資料變化,然后點擊播放,看到播放成功了哈哈哈(有時候拉不下來,且推流成功了(看檔案是否存在了),則在vlc多試幾次拉流,有時候挺快的,有時候延遲很高)

生成檔案:😳

(2)測驗本地視頻😲
hls流測驗:
我的視頻放在了nginx 1.7.11.3 Gryphon目錄下,視頻檔案名是3.mp4 , 我是隨便放的哈哈
打開cmd進入目錄, 輸入命令和在vlc播放器輸入拉流地址 rtmp://192.168.89.220:1935/hls/home
ffmpeg -re -i 3.mp4 -vcodec libx264 -acodec aac -f flv rtmp://192.168.89.220:1935/hls/home```
效果:

生成的檔案:

rtmp流測驗:
ffmpeg -re -i 3.mp4 -vcodec libx264 -acodec aac -f flv rtmp://192.168.89.220:1935/live/home

效果(有時候視頻拉不下來,可以多試一下,不知道為啥,可能網路原因):

生成的檔案:

(3)手機播放
你可以把http://192.168.89.220:8088/hls/home1/index.m3u8 復制到手機瀏覽器,可以直接播放的,其中ip地址,埠,和/hls/xx換成你的就行,埠不改默認80哦,
5.網頁播放😏
- 對于hls生成的m3u8,原生 video標簽pc端不支持播放的,但是移動端就可以😂,,pc端可以通過hls.js播放或者用video.js去播放
- 對于rtmp流,需要瀏覽器flash支持播放,好像現在瀏覽器都不支持了,我測驗都不行,,但是基于HTTP-FLV協議的可以通過flv.js播放
所以,為了兼容播放,一般需要flv.js結合video.js進行兼容處理比較好,flv.js處理flv格式的,video.js處理m3u8格式🤣
但是哦,我們比較懶,還是想用別人做好的插件播放,那不就爽了嘛 , 所以這里我也 看過一些,推薦的有 西瓜播放器 或 LivePlayer H5播放器,當然也有其他的播放器,但是我也沒有都測驗過,有好的歡迎推薦啊啊啊啊啊😭
建議用西瓜,檔案講的好,有flv.js和Hls.js支持等
西瓜檔案:西瓜檔案地址
liveQing檔案:LivePlayer H5播放器
下面是測驗代碼,直接復制拉流鏈接進來
說明:
對于西瓜播放器,我這里用了同事封裝的組件,但是組件pc端播放用的是rtpm或http-flv協議流,移動用的是hls的m3u8,,大家后面結合后端開發可以用,代碼網盤下載看,就不貼了,
<template>
<div>
<!-- liveplayer插件測驗-->
<LivePlayer :videoUrl="videoUrl" fluent autoplay live stretch></LivePlayer>
<hr />
<!-- 原生標簽測驗 -->
<video controls width="500" height="400" autoplay preload="auto">
<!-- rtmp寫法,但是好像瀏覽器都不支持flash播放了-->
<!-- <source src='' type='rtmp://192.168.89.220:1935/live/home'/> -->
<source src="http://192.168.89.220:8088/hls/home1/index.m3u8" type="application/x-mpegURL" />
<!-- hls寫法 移動端支持播放,pc不支持原生的-->
<p class="“warning”">你的臭瀏覽器不支持播放</p>
</video>
<hr />
<!-- videojs 測驗 -->
<!--pc不支持直接用video標簽播放hls, 這里使用video.js,videojs集成了VHS協議,可以播放(瀏覽器基本都支持),當然也可以使用其他插件,比如LivePlayer、西瓜播放器都支持播放,但是對于rtmp流的好像不太行,我測驗不可以...-->
<video
ref="videoPlayer"
class="video-js vjs-default-skin vjs-big-play-centered"
style="outline: none"
></video>
<hr/>
<!-- 西瓜插件 封裝了個組件,不過這里沒有http-flv流,,有興趣看一下,網盤有代碼 -->
<xgplayer :playerUrl="playerUrl"></xgplayer>
</div>
</template>
<script>
import videojs from "video.js";
import "video.js/dist/video-js.css";
import LivePlayer from "@liveqing/liveplayer";
import xgplayer from "./xgindex" // 西瓜封裝組件
export default {
components: {
LivePlayer,
xgplayer
},
data() {
return {
videoUrl: "",
playerUrl: { // 西瓜播放地址
m3u8Live: "http://192.168.89.220:8088/hls/home1/index.m3u8",
rtmpLive: "",
flvLive: "rtmp://192.168.89.220:8088/live/home", // 這個
videoUrl: ""
}
};
},
mounted() {
this.videoUrl = 'http://192.168.89.220:8088/hls/home1/index.m3u8'
this.$nextTick(() => {
this.initVideoPlayer();
});
},
methods: {
//videojs 初始化播放器方法
initVideoPlayer() {
// 第一個選中的要播放的video標簽, 記得是video標簽,
const currentInstance = videojs(this.$refs.videoPlayer, {
autoplay: true, // 是否自動播放
controls: true // 是否顯示控制元件
});
// currentInstance.src({
// src: 'http://localhost:18000/flv/hls/1.flv',
// type: 'rtmp/flv', // 這個type值必寫, 告訴videojs這是一個rtmp流視頻
// })
currentInstance.src({
src: "http://192.168.89.220:8088/hls/home1/index.m3u8",
type: "application/x-mpegURL" // 這個type值必寫, 告訴videojs這是一個rtmp流視頻
});
}
}
};
</script>
<style>
</style>
效果:

相關工具🙃:
OBS推流 OBS使用介紹
Open Broadcaster Software(簡稱OBS)是一款直播流媒體內容制作軟體,同時程式和其源代碼都是免費的,
支持 OS X、Windows、Linux作業系統,適用于多種直播場景,滿足大部分直播行為的操作需求(發布桌面、發布攝像頭、麥克風、揚聲器等等),
這個LiveQing有支持和結合使用,我試過,LiveQing提供了免費的流媒體服務器,大家可以去使用看看(#°Д°)😏在線使用說明
參考鏈接:🤩
Windows下實作ffmpeg+nginx+rtmp+hls實作直播推流拉流(低延時)
https://blog.csdn.net/u011925282/article/details/102580420?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-6.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-6.control
流媒體服務(一)流媒體服務器搭建 win10+ngnix+rtmp+ffmpg播放rtmp和HLS/m3u8
https://blog.csdn.net/weixin_38420511/article/details/104584648?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-6.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-6.control
HTML5如何實作視頻直播功能 https://zhuanlan.zhihu.com/p/146323842
使用flv.js快速搭建html5網頁直播 https://zhuanlan.zhihu.com/p/94440420
暫時結束,總結的不清楚的歡迎交流指出哈😅
轉載請註明出處,本文鏈接:https://www.uj5u.com/qita/290082.html
標籤:其他
