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>

猜你喜欢

转载自blog.csdn.net/teachermei/article/details/127425733