Kaltura HLS Live Streaming in CE 9 Howto

Kaltura HLS support does not come out-of-the-box in the Kaltura Community Edition. In this post I will show you how to support HLS Live Streaming using Kaltura CE9.

HLS (HTTP Live Streaming) is a streaming format originally developed by Apple. There are several advantages to streaming via HLS. It works on most mobile devices, and on desktop browsers with flash and a special plugin.

In order to allow HLS Live Streaming using Kaltura, a lot of small steps need to be taken.
After a long investigation, I discovered the needed steps. It took me a while to understand it all, and I hope that this post will help everyone to understand it quicker.


Playing live HLS stream on a desktop browser requires that an OSMF custom plugin will be loaded in the player.
You can read more about it here: Generic OSMF Plugin:, Creating KDP Plugins

Luckily, a custom HLS plugin has already been created and located on gitHub for free 🙂

Download The Plugin:

Download HLSDynamicPlugin.swf at https://github.com/denivip/osmf-hls-plugin
The plugin is under the “release” folder.
Copy the plugin to your kaltura server at /opt/kaltura/web/flash/kdp3/v3.9.2/plugins/ and chmod it to 777

cd /opt/kaltura/web/flash/kdp3/v3.9.2/plugins/
wget https://github.com/denivip/osmf-hls-plugin/tree/master/release/HLSDynamicPlugin.swf
chmod 777 HLSDynamicPlugin.swf

Now, when you have the plugin on your server, some Kaltura code changes are needed.

Code Changes:

players.ini:

Add a new embed type for an hls_livestream under players.ini file under [embed_code_types]:
hls_livestream.label = “HLS Livestream”

kmc.js:

There are several kmc.js files. I use 6.0.9 version so the relevant kmc.js file to update is located under the 6.0.9 folder.

Kaltura creates the embed codes using templates (with Handlebars javascript library)
Therefore, you should add a new template for a new embed type.
The HLS Live Stream embed code template is going to be based on the dynamic embed template. I’ve decided not to add a new template and to simplify the task. I will modify the dynamic embed template to suit my needs.

Add hls_livestream to types array: (line 533 ~):

 EmbedCodeGenerator.prototype = {

        types: ['auto', 'dynamic', 'thumb', 'iframe', 'legacy', 'hls_livestream'],
        required: ['widgetId', 'partnerId', 'uiConfId'],

Change the getTemplate and the isKWidgetEmbed functions (return dynamic embed template if hls_livestream embed is requested).
Notice that Kaltura returns this template if a thumb embed type is requested, so i’m not creating a new pattern here 🙂 (lines 824 and 836 ~)

 getTemplate: function( type ) {
            // Dynamic embed and Thumb embed has the same template
            type = (type == 'thumb' || type =='hls_livestream') ? 'dynamic' : type;
            return ( type && Handlebars.templates && Handlebars.templates[ type ] ) ? Handlebars.templates[ type ] : null;
        },
        /**
         * Check if embed type is using kWidget embed
         *
         * @method isKWidgetEmbed
         * @param {String} type - One of config embed types
         * @return {Boolean} true / false
         */
        isKWidgetEmbed: function( type ) {
            return ( type == 'dynamic' || type == 'thumb' || type =='hls_livestream' ) ? true : false;
        },
/

Disable setting streamerType for an hls_livestream entry - getDeliveryTypeFlashVars function (2815 ~)

 // Add streamerType and mediaProtocol flashVars
        if(deliveryType.streamerType) {
            //if HLS livestream don't change streamerType
            if(this.Service.get('embedType') !== 'hls_livestream') {
                newFlashVars.streamerType = deliveryType.streamerType;
            }
        }

And finally change the getEmbedCode function (line 2992 ~)

 if(previewService.get('embedType') === 'hls_livestream') //prepare hls livestream embed code
        {
            //get the hls url
            var hlsUrl = kmc.vars.base_url + "/p/" + kmc.vars.partner_id + "/sp/" + kmc.vars.partner_id + "/playManifest/entryId/" + previewService.get('entryId') + "/format/hls/";

            $.ajax({
                type: "GET",
                url: hlsUrl,
                async: false,
                contentType: "application/json; charset=utf-8",
                success: function(result) {
                    hlsUrl = result;
                },
                error: function(xhr, ajaxOptions, thrownError) {
                    console.log(thrownError);
                }
            });

            params.flashVars["sourceType"] = "url";

            params.flashVars["genericOSMF"] = {
                "plugin": "true",
                "relativeTo": "statistics",
                "position": "after",
                "width":"0",
                "height":"0",
                "pluginURL": "HLSDynamicPlugin.swf",
                "loadingPolicy": "preInitialize",
                "asyncInit": "true"
            };

            params.flashVars['entryId'] = hlsUrl;
        }
        else
        {
            if(previewService.get('entryId')) {
                params.entryId = previewService.get('entryId');
            }
        }

kmc4Success.php:

Because you’ve changed the js file, don’t forget to include the new file in your html page:
Change the kmc4Success.php script source (at the bottom of the file) to a relevant kmc.js (or create a new minified version of the changed file).

playManifestAction.class.php:

Earlier I have changed the playManifest request URL to support HLS Livestream. Now it’s time to change the playManifest class to respond for a new request type.

Add a case in the serveLiveEntry and getLiveEntryBaseUrl function:
serveLiveEntry (line 1347 ~):

  case PlaybackProtocol::HLS:
                echo trim($baseUrl);exit;
                break;

getLiveEntryBaseUrl (line 1308 ~):

	    case PlaybackProtocol::APPLE_HTTP:
            case PlaybackProtocol::HLS:
				return $this->entry->getHlsStreamUrl();

Create a live stream entry via Test Console

Now you have to create a live stream entry and use the newly written code to play it.

Admin Console -> Developer -> Test Console

Add hls livestream entry to kaltura

Add hls livestream entry to kaltura

1. Set a KS (Kaltura Session) at the KS field.
2. Select service – choose liveStream from the dropdown selection.
3. Select action – add.
4. sourceType – choose MANUAL_LIVE_STREAM.
5. Click on the Edit button to add more parameters for an entry:
—5.1 name – Choose a name for an entry.
—5.2 mediaType (KalturaMediaType) – choose LIVE_STREAM_FLASH.
—5.3 hlsStreamUrl (string) – put your HLS stream URL (example http://yourstreamingurl.tv/playlist.m3u8).
—5.4 Click send and check that a new entry has been added to your entry list.

Now open the entry at a “Preview&Embed” mode, choose “HLS Livestream” from the “Embed Type” dropdown. You can play the entry and also get the embedded code at the bottom of the page.

Enjoy 🙂

5 thoughts on “Kaltura HLS Live Streaming in CE 9 Howto

  1. Thanks Vadim,
    We tried to follow these instructions for the latest CE version (10) and it didn’t work. HLS stream calls to serveFlavor returned blank. We had to create our own ffmpeg scripts to segment each flavour and add nginx (with apache rewrites to direct to it) to serve the segments. Any other way of doing it that does not involve external hacks?
    I believe HLS can be the foundation of cross platform VOD if done right.
    Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *