HLS Live Stream

README.md

Generating HLS from UDP live source

packager \
    'input=udp://127.0.0.1:40000?interface=0.0.0.0,stream=video,segment_template=example.video.720p.$Number$.1.ts,playlist_name=example.video.720p.master.m3u8' \
    --segment_duration 2 --fragment_duration 2 \
    --hls_master_playlist_output 'example.master.m3u8' \
    --hls_playlist_type 'LIVE'

Encoding a steam

ffmpeg \
    -f lavfi -re -i "testsrc=duration=-1:size=1280x720:rate=30" \
    -f lavfi -re -i "sine=f=50:beep_factor=6" \
    -pix_fmt yuv420p \
    -c:v libx264 -preset:v ultrafast -profile:v high -level 3.1 -tune:v zerolatency -r 30 -g 60 -sc_threshold 0 \
    -c:a libfdk_aac -preset:a ultrafast \
    -f mpegts udp://127.0.0.1:40000

Starting HTTP server in the same directory

python -m http.server 8080

index.html

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<!-- Or if you want a more recent canary version -->
<!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@canary"></script> -->
<video id="video"></video>
<script>
  const uri = 'http://localhost:8080/example.master.m3u8';
  let video = document.getElementById('video');
  if(Hls.isSupported()) {
    var hls = new Hls();
    hls.loadSource(uri);
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
      video.play();
  });
 }
 // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
 // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element throught the `src` property.
 // This is using the built-in support of the plain video element, without using hls.js.
 // Note: it would be more normal to wait on the 'canplay' event below however on Safari (where you are most likely to find built-in HLS support) the video.src URL must be on the user-driven
 // white-list before a 'canplay' event will be emitted; the last video event that can be reliably listened-for when the URL is not on the white-list is 'loadedmetadata'.
  else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = uri;
    video.addEventListener('loadedmetadata',function() {
      video.play();
    });
  }
</script>