资源地址
nginx-rtmp: https://github.com/arut/nginx...
OBS推流: https://obsproject.com/
HTTP Live Streaming
(HLS)是苹果公司实现的基于HTTP
的流媒体传输协议,可实现流媒体的直播和点播,相对于常见的流媒体直播协议,例如RTMP
协议、RTSP
协议、MMS
协议等,HLS
直播最大的不一样在于,直播客户端获取到的,并非一个完整的数据流。HLS
协议在服务器端将直播数据流存储为连续的、很短时长的媒体文件(MPEG-TS
格式),而客户端则不断的下载并播放这些小文件,由于服务器端老是会将最新的直播数据生成新的小文件,这样客户端只要不停的按顺序播放从服务器获取到的文件,就实现了直播。因而可知,基本上能够认为,HLS
是以点播的技术方式来实现直播。因为数据经过HTTP
协议传输,因此彻底不用考虑防火墙或者代理的问题,并且分段文件的时长很短,客户端能够很快的选择和切换码率,以适应不一样带宽条件下的播放。不过HLS
的这种技术特色,决定了它的延迟通常老是会高于普通的流媒体直播协议。css
cd /tmp #wget http://nginx.org/download/nginx-1.14.0.gar.gz # 使用华为云镜像 wget https://mirrors.huaweicloud.com/nginx/nginx-1.14.0.tar.gz # 解压缩 tar -xvzf ./nginx-1.14.0.tar.gz
# 下载nginx-rtmp模块源码 wget https://github.com/arut/nginx-rtmp-module/archive/v1.2.1.tar.gz # 解压缩,这个须要用到,转入正式目录 tar -xvzf ./v1.2.1.tar.gz mv /tmp/nginx-rtmp-module-1.2.1 /usr/local/nginx-rtmp-module
yum -y install pcre* openssl openssl-devel
# 建立组 groupadd nginx # 建立不容许登陆,无主目录的用户 useradd -s /sbin/nologin -g nginx -M nginx
cd /tmp/nginx-1.14.0 ./configure --user=nginx --group=nginx --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-http_gzip_static_module --add-module=/usr/local/nginx-rtmp-module make & make install
参数 | 说明 |
---|---|
--user=nginx | 指定运行权限的用户 |
--group=nginx | 指定运行的权限用户组 |
--prefix=/usr/local/nginx | 指定安装路径 |
--with-http_stub_status_module | 支持nginx状态查询 |
--with-http_ssl_module | 开启ssl支持 |
--with-http_gzip_static_module | 开启GZIP功能 |
--add-module=/usr/local/nginx-rtmp-module | 添加nginx-rtmp-module模块 |
vim /usr/lib/systemd/system/nginx.service [Unit] Description=nginx - high performance web server Documentation=http://nginx.org/en/docs/ After=network-online.target remote-fs.target nss-lookup.target Wants=network-online.target [Service] Type=forking PIDFile=/var/run/nginx.pid ExecStartPre=/usr/local/nginx/sbin/nginx -t -c /usr/local/nginx/conf/nginx.conf ExecStart=/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf ExecReload=/bin/kill -s HUP $MAINPID ExecStop=/bin/kill -s TERM $MAINPID PrivateTmp=true [Install] WantedBy=multi-user.target
vim /usr/local/nginx/conf/nginx.conf user nginx; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; pid /var/run/nginx.pid; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; 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; keepalive_timeout 65; #gzip on; include ./conf.d/*.conf; } rtmp { server { # 监听端口 listen 1935; chunk_size 2048; # HLS # For HLS to work please create a directory in tmpfs (/tmp/hls here) # for the fragments. The directory contents is served via HTTP (see # http{} section in config) # # Incoming stream must be in H264/AAC. For iPhones use baseline H264 # profile (see ffmpeg example). # This example creates RTMP stream from movie ready for HLS: # # ffmpeg -loglevel verbose -re -i movie.avi -vcodec libx264 # -vprofile baseline -acodec libmp3lame -ar 44100 -ac 1 # -f flv rtmp://localhost:1935/hls/movie # # If you need to transcode live stream use 'exec' feature. # # rtmp推流请求路径 application hls { # 开启实时 live on; # 开启hls hls on; # 对视频切片进行保护,这样就不会产生马赛克了 wait_key on; # rtmp推流请求路径,文件存放路径 hls_path /data/video/hls; # 每一个TS文件包含视频内容的长度 hls_fragment 2s; # 总共能够回看的事件 hls_playlist_length 60s; # 连续模式 hls_continuous on; # 对多余的切片进行删除 hls_cleanup on; # 嵌套模式 hls_nested on; } } }
# 建立配置目录(在nginx.conf里面指定了include) mkdir /usr/local/nginx/conf/conf.d vim /usr/local/nginx/conf/conf.d/video.conf server { listen 80; server_name localhost; #charset koi8-r; #access_log /var/log/nginx/master.access.log main; location / { root /usr/local/nginx/html; index index.html index.htm; } #error_page 404 /404.html; error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/local/nginx/html; } # http播放地址 location /live { types { application/vnd.apple.mpegurl m3u8; video/mp2t ts; } alias /data/video/hls; expires -1; add_header Cache-Control no-cache; } # 统计 location /stat { rtmp_stat all; rtmp_stat_stylesheet stat.xsl; } location /stat.xsl { root /usr/local/nginx-rtmp-module/; } }
# 开启端口,1935推流,725统计 firewall-cmd --add-port=80/tcp --permanent firewall-cmd --add-port=1935/tcp --permanent firewall-cmd --reload
ffmpeg -re -i "e:\video\02.mp4" -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -s 1280x720 -q 10 rtmp://192.168.1.244:1935/hls/flv
ffmpeg -re -i "e:video02.mp4" -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -s 340x640 -q 10 rtmp://192.168.1.244:1935/hls/flvhtml
ffmpeg -re -i "e:\video\02.mp4" -f flv "rtmp://192.168.1.244:1935/hls/flv"
下载最新客户端: https://obsproject.com/nginx
自定义流媒体服务器
以ffmpeg推流的地址为例:rtmp://192.168.1.244:1935/hls/flv
流URL:rtmp://192.168.1.244:1935/hls
流名称:flvgit
http://192.168.1.244/stat
github
使用plyr.js
和hls.js
播放地址:http://192.168.1.244/live/flv...web
<!doctype html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"/> <meta name="renderer" content="webkit"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta http-equiv="Cache-Control" content="no-siteapp"/> <title>直播</title> <link href="http://cdn.bootcss.com/plyr/3.3.9/plyr.css" rel="stylesheet"> </head> <body> <div class="player" style="width:640px;height:360px"> <video title="直播测试" poster="http://192.168.1.230:8004/static/img/index_p3.jpg" controls crossorigin></video> </div> <script src="http://cdn.bootcss.com/hls.js/0.9.1/hls.light.min.js"></script> <script src="http://cdn.bootcss.com/plyr/3.3.9/plyr.min.js"></script> <script> window.onload = function () { var hlsUrl = 'http://192.168.1.244/live/flv/index.m3u8'; var video = document.querySelector('video'); if (Hls.isSupported()) { var hls = new Hls({autoStartLoad: false}); hls.loadSource(hlsUrl); hls.attachMedia(video); } else { var nativeHLS = video.canPlayType('application/vnd.apple.mpegurl'); video.src = nativeHLS ? hlsUrl : fallbackUrl; } video.addEventListener('play', function () { hls.startLoad(); }, {once: true}); new Plyr(video); }; </script> </body> </html>