RSTP流转成WEB端可播放

Posted on 2025-09-13 14:52 彲阅读(29) 评论(0) 收藏举报

如何产生rstp流，可以看这个：rstp - 草妖 - 博客园 (cnblogs.com)

方案一：通过VLC进行转换（不推荐，经测试，比较卡）

打开VLC->媒体->流->网络，输入网络地址->串流->下一步->新目标为 http ->配置文件为OGG->流

通过前端播放（注意，VLC不能关，要一直开着）

<video id="video" src="http://127.0.0.1:8080/test" controls="controls" autoplay="autoplay"></video>

方案2：手动FFmepg转换(不推荐，这个自己跑或者自己管理的项目，会比较好，但是一旦到了客户使用，存在两个问题：一、如果存在推送流中断，恢复比较麻烦.；2、后面界面等维护功能需要自己重新写)。

Ffmpeg网站：Documentation (ffmpeg.org)

转换命令为：

PS D:\ffmpeg\ffmpeg-8.0-full_build\bin> .\ffmpeg.exe -i rtsp://127.0.0.1:8554/video -fflags flush_packets -max_delay 2 -hls_flags delete_segments -hls_time 2 -g 30 live.m3u8

ffmpeg -rtsp_transport tcp -i "rtsp://your_rtsp_stream_url" -fflags flush_packets -max_delay 1 -an -flags -global_header -hls_time 1 -hls_list_size 3 -vcodec copy -s 216x384 -b 1024k -y output.m3u8

-rtsp_transport tcp：指定使用TCP协议来传输RTSP流。
-i "rtsp://your_rtsp_stream_url"：指定RTSP流的URL。
-fflags flush_packets：强制刷新输出包。
-max_delay 1：设置最大延迟为1秒。
-an：禁用音频流。
-flags -global_header：禁用全局头部。
-hls_time 1：设置每个HLS片段的时长为1秒。
-hls_list_size 3：设置HLS播放列表的大小为3。
-vcodec copy：直接复制视频流，不进行重新编码。
-s 216x384：设置输出视频的分辨率为216x384。
-b 1024k：设置视频比特率为1024kbps。
-y：覆盖输出文件，如果文件已存在。
output.m3u8：输出文件的名称。
-hls_flags delete_segments：启用HLS片段自动删除。生成HLS（HTTP Live Streaming）时，自动删除已写入播放列表的旧片段，避免磁盘空间占用。
-g 30：设置GOP（关键帧间隔）为30帧。‌说明‌：每30帧插入一个关键帧（IDR帧），影响视频编码的随机访问性能和压缩效率。

在本地会生成唯一一个“.m3u8”文件，使用hls流前端播放即可

前端播放代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
　　<!-- 可以去官网下载，或者用这个：https://cdn.jsdelivr.net/npm/hls.js -->
    <script src="./hls.js"></script>
</head>
<body>
    <video id="video" controls="controls" autoplay="autoplay"></video>
    <script>
      if(Hls.isSupported()) {
        var video = document.getElementById('video');
        var hls = new Hls();
        /** 注意：这里只能播放相同站点的.m3u8，否则会存在跨域冲突，导致无法播放
        所以，上面产生.m3u8要在生产在站点下面
        **/
        hls.loadSource('http://127.0.0.1:8080/m3u8/out.m3u8');
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED,function() {
          video.play();
      });
     }
    </script>
</body>
</html>

方案3：通过Easydarwin进行中转(比较推荐)

笔记参照：Easydarwin加FFMPEG实现HLS流视频点播 - 彭十一。 - 博客园 (cnblogs.com)

下载Easydarwin：https://github.com/EasyDarwin/EasyDarwin

1、点击“ServiceInstall-EasyDarwin.exe”安装服务

2、写配置文件

3、点击“EasyDarwin.exe”会显示启动画面，端口就是配置的10008，打开http://127.0.0.1:10008，可进入管理界面

4、通过“拉流分发”，可在配置文件里面生产“.m3u8”文件

前端播放代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
　　<!-- 可以去官网下载，或者用这个：https://cdn.jsdelivr.net/npm/hls.js -->
    <script src="./hls.js"></script>
</head>
<body>
    <video id="video" controls="controls" autoplay="autoplay"></video>
    <script>
      if(Hls.isSupported()) {
        var video = document.getElementById('video');
        var hls = new Hls();
        /** 注意：这里只能播放相同站点的.m3u8，否则会存在跨域冲突，导致无法播放
        所以，上面产生.m3u8要在生产在站点下面
        **/
        hls.loadSource('http://127.0.0.1:8080/m3u8/out.m3u8');
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED,function() {
          video.play();
      });
     }
    </script>
</body>
</html>

刷新页面返回顶部

好记性，不如烂笔头

公告

RSTP流转成WEB端可播放