FFmpeg入门详解之99：基于nginx的rtmp直播服务器（nginx-rtmp-module实现）
基于nginx的rtmp直播服务器（nginx-rtmp-module实现）
首先，在搭建服务之前先了解下目前主流的几个直播协议：
1、RTMP：
实时消息传输协议，Real Time Messaging Protocol，是 Adobe Systems 公司为 Flash 播放器和服务器之间音频、视频和数据传输开发的开放协议。协议基于 TCP，是一个协议族，包括 RTMP 基本协议及 RTMPT/RTMPS/RTMPE 等多种变种。RTMP 是一种设计用来进行实时数据通信的网络协议，主要用来在 Flash/AIR 平台和支持RTMP协议的流媒体/交互服务器之间进行音视频和数据通信。这种方式的实时性比较强，基本能保证延迟在1-2s内，是现在国内直播主要采用的方式之一；不过使用这种协议，就必须安装flash，而H5、IOS、Android并不能原生支持flash，因此这种协议能流行多久，就不得而知了，毕竟移动端才是现在的主流。
2、HLS：
hls是Apple推出的直播协议，是通过视频流切片成文件片段来直播的。客户端首先会请求一个m3u8文件，里面会有不同码率的流，或者直接是ts文件列表，通过给出的ts文件地址去依次播放。在直播的时候，客户端会不断请求m3u8文件，检查ts列表是否有新的ts切片。这种方式的实时性较差，不过优势是H5、IOS、Android都原生支持。
3、HTTP-FLV：
HTTP-FLV就是对RTMP协议的封装，相比于RTMP，它是一个开放的协议。因此他具备了RTMP的实时性和RTMP不具备的开发性，而且随着flv.js出现（感谢B站），使得浏览器在不依赖flash的情况下，播放flv视频，从而兼容了移动端，所以现在很多直播平台，尤其是手机直播平台，都会选择它
一、安装加载nginx-rtmp-module模块的nginx
1、到nginx.org 下载稳定版本的nginx
2、到 https://github.com/arut/nginx-rtmp-module 下载rtmp模块(git clone https://github.com/arut/nginx-rtmp-module.git)
解压nginx的tar包；nginx 和trmp模块在同一目录
nginx-1.12.2 nginx-1.12.2.tar.gz nginx-rtmp-module
3、到nginx解压目录配置编译参数
./configure --prefix=/usr/local/nginx --add-module=../nginx-rtmp-module.1.1.4 --with-http_ssl_module
4、make && make install 安装
如果已安装nginx可以在已有nginx上面增加模块：参考https://www.cnblogs.com/zhangmingda/p/12622590.html
二、配置nginx rtmp直播功能nginx.conf
# For more information on configuration, see:
# * Official English Documentation: http://nginx.org/en/docs/
# * Official Russian Documentation: http://nginx.org/ru/docs/
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;
# Load dynamic modules. See /usr/share/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;
events {
worker_connections 1024;
}
http {
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on; #内核直接发送文件到客户端
tcp_nopush on; #够一定数据量再发送
tcp_nodelay on; #同上
keepalive_timeout 65;
types_hash_max_size 2048;
include /etc/nginx/mime.types;
default_type application/octet-stream;
# Load modular configuration files from the /etc/nginx/conf.d directory.
# See http://nginx.org/en/docs/ngx_core_module.html#include
# for more information.
include /etc/nginx/conf.d/*.conf;
server {
listen 80 default_server;
# listen [::]:80 default_server;
server_name _;
root /usr/share/nginx/html;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
location / {
resolver 8.8.8.8;
#proxy_pass $scheme://$http_host$request_uri;
proxy_buffers 256 4k;
proxy_max_temp_file_size 0k;
}
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
# Settings for a TLS enabled server.
#
server {
listen 443 ssl http2 default_server;
listen [::]:443 ssl http2 default_server;
server_name _;
root /usr/share/nginx/html;
ssl_certificate "/etc/pki/nginx/server.crt";
ssl_certificate_key "/etc/pki/nginx/private/server.key";
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 10m;
ssl_ciphers HIGH:!aNULL:!MD5;
ssl_prefer_server_ciphers on;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
location / {
}
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
server {
listen 8080;
#配置RTMP状态一览HTTP页面=========================================
location /stat {
rtmp_stat all;
rtmp_stat_stylesheet stat.xsl;
}
location /stat.xsl {
root /opt/rtmp/nginx-rtmp-module/;
}
#配置RTMP状态一览界面结束==========================
#HTTP协议访问直播流文件配置
location /hls { #添加视频流存放地址。
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
#访问权限开启，否则访问这个地址会报403
autoindex on;
alias /usr/share/nginx/html/hls;#视频流存放地址，与下面的hls_path相对应，这里root和alias的区别可自行百度
expires -1;
add_header Cache-Control no-cache;
#防止跨域问题
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
}
}
}
#点播/直播功能实现配置rtmp协议
rtmp {
server {
listen 1935;
chunk_size 4000;
application vod {
play /usr/share/nginx/html/vod/flvs/;#点播媒体存放目录
}
application live {
live on;
} #HLS直播配置
application hls {
live on;
hls on;
hls_path /usr/share/nginx/html/hls;#视频流存放地址
hls_fragment 5s;
hls_playlist_length 15s;
hls_continuous on; #连续模式。
hls_cleanup on; #对多余的切片进行删除。
hls_nested on; #嵌套模式。
}
}
}
1、点播
1.1 mkdir /usr/share/nginx/html/vod/flvs/;#创建点播媒体存放目录，并存放test.flv 视频文件
1.2 自己写html页面访问点播资源
html页面嵌入wplayer播放器。播放器播放rtmp://....资源
wplayer下载：http://d2.11684.com/jwplayer-c-11684.com.rar
jwplayer解压后放到html文件的同级别目录下
#ls /usr/share/nginx/html/
dianbo-test.html jwplayer
复制代码
1 <html>
2 <head>
3 welcome test rtmp <br>
4 <script src="/jwplayer/jwplayer.js"></script>
5 </head>
6 <body>
7 <script type="text/javascript">
8 jwplayer.key="gq5NkJHPa+/FmgFfssKaHtp4gbzJJzcRhES+H9Cs4w8=";
9 </script>
10 <div id='my-video'></div>
11 <script type='text/javascript'>
12 jwplayer('my-video').setup({
13 file:'rtmp://120.92.91.16/vod/test.flv',
14 width:'50%',
15 aspectratio:'3:2',
16 fallback:'false',
17 primary:'flash'
18 });
19 </script>
20 <script type="text/javascript">
21 jwplayer.key="gq5NkJHPa+/FmgFfssKaHtp4gbzJJzcRhES+H9Cs4w8=";
22 </script>
23 </body>
24 </html>
复制代码
IE浏览器输入http://ip/dianbo-test.html播放
#注意：实测只支持IE浏览器
1.3 使用专用的播放器：
windows：VLC media player 播放按钮可以输入rtmp://的连接,步骤为：播放-->播放-->网络媒体
安卓：手机万能播放器:我的-->连接播放-->输入url即可播放
2、直播
推流：
电脑端OBS 可以输入推流地址rtmp://IP/live/test 进行推流，其中live 为配置文件中定义的直播应用，test为自定义流名称
rtmp拉流：url与点播的有区别：
复制代码
<html>
<head>
welcom to test rtml <br>
<script src="/jwplayer/jwplayer.js"></script>
</head>
<body>
<script type="text/javascript">
jwplayer.key="gq5NkJHPa+/FmgFfssKaHtp4gbzJJzcRhES+H9Cs4w8=";
</script>
<div id='my-video'></div>
<script type='text/javascript'>
jwplayer('my-video').setup({
file:'rtmp://120.92.91.16/live/test',
width:'50%',
aspectratio:'3:2',
fallback:'false',
primary:'flash'
});
</script>
<script type="text/javascript">
jwplayer.key="gq5NkJHPa+/FmgFfssKaHtp4gbzJJzcRhES+H9Cs4w8=";
</script>
</body>
</html>
复制代码
HLS 协议推流：推流一样使用rtmp://IP/应用名/流名称 进行推流
HLS协议拉流：支持http协议访问hls应用下流名称.m3u8文件
复制代码
<html> <head> welcome test nginx-rtmp-module <br> </head> <body> <video> <source src="http://120.92.91.16/hls/test/index.m3u8"/> </video> </body> </html>
复制代码
点播：直播录制的flv视频html
前端使用B站的flv.min.js
复制代码
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>flv.js demo</title>
<style>
.mainContainer {
display: block;
width: 1024px;
margin-left: auto;
margin-right: auto;
}
.urlInput {
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 8px;
margin-bottom: 8px;
}
.centeredVideo {
display: block;
width: 100%;
height: 576px;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
}
.controls {
display: block;
width: 100%;
text-align: left;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="mainContainer">
<video id="videoElement" class="centeredVideo" controls autoplay width="1024" height="576">Your browser is too old which doesn't support HTML5 video.</video>
</div>
<br>
<div>
<input style="width:500px" type="text" placeholder="请输入flv链接" id="flvUrl" />
<button οnclick="load_flv()">加载</button>
</div>
<br>
<div class="controls">
<button οnclick="flv_start()">开始</button>
<button οnclick="flv_pause()">暂停</button>
<button οnclick="flv_destroy()">停止</button>
<input style="width:100px" type="text" name="seekpoint" />
<button οnclick="flv_seekto()">跳转</button>
</div>
<script src="flv.min.js"></script>
<script>
var player = document.getElementById('videoElement');
function load_flv() {
var flvurl = document.getElementById('flvUrl').value;
console.log(flvurl);
if (flvjs.isSupported()) {
var flvPlayer = flvjs.createPlayer({
type: 'flv',
url: flvurl
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load(); //加载
}
}
function flv_start() {
player.play();
}
function flv_pause() {
player.pause();
}
function flv_destroy() {
player.pause();
player.unload();
player.detachMediaElement();
player.destroy();
player = null;
}
function flv_seekto() {
player.currentTime = parseFloat(document.getElementsByName('seekpoint')[0].value);
}
</script>
</body>
</html>