Why isn't this gstreamer/hls.js configuration working on all browsers?

Question

I am trying to get a live RTSP feed from a webcam to display on a website. I have a Linux server I am running gstreamer on and I am using hls.js to serve the feed up. I have followed a number of examples out there, but nothing I try can get this working across all browsers/devices. Here's what I have right now, and the results I am seeing.

Gstreamer config This is my gstreamer script - I suspect the issue might be here with encoding settings, but I'm not sure what to try:

#!/bin/bash
gst-launch-1.0 -v -e rtspsrc protcols=tcp location=rtsp://XXX.XXX.XXX.XXX:XXXX/user=USER_password=PASSWORD_channel=1_stream=0.sdp?real_stream ! queue ! rtph264depay ! h264parse config-interval=-1 ! mpegtsmux ! hlssink location="%06d.ts" target-duration=5

index.html Here is the webpage serving the feed up:

<!DOCTYPE html>
<head>
    <title>Live Cam Test</title>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
</head>
<body>
    <video id="video" controls="controls" muted autoplay></video>
    <script>
        if (Hls.isSupported()) {
            var video = document.getElementById('video');
            var hls = new Hls();
            
            // bind them together
            hls.attachMedia(video);
            hls.on(Hls.Events.MEDIA_ATTACHED, function () {
                console.log("video and hls.js are now bound together !");
                hls.loadSource("http://ServerName/live/playlist.m3u8");
                hls.on(Hls.Events.MANIFEST_PARSED, playVideo);
            });
        }
    </script>
</body>
</html>

Currently, this setup works the best in Chrome on Windows. The video is loaded, it autoplays, and it loads new segments as it plays, although it does seem to pause for a few seconds here and there and eventually gets a bit behind the live video.

On iOS devices, I cannot browse to the index.html page, I need to navigate directly to the playlist.m3u8 file. Once I do that, it appears to work pretty well.

On OSX, it doesn't appear to work in any browser...tried Chrome, Safari, Brave... I get weird results, sometimes it loads a single frame of the video and stops, sometimes it doesn't load anything.

I have tried the tutorials and code examples from hls.js's documentation and still no dice, so I think I must be doing something wrong in my gstreamer setup. Any help is much appreciated!

If the target-duration value is too high the video may appear to lag behind the live stream. Try setting it to 2 perhaps? — wowbagger, Feb 27 '23 at 00:15
The issue RE iOS and OSX seems to be known, does the following question help you in any way [StackOverflow HLS Video Streaming IOS](https://stackoverflow.com/questions/43287226/hls-video-streaming-on-ios-safari) — Stephan Pieterse, Feb 28 '23 at 07:03

score 1 · Answer 1 · answered Mar 04 '23 at 15:00

In this case, you can try two things.

1: remove output-format=2 from your gamestreamer pipeline. It should look like this

gst-launch-1.0 -v -e rtspsrc protocols=tcp location=rtsp://XXX.XXX.XXX.XXX:XXXX/user=USER_password=PASSWORD_channel=1_stream=0.sdp?real_stream ! queue ! rtph264depay ! h264parse config-interval=-1 ! mpegtsmux segment-duration=5000 ! hlssink location="%06d.ts" target-duration=5

2: or try to set the video/x-h264 format for h264parse element:

gst-launch-1.0 -v -e rtspsrc protocols=tcp location=rtsp://XXX.XXX.XXX.XXX:XXXX/user=USER_password=PASSWORD_channel=1_stream=0.sdp?real_stream ! queue ! rtph264depay ! h264parse config-interval=-1 output-format=video/x-h264 ! mpegtsmux segment-duration=5000 ! hlssink location="%06d.ts" target-duration=5

You may need to experiment with different options until you find the optimal configuration for your specific scenario. If none of these work, then you might need to try other encoding settings or test the pipeline with a different source or sink to figure out if there is some other issue causing this problem.

good work, upvoted till 99 to keep you motivated and struggling. rather than just answering the questions try asking good questions as well — DevLoverUmar, Mar 25 '23 at 05:56

score 0 · Answer 2 · answered Feb 28 '23 at 14:50

0

Try adding the following flags in your Gstreamer pipeline.

1: HLS requires AVC format so set output-format=2 for h264parse.

2: you need to match segment-duration to target-duration in hlssink so you need to congifure mpegtsmux.

3: video.js also supports hls streaming, you can try that if the above solution doesnt work.

4: set segment-duration to VP8 or VP9 and see if that works.

answered Feb 28 '23 at 14:50

Samiya Afzal Minhas

99
1

1

I will try this now and let you know, if it works I'll re-add the bounty (which expired) and award it to you - thanks! – Jim Mar 01 '23 at 17:36
Actually, sorry, I don't know how to translate your answer into the gstreamer flags - if this is my current string, how would I alter to get your changes in place? gst-launch-1.0 -v -e rtspsrc protcols=tcp location=rtsp://XXX.XXX.XXX.XXX:XXXX/user=USER_password=PASSWORD_channel=1_stream=0.sdp?real_stream ! queue ! rtph264depay ! h264parse config-interval=-1 ! mpegtsmux ! hlssink location="%06d.ts" target-duration=5 – Jim Mar 01 '23 at 17:38

score 0 · Answer 3 · answered Mar 01 '23 at 19:05

0

Sure, here are the changes I suggested earlier,

 gst-launch-1.0 -v -e rtspsrc protocols=tcp location=rtsp://XXX.XXX.XXX.XXX:XXXX/user=USER_password=PASSWORD_channel=1_stream=0.sdp?real_stream ! queue ! rtph264depay ! h264parse output-format=2 config-interval=-1 ! mpegtsmux segment-duration=5000 ! hlssink location="%06d.ts" target-duration=5

I hope this works

answered Mar 01 '23 at 19:05

Samiya Afzal Minhas

99
1

Thank you for this - just tried it and get an error: erroneous pipeline, no property "output-format" in element "h264parse0", do you know how to get around that? – Jim Mar 02 '23 at 20:27

Why isn't this gstreamer/hls.js configuration working on all browsers?

3 Answers3