RMTP方案:Nginx+ffmpeg/obs+vlc/h5 |
服务器安装 |
1.依赖 |
sudo apt-get update |
sudo apt-get install libpcre3 libpcre3-dev |
sudo apt-get install openssl libssl-dev |
2.安装Nginx |
下载nginx-1.17.9.tar.gz+nginx-http-flv-module.zip放到同级目录解压 |
https://nginx.org/download/ |
https://github.com/winshining/nginx-http-flv-module |
cd nginx-1.17.9/ |
./configure --prefix=/usr/local/nginx --add-module=../nginx-http-flv-module --with-http_ssl_module |
make |
sudo make install |
安装目录:/usr/local/nginx/sbin/nginx |
3.修改配置文件/usr/local/nginx/conf/nginx.conf |
在http同级下面添加rmtp模块 |
rtmp { server { listen 1935; #监听的端口 chunk_size 4000; application live { live on; #当推流时,RTMP路径中的APP(RTMP中一个概念)匹配myapp时,开启直播 record off; #不记录视频 gop_cache on; } application hls { #rtmp推流请求路径 live on; hls on; hls_path /tmp/hls; hls_fragment 2s; hls_playlist_length 60s; #总共可以回看的事件,这里设置的是1分钟 } } } |
tips1:hls_path 目录hls,需要改权限可读可写的权限 |
tips2:如果部署在云端,添加SSL,需要修改#user nobody;为自己的用户名,配置文件的root权限 |
RTMP使用flash插件播放,不兼容所有浏览器 |
推流地址是 rtmp://127.0.0.1:1935/live/ +密钥(例如mystream) |
拉流地址是 rtmp://127.0.0.1:1935/live/mystream |
HTTP_FLV |
推流地址是 rtmp://127.0.0.1:1935/live/ +密钥(例如mystream) |
拉流地址 http://127.0.0.1:80/live?port=1935&app=live&stream=mystream |
HLS使用http协议,兼容所有浏览器。延时非常大,不太适合实时视频源,适合文件点播或历史录像直播 |
http://127.0.0.1:80/live/mystream.m3u8 |
延迟太大 |
4.启动 |
启动:/usr/local/nginx/sbin/nginx |
停止:/usr/local/nginx/sbin/nginx -s stop |
修改后重启:sudo /usr/local/nginx/sbin/nginx -s reload |
检查:ps aux | grep nginx |
出现类似如下信息表示启动成功 |
nginx: [b][color=red]master[/color][/b] process ./nginx |
nginx: worker process |
master是主进程,关闭的时候kill这个进程,其他子进程会自动关掉 |
打开浏览器http://localhost/即可看到nginx的默认欢迎页 |
nginx默认是用80端口,我们可以在nginx安装目录下的conf/nginx.conf文件中更改 |
推流工具测试 |
ffmpeg |
ffmpeg -re -i /dev/video0 -vcodec h264 -f flv rtmp://127.0.0.1:1935/live/mystream //可以将/dev/video0改为本地视频测试 |
obs |
1.单击界面中来源窗口的加号,视频捕获设备,在设备中选择摄像头,作为推流输入 |
2.单击设置,流,输入地址和流名称 |
地址:rtmp://127.0.0.1:1935/live,流名称:mystream |
3.单击开始推流 |
拉流测试,延迟7-8秒 |
ffplay:RTMP拉流 |
ffplay rtmp://127.0.0.1:1935/live/mystream -fflags nobuffer |
vlc:RTMP,HTTP-FLV拉流 |
rtmp://127.0.0.1:1935/live/mystream |
http://127.0.0.1:80/live?port=1935&app=live&stream=mystream |
H5:http-flv拉流 |
http://127.0.0.1/live?port=1935&app=live&stream=mystream |
H5.html |
<!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: center; margin-left: auto; margin-right: auto; } </style> </head> <body> <p class="mainContainer"> <video name="videoElement" id="videoElement" class="centeredVideo" controls muted autoplay width="1024" height="576"> Your browser is too old which doesn't support HTML5 video. </video> </p> <script src="js/flv.min.js"></script> <script> function start() { if (flvjs.isSupported()) { var videoElement = document.getElementById('videoElement'); var flvPlayer = flvjs.createPlayer({ type: 'flv', url: 'http://127.0.0.1/live?port=1935&app=live&stream=mystream' }); flvPlayer.attachMediaElement(videoElement); flvPlayer.load(); flvPlayer.play(); } } document.addEventListener('DOMContentLoaded', function () { start(); }); </script> </body> </html> |
同级创建js文件夹,存放文件flv.min.js |
手机端安卓拉流 |
http://127.0.0.1/live?port=1935&app=live&stream=mystream |