程序员经验分享-hwhale

使用 Clapprjs 在网页上流式传输 .m3u8

2024-04-23

我使用 nginx-rtmp 将 rtmp 转换为 hls 并使用 Clappr 在网页中进行流式传输。但 Clappr 采用旧的 .ts 段（导致 404 错误，因为它在服务器上被删除）。如何解决这个问题？

抱歉，这是我第一次使用 nginx-rtmp 和流媒体

Nginx-rtmp 配置：

rtmp {
        server {
                listen 1935; # Listen on standard RTMP port
                chunk_size 4000;
                buflen 1s;
                application show {
                        live on;
                        record off;
                        # Turn on HLS
                        hls on;
                        hls_path /nginx/hls/;
                        hls_fragment 600ms;
                        hls_playlist_length 5s;
                        # disable consuming the stream from nginx as rtmp
                        deny play all;
                }
        }
}

在网络上流式传输的代码

<!DOCTYPE html>
<html>

<head>
  <meta charset=utf-8 />
  <title>videojs-contrib-hls embed</title>

  <link href="video-js.css" rel="stylesheet">
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js">
  </script>
</head>

<body>

  <div id="player"></div>

  <script>
    var player = new Clappr.Player({ 
    source: "<my url>", 
    parentId: "#player",
    });
  </script>

</body>

</html>

Clappr 读取旧的 .ts 段 https://i.stack.imgur.com/dJH4J.png

在服务器上，该段已删除 https://i.stack.imgur.com/wddqP.png


似乎您想要进行低延迟 HLS，因此您将片段设置为 600ms，这可能会导致问题。

我测试了这个播放器，它不是从第一段开始播放，而是从第三段开始播放livestream-22.ts在播放列表中，所以我认为这不是播放器的问题。

在配置中，我注意到hls_fragment非常小：

hls_fragment 600ms;
hls_playlist_length 5s;

我想你可能想做低延迟直播，但你也应该将编码器的gop设置为1s，例如设置Keyframe interval对于OBS：

请注意，OBS仅支持1s+ gop，因此hls片段也应设置为1000ms+。我认为问题应该是由这种不匹配引起的。所以请将配置更改为如下并测试它是否有效：

hls_fragment 1000ms;
hls_playlist_length 5s;

请告诉我live.m3u8如果仍未找到该段，则显示内容。

顺便说一句，你想做低延迟直播吗？请注意，您不仅可以在服务器上设置 ts 片段（hls_fragment）的持续时间，还应该设置Keyframe interval或 OBS 的 gop。

如果您使用自己的服务器进行直播，您可以使用HTTP-FLV 或 HTTP-TS https://stackoverflow.com/a/70358918/17679565，效果也很好，类似于 HLS。

当通过CDN传送HLS时，CDN不支持HTTP-FLV或HTTP-TS，因此您应该尝试其他播放器，从最后一段开始播放，因为延迟是由HLS的播放器行为决定的。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

Nginx

httplivestreaming

RTSP

rtmp

ipcamera

使用 Clapprjs 在网页上流式传输 .m3u8 的相关文章

随机推荐

  • 停止并重新启动 HttpListener？

    我正在开发一个应用程序 它有一个HttpListener 我的目标是让用户根据自己的选择关闭和打开监听器 我将侦听器放入一个新线程中 但在中止该线程时遇到问题 我在某处读到 如果您尝试中止非托管上下文中的线程 那么一旦它重新进入托管上下文T

  • 尝试从客户端发送数据，但 req.session 无法正常工作

    我正在尝试执行发布请求 当我使用邮递员执行此操作时非常成功 但我正在尝试从客户端发送它 我想发布购物车 但结果是我不断发布数量为 1 的商品 无论我发布该请求多少次 解决此问题并以正常方式发布请求的最佳解决方案是什么 我正在使用会话 也许这

  • Mutation Observer不检测通过innerHTML、appendChild添加的节点

    当我们尝试使用appendChild或innerHTML在DOM中添加嵌套节点时 嵌套节点不会出现在突变的addedNodes中 初始 HTML 设置 div div 这是我的突变观察者代码 var observer new Mutatio

  • 回收器查看致命异常：java.lang.ArrayIndexOutOfBoundsException

    我通过 crashlytics 得到了这个堆栈跟踪 我不知道问题出在哪里 有没有 StaggeredGridLayoutManager 的替代方案可以用来获取类似列表视图的布局 Fatal Exception java lang Array

  • 仅正样本和未标记数据集的二元半监督分类

    我的数据由评论组成 保存在文件中 其中很少被标记为正面 我想使用半监督和PU http www cs uic edu liub publications ICDM 03 pdf分类将这些评论分为正面和负面类别 我想知道 python sci

  • Angular 2 可用的 yeoman 生成器 [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 有官方的 Angular 生成器 许多用户为 Angular 1 提供了生成器 但我还没有找到 Angu

  • 简单游戏服务器的代码示例

    我想为游戏中心构建一款 iPhone 游戏 目前正在研究其中的服务器部分 我通过示例学习得最好 但我很难找到任何简单游戏服务器的示例来演示 数据如何格式化并发送到服务器以及如何接收 如何验证正在发送 接收的数据以避免玩家作弊等 游戏服务器代

  • 将 Google People API 与 Cloud Functions for Firebase 结合使用

    我正在尝试使用 Firebase 的 Cloud Functions 从 Google People API 获取联系人列表 但我只得到一个空对象作为响应 有什么想法吗 云函数代码如下 var functions require fireb

  • 如何将现有的 AngularJS 2 Web 应用程序转换为 Cordova 应用程序？

    我有一个用 Angularjs 2 0 构建的 web 应用程序 我想将其转换为 android apk 并将其安装在 android 手机上并进行测试 我没有任何构建移动本机应用程序或将网络应用程序转换为本机应用程序的经验 我已经完成了如

  • 反转 PyQtGraph 中的 Y 轴

    我正在使用 Python 和 PyQt4 开发一个应用程序 该应用程序根据深度绘制不同的参数 绘图包是 PyQtGraph 因为它具有良好的动画速度特性 由于我正在根据深度进行绘图 因此我想反转 Y 轴 我发现我可以修改PyQtGraph文

  • WooCommerce - 获取用户在一段时间内完成的状态订单

    我需要通过 Woocommerce 中的用户 ID 获取用户上个月完成的购买 用户有级别 金级 银级 金卡会员每月可购买4件商品 银卡会员每月可以购买 1 件商品 在将商品添加到购物车之前 我需要检查这一点 我不想仅使用插件来实现此功能 顺

  • .htaccess 需要 WWW 域，但允许子域（如果存在且没有硬编码）

    我试图弄清楚如何设置一组 htaccess 规则 如果最初未指定 则强制在域前面出现 www 但同时 它不会如果存在子域 则有任何影响 所有这一切都无需对任何域名进行硬编码 以便脚本可以在不同的服务器和配置之间移植 EDIT 很抱歉我没能首

  • 错误页面注册器和全局异常处理

    我正在创建一个 Spring Boot Web 应用程序 但我很困惑为什么人们在存在更整洁 更明确的错误页面注册器时使用全局异常处理程序 ControllerAdvice 请有人解释更多 是否可以从全局异常处理程序类 用 Controlle

  • 如何在关闭阶段后清除 Javafx Webview 内存使用情况

    我尝试在JavaFX中使用webview制作UI 但是有一个问题 当使用popup打开大图像时 内存使用量非常大 并且当popup关闭时 内存使用量不会下降 我明白了通过 Windows 中的任务管理器查看内存使用情况 当使用webview

  • 如何计算innerHTML内的变量？

    如何对innerHTML 中的变量进行计数 JS var counter 1 counter alert counter end html Test counter 1 Test HTML p class end p In my JSfid

  • 在 EXE 文件末尾写入字节安全吗？

    我听说如果我们在 EXE 文件末尾附加一些字节 它仍然可以正常工作 在所有情况下都是如此吗 这是一种安全的方法吗 我打算使用程序执行文件中的数据来编写演示 因此它可以是安全的 至少对普通用户而言 并且我不必将数据存储在其他地方 这是不可能用

  • 并行解析器存在哪些概念或算法？

    对于已经以分割格式给出的大量输入数据 并行化解析器似乎很容易 例如单个数据库条目的大列表 或者很容易通过快速预处理步骤进行分割 例如解析大型文本中句子的语法结构 并行解析似乎有点困难 它已经需要相当多的努力来定位给定输入中的子结构 通用编程

  • Android Spinner 尺寸非常大

    我正在尝试获得像我的应用程序中那样的 ICS 旋转器 并玩了几个小时 最后我使用 HoloEverywhere 来获得它 并且它正在工作 但我有一个设计问题 即旋转器没有包装其我在 xml 中设置的内容 默认情况下如下所示 实际上 我在谷歌

  • Xamarin Android - 如何重建 Resource.designer.cs

    在 Xamarin Android 中 如何重新生成 Resource designer cs 我尝试将所有 XML 文件的构建操作标记为 AndroidResource 但 Resource designer cs 仍然不会使用新值进行更

  • 使用 Clapprjs 在网页上流式传输 .m3u8

    我使用 nginx rtmp 将 rtmp 转换为 hls 并使用 Clappr 在网页中进行流式传输 但 Clappr 采用旧的 ts 段 导致 404 错误 因为它在服务器上被删除 如何解决这个问题 抱歉 这是我第一次使用 nginx

热门标签