本地文件-＞RTSP-＞HLS-＞网页播放

本地文件转RTSP-HLS并网页播放

最新推荐文章于 2025-10-03 06:47:30 发布

原创

最新推荐文章于 2025-10-03 06:47:30 发布 · 534 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #rtsp #hls

流媒体服务器mediamtx

MediaMTX（前身为 rtsp-simple-server）是一款即用型、零依赖的实时媒体服务器和媒体代理。它被设计为一个“媒体路由器”，能够接收、代理、录制、转换和播放多种格式的视频和音频流，支持丰富的流媒体协议，适用于直播、监控、视频会议等多种场景，特性如下：
在这里插入图片描述
安装与部署：
1、从其 GitHub 发布页或官网获取预编译的二进制文件直接运行
2、使用 Docker 镜像：docker run --rm -it --network=host bluenviron/mediamtx:latest
以Windows为例下载mediamtx_v1.14.0_windows_amd64.zip，解压后执行mediamtx.exe
在这里插入图片描述

使用ffmpeg推流

FFmpeg 是一款功能强大且非常流行的开源多媒体处理框架，被誉为音视频领域的“瑞士军刀” 🔧。它支持海量的音视频格式和编解码器，提供了录制、转换、流化、编辑、播放等全方位的音视频处理能力。示例如下：

查看媒体信息：
ffprobe -i input.mp4

转换视频格式（将 MP4 转换为 AVI）：
ffmpeg -i input.mp4 output.avi

提取视频中的音频：
ffmpeg -i input_video.mp4 -vn output_audio.mp3

调整视频分辨率（缩放到 1280x720）：
ffmpeg -i input.mp4 -vf scale=1280:720 output.mp4

裁剪视频（从第 10 秒开始，截取 30 秒的内容）：
ffmpeg -i input.mp4 -ss 00:00:10 -t 00:00:30 output_clip.mp4

ffmpeg推流到mediamtx

这里将MP4文件推到mediamtx，在命令行窗口执行如下命令

ffmpeg -re -stream_loop -1 -i test.mp4 -c copy -f rtsp rtsp://192.168.2.1:8554/rtsp1

此时可以用VLC media player工具直接播放生成的rtsp流地址
在这里插入图片描述

ffmpeg推rtsp到本地m3u8文件

ffmpeg -fflags nobuffer -loglevel error -rtsp_transport tcp -i rtsp://192.168.2.1:8554/rtsp1 -vsync 0 -copyts -vcodec copy -movflags frag_keyframe+empty_moov -an -hls_flags delete_segments+append_list -f hls -hls_time 1 -hls_list_size 10 -hls_segment_type mpegts -hls_segment_filename %d.ts index.m3u8

命令解释如下：

ffmpeg 
-fflags nobuffer                       # 减少输入缓冲，降低延迟
-loglevel error                        # 只显示错误日志，减少输出干扰
-rtsp_transport tcp                    # 强制使用 TCP 传输 RTSP 流（提高稳定性）
-i rtsp://192.168.2.1:8554/rtsp1       # 输入源：RTSP 流地址
-vsync 0                               # 禁用帧率同步，避免重复或丢弃帧
-copyts                                # 保留原始时间戳（对直播流同步至关重要）
-vcodec copy                           # 直接复制视频流，不重新编码（节省资源，零延迟）
-an                                    # 丢弃音频流（不处理音频）
-movflags frag_keyframe+empty_moov     # 关键帧分片 + 初始 moov 置空（HLS 兼容性）
-f hls                                 # 指定输出格式为 HLS
-hls_flags delete_segments+append_list # 自动删除旧分片 + 动态更新播放列表
-hls_time 1                            # 每个 TS 分片时长约 1 秒（降低延迟）
-hls_list_size 10                      # 播放列表保留最近 10 个分片
-hls_segment_type mpegts               # TS 分片格式（标准 HLS 格式）
-hls_segment_filename %d.ts            # 分片文件名格式（数字递增：1.ts, 2.ts...）
index.m3u8                             # 输出 HLS 主播放列表文件名

服务器上生成的目录文件如下：

[root@host 01]# ll
总用量 5620
-rw-r--r-- 1 root root 514556  9月 16 16:38 950.ts
-rw-r--r-- 1 root root 504028  9月 16 16:38 951.ts
-rw-r--r-- 1 root root 485792  9月 16 16:38 952.ts
-rw-r--r-- 1 root root 517564  9月 16 16:39 953.ts
-rw-r--r-- 1 root root 500832  9月 16 16:39 954.ts
-rw-r--r-- 1 root root 501584  9月 16 16:39 955.ts
-rw-r--r-- 1 root root 497448  9月 16 16:39 956.ts
-rw-r--r-- 1 root root 493124  9月 16 16:39 957.ts
-rw-r--r-- 1 root root 484664  9月 16 16:39 958.ts
-rw-r--r-- 1 root root 481844  9月 16 16:39 959.ts
-rw-r--r-- 1 root root 479400  9月 16 16:39 960.ts
-rw-r--r-- 1 root root 262144  9月 16 16:39 961.ts
-rw-r--r-- 1 root root    325  9月 16 16:39 index.m3u8

nginx配置

        location /hls/ {
   
   
            alias /opt/public/nginx/html/hls/;
            index  index.html index.htm;
            add_header Cross-Origin-Embedder-Policy 'require-corp';
            add_header Cross-Origin-Opener-Policy 'same-origin';
            add_header Cross-Origin-Resource-Policy 'cross-origin';
        }

服务器播放m3u8文件

将以下文件放到nginx服务器，就可以直接播放生成的m3u8文件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>M3U8视频播放器</title>
    <style>
        * {
     
     
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
     
     
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color