Live Streaming, HLS (HTTP Live Streaming), Adaptive HLS (PENDING)

 

HTTP Live Streaming

Streaming refers to the continuous transmission of audio or video data over a network, allowing users to watch or listen to content in real time without having to download the entire file beforehand. In streaming, the media file is delivered in small chunks (usually in sequential order) to the client (a browser or media player) where it is decoded and played immediately as more data is received.

Streaming media is typically divided into two categories:

  1. Live streaming: Broadcasting real-time events, such as live sports or concerts.
  2. On-demand streaming: Pre-recorded content like movies, music, or TV shows.



HTTP live streaming (HLS) is one of the most widely used streaming protocols. Although it is called HTTP "live" streaming, it is used for both on-demand streaming and live streaming. HLS breaks down video files into smaller downloadable HTTP files and delivers them using the HTTP protocol. Client devices load these HTTP files and then play them back as video.

HLS was developed by Apple for use on Apple products, but it is now used across a wide range of devices. Unlike traditional streaming protocols like RTMP (Real-Time Messaging Protocol) or RTSP (Real-Time Streaming Protocol), HTTP streaming doesn’t require special servers or firewalls. Standard web servers and infrastructure are sufficient.

How HTTP Streaming Works:

  1. Media Segmentation: The media file (e.g., a video) is divided into smaller segments, typically 2-10 seconds long.
  2. Client Requests: The client (browser or media player) makes HTTP GET requests for each segment in sequence, as it plays the previous ones.
  3. Progressive Download: As segments are downloaded one by one, they are decoded and played by the client immediately.
  4. Buffering: The client keeps a buffer of a few segments ahead to avoid playback interruptions caused by network issues.

Adaptive HLS (HTTP Live Streaming) is an extension of standard HLS that adjusts the video quality in real-time based on the viewer's network conditions and device capabilities. It allows seamless switching between different video bitrates and resolutions without interruptions, ensuring smooth playback.

If the network slows down, the player automatically switches to a lower-quality stream. If the network improves, it goes back to higher quality. Adaptive HLS minimizes buffering by choosing the best quality that matches the current internet speed.


PlayLists

In HTTP Live Streaming (HLS), playlists are fundamental components that manage the delivery of media content to users. They play a crucial role in how video and audio are streamed over the internet. 

It contains URLs for the individual media segments that the player will request and play. It allows the player to know which segments to fetch and in what order, ensuring a smooth and efficient streaming experience for users.

  1. Organization of Content: Playlists help organize media segments into a logical sequence, allowing the player to know the order in which to play them.

  2. Dynamic Streaming: They enable adaptive streaming, allowing the player to switch between different quality streams based on the user’s network conditions. This adaptability ensures a smoother viewing experience.

  3. Segment Management: Playlists manage the delivery of media segments, making it easier to handle live broadcasts, on-demand content, and long-duration videos.

  4. Metadata Inclusion: Playlists can include metadata about the media segments, such as duration and codecs, helping the player make decisions about playback.

HLS utilizes two primary types of playlists:

  • Media Playlist : A media playlist provides the actual media segments to be streamed. It contains URLs for individual media segments that the player will request and play. It specifies the sequence and duration of the segments to be streamed, allowing the player to fetch them in the correct order. The media playlist includes #EXT-X-TARGETDURATION, #EXT-X-MEDIA-SEQUENCE, and #EXTINF tags, which define segment lengths, sequence numbers, and segment URLs.
  • Master Playlist : The master playlist is a high-level playlist that references one or more media playlists. It provides the player with information about available streams for a particular piece of content. It allows clients to choose between different versions of the same content, which may vary in quality (bitrate, resolution) to optimize streaming based on the user's connection. The master playlist contains #EXT-X-STREAM-INF tags, each specifying attributes like bandwidth and resolution of the associated media playlists.


Master PlayList

The master playlist in HLS (HTTP Live Streaming) serves as a centralized file that organizes and directs the player to various media playlists. It enables adaptive streaming by allowing the player to switch between different quality levels based on real-time network conditions. 

The master playlist is created by the content provider and typically has a .m3u8 file extension. It contains references to multiple media playlists, each corresponding to different quality levels or versions of the same content.

Altough it is primarily associated with adaptive HLS streaming, but it is not limited exclusively to adaptive HLS. Here’s a breakdown of its relevance to adaptive streaming and other scenarios:

Master Playlist in Adaptive HLS

  • Purpose of Adaptive Streaming:

    • Adaptive HLS allows the player to switch between different quality streams based on real-time network conditions. This helps optimize playback by choosing the most suitable bitrate and resolution for the user's current connection.

  • Role of Master Playlist:

    • The master playlist plays a critical role in adaptive streaming by listing multiple media playlists, each representing a different quality level. For instance, a master playlist might include links to low, medium, and high-quality media playlists, enabling the player to switch among them as needed.

  • Dynamic Selection:

    • The master playlist allows the HLS player to dynamically select the appropriate media playlist based on bandwidth availability. This is essential for ensuring smooth playback and reducing buffering, especially in fluctuating network conditions.

Master Playlist in Non-Adaptive HLS

  • Static Streaming:

    • While the master playlist is primarily designed for adaptive streaming, it can still be used in non-adaptive scenarios. For example, a single-quality stream can also have a master playlist if there are different variations (e.g., different audio languages) or if the same content is available in different formats (like different codecs).

  • Multiple Variants:

    • Even if a service does not support adaptive bitrate streaming, a master playlist could still reference multiple media playlists for other reasons, such as language options or alternate versions of the same content.

  • Organization:

    • Using a master playlist can help organize content and make it easier for clients to discover different variations of the media, even if those variations are not based on adaptive streaming.

While the master playlist is most commonly used and most beneficial in the context of adaptive HLS streaming, it is not exclusively applicable to it. The master playlist provides flexibility in organizing media variants and can still serve a purpose in static streaming scenarios.


Steps In HLS

When a user initiates playback (e.g., clicks play on a video), the HLS player first requests the master playlist from the server. This is the first step in the streaming process. Upon retrieving the master playlist, the player analyzes the available options:

  • Bandwidth and Resolution: The player considers the user's current network conditions (e.g., available bandwidth, latency) and device capabilities (e.g., screen resolution) to select the most suitable media playlist.
  • User Preferences: In some cases, user preferences (like quality settings) might also influence the selection. 
Once the player has determined which media playlist to use (e.g., medium.m3u8), it sends a request to the server to fetch this specific media playlist.

After the media playlist is downloaded, the player begins requesting the individual media segments (e.g., .ts files) listed in that media playlist. This process involves:

  • Sequential Fetching: The player fetches segments in the order specified by the media playlist, using the #EXTINF tags to determine the duration of each segment.
  • Buffer Management: The player may pre-load segments to avoid buffering during playback.
If the network conditions change during playback (e.g., if the bandwidth decreases), the player can switch to a different media playlist (e.g., from high.m3u8 to low.m3u8) dynamically. This is done by:
  • Monitoring Network Conditions: The player continuously monitors the current playback performance and network status.
  • Retrieving the Master Playlist Again: If it determines that switching is necessary, the player can refer back to the master playlist to find another media playlist that suits the new conditions.


CDNs In HLS

Utilizing a Content Delivery Network (CDN) for an HLS (HTTP Live Streaming) system can significantly enhance the performance, scalability, and reliability of video streaming. After encoding your video content into HLS format (creating .m3u8 and .ts files), you upload these files to the CDN. Many CDNs provide APIs for easy file upload and management.

Instead of serving your HLS stream directly from your origin server, you point your video player (on the frontend) to the CDN URL that serves the HLS master playlist. When a user requests the HLS stream, the CDN fetches the master playlist and media segments from your origin server (if they are not already cached) and serves them to the user. Subsequent requests for the same segments are served directly from the CDN cache. 

The integration typically involves uploading your HLS content to the CDN, updating your streaming URLs to point to the CDN, and leveraging the CDN's caching and distribution capabilities to handle viewer requests efficiently.

---------------------------------------------------------------------------------------------------------------




















































Comments

Post a Comment

Popular posts from this blog

React Js + React-Redux (part-2)

Image
  Useful : 1]  Click  2] " Click "  NOTE  :   In the "Reducer" function always have a 'default' switch case,else you'll get Undefined state error. Redux.JS Redux is an open-source state management javascript library.  As the application grows, it becomes difficult to keep it organized and maintain data flow. Redux solves this problem by managing application’s state with a single global object called Store. Redux itself is  a standalone library  that can be used with any UI layer or framework, including React, Angular, Vue, Ember, and vanilla JS. Although Redux and React are commonly used together, they are independent of each other. NOTE  :  The data in react always flows from parent to child components,which makes react  "Unidirectional" . Unlike react,  Angular makes use of bi-directional binding in which the data flow takes place in both directions. What problem does Redux solve  ? So,  state is everywhere in ...
Read more

React Js + CSS Styling + React Router (part-1)

Image
Useful : 1] Click  2] Click  3] React Roadmap React is an open source, JavaScript library for developing user interface (UI) in web application. React is developed and released by  Facebook in 2013 . React has a component based architecture i.e everything is a component ,this let you break-down your application into small parts which can then be composed to make complex interfaces. In the past, when browsers were much less capable than today, and JavaScript performance was poor, every page was coming from a server. Every time you clicked something, a new request was made to the server and the browser subsequently loaded the new page. Today, popularized by modern frontend JavaScript frameworks like React, an app is usually built as a single page application: you only load the application code (HTML,  CSS ,  JavaScript ) once, and when you interact with the application, what generally happens is that JavaScript intercepts the browser events and instead of making ...
Read more

ViteJS (Module Bundlers, Build Tools)

Image
Module Bundlers ( Useful :1] Click  2] Click ) Web browsers can only understand and execute JavaScript, HTML and CSS . However, developers often use other technologies and tools like React, Sass, TypeScript, and Tailwind to improve the development process, write more maintainable code, and add additional functionality to their applications. We need a way to combine all this JS & CSS code into a single optimized javascript file, this is achieved through module bundling. A module bundler is a tool that takes all the JavaScript files in a project and combines them into a single JS file (or a few files) that can be loaded by a browser. It usually starts with an entry point file, and from there it will start looking for "import" statements and then bundles up all of code needed for that entry file. The entry point is typically defined in the config file of the bundler. The entry point is the file where the bundler starts its traversal of the application's dependencies...
Read more