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

推流只能用rtmp协议,拉流能够使用rtmp协议和hls协议。rtmp协议时adobe公司开发的开放协议,hls是苹果公司推出的直播协议。咱们使用nginx的rtmp插件来搭建推流服务器css

基于nginx的rtmp直播服务器

安装加载nginx-rtmp-module模块的nginx

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播放列表长度
}
}
}html5

使用rtmp协议而且监听了9999端口,若是咱们的推流地址填写的是rtmp://ip:9999/myapp,那么就是纯粹的rmtp协议的流,若是推流地址填写的是rmtp://ip:9999/live,那么推流以后会在/usr/local/etc/nginx/html/multimedia/hls目录下生成不少ts格式的视频切片和一个m3u8格式的文件,咱们想要用http协议访问这个m3u8文件就须要再配置http模块。nginx

  • 配置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;
}git

当咱们的推流地址填写的是rtmp://ip:9999/live/room1时,使用http://ip:80/live/room1.m3u8就能把rtmp转成hls访问这个直播流了。github

  • 新建文件夹 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插件。app

video.js版本是7.8.3ide

安装好以后在相关页面引入:post

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实现全平台播放了。

可是这样还有个问题,由于客户给地址的话,用户拉流是从客户平台上拉,可是若是使用本身的服务器转了一下的话,那就变成用户从咱们本身的服务器拉流了,若是用户比较多的话那带宽的问题就要考虑一下了。

相关文章
相关标签/搜索