Stream .m3u8 on a webpage with Clapprjs
Asked Answered
U

1

0

I'm use nginx-rtmp to convert rtmp to hls and stream in a web page with Clappr. But Clappr take old .ts segment (cause 404 error because it is removed on server). How to fix this ?

Sorry, this is a first time i'm using nginx-rtmp and streaming

Nginx-rtmp config:

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;
                }
        }
}

Code to stream on web

<!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 read old .ts segment

On server, this segment deleted

Unmarked answered 16/2, 2023 at 10:2 Comment(0)
S
0

Seems you want to do low latency HLS, so you set the fragment to 600ms, which might cause the problem.

I test this player, it doesn't start playing from the first segment, it starts from the third segment livestream-22.ts in the playlist, so I think it's not the problem of player.

HLS example

In the configuration, I notice that the hls_fragment is very small:

hls_fragment 600ms;
hls_playlist_length 5s;

I think you might want to do low latency live stream, but you should also set the gop of encoder to 1s, for example, set the Keyframe interval for OBS:

OBS gop setting

Please note that OBS only support 1s+ gop, so the hls fragment should also be set to 1000ms+. I think the problem should be introduced by this mismatch. So please change the config to bellow and test whether it works:

hls_fragment 1000ms;
hls_playlist_length 5s;

Please show me the live.m3u8 content if the segment still not found.

BTW, do you want to do low latency live streaming? Please note that you can't only set the duration of ts segment(hls_fragment) on server, you should also set the Keyframe interval or gop of OBS.

If you use your own server to devlier live stream, you can use HTTP-FLV or HTTP-TS, which also works well, similar to HLS.

When deliver HLS by CDN, which doesn't support HTTP-FLV or HTTP-TS, so you should try other players, which starts playing from the last segment, because the latency is determined by the player behavior for HLS.

Schnitzler answered 17/2, 2023 at 14:57 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.