‌配置nginx rtmp服务

# nginx.config
worker_processes  1;

error_log logs/error.log error;

events {
    worker_connections  4096;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;
        add_header Access-Control-Allow-Credentials true;
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
        add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
		if ($request_method = 'OPTIONS') {
			return 200;
		}

        location / {
            root   D:\\myapp\\nginx-1.19.3-flv\\html;
            index  index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        location /live {
            flv_live on;
            chunked_transfer_encoding on;
        }

        location /hls {
           root   D:\\myapp\\nginx-1.19.3-flv\\html;
           index  index.html index.htm;
        }
    }
}

rtmp {
    server {
        listen 8002;

        application flv {
            live on;
            gop_cache on;
            meta off;
            allow play all;
        }

        application hls {
            live on;
            hls on;
            hls_fragment 3s;
            hls_playlist_length 10s;
            hls_path D:\\myapp\\nginx-1.19.3-flv\\html\\hls;
			allow play all;
        }

    }
}

安装vlc观看直播

flv协议

打开OBS设置，直播菜单，服务：自定义，服务器：rtmp://192.168.1.8:8002/flv（ip地址替换为nginx服务所在的ip），密钥：test
开始直播
打开vlc左上角菜单媒体，选择【打开网络串流】菜单，输入 rtmp://192.168.1.8:8002/flv/test 观看直播
创建一个html文件观看直播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <!-- https://bilibili.github.io/flv.js/ -->
    <script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.min.js"></script>
    <style>
        body {
            margin: 0;
        }

        #video {
            width: 100%;
            height: 100vh;
        }
    </style>
</head>
<body>
<video id="video" src="" muted autoplay="false" controls></video>
<script>
    const videoElement = document.getElementById('video');
    const flvPlayer = flvjs.createPlayer({
        type: 'flv',
        url: 'http://192.168.1.8/live?port=8002&app=flv&stream=test'
    });
    flvPlayer.attachMediaElement(videoElement);
    flvPlayer.load();
    flvPlayer.play();
</script>
</body>
</html>

hls协议

打开OBS设置，直播菜单，服务：自定义，服务器：rtmp://192.168.1.8:8002/hls（ip地址替换为nginx服务所在的ip），密钥：test
开始直播
打开vlc左上角菜单媒体，选择【打开网络串流】菜单，输入 rtmp://192.168.1.8:8002/hls/test 观看直播
创建一个html文件观看直播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <!--  文档地址 https://videojs.com/getting-started  -->
    <link href="https://cdn.bootcdn.net/ajax/libs/video.js/7.7.1/video-js.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/video.js/7.7.1/video.min.js"></script>
    <style>
        body {
            margin: 0;
        }

        .video-js .vjs-big-play-button {
            top: 50%;
            margin-top: -45px;
            left: 50%;
            margin-left: -44px;
        }

        #video {
            width: 100%;
            height: 100vh;
        }
    </style>
</head>
<body>
<video id="video" class="video-js vjs-default-skin" src="" muted autoplay="false" controls></video>
<script>
    const playerOptions = {
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        autoplay: false, // 如果true,浏览器准备好时开始回放。
        muted: true, // 默认情况下将会消除任何音频。
        loop: false,
        preload: 'false', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        poster: '',
        sources: [{
            type: 'application/x-mpegURL',
            src: 'http://192.168.1.8/hls/test.m3u8' //视频流地址
        }],
    }
    const videoDom = document.querySelector('#video')
    let $player = videojs(videoDom, playerOptions, function onPlayerReady() {
        console.log('播放器已经准备好了!')
        this.on('loadstart', function () {
            console.log('loadstart------------')
        })
        this.on('loadedmetadata', function () {
            console.log('loadedmetadata---视频源数据加载完成----')
        })
        this.on('loadeddata', function () {
            console.log('loadeddata---渲染播放画面----'); //autoPlay必须为false
            // $player.play()
        })
    })
</script>
</body>
</html>

使用ffmpeg命令行推流

# 查看本地的音视频硬件
D:\myapp\ffmpeg\bin\ffmpeg.exe -list_devices true -f dshow -i dummy
# 推送视频
D:\myapp\ffmpeg\bin\ffmpeg.exe -i C:\Users\Mr_Li\Desktop\1.mp4 -vcodec libx264 -acodec aac -f flv rtmp://192.168.1.8:8002/flv/test
# 推送摄像头、音频
D:\myapp\ffmpeg\bin\ffmpeg.exe -f dshow -i audio="麦克风阵列 (适用于数字麦克风的英特尔® 智音技术)" -thread_queue_size 1024 -f dshow -i video="Integrated Camera" -s 480x320 -vcodec libx264 -acodec aac -f flv rtmp://192.168.1.8:8002/flv/test
# 推送系统桌面
D:\myapp\ffmpeg\bin\ffmpeg.exe  -f gdigrab -i desktop -vcodec libx264 -f flv rtmp://192.168.1.8:8002/flv/test

ffmpeg下载地址https://github.com/BtbN/FFmpeg-Builds/releases 选择【ffmpeg-n7.0-latest-win64-lgpl-7.0.zip】

使用nginx搭建直播推流服务

安装vlc观看直播

flv协议

hls协议

使用ffmpeg命令行推流

关于OBS

下载OBS

直播教程

视频教程

新闻资讯

付费技术咨询微信