搭建直播系统并实现h5播放rtmp

47次阅读

共计 2275 个字符,预计需要花费 6 分钟才能阅读完成。

推流只能用 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 实现全平台播放了。

然而这样还有个问题,因为客户给地址的话,用户拉流是从客户平台上拉,然而如果应用本人的服务器转了一下的话,那就变成用户从咱们本人的服务器拉流了,如果用户比拟多的话那带宽的问题就要考虑一下了。

正文完
 0