搭建HLS直播测试环境

简介

开发中需要一个不依赖外界环境的HLS直播服务器。

本文介绍：

• 用mp4文件作为直播视频源，而不用摄像头
• 通过FFmpeg将mp4文件形成直播的rtmp流，push到Nginx服务器上
• Nginx安装支持rtmp模块，可以播放包括rtmp和hls的直播视频
• Nginx配置支持rtmp和hls直播
• Web页面使用Videojs播放hls视频

本文的环境为macOS 10.12.6。

---

搭建最简单的rtmp视频播放服务

---

安装Nginx和相关模块

安装Nginx自定义模块tap：

brew tap homebrew/nginx

安装支持rtmp模块的Nginx服务器：

brew install nginx-full --with-rtmp-module

成功安装后，启动Nginx：

nginx

能通过http://localhost:8080访问到页面。

---

配置rtmp模块

配置文件：/usr/local/etc/nginx/nginx.conf，和http块并列，创建一个rtmp块：

rtmp {
    server {
        listen 1935;
        application live {
            live on;
            record off;
        }
    }
}

保存后，执行：

nginx -s reload

---

安装FFmpeg并运行命令push rtmp流

安装：

brew install ffmpeg

执行push rtmp流命令：

ffmpeg -re -i your_source.mp4  -vcodec copy -f flv rtmp://localhost:1935/live/source

rtmp://localhost:1935/live/source，其中：

• live和nginx.conf中的application live的live对应
• source是可以自定义的

---

使用VLC播放rtmp流

安装VLC：

brew cask install vlc

或者通过VLC官网下载安装。

启动VLC，菜单：File -> Open Network... ，输入：rtmp://localhost:1935/live/source，其中source是我们刚才自定义的。

如果VLC能播放直播流，说明安装成功。这时停止FFmpeg，VLC的播放也会很快停止，说明是直播。

---

配置Nginx支持HLS直播

Nginx的rtmp模块，也支持对hls流的播放。需要在nginx.conf中增加一些配置。

在http块的server块内，增加：

location /hls {
    # Disable cache
    add_header Cache-Control no-cache;

    # CORS setup
    add_header 'Access-Control-Allow-Origin' '*' always;
    add_header 'Access-Control-Expose-Headers' 'Content-Length';

    # allow CORS preflight requests
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;
        return 204;
    }

    types {
        application/vnd.apple.mpegurl m3u8;
        video/mp2t ts;
    }

    root /tmp/;
    add_header Cache-Control no-cache;
}

因为是测试，root我设置在/tmp目录，该目录会在重启macOS后自动清空。

另外，需要修改之前配置的rtmp块：

rtmp {
    server {
        listen 1935;
        chunk_size 4000;

        application show {
            live on;

            #enable HLS
            hls on;
            hls_path /tmp/hls;
            hls_fragment 3;
            hls_playlist_length 20;
        }
    }
}

配置后重新加载Nginx：

nginx -s reload

运行FFmpeg push hls流的命令：

ffmpeg -re -i your_source.mp4-vcodec libx264 -vprofile baseline -acodec aac -strict -2 -f flv rtmp://localhost:1935/live/source

然后可以在Safari浏览器打开链接http://localhost:8080/hls/source.m3u8播放。ffmpeg命令执行后需要稍等一会儿才可以播放。

---

在Web页面中播放HLS直播

在Chrome浏览器中播放hls，需要使用videojs和它的hls插件。videojs会自动识别浏览器是否支持hls，只当浏览器不原生支持的情况下用hls插件。

以下代码在Chrome 60.0运行通过，/index.html：

  
  
  


  
Video.js Example Embed
  

需要将上述文件部署到Nginx配置的根目录下，即：http://localhost:8080/index.html