程序员经验分享-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 的相关文章

  • 无法从 Nginx 反向代理后面的 docker 容器提供静态资源

    我正在尝试使用 Nginx 作为反向代理来为两个容器提供服务 这是我的 Nginx conf 文件的一部分 upstream dashboard server dashboard 80 upstream editor server edit

  • Meteor - 自动发起客户端登录

    我有一个 Meteor 应用程序 我使用 nginx 和内部 SSO 服务进行身份验证 我能够成功地完成此操作 并在服务器 Meteor onConnection 方法上的 nginx 设置 http 标头中检索用户详细信息 此时 我不确定

  • 如何在 OpenShift 上安装 Nginx

    虽然我跟着https blog openshift com lightweight http serving using nginx on openshift https blog openshift com lightweight htt

  • Apple HLS 中的 PES 数据包内的访问单元如何对齐？

    Apple 是否指定了这一点 PES 数据包有效负载中应放置多少个访问单元 另外 我想知道 PES 数据包中存在哪些前缀起始代码 如果有 我认为访问单元中第一个 NAL 单元之前的单元是无用的 不能放置 正确的 我想知道它是如何在 HLS

  • 使用 FFMPEG 的 HLS FLAC 流

    我使用以下命令从 FLAC 文件创建了一个 HLS 流 并输出 FLAC ffmpeg i 10 brass in pocket flac map 0 a c a 0 flac f hls hls playlist type vod mas

  • nginx 服务器中不允许方法 405 错误

    我们的反应应用程序在我们的本地机器上正常工作 但我们将其延迟到更高的环境中 它不起作用 它发送405 Method not allowed error 页面正在加载 每当我们要求时submit form这个问题来了 下面是我的nginx c

  • Docker-compose Predis 不通过 PHP 连接

    我正在尝试使用 docker compose 将 PHP 与 redis 连接 docker compose yml version 2 services redis image redis 3 2 2 php image company

  • 站点启用/中不允许使用 nginx“mail”和“stream”指令

    当我尝试在 nginx 中使用流或邮件指令时遇到问题 我正在使用 nginx 1 16 1 和 Ubuntu 18 04 4 LTS 这是我的 nginx conf user www data worker processes auto p

  • 显示MJPEG流的跨浏览器解决方案

    有没有一种轻量级 免费且可靠的方式在跨浏览器环境中显示 MJPEG 我正在尝试显示来自轴2120 http www axis com techsup cam servers cam 2120 index htm我正在开发的网站上有 IP 摄

  • 从 Nginx 到 Express.js 上的 socket.io 的反向代理上“无法获取”

    我已经关注了通过私有网络让 Node js 在两台 Ubuntu 14 04 服务器上通过 Nginx 工作 Node js 位于 myappserver 上 通过私有 IP myprivatewebserver 访问 并通过 mypubl

  • 使用正则表达式解析HLS m3u8文件

    我想解析 HLS master m3u8 文件并从中获取带宽 分辨率和文件名 目前我正在使用字符串解析来搜索字符串中的某些模式并执行子字符串来获取值 示例文件 EXTM3U EXT X STREAM INF PROGRAM ID 1 BAN

  • nginx工作进程如何共享“监听套接字”

    This http aosabook org en nginx html http aosabook org en nginx html说 工作进程接受来自共享 监听 套接字的新请求 并在每个进程内执行高效的运行循环 我查看了代码 但不明白

  • airflow webserver 命令失败并显示 {filesystemcache.py:224} 错误 - 不允许操作

    我正在 Cent OS 7 上安装 Airflow 我已经配置了 Airflow db init 并检查了 nginx 服务器的状态及其工作正常 但是当我运行airflow webserver命令时 我收到下面提到的错误 2021 03 2

  • 比较 nginx+Apache+mod_wsgi 与 nginx+uWSGI？

    在生产中使用 nginx Apache mod wsgi 与 nginx uWSGI vurtualenv 有何优缺点 我在自 2007 年以来开发的 mod wsgi 中看到了第一个变体的优点 并且具有更稳定的版本和易于管理 第二种变体的

  • ./manage.py 使用 https 运行服务器

    manage py 运行服务器 0 0 0 0 8000 我使用上面的行作为我从 github 借用的代码的一部分 https github com ribeiroit boh puppet https github com ribeiro

  • Nginx 正在向 uWSGI 发出非常旧的请求？

    我看到一种奇怪的情况 Nginx 或 uwsgi 似乎正在建立一个很长的传入请求队列 并在客户端连接超时后很长时间内尝试处理它们 我想理解并停止这种行为 以下是更多信息 My Setup 我的服务器使用 Nginx 通过 Unix 文件套接

  • 如何将多个域路由到多个节点应用程序？

    我习惯了典型的 Lamp Web 托管环境 您只需单击 cpanel 中的几个按钮 您的域就会被分区并映射到 htdocs 中的文件夹 我经常使用 Node js 但做同样的事情似乎并不那么简单 如果我有多个节点应用程序 并且我想将doma

  • flash/flex：渐进式下载与 rtmp

    我试图理解并真正确定何时在 Flex flash 中使用渐进式下载与 rtmp 看来主要的一点是 rtmp 不与 http 一起提供服务 而渐进式下载则由 http 提供 由于它不是 rtmp 因此资源受到保护 因为无法从 swf 外部连接

  • NGinx 域名重定向

    假设我有一个名为 xyz co 的网站 我还有其他具有相同前缀的域名 例如 xyz com xyz it xyz co it 现在 nginx 与端口 80 的 nginx conf 中的 server name xyz co 配合得很好

  • 如何在位置中使用 Nginx Regexp

    Web 项目将静态内容放入 some content img 文件夹中 url规则为 img some md5 但文件夹中的位置 content img 前两位数字 Example url example com img fe5afe048

随机推荐

  • 停止并重新启动 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

热门标签