搭建直播系统并实现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

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

1594282941784.png

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

但是这样还有个问题，因为客户给地址的话，用户拉流是从客户平台上拉，但是如果使用自己的服务器转了一下的话，那就变成用户从我们自己的服务器拉流了，如果用户比较多的话那带宽的问题就要考虑一下了。