stream lag in HLS
Posted: 08 Mar 2024 20:16
Hello,
I'm having issues correctly implementing HLS. When my stream is read by an html video element, it seems to playback below normal speed, and catches up every two seconds (which is NOT the segment duration). I'm under the impression it has something to do with the mpeg-ts keyframes.
The first step happens on a raspberry pi. It has hardware encoding for h264, the load is near 0. This step uses ffmpeg to read the video from a webcam and encode it in h264 using the onboard gpu. It is then passed to cvlc for remote access.
when reading this first stream with vlc, i don't get any issue. This first stream cannot be accessed by a web browser though, as nothing in a web browser can actually read a h264 mpeg-ts stream over http. I also need to get this out to a server over VPN only once, as many clients will be connected to watch the stream from outside this pi's local network. So on the server, i hit this rpi over the VPN at address $HOST, to read the h264 mpeg-ts http stream and transform it in a HLS stream.
this stream can be accessed here:
it is served by the fast webserver caddy. Opening this stream with an html video element reveals my issue. It can be observed in a testpage i've made here
and in another HLS player's tester here with the same defects
I've tried video.js and hls.js libraries with always the same results.
Playing the m3u8 stream directly in VLC does work without the lagging issue, but VLC regularly says:
any help or pointers would be appreciated. I'm also on the IRC channel under the same name.
EDIT1: I've just noticed something: When I open the stream with VLC, the first 2 seconds are replaying slow, then it jumps once and then the replay is good. That may corroborate the keyframe issue, as a possible explanation would be that on the first keyframe, VLC is smart enough to understand the right playback speed and adjusts, where the html video element doesn't.
I'm having issues correctly implementing HLS. When my stream is read by an html video element, it seems to playback below normal speed, and catches up every two seconds (which is NOT the segment duration). I'm under the impression it has something to do with the mpeg-ts keyframes.
The first step happens on a raspberry pi. It has hardware encoding for h264, the load is near 0. This step uses ffmpeg to read the video from a webcam and encode it in h264 using the onboard gpu. It is then passed to cvlc for remote access.
Code: Select all
ffmpeg \
-f video4linux2 \
-input_format yuyv422 -framerate 30 -video_size 640x480 \
-i /dev/video0 \
-c:v h264_v4l2m2m -b:v 600k -pix_fmt yuv420p -vf scale=640:480 -g 30 \
-f h264 \
- \
| cvlc \
--no-audio \
--aout=dummy \
stream:///dev/stdin \
--sout '#standard{access=http,mux=ts,dst=0.0.0.0:8060}' \
:no-sout-all \
:sout-keep \
:demux=h264
when reading this first stream with vlc, i don't get any issue. This first stream cannot be accessed by a web browser though, as nothing in a web browser can actually read a h264 mpeg-ts stream over http. I also need to get this out to a server over VPN only once, as many clients will be connected to watch the stream from outside this pi's local network. So on the server, i hit this rpi over the VPN at address $HOST, to read the h264 mpeg-ts http stream and transform it in a HLS stream.
Code: Select all
cvlc \
$HOST \
--sout "#std{access=livehttp{seglen=10,delsegs=true,numsegs=3,index=$STREAM/stream.m3u8,index-url=/stream/$STREAM/stream-########.ts},mux=ts{use-key-frames},dst=$STREAM/stream-########.ts}" \
:sout-keep
this stream can be accessed here:
Code: Select all
https://global2024.distrifab.fr/stream/6d18-stream1/stream.m3u8
it is served by the fast webserver caddy. Opening this stream with an html video element reveals my issue. It can be observed in a testpage i've made here
Code: Select all
https://global2024.distrifab.fr/video-js.html
and in another HLS player's tester here with the same defects
Code: Select all
https://bitmovin.com/demos/stream-test?format=hls&manifest=https%3A%2F%2Fglobal2024.distrifab.fr%2Fstream%2F6d18-stream1%2Fstream.m3u8
I've tried video.js and hls.js libraries with always the same results.
Playing the m3u8 stream directly in VLC does work without the lagging issue, but VLC regularly says:
Code: Select all
http demux error: local stream 217 error: Cancellation (0x8)
any help or pointers would be appreciated. I'm also on the IRC channel under the same name.
EDIT1: I've just noticed something: When I open the stream with VLC, the first 2 seconds are replaying slow, then it jumps once and then the replay is good. That may corroborate the keyframe issue, as a possible explanation would be that on the first keyframe, VLC is smart enough to understand the right playback speed and adjusts, where the html video element doesn't.