FFmpeg+Nginx+VLC打造M3U8直播

桃花岛主70

已于 2025-04-19 10:19:57 修改

阅读量1.1k

点赞数 10

文章标签： ffmpeg nginx 运维

于 2025-04-19 10:18:49 首次发布

本文链接：https://blog.csdn.net/qq_18089765/article/details/144228297

版权

一、视频直播的技术原理和架构方案

直播模型一般包括三个模块：主播方、服务器端和播放端

主播放创造视频，加美颜、水印、特效、采集后推送给直播服务器

播放端：

直播服务器端：收集主播端的视频推流，将其放大后推送给所有观众端，这个是核心功能，还有运营级别的诉求：比如鉴权认证，视频连线和实时转码，自动鉴黄，多屏合一，以及云端录制储存功能，另外对于一恶搞主播端的推流视频，中间需要经过一些环节才能达到播放端，因此对中间的质量进行监控，以及根据这些监控进行智能调度，也是非常重要的诉求，

二、实现思想和步骤

1、录制---》编码---》网络传输---》解码---》播放

如何录制直播视频源：手机，ffmpeg

怎样上传直播视频（推到服务器）

怎样播放直播视频

直播间用户是如何交互（送礼物/聊天室/弹幕）

2、如何搭建一个完整的视频直播系统

3、搭建自己的直播平台

本次测试:

视频采集与编码：ffmoeg

直播服务Rtmp/hlsRtmp/hls）Nginx+RTMP模块

播放：网页端Video.js(vlc)

服务器上针对nginx进行配置：

执行推流：

ffmpeg -re -i zhiboshipin.mp4 -c copy -f flv rtmp://192.168.1.35:1935/live1/test

注意，这个最后的"test",可以改为test1，test2，......，可以开无数的直播流，

然后在vlc下打开串流观看，地址：

rtmp://192.168.1.35:1935/live1/test

m3u8的观看地址：

http://192.168.1.35:8000/hls1/test.m3u8

这个8000是nginx的端口，

查看服务器上的文件，发现生成了很多ts文件：

分析一下test.m3u8文件，里面存储的是片段：

三、搭建Nginx直播服务器

服务器由 Nginx+RTMP构成，Nginx是http服务器，RTMP是附加啊啊啊啊啊啊模块，选择源码的方式安装，可以自定义安装模块

安装Nginx依赖，

apt-get install -y libpcre3 libpcre3-dev libssl-dev zlib1g-dev gcc wget unzip vim make curl

下载源码：

https://github.com/winshining/nginx-http-flv-module

中文文档：nginx-http-flv-module/README.CN.md at master · winshining/nginx-http-flv-module · GitHub

wget下载

解压

unzip master.zip

然后下载nginx本身源码，解压

编译安装

配置好之后，make makeinstall

要删除掉

Werror

四、配置rtmp服务器

启动Nginx，执行命令：

/usr/local/nginx/sbin/nginx

vod目录下的是点播功能，可以用rtmp协议播放网络文件

五、搭建FFmpeg，直播推流

下载并安装ffmpeg，

ffmpeg本地文件推流

ffmpeg -re -i input.mp4 -vcodec libx264 -acode aac -f flv

-re表示以正常的帧率推流，否则视频很快推完

rtmp://192.168.1.35:1935/hls1/test1

ffmpeg摄像头推流：

ffmpeg -f dshow -i video="Integrated Camera" -vcodec libx264 -preset:v ultrafast -tune:vzerolatency -f flv rtmp://192.168.1.35/test

六、搭建Videojs,实战网络直播

新建网页,使用第三方播放器（ video.js）,播放源为：http://192.168.1.35:8080/hls/test1.m3u8

<p><em>Videojs播放直播.</em></p>


<video id="myVideo"  class="video-js vjs-default-skin"   preload="auto" width="640" height="264" controls>
	
	<source src="http://192.168.1.35:8080/hls/test1.m3u8" type="application/x-mpegURL">
</video>


<script src="https://vjs.zencdn.net/7.20.3/video.min.js"></script>
    <script>
        const player = videojs('myVideo', {
            html5: {
                hls: {
                    overrideNative: true // 强制使用 video.js 的 HLS 处理
                }
            }
        });
    </script>



</body>

配置 Nginx 以支持 HLS 直播流（.m3u8 和 .ts 文件）并解决跨域问题：

# 在 http 或 server 块中定义 MIME 类型（确保支持 HLS）
http {
    include       mime.types;
    default_type  application/octet-stream;

    # 添加 HLS 的 MIME 类型（如果 mime.types 中未定义）
    types {
        application/vnd.apple.mpegurl m3u8;
        video/mp2t ts;
    }

    # 其他全局配置...
}

server {
    listen 80;
    server_name your-domain.com;  # 替换为你的域名或 IP

    # HLS 直播流文件路径（根据实际路径调整）
    location /live {
        # 允许跨域请求（CORS）
        add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range' always;
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;

        # 处理 OPTIONS 预检请求
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain; charset=utf-8';
            add_header 'Content-Length' 0;
            return 204;
        }

        # 禁止缓存（直播流需实时更新）
        add_header 'Cache-Control' 'no-cache';

        # 指定文件路径
        alias /path/to/your/hls/files;  # 替换为实际存放 m3u8/ts 文件的目录
        autoindex off;  # 禁止目录列表

        # 启用高效文件传输（可选）
        sendfile on;
        tcp_nopush on;
    }
}

开始本地推流

ffmpeg -re -i input.mp4 -c copy -f flv rtmp://192.168.1.35:1935/live/test1

这样就可以顺利在浏览器观看直播了

七、M3U8的多码流自适应

low.m3u8

mid.m3u8

high.m3u8