搭建直播系統並實現h5播放rtmp

推流只能用rtmp協議，拉流能夠使用rtmp協議和hls協議。rtmp協議時adobe公司開發的開放協議，hls是蘋果公司推出的直播協議。咱們使用nginx的rtmp插件來搭建推流服務器

基於nginx的rtmp直播服務器

安裝加載nginx-rtmp-module模塊的nginx

• 首先下載nginx
• 到 https://github.com/arut/nginx-rtmp-module 下載rtmp模塊(git clone https://github.com/arut/nginx-rtmp-module.git)
• 分別解壓nginx和rtmp模塊，使他們在同一目錄下。
• 編譯nginx

  ./configure --prefix=/usr/local/nginx --add-module=../nginx-rtmp-module.1.1.4 --with-http_ssl_module

• make && make install 安裝
• 配置rtmp模塊

rtmp {
server {
listen 9999;
​
application myapp {
live on;
}
application live {
live on;   #開啓實時
hls on;    #開啓hls
hls_path /usr/local/etc/nginx/html/multimedia/hls;  #hls的ts切片存放路徑
hls_fragment 2s;         ＃本地切片長度
hls_playlist_length 6s; ＃HLS播放列表長度
}
}
}

使用rtmp協議而且監聽了9999端口，若是咱們的推流地址填寫的是rtmp://ip:9999/myapp，那麼就是純粹的rmtp協議的流，若是推流地址填寫的是rmtp://ip:9999/live，那麼推流以後會在/usr/local/etc/nginx/html/multimedia/hls目錄下生成不少ts格式的視頻切片和一個m3u8格式的文件，咱們想要用http協議訪問這個m3u8文件就須要再配置http模塊。

• 配置http模塊

location /live {
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
alias /usr/local/etc/nginx/html/multimedia/hls/;
add_header Cache-Control no-cache;
}

當咱們的推流地址填寫的是rtmp://ip:9999/live/room1時，使用http://ip:80/live/room1.m3u8就能把rtmp轉成hls訪問這個直播流了。

• 新建文件夾 mkdir -p /usr/local/etc/nginx/html/multimedia/hls/
• 重啓nginx nginx -s reload

以上就完成了直播服務器的搭建。

使用video.js在h5播放rtmp

使用obs推流，推流地址能夠填寫rtmp://ip:9999/myapp或者rtmp://ip:9999/live，若是用的時rtmp://ip:9999/myapp，在h5端播放的時候會涉及到h5播放rtmp協議的問題，h5安裝vide.js以後還要額外安裝videojs-flash插件。

video.js版本是7.8.3

安裝好以後在相關頁面引入：

import videojs from 'video.js';
import "videojs-flash"
import 'video.js/dist/video-js.css'

而後初始化videojs便可：

player = videojs("myVideo", {
poster: baseUrl + '/file/download?file_id='+that.props.videos.foreImg,
controls: true,
preload: 'auto',
// fluid:false,
fill: true,
playsinline: true,
languages: 'en',
suppressNotSupportedError: false,
sources: that.props.videos.url,
techOrder: ['flash', 'html5']
})

在pc端播放rtmp時依賴flash播放器，因此要打開flash，這樣就解決了pc端rtmp協議直播流的問題。

但問題是如今流行的時移動端直播，而蘋果就沒支持過flash播放器，因此目前正常方法解決不了在移動端使用rtmp協議拉流的問題。

移動端使用rtmp協議拉流

由於蘋果不支持flash因此使用rtmp拉流確定是不行的，可是可能客戶給咱們的就只有rtmp協議，那麼咱們就能夠用到上面的另一個地址，把rtmp協議轉成hls協議。

搭建ffmpeg

rtmp轉flv

ffmpeg  -re -i rtmp://ip:9999/myapp/room1
-vcodec libx264 -vprofile baseline -acodec libmp3lame -ar 44100 -ac 1 -f flv rtmp://ip:9999/live/room1

這樣當客戶給的拉流地址是rtmp://ip:9999/myapp/room1時，能夠用ffmpeg 轉成http://ip:9999/live/room1.m3u8實現全平臺播放了。

可是這樣還有個問題，由於客戶給地址的話，用戶拉流是從客戶平臺上拉，可是若是使用本身的服務器轉了一下的話，那就變成用戶從咱們本身的服務器拉流了，若是用戶比較多的話那帶寬的問題就要考慮一下了。