NGINX MPEG-TS Live Module & Dash JS

目录

• 典型业务场景
• 解决方案架构
• 直播流程
• 流媒体直播功能
• WEB 直播技术
  • RTSP 协议
  • RTMP 协议
  • HLS 协议
  • HLS 与 RTMP 对比
• 环境搭建
• NGINX-RTMP-TS-DASH 直播方案
• HTML5 标准
• HLS 标准
• WebRTC 标准
• 参考资料

直播流程

• 视频直播：采集、前处理、编码、传输、解码、渲染

• 采集： 一般是由客户端（IOS、安卓、PC或其它工具，如OBS）完成的，iOS是比较简单的，Android则要做些机型适配工作，PC最麻烦各种奇葩摄像头驱动。

• 前期处理： 主要是处理直播美颜，美颜算法需要用到GPU编程，需要懂图像处理算法的人，没有好的开源实现，要自己参考论文去研究。难点不在于美颜效果，而在于GPU占用和美颜效果之间找平衡。

• 编码： 要采用硬编码，软编码720p完全没希望，勉强能编码也会导致CPU过热烫到摄像头。编码要在分辨率，帧率，码率，GOP等参数设计上找到最佳平衡点。

• 传输： 一般交给了CDN服务商，如：阿里云、腾讯云。

• 解码： 是对之前编码的操作，进行解码，在 web 里需要解码是hls。

• 渲染： 主要用播放器来解决，web中常用到的播放器有video.js，更多：html5-dash-hls-rtmp

• 下面是腾讯云直播方案的整个流程图：

  

流媒体直播功能

• 支持的直播流输入协议是

  • RTMP 用于拉取和发布的流
  • RTSP 为拉和宣布的流
  • 用于HTTP和UDP流的 MPEG-TS
  • SRT 用于听，拉和集合模式
  • UDT 用于听，拉和集合模式
  • HLS 为拉流

• 单路路实时编码流传递（RTMP）

• 多路实时编码流传递（RTMP）

环境搭建

• 服务与模块

  • 1、Openresty下载

    https://openresty.org/download/openresty-1.11.2.3.tar.gz
    

  • 2、nginx-ts-module下载

    git clone https://github.com/arut/nginx-ts-module.git
    

  • 3、ffmpeg 下载安装

• 动态编译安装

  • 1、Openresty环境配置

    apt-get install libreadline-dev libncurses5-dev libpcre3-dev \
    libssl-dev perl make build-essential
    

  • 2、动态编译安装

    ./configure --prefix=/opt/openresty --with-luajit --without-http_redis2_module \
    --with-http_iconv_module --add-dynamic-module=/root/nginx-ts-module
    ...
    make -j4
    ...
    sudo make install
    

  • 3、配置文件

    • nginx.conf

      # vim /opt/openresty/nginx/conf/nginx.conf
      error_log  logs/error.log;
      
      pid        logs/nginx.pid;
      
      load_module "/opt/openresty/nginx/modules/ngx_http_ts_module.so"; # 加载模块
      
      events {
      }
      
      http {
          server {
              listen 8000;
      
              location / {
                  root html;
              }
      
              location /publish/ {
                  ts;
                  ts_hls path=/var/media/hls segment=10s;
                  ts_dash path=/var/media/dash segment=10s;
      
                  client_max_body_size 0;
              }
      
              location /play/ {
                  add_header Cache-Control no-cache;
                  add_header 'Access-Control-Allow-Origin' '*' always;
                  add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
                  add_header 'Access-Control-Allow-Headers' 'Range';
      
                  types {
                      application/x-mpegURL m3u8;
                      application/dash+xml mpd;
                      video/MP2T ts;
                      video/mp4 mp4;
                  }
                  alias /var/media/;
              }
          }
      }
      

    • 流媒体存放文件夹建立

      cd /var & makedir media
      cd media & makedir hls & makedir dash
    

  • 4、FFmpeg推流 ​

    ffmpeg -re -i rtmp://live.hkstv.hk.lxdns.com/live/hks -bsf:v h264_mp4toannexb \
    -c copy -f mpegts http://127.0.0.1:8000/publish/sintel
    

  • 5、客户端播放

    <script src="http://cdn.dashjs.org/latest/dash.all.min.js"></script>
    <style>
        video {
            width: 640px;
            height: 360px;
        }
    </style>
    <div>
        <video data-dashjs-player autoplay src="http://1127.0.0.1:8000/play/dash/sintel/index.mpd" 
            controls></video>
    </div>
    

  • 6、如果不使用 ffmpeg 直接拉流到http://127.0.0.1:8000/publish/sintel 服务的解决方案？

    • （1）nginx-rtmp-module下载

      git clone https://github.com/arut/nginx-rtmp-module.git

    • （2）和安装nginx-ts-module模块一样动态编译安装既可以，最后别忘记了的在配置文件load nginx-rtmp-module.so文件

    • （3）按照这个顺序：OBS => nginx-rtmp => nginx-ts推流，OBS也可以是别的网络推流设备

    • （4）通过以上我们可以不直接使用ffmpeg 去推流了，而是在Windows端口可以通过OBS很简单的去推流了

    • （5）使用VLC播放器测试，结果OK!

  • 7、总结，一切顺利通过。

• 通过SSL加密和公开HLS媒体的来源（HLS）

NGINX-RTMP-TS-DASH 直播方案

• HLS、MPEG-DASH多路输入/输出流（HLS、MPEG-DASH）

• 编译安装

  • 1、下载nginx-rtmp-module模块：

    git clone https://github.com/arut/nginx-rtmp-module.git
    

  • 2、配置 --with-http_xslt_module 时提示 the HTTP XSLT module requires the libxml2/libxslt libraries，安装以下： ​

    sudo apt-get install libxml2 libxml2-dev libxslt-dev
    sudo apt-get install libgd2-xpm libgd2-xpm-dev
    

  • 3、通过configure命令生成Makefile文件，为下一步的编译做准备：

    ./configure --prefix=/opt/openresty --with-luajit --without-http_redis2_module --with-http_iconv_module \ 
    --with-http_stub_status_module --with-http_xslt_module --add-dynamic-module=/root/nginx-ts-module \
    --add-dynamic-module=/root/nginx-rtmp-module
    

  • 4、如果报下面的错误

    platform: linux (linux)
        you need to have ldconfig in your PATH env when enabling luajit.
    

    是因为找不到命令ldconfig, 这个命令一般是在/sbin/目录下的，所以先执行export PATH=$PATH:/sbin

  • 5、如果出现：./configure: error: the HTTP XSLT module requires the libxml2/libxslt 错误，安装以下：

    sudo apt-get install libxml2 libxml2-dev libxslt-dev
    

• nginx.conf 配置

  # vim /opt/openresty/nginx/conf/nginx.conf
  user  www;
  worker_processes  1;
  
  error_log  logs/error.log;
  
  pid        logs/nginx.pid;
  
  load_module "/opt/openresty/nginx/modules/ngx_http_ts_module.so";
  load_module "/opt/openresty/nginx/modules/ngx_rtmp_module.so";
  
  events {
      worker_connections  1024;
  }
   
   http {
       server {
           listen 8000;
   
           # This URL provides RTMP statistics in XML
           location /stat {
              rtmp_stat all;
              rtmp_stat_stylesheet stat.xsl;
           }
   
           location /stat.xsl {
              root html;
           }
   
           location /hls {
               # Serve HLS fragments
              add_header Cache-Control no-cache;
              add_header 'Access-Control-Allow-Origin' '*' always;
              add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
              add_header 'Access-Control-Allow-Headers' 'Range';
          
              types {
                  application/vnd.apple.mpegurl m3u8;
                  video/mp2t ts;
              }
          
              root /tmp;
           }
  
           location /dash {
               # Serve DASH fragments
               add_header Cache-Control no-cache;
               add_header 'Access-Control-Allow-Origin' '*' always;
               add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
               add_header 'Access-Control-Allow-Headers' 'Range';
   
               types {
                   application/dash+xml mpd;
                   video/mp4 mp4;
               }
  
               root /tmp;
           }
       }
   }
  
   rtmp {
       listen 1935;
       chunk_size 4000;
       idle_streams off;
       ping 30s;
       notify_method get;
  
       server {
           listen 1935;
           chunk_size 4000;
   
           drop_idle_publisher 10s;
           idle_streams off;
          
           application live {
               live on;
           }
   
           application hls {
               live on;
               hls on;
               hls_path /tmp/hls;
           }
   
           # MPEG-DASH is similar to HLS
           application dash {
               live on;
               dash on;
               dash_path /tmp/dash;
           }
       }
   }
  

• 拷贝xml文件：cp /root/nginx-rtmp-module/stat.xsl /opt/openresty/nginx/html

• 流状态查看：http://127.0.0.1:8000/stat

• OBS推流地址：rtmp://127.0.0.1/dash/123

• VLC观看RTMP直播流：rtmp://127.0.0.1/dash/123

• DASH格式HTTP播放

  <script src="http://cdn.dashjs.org/latest/dash.all.min.js"></script>
  <style>
      video {
          width: 640px;
          height: 360px;
      }
  </style>
  <div>
      <video data-dashjs-player autoplay src="http://127.0.0.1:8000/dash/123.mpd" controls></video>
  </div>
  

• 功能特点
  支持RTMP、HTTP-FLV、HLS、HTML5等协议，面向Windows、iOS、Android等终端提供稳定流畅的视频直播、点播服务，支持微信直播和微信点播， 可部署在局域网和互联网，实现私有云和公有云应用，单设备高并发。

  • 多屏播放 支持Flash、HTML5播放，兼容Windows、Android、iOS、Mac等操作系统；
  • 转码、上传 转码、上传一体化设计，使视频资源转码后可立即面向互联网进行发布；
  • 嵌入、分享 上传视频后一键生成视频地址，以供用户分享、嵌入到网站、软件系统中；
  • 丰富接口 提供编程语言无关化的RESTful API接口，可以很简单的进行二次开发；

• 强大的WEB管理系统
  采用业界优秀的流媒体框架模式设计，服务运行轻量、高效、稳定、可靠、易维护，是移动互联网时代贴近企业点播、直播需求的一款流媒体方案，可以形成一套完整的视频直播、录播解决方案，满足用户在各种行业场景的流媒体业务需求。

  • 1、视频上传
  • 2、点播管理
  • 3、直播流管理
  • 4、正在直播
  • 5、分享集成
  • 6、接口在线调试

• 应用场景
  视频门户网站、会议活动现场直播、网络电视台、远程监控、在线实时课堂、 科研方向等。

HLS 协议标准

参考资料

• FFmpeg功能命令集合
• ffmpeg处理RTMP流媒体的命令大全
• FFmpeg常用推流命令
• HTTP Live Streaming (HLS) - 概念
• HLS-iOS视频播放服务架构深入探究（一）
• HLS-iOS视频播放服务架构深入探究（二）