Skip to content

How to convert and consume an RTSP Stream to HLS

This guide will show you how to convert an RTSP stream to HLS and then consume it in a web browser using an HTML5 video player. This example assumes that the RTSP stream does not require authentication.

Prerequisites

  • FFmpeg installed on your system
  • A running RTSP stream without authentication
  • A web server (e.g., Nginx, Apache) or Python for testing locally

Step 1: Convert RTSP to HLS

Use the following command to convert the RTSP stream to HLS using FFmpeg:

ffmpeg -i rtsp://your_rtsp_ip:port/path -c:v copy -c:a copy -hls_time 2 -hls_list_size 10 -hls_flags delete_segments -start_number 1 output.m3u8

Details

  • c:v copy -c:a copy: These options copy the video and audio codecs from the input stream without re-encoding, which can save processing power and reduce latency.

  • hls_time 2: This option sets the duration of each HLS segment in seconds. In this example, we're using 2-second segments.

  • hls_list_size 10: This option specifies the maximum number of segments in the playlist. In this example, we're using a maximum of 10 segments.

  • hls_flags delete_segments: This flag tells FFmpeg to delete segments when they are no longer needed, effectively keeping the number of segments on disk equal to the hls_list_size. This will help to avoid overwriting old segments.

  • start_number 1: This option sets the initial sequence number of the first segment in the playlist. In this example, we're starting with segment 1.

  • output.m3u8: This is the output file name for the HLS playlist. You can change this to any valid filename.

Replace your_rtsp_ip, port, and path with the appropriate values for your RTSP stream. For example 127.0.0.1:1883/demo.

This command will create an HLS playlist file (output.m3u8) and a set of .ts segments.

Step 2: Serve the HLS Stream

Serve the output.m3u8 file and the generated .ts segments using a web server, such as Nginx or Apache, or use Python's built-in HTTP server for local testing. To start a simple HTTP server with Python, navigate to the directory containing the output.m3u8 file and the .ts segments, and run the following command:

For Python 2:

python -m SimpleHTTPServer 8000

For Python 3:

python -m http.server 8000

This will start an HTTP server on port 8000.

Step 3: Consume the HLS Stream

Create an HTML file with the following code to consume the HLS stream using the hls.js library:

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>HLS</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

</head>

<body>
<video id="video" width="640" height="360" controls></video>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const video = document.getElementById('video');
    const hlsUrl = 'http://127.0.0.1:8000/output.m3u8';

    if (Hls.isSupported()) {
      const hls = new Hls();
      hls.loadSource(hlsUrl);
      hls.attachMedia(video);
      hls.on(Hls.Events.MANIFEST_PARSED, function() {
        video.play();
      });
    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
      video.src = hlsUrl;
      video.addEventListener('loadedmetadata', function() {
        video.play();
      });
    } else {
      console.error('HLS is not supported in this browser');
    }
  });
</script>

</body>

</html>

Replace 127.0.0.1 and the port number (if you're using a different port) with the appropriate values for your web server.

Save this HTML file and host it on your web server, or open it directly in a web browser for testing. The video should now play the HLS stream in the browser.

Conclusion

You have successfully converted an RTSP stream to HLS and consumed it using an HTML5 video player with the hls.js library. This method allows you to stream video content in a format that is widely supported by web browsers.

Keep in mind that this guide is intended for testing purposes. For a production environment, you should consider using a more robust web server and configuring security settings appropriately.