0
点赞
收藏
分享

微信扫一扫

推流拉流RMTP方案:Nginx+ffmpeg/obs+vlc/h5

彭维盛 2022-04-13 阅读 96
ubuntu
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

 

 

 

举报

相关推荐

0 条评论