h264 stream not playing properly

What version of Hls.js are you using?

1.5.11 & 1.5.12-0.canary.10343

What browser (including version) are you using?

Version 125.0.6422.60 (Official Build) (64-bit)

What OS (including version) are you using?

Arch Linux

Test stream

No response

Configuration

{
  debug: true,
  xhrSetup: xhr => {
        xhr.setRequestHeader("Authorization", `Bearer ${token}`);
      },
}

Additional player setup steps

Code taken from https://hlsjs.video-dev.org/demo/basic-usage

Checklist

The issue observed is not already reported by searching on Github under https://github.com/video-dev/hls.js/issues
The issue occurs in the stable client (latest release) on https://hlsjs.video-dev.org/demo and not just on my page
The issue occurs in the latest client (main branch) on https://hlsjs-dev.video-dev.org/demo and not just on my page
The stream has correct Access-Control-Allow-Origin headers (CORS)
There are no network errors such as 404s in the browser console when trying to play the stream

Steps to reproduce

Tested on chrome for android, mac and linux.
I am using the following command to create the stream from an rtsp stream:
ffmpeg -i rtsp://192.168.25.254/Preview_01_main -c:v copy -c:a copy -hls_time 2 -hls_list_size 10 -hls_flags delete_segments -start_number 1 output.m3u8

This is the output of ffprobe of one of the .ts files:

ffprobe version n6.1.1 Copyright (c) 2007-2023 the FFmpeg developers
  built with gcc 13.2.1 (GCC) 20230801
  configuration: --prefix=/usr --disable-debug --disable-static --disable-stripping --enable-amf --enable-avisynth --enable-cuda-llvm --enable-lto --enable-fontconfig --enable-frei0r --enable-gmp --enable-gnutls --enable-gpl --enable-ladspa --enable-libaom --enable-libass --enable-libbluray --enable-libbs2b --enable-libdav1d --enable-libdrm --enable-libfreetype --enable-libfribidi --enable-libgsm --enable-libharfbuzz --enable-libiec61883 --enable-libjack --enable-libjxl --enable-libmodplug --enable-libmp3lame --enable-libopencore_amrnb --enable-libopencore_amrwb --enable-libopenjpeg --enable-libopenmpt --enable-libopus --enable-libplacebo --enable-libpulse --enable-librav1e --enable-librsvg --enable-librubberband --enable-libsnappy --enable-libsoxr --enable-libspeex --enable-libsrt --enable-libssh --enable-libsvtav1 --enable-libtheora --enable-libv4l2 --enable-libvidstab --enable-libvmaf --enable-libvorbis --enable-libvpl --enable-libvpx --enable-libwebp --enable-libx264 --enable-libx265 --enable-libxcb --enable-libxml2 --enable-libxvid --enable-libzimg --enable-nvdec --enable-nvenc --enable-opencl --enable-opengl --enable-shared --enable-vapoursynth --enable-version3 --enable-vulkan
  libavutil      58. 29.100 / 58. 29.100
  libavcodec     60. 31.102 / 60. 31.102
  libavformat    60. 16.100 / 60. 16.100
  libavdevice    60.  3.100 / 60.  3.100
  libavfilter     9. 12.100 /  9. 12.100
  libswscale      7.  5.100 /  7.  5.100
  libswresample   4. 12.100 /  4. 12.100
  libpostproc    57.  3.100 / 57.  3.100
Input #0, mpegts, from 'output998.ts':
  Duration: 00:00:02.02, start: 1996.553144, bitrate: 4298 kb/s
  Program 1
    Metadata:
      service_name    : Session streamed by "preview"
      service_provider: FFmpeg
  Stream #0:0[0x100]: Video: h264 (High) ([27][0][0][0] / 0x001B), yuv420p(progressive), 2560x1920, 20 fps, 25 tbr, 90k tbn
  Stream #0:1[0x101]: Audio: aac (LC) ([15][0][0][0] / 0x000F), 16000 Hz, mono, fltp, 32 kb/s

Expected behaviour

The stream plays normally, it stops after a few seconds. With the canary build the other streams that I have which are hevc streams play properly.

What actually happened?

The stream stops after a few seconds. It works fine in Firefox on Linux

Console output

HLS Supported
hls.js@latest:1 [log] > Debug logs enabled for "Hls instance" in hls.js version 1.5.11
hls.js@latest:1 [log] > stopLoad
hls.js@latest:1 [log] > loadSource:http://192.168.20.50:8000/output.m3u8
hls.js@latest:1 [log] > [stream-controller]: Trigger BUFFER_RESET
hls.js@latest:1 [log] > attachMedia
hls.js@latest:1 [log] > [buffer-controller] created media source: MediaSource
hls.js@latest:1 [log] > [level-controller]: manifest loaded, 1 level(s) found, first bitrate: 0
hls.js@latest:1 [log] > [buffer-controller] 1 bufferCodec event(s) expected
hls.js@latest:1 [log] > startLoad(-1)
hls.js@latest:1 [log] > [level-controller]: Switching to level 0 (SDR @0) from level -1
hls.js@latest:1 [log] > [level-controller]: Loading level index 0 with http://192.168.20.50:8000/output.m3u8
hls.js@latest:1 [log] > [stream-controller]: STOPPED->IDLE
hls.js@latest:1 [log] > [subtitle-stream-controller]: STOPPED->IDLE
hls.js@latest:1 [log] > [level-controller]: live playlist 0 MISSED
hls.js@latest:1 [log] > [level-controller]: reload live playlist 0 in 997 ms
hls.js@latest:1 [log] > [stream-controller]: Level 0 loaded [1494,1503][part-1503--1], cc [0, 0] duration:19.987801
hls.js@latest:1 [log] > [stream-controller]: Live playlist sliding: 0.00 start-sn: 1494->1494 prev-sn: na fragments: 10
hls.js@latest:1 [log] > [level-controller]: live playlist 0 MISSED
hls.js@latest:1 [log] > [level-controller]: reload live playlist 0 in 993 ms
hls.js@latest:1 [log] > [stream-controller]: Level 0 loaded [1494,1503][part-1503--1], cc [0, 0] duration:19.987801
hls.js@latest:1 [log] > [stream-controller]: Live playlist sliding: 0.00 start-sn: 1494->1494 prev-sn: na fragments: 10
hls.js@latest:1 [log] > [buffer-controller] Updating Media Source duration to 19.988
hls.js@latest:1 [log] > [buffer-controller] Media source opened
favicon.ico:1 
        
        
       GET http://192.168.20.50:8000/favicon.ico 404 (File not found)
hls.js@latest:1 [log] > [stream-controller]: Loading fragment 1501 cc: 0 of [1494-1503] level: 0, target: 13.998
hls.js@latest:1 [log] > [stream-controller]: IDLE->FRAG_LOADING
hls.js@latest:1 [log] > injecting Web Worker for "main"
hls.js@latest:1 [log] > [transmuxer-interface, main]: Starting new transmux session for sn: 1501 p: -1 level: 0 id: 1
        discontinuity: true
        trackSwitch: true
        contiguous: false
        accurateTimeOffset: false
        timeOffset: 13.970034
        initSegmentChange: true
hls.js@latest:1 [log] > [stream-controller]: Loaded fragment 1501 of level 0
blob:http://192.168.20.50:8000/93e16d54-ca6d-4882-97be-db07d9445593:1 [log] > Debug logs enabled for "main" in hls.js version 1.5.11
hls.js@latest:1 [log] > [mp4-remuxer]: ISGenerated flag reset
hls.js@latest:1 [log] > [mp4-remuxer]: initPTS & initDTS reset
hls.js@latest:1 [log] > [mp4-remuxer]: reset next timestamp
hls.js@latest:1 [log] > manifest codec:undefined, ADTS type:2, samplingIndex:8
hls.js@latest:1 [log] > parsed codec:mp4a.40.5, rate:16000, channels:1
hls.js@latest:1 [log] > [stream-controller]: FRAG_LOADING->PARSING
hls.js@latest:1 [log] > [stream-controller]: Init audio buffer, container:audio/mp4, codecs[selected/level/parsed]=[//mp4a.40.5]
hls.js@latest:1 [log] > [stream-controller]: Init video buffer, container:video/mp4, codecs[level/parsed]=[/avc1.640033]
hls.js@latest:1 [log] > [buffer-controller] 0 bufferCodec event(s) expected audio,video
hls.js@latest:1 [log] > [buffer-controller] creating sourceBuffer(audio/mp4;codecs=mp4a.40.5)
hls.js@latest:1 [log] > [buffer-controller] creating sourceBuffer(video/mp4;codecs=avc1.640033)
hls.js@latest:1 [log] > [audio-stream-controller]: InitPTS for cc: 0 found from main: 268940941
hls.js@latest:1 [log] > [transmuxer.ts]: Flushed fragment 1501 of level 0
hls.js@latest:1 [log] > [stream-controller]: PARSING->PARSED
hls.js@latest:1 [log] > [stream-controller]: Buffered main sn: 1501 of level 0 (frag:[13.970-16.047] > buffer:[13.999-16.025])
hls.js@latest:1 [log] > [stream-controller]: PARSED->IDLE
hls.js@latest:1 [log] > [stream-controller]: seek to target start position 14.091401097656252 from current time 0
hls.js@latest:1 [log] > [stream-controller]: Loading fragment 1502 cc: 0 of [1494-1503] level: 0, target: 16.025
hls.js@latest:1 [log] > [stream-controller]: IDLE->FRAG_LOADING
hls.js@latest:1 [log] > [stream-controller]: media seeking to 14.091, state: FRAG_LOADING
hls.js@latest:1 [log] > [audio-stream-controller]: media seeking to 14.091, state: STOPPED
hls.js@latest:1 [log] > [subtitle-stream-controller]: media seeking to 14.091, state: IDLE
hls.js@latest:1 [log] > [stream-controller]: Loaded fragment 1502 of level 0
hls.js@latest:1 [warn] > AVC: 36 ms (-3215dts) overlapping between fragments detected at 16.025
r.onWorkerMessage @ hls.js@latest:1
onwmsg @ hls.js@latest:1
hls.js@latest:1 [log] > Video: Initial PTS/DTS adjusted: 16025/16025, delta: -36 ms
hls.js@latest:1 [log] > [stream-controller]: FRAG_LOADING->PARSING
hls.js@latest:1 [log] > [transmuxer.ts]: Flushed fragment 1502 of level 0
hls.js@latest:1 [log] > [stream-controller]: PARSING->PARSED
hls.js@latest:1 [log] > [stream-controller]: Buffered main sn: 1502 of level 0 (frag:[16.025-18.031] > buffer:[13.999-18.027])
hls.js@latest:1 [log] > [stream-controller]: PARSED->IDLE
hls.js@latest:1 [log] > [stream-controller]: Loading fragment 1503 cc: 0 of [1494-1503] level: 0, target: 18.027
hls.js@latest:1 [log] > [stream-controller]: IDLE->FRAG_LOADING
hls.js@latest:1 [log] > [stream-controller]: Loaded fragment 1503 of level 0
hls.js@latest:1 [warn] > AVC: 39 ms (-3469dts) overlapping between fragments detected at 18.027
r.onWorkerMessage @ hls.js@latest:1
onwmsg @ hls.js@latest:1
hls.js@latest:1 [log] > Video: Initial PTS/DTS adjusted: 18027/18027, delta: -39 ms
hls.js@latest:1 [log] > [stream-controller]: FRAG_LOADING->PARSING
hls.js@latest:1 [log] > [transmuxer.ts]: Flushed fragment 1503 of level 0
hls.js@latest:1 [log] > [stream-controller]: PARSING->PARSED
hls.js@latest:1 [log] > [stream-controller]: Buffered main sn: 1503 of level 0 (frag:[18.027-20.015] > buffer:[13.999-19.948])
hls.js@latest:1 [log] > [stream-controller]: PARSED->IDLE
hls.js@latest:1 [log] > [stream-controller]: Media seeked to 14.091
2hls.js@latest:1 [log] > [level-controller]: Loading level index 0 with http://192.168.20.50:8000/output.m3u8
hls.js@latest:1 [log] > [level-controller]: live playlist 0 REFRESHED 1504--1
hls.js@latest:1 [log] > [level-controller]: reload live playlist 0 in 1983 ms
hls.js@latest:1 [log] > [stream-controller]: Level 0 loaded [1495,1504][part-1504--1], cc [0, 0] duration:20.01846666666667
hls.js@latest:1 [log] > [stream-controller]: Loading fragment 1504 cc: 0 of [1495-1504] level: 0, target: 20.015
hls.js@latest:1 [log] > [stream-controller]: IDLE->FRAG_LOADING
hls.js@latest:1 [log] > [buffer-controller] Updating Media Source duration to 22.017
hls.js@latest:1 [log] > [stream-controller]: Loaded fragment 1504 of level 0
hls.js@latest:1 [log] > [stream-controller]: FRAG_LOADING->PARSING
hls.js@latest:1 [warn] > [buffer-operation-queue]: Exception executing "video" SourceBuffer operation: InvalidStateError: Failed to execute 'appendBuffer' on 'SourceBuffer': The HTMLMediaElement.error attribute is not null.
e.executeNext @ hls.js@latest:1
e.append @ hls.js@latest:1
e.onBufferAppending @ hls.js@latest:1
o.emit @ hls.js@latest:1
e.emit @ hls.js@latest:1
e.trigger @ hls.js@latest:1
r.bufferFragmentData @ hls.js@latest:1
r._handleTransmuxComplete @ hls.js@latest:1
r.handleTransmuxComplete @ hls.js@latest:1
r.onWorkerMessage @ hls.js@latest:1
onwmsg @ hls.js@latest:1
hls.js@latest:1 [warn] > [buffer-controller] Failed 1/3 times to append segment in "video" sourceBuffer
onError @ hls.js@latest:1
e.executeNext @ hls.js@latest:1
e.append @ hls.js@latest:1
e.onBufferAppending @ hls.js@latest:1
o.emit @ hls.js@latest:1
e.emit @ hls.js@latest:1
e.trigger @ hls.js@latest:1
r.bufferFragmentData @ hls.js@latest:1
r._handleTransmuxComplete @ hls.js@latest:1
r.handleTransmuxComplete @ hls.js@latest:1
r.onWorkerMessage @ hls.js@latest:1
onwmsg @ hls.js@latest:1
hls.js@latest:1 [warn] > Could not resolve bufferAppendError ("Failed to execute 'appendBuffer' on 'SourceBuffer': The HTMLMediaElement.error attribute is not null.") with content-steering for Pathway: . levels: 1 priorities: ["."] penalized: {".":1188.5}
e.onError @ hls.js@latest:1
o.emit @ hls.js@latest:1
e.emit @ hls.js@latest:1
e.trigger @ hls.js@latest:1
onError @ hls.js@latest:1
e.executeNext @ hls.js@latest:1
e.append @ hls.js@latest:1
e.onBufferAppending @ hls.js@latest:1
o.emit @ hls.js@latest:1
e.emit @ hls.js@latest:1
e.trigger @ hls.js@latest:1
r.bufferFragmentData @ hls.js@latest:1
r._handleTransmuxComplete @ hls.js@latest:1
r.handleTransmuxComplete @ hls.js@latest:1
r.onWorkerMessage @ hls.js@latest:1
onwmsg @ hls.js@latest:1
hls.js@latest:1 [log] > [stream-controller]: Reset loading state
hls.js@latest:1 [log] > [stream-controller]: PARSING->IDLE
hls.js@latest:1 [log] > stopLoad
hls.js@latest:1 [log] > [stream-controller]: IDLE->STOPPED
hls.js@latest:1 [log] > [subtitle-stream-controller]: IDLE->STOPPED



### Chrome media internals output

_No response_

Seems the problem was my camera. An update of the firmware fixed the problem

Navigation Menu

Repository navigation

h264 stream not playing properly #6485

What version of Hls.js are you using?

What browser (including version) are you using?

What OS (including version) are you using?

Test stream

Configuration

Additional player setup steps

Checklist

Steps to reproduce

Expected behaviour

What actually happened?

Console output

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

h264 stream not playing properly #6485

Description

What version of Hls.js are you using?

What browser (including version) are you using?

What OS (including version) are you using?

Test stream

Configuration

Additional player setup steps

Checklist

Steps to reproduce

Expected behaviour

What actually happened?

Console output

Activity

schgab commented on Jun 8, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions