您的位置：首页 > 其它

搭建HLS直播测试环境

2017-11-20 09:18 441 查看 
简介
开发中需要一个不依赖外界环境的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
：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>videojs-contrib-hls embed</title>
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
</head>
<body>
<h1>Video.js Example Embed</h1>
<video id="my_video_1" class="video-js vjs-default-skin" controls  width="640"
data-setup='{}'>
<source src="/hls/stream.m3u8" type="application/x-mpegURL">
</video>
</body>
</html>
需要将上述文件部署到Nginx配置的根目录下，即：http://localhost:8080/index.html

。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航