Live Streaming on iOS using Expression Encoder

Common setup

There are a few steps that are the same if you are using the UI or if you are starting your stream in code.

Setup an IIS application to host your live feed

First off, you’ll need IIS 7+. I recommend using the web platform installer and getting the “IIS 7 Recommended Configuration”. It will get you up and running pretty quickly.

Web Platform Installer IIS 7 Recommended Configuration

Once installed, open IIS Manager and add a new application from either your default web site or a new site. I’ll name mine “Live” and give it a path of “c:\live”.

Add IIS Application

That’s it for now, but make sure that your DefaultAppPool (or whatever application pool you are using) is using the latest .NET Framework and is in integrated mode.

Setup up an isml file

The isml file will be what you point to in your video player. In order to create an isml file you will need to get IIS Media Services 4.1 from the web platform installer.

Web Platform Installer IIS Media Services 4.1

After installing IIS Media Services I always restart my computer. I don’t think it specifies to do so but I would recommend it. Once it is installed, go to your new “Live” application in IIS and you will see a new “Media Services” section. You want to go into “Live Smooth Streaming Publishing Points”.

IIS Media Services

If this is the first publishing point you have ever added, IIS will alert you that your application pool must be updated to enable Live Smooth Streaming. Just accept it and update. Once your application pool has been configured, you can add a publishing point. The first tab provides some basic info like the name and estimated duration.

Publishing Point Tab 1

The second tab is more interesting, but you can usually stick to the defaults. If you’re looking, you’ll notice this is where the DVR magic happens. You can specify that you want to enable DVR content.

Publishing Point Tab 2

The third tab is how we enable access for iOS.

Publishing Point Tab 3

After checking the “Enable output to Apple mobile digital devices” checkbox you can leave the rest of the defaults. The only other option you should really be looking to change would be the Segment length. The reasonable range for this option is between two and ten. The segment length is the amount of time in seconds that each chunk of video will be requested in. For example, if the segment length is two, you will be doing an http request for every two seconds of video. This means fast response times but potentially too many requests for your IIS server to handle depending on the load you expect which will result in buffering on the client.

Once you have pressed OK, you have created a new isml file in the directory of your application. You can actually open the isml file in notepad and see the options you just set. Because of this, you could have actually created this isml file in the text editor of your choice and it would have been just fine. You might want to keep that in mind if you are interested in creating a live stream in code.

Create an HTML5 player

In order to view the stream on an iOS device, you will need to create a very basic HTML5 player. This is simple. Just create a player.html page in your “Live” working directory. The code can be as simple as this:

    <title>Live Broadcast</title>
    <video controls src="broadcast.isml/manifest(format=m3u8-aapl)">

The additional information on the end of the isml is instructing the player to request the m3u8-aapl section of the manifest. The manifest explains to the player what streams are available to the player so that it can make the proper requests to the server to get the video.

Using the EE4 Pro SP2 UI

Open Expression Encoder 4 Pro SP2 and select the live broadcasting option.

Expression Encoder Live Broadcast

Use the preview tab to click “Add a Live Source”. Next you can select the video device you want to use for your live source. In my case I’ll just use the EE4 Screen Capture Source. Feel free to use any video device you have connected.

Select your encoding preset by applying Widescreen Encoding > H.264 > H.264 IIS Smooth Streaming iPad WiFi. You’ll notice that you will be creating three different streams in the video section.

Now you just need to tell Expression Encoder where to put the Encoded streams. Go to the output tab and check “Publishing Point” and specify your isml file that you created earlier and press connect. In my case the publishing point url is "http://localhost/live/broadcast.isml".

Publishing Point connected

If you try this more than once, you might encounter an error stating “Publishing point is in use. Reset it on the server”.

Publishing Point Error

For now, to correct this problem you need to open the publishing point in IIS, right click the point to shutdown then right click the point to start the point again. You might even need to refresh the IIS screen using F5. Sometimes even that does not correct the problem when you are using the UI. Sometimes you need to restart Expression Encoder and redo the whole process. It is pretty annoying and it doesn’t get any easier in code but we'll talk about that later.

Once you have the publishing point started, you can press that giant play button.

Test your feed by jumping onto your iPad or iPhone and go to http://IPADDRESS/live/player.html and you should see a play button for the html 5 player. Press play.

Streaming on iPad

This is a screenshot from my iPad. A few things of note here, you can see that the iPad knows it is a live stream that does not necessarily have an end time. You can also use the scrub bar to go back in time.

Creating a Live Stream in code

Coming soon...