How to implement HLS into your application?

In the era of YouTube when people perceive most information through video, developing digital products being without it may be considered suicide for a business idea. 

We discovered a lot of ways of developing video streaming software and verified it through practice. In this blog post, we will tell you about the most popular video streaming technology - HTTP Live Streaming. 

Wanna know how to realize HLS for your application and make this process faster and more cost-effective? Stay tuned!

Table of Contents: 

1. What is HLS streaming?
2. How does HLS work?
3. Technical overview of HLS implementation 

What is HLS streaming?

HTTP Live Streaming (HLS) is a streaming protocol developed and released by Apple in 2009. It reduces the time needed for video downloading and enables playing video in different quality depending on the capabilities of the user’s device. 

HLS became popular thanks to several features: 

Compatibility 

The primary reason for the HLS video streaming popularity is that this protocol is compatible with the different media players, web browsers, mobile devices, as well as streaming media servers.  

Adaptability 

HLS encodes the incoming videos in various levels of quality. That allows it to change depending on the Internet speed during the playback video and makes it seamless for the end-user.

Low latency

From April 30, 2020 the low latency specifications have become part of the main HLS specification and vary from 15 to 20 seconds range with HLS live streaming. 

The HLS extension, called Apple Low Latency HLS (ALHLS) reduces glass-to-glass delay when streaming via HLS by reducing the time needed to start live stream playbacks and maintain it during a live streaming event. ‍

Dynamic ad insertion 

In addition to everything previously, HLS technology allows you to turn applications into the market place by inserting dynamic ads into the streaming videos. ‍

How does HLS work?

The work of HLS streaming is best explained in the following way: 

1. The live content (visual and/or audio) is captured by the streaming devices (camera, microphone) 
2. After capturing content, the device sends it to the transcoding service 
3. The transcoding service transfers video to the video hosting platform through the middleware.  
4. The hosting platform then transfers the content to an HTML5 video player 

In simple words, HLS turns the videos into a bunch of segments and specifies the duration of each segment. Then during the video streaming, the browser makes HTTP requests for these segmented files. 

Technical overview of HLS implementation 

As previously discussed the working principle of HLS, make the right time to delve deeper into the technical specifications of the HLS protocol and see it in action.

Back-end

In a previous part of the article, we defined that streaming content after it has been identified by the device needs to be sent to the transcoding service. To achieve this goal, you can utilize an AWS Elastic Transcoder, the cloud media transcoding service. The transcoder converts video files into the versions compatible with iOS devices, Android devices, set-top boxes, and browser-based players. 

The next step is transferring the video to the hosting platform. As a middleware that provides secure delivery of the streaming content, you can use a Cloud Delivery Network (CDN) service by AWS - CloudFront. It is most suitable for both pre-recorded videos and live videos.

Front-end

Currently, when our video is delivered to the hosting platform, it needs to be transferred to the HTML5 player. For this purpose, we recommend utilizing Video.js library that supports HTML5 video and HLS. 

The easiest way to get started using Video.js is to paste the following links in your page:

HLS for iOS applications 

By using the same protocol that powers the web, HLS lets you deploy content using ordinary web servers and content delivery networks. HLS is designed for reliability and dynamically adapts to network conditions by optimizing playback for the available speed of wired and wireless connections.’ - Apple documentation

As stated the documentation implementation of HLS into your iOS Application is not a big deal. An AVPlayer has all needed setups to minimize your work. You can just initialize an AVPlayer Item for instance with a link to the playlist.

So here we have such HLS iOS mechanism:

1. Init AVPlayerViewController instance
2. Init AVPlayerItem with desired playlist
3. Init AVPlayer instance with current player item
4. Add new player to AVPlayerViewController
5. Add AVPlayerViewController to your navigation or just present it as in example
6. Start playing
   

This is the simplest way of adding HLS to your iOS App.

Are you considering an HLS technology as a feature for your learning app? Look at our Educational Software Solutions.

HLS for Android applications 

Unlike HLS iOS mechanism, to implement HLS streaming Android into application you can use ExoPlayer - an application media player for Android OS. 

It is built on top of Android's low level media APIs, ExoPlayer offers a more powerful and more robust alternative to MediaPlayer, with additional features and customization flexibility. Unlike the MediaPlayer API, ExoPlayer is easy to customize and extend.

For simple HLS streaming Android example, getting started with ExoPlayer consists of implementing the following HLS streaming Android steps:

1. Add ExoPlayer as a dependency to your project.

2. Create a SimpleExoPlayer instance.

3. Attach the player to a view (for video output and user input).

4. Prepare the player with a MediaSource to play.

5. Release the player when done.

Thanks for reading our publication! We hope that you have found out the main principles of HLS iOS and HLS streaming Android example.

In the next blog post, we will share with you an instruction on how to make your LMS LTI-compliant. Stay tuned!